Создание Плагина jQuery, Как я делаю Пользовательские Объемы?

Question

Создание Плагина jQuery, Как я делаю Пользовательские Объемы?

Я хотел бы создать плагин jQuery с API что-то вроде этого:

$("#chart").pluginName().attr("my_attr");

Вместо них:

$("#chart").pluginName_attr("my_attr");
$.pluginName.attr("#chart", "my_attr");

В основном, вместо того, чтобы иметь необходимость к пространству имен каждый метод, который действует подобный в jQuery, я хотел бы "определить объем" методов к пользовательскому API, где $("#chart).pluginName() возвратил бы объект, таким образом что get, attr, find, и немногие другие были бы полностью переписаны.

Я уверен, что это не любимая идея, поскольку она повреждается, конвенция (делает это?), но это легче и более читаемо, и вероятно более оптимизировано, чем эти две опции выше. Каковы Ваши мысли?

6

jquery api plugins scopes

задан Lance Pollard 15 June 2010 в 20:51

1 ответ

Другие вопросы по тегам:

jquery api plugins scopes

Похожие вопросы:

score 2 · Accepted Answer

Я экспериментирую с этой идеей.

Похоже, вы могли бы просто изменить функции для объекта jQuery, который получает плагин, и вернуть его.

Примерно так:

$.fn.tester = function() {  // The plugin

    this.css = function() {  // Modify the .css() method for this jQuery object
        console.log(this.selector);   // Now it just logs the selector
        return this;     // Return the modified object
    }
    return this;   // Return the modified object

}

http://jsfiddle.net/EzzQL/1/ (обновлено с оригинала на перезапись .html ())

$.fn.tester = function() {
    this.css = function() {  
        console.log(this.selector);  // This one logs the selector
        return this;
    }
    this.html = function() {
        alert(this.selector); // This one alerts the selector
        return this;
    }
    return this;
};

// Because .css() and .html() are called after .tester(),
// they now adopt the new behavior, and still return a jQuery
//    object with the rest of the methods in tact
$('#test1').tester().css().html().animate({opacity:.3}); 


// .css() and .html() still behave normally for this one
//    that doesn't use the plugin
$('#test2').css('backgroundColor','blue').html('new value');

РЕДАКТИРОВАТЬ:

В качестве альтернативы, если вы Если вы собираетесь кэшировать элементы, к которым должны применяться пользовательские методы, вы можете .apply () методы перед их использованием.

Основываясь на примере выше:

var $test1 = $('#test1');  // Cache the elements

$.fn.tester.apply($test1,[this]);  // apply() the new methods

$test1.css().html().animate({opacity:.3});  // Use the new methods