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

Answer 2

FiddleSticks

(function($) {
    $.fn.bpeditor = function(options) {
        var defaults = {
            user: 'a',
            dkey: 'b',
            side: 'c',
            test: 'd'
        };
        // Merge passed options with defaults
        options = $.extend(defaults, options);

        return this.each(function() {
            // Tooltip plugin code here
        });
    }
})(jQuery);

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

2 个答案: