Question

最近我为我的网络项目编写了很多小插件，但我仍然是插件创作的初学者。

我一直在阅读关于jquery插件的大量内容，但我根本无法绕过methods。

以下是我目前的插件大多数情况：

(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);

我现在的目标是什么，我认为方法是这里的方法...基本上没有所有这些命名函数用于微小的功能，而是定义诸如nextSlide，{{1}之类的方法}，prevSlide，reset 我想你明白了......

您可能已经注意到我将目标之类的内容传递给函数（例如loop），然后将next()称为独立的东西。

我现在想通过简单地让一个方法完成所有这一切来开始这样做，并使我能够在next()文件中编写，例如plugin.js。

但是如何编写一个接受诸如此示例中的$(o.nextBtn).nextSlide();等参数的方法？

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

理想情况下，我想在我的插件中将这些功能链接起来，但这已经开始让我头脑发热了。

如果你知道如何以一种整洁有序的方式创造出我想要完成的事情，或者有一个很好的教程我应该看看，请分享。

感谢。

Answer 1

构建jQuery插件的推荐方法是将所有方法实际放入一个数组中，然后使用插件的main函数来访问它们。

例如，使用您的一些示例：

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);

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

jQuery：插件方法，如何将内容传递给它们？

1 个答案: