Jquery 插件未将默认值与选项合并

Question

我创建了自己的 jquery 插件。就这样设置了。

;(function ($)
{
    $.fn.bpeditor = function (options)
    {
        return this.each(function() 
        {
            // Merge passed options with defaults
            vars.options = $.extend({}, $.fn.bpeditor.defaults, options);

            alert(vars.options.test);
         }
     }

     var vars =
     {
         options: null
     };

     $.bpeditor.defaults =
     {
         user: 'a',
         dkey: 'b',
         side: 'c',
         test: 'd'
     };

})(jQuery);

我这样调用它:

$('div#canvas').bpeditor
({
    user: 'user1',
    dkey: 'dkey1'
});

如您所见，我传递了“user”和“dkey”选项，但没有传递“test”。测试有一个默认值，并且未在插件中设置。插件中的警报应显示 vars.options.test 的内容，该内容应填充 $.bpeditor.defaults 的内容，但它返回为未定义。

有人可以帮忙吗？

谢谢

Answer 1

您忘记了.fn。

$.fn.bpeditor.defaults = {
    ...
};

注意:公开默认选项以便可以在插件外部修改它们是不常见的。

对于它们来说，更常见的是只有插件可以访问的词法作用域变量。也无需在 .each 循环内重新创建选项变量 - 所有这些受影响的元素都应共享相同的选项状态:

(function($) {

    // only created once, shared between all instances
    var defaults = {
        ...
    };

    $.fn.bpeditor = function (options) {
        options = $.extend(true, {}, defaults, options);
        return this.each(function() {
            alert(vars.options.test);
        });
    };
})(jQuery);

$.extend() 行深度复制默认值，然后将提供的选项复制到一个新的空对象中，重新使用 options 变量 - 确保 defaults 对象保持不变，并且传递的对象不会被修改。