jQuery插件问题

Question

我已经尝试了一个网站，它可以为你动态生成插件。这是站点http://starter.pixelgraphics.us/

以下是生成的代码示例。

(function($){
$.sample = function(el, options){
    // To avoid scope issues, use 'base' instead of 'this'
    // to reference this class from internal events and functions.
    var base = this;

    // Access to jQuery and DOM versions of element
    base.$el = $(el);
    base.el = el;

    // Add a reverse reference to the DOM object
    base.$el.data("sample", base);

    base.init = function(){
        base.options = $.extend({},$.sample.defaultOptions, options);

        // Put your initialization code here
    };

    // Sample Function, Uncomment to use
    // base.functionName = function(paramaters){
    // 
    // };

    // Run initializer
    base.init();
};

$.sample.defaultOptions = {
};

$.fn.sample = function(options){
    return this.each(function(){
        (new $.sample(this, options));
    });
};

})(jQuery);

让我感到困惑的是$.fn.sample中的代码。

代码是否循环遍历jQuery集合，然后将使用$.sample创建的对象附加到属于jQuery集合的每个DOM对象中？如果是这样的话，在使用这种方法时有什么问题吗？

顺便说一句，我想问一下"THIS“对象的作用域可能有问题的实例。因为我对"THIS“对象赋值给变量"base”之前的注释有点困惑。

提前谢谢。

我意识到这个插件创建了全局对象。例如，我有100div，然后我调用这个插件$( div ).sample()。它创建了100个全局对象，这些对象具有分别对应于DOM和jQuery版本的DOM的Obj.el和Obj.$el等属性。在创建插件时使用这种方法可以吗？

Answer 1

a)你发布的代码只声明了插件。它将附加到dom上，如下所示

$('.my-selector').sample();

使用此代码，jquery将使用.my-selector类迭代所有元素，并为每个元素执行sample()插件

b)建议使用"base“代替"this”，以避免代码中的混淆和常见错误。也许这已经很明显了，但是"this“会根据执行的代码范围改变值。"base“是插件起始作用域的闭包。http://javascriptplayground.com/blog/2012/04/javascript-variable-scope-this

Answer 2

代码所做的就是在要附加到的每个dom对象上创建示例插件。因此，如果您使用的是$('inputs')，并且有5个输入，那么您将使用传入的选项在每个输入上创建插件。