0

我尝试了一个为您动态生成插件的网站。这是网站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”之前的注释有点困惑。

提前致谢。

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

4

2 回答 2

2

a）您发布的代码仅声明插件。它将通过类似的方式附加到 dom

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

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

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

于 2013-05-23T16:20:04.930 回答
1

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

于 2013-05-23T16:23:50.857 回答