2

我正在开发一个 jQuery 插件，但我在设计模式上遇到了一些问题，它结合了 jQuery最佳实践中的默认值和选项、数据和命名空间技术。这是我的代码的抽象版本：

(function($) {
var defaults = {
    key1: 'value1',
    key2: 'value2'
};
var settings = {};
var methods = {
    init: function() {
        return this.each(function() {
            var $this = $(this), data = $this.data('pluginname');
            console.log('init called');
            // If the plugin hasn't been initialized yet
            if (!data) {
                //Do more setup stuff here
                $this.data('pluginname', {
                    key3: 'value3',
                    key4: 'value4'
                });
            }
            //test for settings and data
            console.log(settings);
            console.log(data);
        });
    },
    methodname: function() {
        return this.each(function() {
            var $this = $(this), data = $this.data('pluginname');
            console.log('methodname called');
            //test for settings and data
            console.log(settings);
            console.log(data);
        });
    }
};
$.fn.pluginname = function(method, options) {
    settings = $.extend({}, defaults, options);
    if (methods[method]) {
        return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
    } else if (typeof method === 'object' || ! method) {
        return methods.init.apply(this, arguments);
    } else {
        $.error( 'Method ' +  method + ' does not exist on jQuery.pluginname' );
    }    
};
$(document).ready(function() {
    $('body').pluginname();
    $('body').pluginname('methodname', {key1: 'overriding default value for key 1'});
});
})(jQuery);

如果您使用最新版本的 jQuery 运行该代码，您会看到我同时调用了initandmethodname函数并在每个函数中记录了settingsanddata对象。在methodname调用中，我可以同时访问settingsand data，但在init调用本身中，data对象返回未定义。如果我在脚本的第 21 行设置断点，我可以在控制台中回调data对象。$this.data('pluginname')有人看到我在这里做错了吗？我应该能够data.key3在 init, 函数中编写，对吧？

4

1 回答 1

2

在您的init方法中，在.each循环的最开始，您将存储在当前迭代元素中的对象分配给您的data变量。如果指定键没有可用数据，data则未定义。

然后您测试data真实性，如果评估为假，您继续并将数据对象分配给当前元素。

然后稍后，你打电话console.log(data);给你undefined。这是意料之中的，正如data最初分配的那样undefined- 这就是它仍然指的。修理：

// if undefined
if (!data) {
    //Do more setup stuff here


    $this.data('pluginname', {
        key3: 'value3',
        key4: 'value4'
    });
    data = $this.data('pluginname');
}
于 2011-08-22T16:52:11.840 回答