Шаблон плагина jQuery с сохранением данных - PullRequest
Новая
       20

Шаблон плагина jQuery с сохранением данных

2 голосов
/ 22 августа 2011

Я работаю над плагином 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, вы увидите, что я вызываю функции init и methodname и регистрирую объекты settings и data в каждой из них. В вызове methodname я могу получить доступ как к settings, так и к data, но в самом вызове init объект data возвращает неопределенное значение. Если я установлю точку останова в сценарии в строке 21, я могу перезвонить объекту data с $this.data('pluginname') в консоли. Кто-нибудь видит, что я здесь делаю не так? Я просто должен иметь возможность написать data.key3 внутри init, function, верно?

1 Ответ

2 голосов
/ 22 августа 2011

В вашем методе init в самом начале цикла .each вы присваиваете объект, хранящийся в текущем итерированном элементе, вашей переменной data. Если для указанного ключа нет доступных данных, data не определено.

Затем вы проверяете data на правдивость, и если она оценивается как false , вы продолжаете и назначаете объект данных текущему элементу.

Затем вы звоните 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');
}
...