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创建的Object附加到作为jQuery集合一部分的每个DOM对象中？如果是这种情况，使用这种方法时会出现任何问题。

不过，我想问一下“THIS”对象范围可能存在问题的情况。因为我对“THIS”对象赋值给变量“base”之前的注释有点困惑。

提前感谢。

我意识到这个插件会创建全局对象。例如，我有100 div然后我称这个插件$（div）.sample（）。它创建100个全局对象，其属性如Obj.el和Obj。$ el分别对应于DOM和jQuery版本的DOM。是否可以在创建插件时使用这种方法？

Answer 1

a）您发布的代码仅声明插件。它将附加到dom上，如

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

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

b）建议您使用“base”而不是“this”，以避免代码中的混淆和常见错误。也许它已经很明显，但“这个”的变化值取决于执行的代码范围。 “base”是对插件起始范围的闭包。 http://javascriptplayground.com/blog/2012/04/javascript-variable-scope-this

Answer 2

代码正在做的是在你附加它的每个dom对象上创建示例插件。因此，如果您使用$('inputs')并且您有5个输入，则可以使用传入的选项在每个输入上创建插件。

jQuery插件问题

2 个答案: