Создавая плагин 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
, и несколько других были бы полностью переписаны.
Я уверен, что это не очень популярная идея, поскольку она нарушает соглашение (не так ли?), Но она проще, читабельнее и, вероятно, более оптимизирована, чем два приведенных выше варианта.О чем вы думаете?
Решение
Я экспериментирую с этой идеей.
Похоже, вы могли бы просто изменить функции для объекта 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