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

正如你所看到的,我传递的是'用户'和'dkey'选项但不是'测试'.Test有一个默认值,并且没有在插件中设置.插件中的警报应显示vars.options.test的内容,该内容应填充$ .bpeditor.defaults的内容,但它将以未定义的形式返回.

有人可以帮忙吗？

谢谢

Answer 1

你忘记了 .fn.

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

注意:暴露默认选项以便在插件外修改它们是不常见的.

对于他们来说,更常见的是只有插件可以访问的词法范围变量.也没有必要在.each循环内重新创建options变量- 所有这些受影响的元素应该共享相同的选项状态:

(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对象保持不变并且不修改传递的对象.