jQuery：插件方法，我怎样才能将它们传递给它们？ [英] jQuery: Plugin Methods, how can I pass things into them?

问题描述

最近我一直在为我的web项目编写很多小插件，但我仍然是插件创作的初学者。

我一直在做很多阅读jquery插件，但我根本无法将我的头围绕方法。

以下是我目前使用的插件看起来像：

 （function（$）{
 
 $ .fn.extend（{
 
 myHelper：function（options）{
 
 var defaults = {
 some：'defaults'
} 
 
 var options = $ .extend（defaults，options）; 
 
 return this.each（function（）{
 var o = options; 
 
 next（target）{
 //做一些幻灯片放映幻灯片中的下一张图片
 //根据传递的目标和计数
 slide（'right'）; 
} 
函数prev（target）{
 slide（'left'）; 
 
 
函数幻灯片（方向）{
 //在下一个幻灯片中滑动的动画
 $（'ul> li.current'）。animate {...}，800）; 
} 
 
 //不完全合理，但它只是为了说明我需要做什么。 
 $（'。next'）。click（next（$（'ul> #example'））; 
 
 
}）; 
} 
}）; 
 
}）（jQuery）; 
  

现在我在做什么，而且我认为方法是这里的方式......基本上不是具有所有这些命名函数的功能，而不是定义诸如 nextSlide ， prevSlide ， reset ， loop 我想你会明白...

您可能已经注意到我将诸如目标之类的东西传递给函数（例如 next（）），然后调用 next （）作为一个独立的东西。

我现在想通过简单的方法来做到这一点，并使我写在我的 plugin.js 文件中，像 $（o.nextBtn）.nextSlide（）; 例如。

但是我怎样在这个例子中编写一个接受参数的方法，比如 target ？

到目前为止，我发现的所有方法示例和教程基本上没有选项接受方法功能的参数。这甚至是可能的吗？

理想情况下，我想让这些函数在我的插件中可链接，但是这开始让我头脑发热。

如果你知道如何创建一些我想要以一种整洁和有组织的方式完成的事情，或者有一个很好的教程，我应该看看，请分享。 b
$ b

谢谢。

解决方案

建立一个jQuery插件的建议方法是将所有你的方法插入到一个数组中，然后使用插件的主函数来访问它们。

例如，使用你的一些例子：

  function $）{
 var methods = {
 next（target）{
 target.foo（）; 
} 
}; 
 
 $ .fn.plugin = function（method）{
 
 if（methods [method]）{
 return methods [method] .apply（this，Array .prototype.slice.call（arguments，1））; 
} else if（typeof method ==='object'||！method）{
 return methods.init.apply（this，arguments）; 
} else {
 $ .error（'Method'+ method +'在jQuery.tooltip上不存在'）; 
} 
 
}; 
 
}）（jQuery）; 
 
要使用它：
 var blah = $（'＃'+ elemID）.plugin（'init'）; 
 blah.plugin（'next'，'＃'+ some_other_element）; 
  

在这个例子中，blah是表示插件的对象，然后使用插件的方法调用函数并传递值。

lately I have been writing a lot of tiny plugins for my web projects but I am still very much a beginner in plugin authoring.

I have been doing a lot of reading on jquery plugins but I simply cannot wrap my head around methods.

Here is what my current plugins mostly look like:

(function($){

    $.fn.extend({ 

        myHelper: function(options) {

            var defaults = {
                some: 'defaults'
            }

            var options =  $.extend(defaults, options);

            return this.each(function() {
                var o = options;

                function next(target) {
                    // do something like slide to the next image in a slideshow 
                    // based on the target and count passed in
                    slide('right');
                }
                function prev(target) {
                    slide('left');
                }

                function slide(direction) {
                    // animation for sliding in the next one
                    $('ul > li.current').animate({ … }, 800);
                }

                // doesn't exactly make sense but its just to illustrate what I need to do.
                $('.next').click(next($('ul > #example'));


            });
        }
    });

})(jQuery);

What I am after now, and I thought method was the way to go here… is to basically not have all these named functions for tiny bits of functionality and instead define methods such as nextSlide, prevSlide, reset, loop i think you get the idea…

You may have noticed that I pass things such as the target into the function (next() for example) and then call the next() as a standalone thing.

I now want to start doing this by simply having a method do all this and enable me to write within my plugin.js file something like $(o.nextBtn).nextSlide(); for example.

But how do I write a method that accepts arguments such as the target in this example?

All the examples and tutorials for methods I have found so far basically didn't have an option of accepting arguments into the method's function. Is this even possible?

Ideally I'd like to make these functions chainable within the my plugin as well but this is starting to get way over my head.

If you know how to create something that does what I want to accomplish in a neat and organized manner or have a good tutorial I should look at, please share.

Thanks.

解决方案

The recommended way to build a jQuery plugin is to actually place all of your methods into an array, and then use the plugin's main function to access them.

For example, using some of your example:

function($) {
    var methods = {
      next(target) {
          target.foo();
      }
 };

 $.fn.plugin = function( method ) {

    if ( methods[method] ) {
      return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
      return methods.init.apply( this, arguments );
    } else {
      $.error( 'Method ' +  method + ' does not exist on jQuery.tooltip' );
    }    

  };

})( jQuery );

To use it then:
var blah = $('#' + elemID).plugin('init');
blah.plugin('next','#'+ some_other_element);

In this example, the blah is the object representing your plugin, and then you use the plugin's method to call functions and pass in the values.

这篇关于jQuery：插件方法，我怎样才能将它们传递给它们？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！