jQuery 插件模板 - 最佳实践、约定、性能和内存影响 [英] jQuery plugin template - best practice, convention, performance and memory impact
问题描述
我已经开始编写一些 jQuery 插件，并认为使用 jQuery 插件模板设置我的 IDE 会很好.
I've started to write few jQuery plugins and figured it'd be nice to setup my IDE with a jQuery plugin template.
我一直在阅读本网站上与插件约定、设计等相关的一些文章和帖子.我想我会尝试整合所有这些内容.
I have been reading some articles and posts on this site related to plugin convention, design, etc.. and thought I'd try and consolidate all of that.
下面是我的模板，我希望经常使用它，所以很想确保它总体上符合 jQuery 插件设计约定，以及拥有多个内部方法(甚至它的一般设计)的想法是否会影响性能并且容易发生内存问题.
Below is my template, I am looking to use it frequently so was keen to ensure it generally conforms to jQuery plugin design convention and whether the idea of having multiple internal methods (or even its general design) would impact performance and be prone to memory issues.
(function($)
{
var PLUGIN_NAME = "myPlugin"; // TODO: Plugin name goes here.
var DEFAULT_OPTIONS =
{
// TODO: Default options for plugin.
};
var pluginInstanceIdCount = 0;
var I = function(/*HTMLElement*/ element)
{
return new Internal(element);
};
var Internal = function(/*HTMLElement*/ element)
{
this.$elem = $(element);
this.elem = element;
this.data = this.getData();
// Shorthand accessors to data entries:
this.id = this.data.id;
this.options = this.data.options;
};
/**
* Initialises the plugin.
*/
Internal.prototype.init = function(/*Object*/ customOptions)
{
var data = this.getData();
if (!data.initialised)
{
data.initialised = true;
data.options = $.extend(DEFAULT_OPTIONS, customOptions);
// TODO: Set default data plugin variables.
// TODO: Call custom internal methods to intialise your plugin.
}
};
/**
* Returns the data for relevant for this plugin
* while also setting the ID for this plugin instance
* if this is a new instance.
*/
Internal.prototype.getData = function()
{
if (!this.$elem.data(PLUGIN_NAME))
{
this.$elem.data(PLUGIN_NAME, {
id : pluginInstanceIdCount++,
initialised : false
});
}
return this.$elem.data(PLUGIN_NAME);
};
// TODO: Add additional internal methods here, e.g. Internal.prototype.<myPrivMethod> = function(){...}
/**
* Returns the event namespace for this widget.
* The returned namespace is unique for this widget
* since it could bind listeners to other elements
* on the page or the window.
*/
Internal.prototype.getEventNs = function(/*boolean*/ includeDot)
{
return (includeDot !== false ? "." : "") + PLUGIN_NAME + "_" + this.id;
};
/**
* Removes all event listeners, data and
* HTML elements automatically created.
*/
Internal.prototype.destroy = function()
{
this.$elem.unbind(this.getEventNs());
this.$elem.removeData(PLUGIN_NAME);
// TODO: Unbind listeners attached to other elements of the page and window.
};
var publicMethods =
{
init : function(/*Object*/ customOptions)
{
return this.each(function()
{
I(this).init(customOptions);
});
},
destroy : function()
{
return this.each(function()
{
I(this).destroy();
});
}
// TODO: Add additional public methods here.
};
$.fn[PLUGIN_NAME] = function(/*String|Object*/ methodOrOptions)
{
if (!methodOrOptions || typeof methodOrOptions == "object")
{
return publicMethods.init.call(this, methodOrOptions);
}
else if (publicMethods[methodOrOptions])
{
var args = Array.prototype.slice.call(arguments, 1);
return publicMethods[methodOrOptions].apply(this, args);
}
else
{
$.error("Method '" + methodOrOptions + "' doesn't exist for " + PLUGIN_NAME + " plugin");
}
};
})(jQuery);
提前致谢.
推荐答案
7 个月后
引用自 github 项目
Quoting from the github project
jQuery不行，jQuery插件也不怎么模块化代码.
jQuery is no good, and jQuery plugins is not how do modular code.
说真的，jQuery 插件"不是一个合理的架构策略.编写硬依赖 jQuery 的代码也很愚蠢.
Seriously "jQuery plugins" are not a sound architecture strategy. Writing code with a hard dependency on jQuery is also silly.
[原创]
由于我对这个模板提出了批评，我将提出一个替代方案.
Since I gave critique about this template I will propose an alternative.
为了让生活更轻松，这依赖于 jQuery 1.6+ 和 ES5(使用 ES5 垫片).
To make live easier this relies on jQuery 1.6+ and ES5 (use the ES5 Shim).
我花了一些时间重新设计您提供的插件模板并推出了我自己的.
I've spend some time re-designing the plugin template you've given and rolled out my own.
链接:
- Github
- Documentation
- Unit tests Confirmed to pass in FF4, Chrome and IE9 (IE8 & OP11 dies. known bug).
- Annotated Source Code
- The PlaceKitten example plugin
比较:
我对模板进行了重构，使其分为样板代码 (85%) 和脚手架代码 (15%).目的是您只需要编辑脚手架代码，就可以保持样板代码不变.为此，我使用了
I've refactored the template so that it's split into boilerplate (85%) and scaffolding code (15%). The intention is that you only have to edit the scaffolding code and you can keep leave boilerplate code untouched. To achieve this I've used
- 继承
var self = Object.create(Base)而不是直接编辑Internal类，你应该编辑一个子类.您所有的模板/默认功能都应该在一个基类中(在我的代码中称为Base). - 约定
self[PLUGIN_NAME] = main;按照惯例，jQuery 上定义的插件默认会调用self[PLUGIN_NAME]上的方法定义.这被认为是main插件方法，为了清楚起见，它有一个单独的外部方法. - 猴子补丁
$.fn.bind = function _bind ...使用猴子补丁意味着事件命名空间会在后台自动为您完成.此功能是免费的，不会以可读性为代价(一直调用getEventNS).
- inheritance
var self = Object.create(Base)Rather then editing theInternalclass you have directly you should be editing a sub class. All your template / default functionality should be in a base class (calledBasein my code). - convention
self[PLUGIN_NAME] = main;By convention the plugin defined on jQuery will call the method define onself[PLUGIN_NAME]by default. This is considered themainplugin method and has a seperate external method for clarity. - monkey patching
$.fn.bind = function _bind ...Use of monkey patching means that the event namespacing is done automatically for you under the hood. This functionality is free and does not come at the cost of readability (callinggetEventNSall the time).
OO 技术
最好坚持正确的 JavaScript OO 而不是经典的 OO 仿真.为此，您应该使用 Object.create.(ES5 只是使用 shim 来升级旧浏览器).
It's better to stick to proper JavaScript OO rather then classical OO emulation. To achieve this you should use Object.create. (which ES5 just use the shim to upgrade old browsers).
var Base = (function _Base() {
var self = Object.create({});
/* ... */
return self;
})();
var Wrap = (function _Wrap() {
var self = Object.create(Base);
/* ... */
return self;
})();
var w = Object.create(Wrap);
这不同于人们习惯的基于标准new和.prototype的OO.这种方法是首选，因为它再次强化了 JavaScript 中只有对象的概念，并且它是一种典型的 OO 方法.
This is different from the standard new and .prototype based OO people are used to. This approach is preferred because it re-inforces the concept that there are only Objects in JavaScript and it's a prototypical OO approach.
[getEventNs]
如前所述，此方法已通过重写 .bind 和 .unbind 进行重构，以自动注入命名空间.这些方法在 jQuery 的私有版本上被覆盖 $.sub().被覆盖的方法与命名空间的行为方式相同.它基于插件和围绕 HTMLElement 的插件包装器实例唯一地命名事件(使用 .ns.
As mentioned this method has been refactored away by overriding .bind and .unbind to automatically inject namespaces. These methods are overwritten on the private version of jQuery $.sub(). The overwritten methods behave the same way as your namespacing does. It namespaces events uniquely based on plugin and instance of a plugin wrapper around a HTMLElement (Using .ns.
[getData]
此方法已替换为 .data 方法与 jQuery.fn.data 具有相同的 API.它是相同的 API 的事实使它更易于使用，它基本上是一个带有命名空间的 jQuery.fn.data 的薄包装.这允许您设置仅为该插件立即存储的键/值对数据.多个插件可以并行使用此方法而不会发生任何冲突.
This method has been replaced with a .data method that has the same API as jQuery.fn.data. The fact that it's the same API makes it easier to use, its basically a thin wrapper around jQuery.fn.data with namespacing. This allows you to set key/value pair data that is immediatley stored for that plugin only. Multiple plugins can use this method in parallel without any conflicts.
[publicMethods]
publicMethods 对象已被在 Wrap 上定义的任何方法替换为自动公开.您可以直接在 Wrapped 对象上调用任何方法，但您实际上无权访问 Wrapped 对象.
The publicMethods object has been replaced by any method being defined on Wrap being automatically public. You can call any method on a Wrapped object directly but you do not actually have access to the wrapped object.
[$.fn[PLUGIN_NAME]]
这已被重构，因此它公开了更标准化的 API.这个api是
This has been refactored so it exposes a more standardized API. This api is
$(selector).PLUGIN_NAME("methodName", {/* object hash */}); // OR
$(selector).PLUGIN_NAME({/* object hash */}); // methodName defaults to PLUGIN_NAME
选择器中的元素自动包装在 Wrap 对象中，调用该方法或选择器中的每个选定元素，返回值始终为 $.Deferred 元素.
the elements in the selector are automatically wrapped in the Wrap object, the method is called or each selected element from the selector and the return value is always a $.Deferred element.
这标准化了 API 和返回类型.然后，您可以在返回的 deferred 上调用 .then 以获取您关心的实际数据.无论插件是同步的还是异步的，这里使用 deferred 都非常强大.
This standardizes the API and the return type. You can then call .then on the returned deferred to get out the actual data you care about. The use of deferred here is very powerful for abstraction away whether the plugin is synchronous or asynchronous.
添加了缓存创建功能.这被称为将 HTMLElement 转换为 Wrapped 元素，并且每个 HTMLElement 只会被包装一次.这种缓存可以显着减少内存.
A caching create function has been added. This is called to turn a HTMLElement into a Wrapped element and each HTMLElement will only be wrapped once. This caching gives you a solid reduction in memory.
为插件添加了另一个公共方法(一共两个！).
Added another public method for the plugin (A total of two!).
$.PLUGIN_NAME(elem, "methodName", {/* options */});
$.PLUGIN_NAME([elem, elem2, ...], "methodName", {/* options */});
$.PLUGIN_NAME("methodName", {
elem: elem, /* [elem, elem2, ...] */
cb: function() { /* success callback */ }
/* further options */
});
所有参数都是可选的.elem 默认为 <body>，"methodName" 默认为 "PLUGIN_NAME" 和 {/* 选项 */} 默认为 {}.
All parameters are optional. elem defaults to <body>, "methodName" defaults to "PLUGIN_NAME" and {/* options */} defaults to {}.
这个 API 非常灵活(有 14 种方法重载！)并且标准足以让您习惯插件将公开的每个方法的语法.
This API is very flexible (with 14 method overloads!) and standard enough to get used to the syntnax for every method your plugin will expose.
Wrap、create 和 $ 对象是全局公开的.这将允许高级插件用户使用您的插件获得最大的灵活性.他们可以在开发中使用 create 和修改后的 subbed $，还可以修改 Wrap.这允许即挂钩到您的插件方法.所有这三个都在其名称前标有 _，因此它们是内部的，使用它们会破坏您的插件工作的保证.
The Wrap, create and $ objects are exposed globally. This will allow advanced plugin users maximum flexibility with your plugin. They can use create and the modified subbed $ in their development and they can also monkey patch Wrap. This allows for i.e. hooking into your plugin methods. All three of these are marked with a _ in front of their name so they are internal and using them breaks the garantuee that your plugin works.
内部 defaults 对象也公开为 $.PLUGIN_NAME.global.这允许用户覆盖您的默认值并设置插件全局 defaults.在这个插件设置中，作为对象的所有哈希都与默认值合并，因此这允许用户为所有方法设置全局默认值.
The internal defaults object is also exposed as $.PLUGIN_NAME.global. This allows users to override your defaults and set plugin global defaults. In this plugin setup all hashes past into methods as objects are merged with the defaults, so this allows users to set global defaults for all your methods.
(function($, jQuery, window, document, undefined) {
var PLUGIN_NAME = "Identity";
// default options hash.
var defaults = {
// TODO: Add defaults
};
// -------------------------------
// -------- BOILERPLATE ----------
// -------------------------------
var toString = Object.prototype.toString,
// uid for elements
uuid = 0,
Wrap, Base, create, main;
(function _boilerplate() {
// over-ride bind so it uses a namespace by default
// namespace is PLUGIN_NAME_<uid>
$.fn.bind = function _bind(type, data, fn, nsKey) {
if (typeof type === "object") {
for (var key in type) {
nsKey = key + this.data(PLUGIN_NAME)._ns;
this.bind(nsKey, data, type[key], fn);
}
return this;
}
nsKey = type + this.data(PLUGIN_NAME)._ns;
return jQuery.fn.bind.call(this, nsKey, data, fn);
};
// override unbind so it uses a namespace by default.
// add new override. .unbind() with 0 arguments unbinds all methods
// for that element for this plugin. i.e. calls .unbind(_ns)
$.fn.unbind = function _unbind(type, fn, nsKey) {
// Handle object literals
if ( typeof type === "object" && !type.preventDefault ) {
for ( var key in type ) {
nsKey = key + this.data(PLUGIN_NAME)._ns;
this.unbind(nsKey, type[key]);
}
} else if (arguments.length === 0) {
return jQuery.fn.unbind.call(this, this.data(PLUGIN_NAME)._ns);
} else {
nsKey = type + this.data(PLUGIN_NAME)._ns;
return jQuery.fn.unbind.call(this, nsKey, fn);
}
return this;
};
// Creates a new Wrapped element. This is cached. One wrapped element
// per HTMLElement. Uses data-PLUGIN_NAME-cache as key and
// creates one if not exists.
create = (function _cache_create() {
function _factory(elem) {
return Object.create(Wrap, {
"elem": {value: elem},
"$elem": {value: $(elem)},
"uid": {value: ++uuid}
});
}
var uid = 0;
var cache = {};
return function _cache(elem) {
var key = "";
for (var k in cache) {
if (cache[k].elem == elem) {
key = k;
break;
}
}
if (key === "") {
cache[PLUGIN_NAME + "_" + ++uid] = _factory(elem);
key = PLUGIN_NAME + "_" + uid;
}
return cache[key]._init();
};
}());
// Base object which every Wrap inherits from
Base = (function _Base() {
var self = Object.create({});
// destroy method. unbinds, removes data
self.destroy = function _destroy() {
if (this._alive) {
this.$elem.unbind();
this.$elem.removeData(PLUGIN_NAME);
this._alive = false;
}
};
// initializes the namespace and stores it on the elem.
self._init = function _init() {
if (!this._alive) {
this._ns = "." + PLUGIN_NAME + "_" + this.uid;
this.data("_ns", this._ns);
this._alive = true;
}
return this;
};
// returns data thats stored on the elem under the plugin.
self.data = function _data(name, value) {
var $elem = this.$elem, data;
if (name === undefined) {
return $elem.data(PLUGIN_NAME);
} else if (typeof name === "object") {
data = $elem.data(PLUGIN_NAME) || {};
for (var k in name) {
data[k] = name[k];
}
$elem.data(PLUGIN_NAME, data);
} else if (arguments.length === 1) {
return ($elem.data(PLUGIN_NAME) || {})[name];
} else {
data = $elem.data(PLUGIN_NAME) || {};
data[name] = value;
$elem.data(PLUGIN_NAME, data);
}
};
return self;
})();
// Call methods directly. $.PLUGIN_NAME(elem, "method", option_hash)
var methods = jQuery[PLUGIN_NAME] = function _methods(elem, op, hash) {
if (typeof elem === "string") {
hash = op || {};
op = elem;
elem = hash.elem;
} else if ((elem && elem.nodeType) || Array.isArray(elem)) {
if (typeof op !== "string") {
hash = op;
op = null;
}
} else {
hash = elem || {};
elem = hash.elem;
}
hash = hash || {}
op = op || PLUGIN_NAME;
elem = elem || document.body;
if (Array.isArray(elem)) {
var defs = elem.map(function(val) {
return create(val)[op](hash);
});
} else {
var defs = [create(elem)[op](hash)];
}
return $.when.apply($, defs).then(hash.cb);
};
// expose publicly.
Object.defineProperties(methods, {
"_Wrap": {
"get": function() { return Wrap; },
"set": function(v) { Wrap = v; }
},
"_create":{
value: create
},
"_$": {
value: $
},
"global": {
"get": function() { return defaults; },
"set": function(v) { defaults = v; }
}
});
// main plugin. $(selector).PLUGIN_NAME("method", option_hash)
jQuery.fn[PLUGIN_NAME] = function _main(op, hash) {
if (typeof op === "object" || !op) {
hash = op;
op = null;
}
op = op || PLUGIN_NAME;
hash = hash || {};
// map the elements to deferreds.
var defs = this.map(function _map() {
return create(this)[op](hash);
}).toArray();
// call the cb when were done and return the deffered.
return $.when.apply($, defs).then(hash.cb);
};
}());
// -------------------------------
// --------- YOUR CODE -----------
// -------------------------------
main = function _main(options) {
this.options = options = $.extend(true, defaults, options);
var def = $.Deferred();
// Identity returns this & the $elem.
// TODO: Replace with custom logic
def.resolve([this, this.elem]);
return def;
}
Wrap = (function() {
var self = Object.create(Base);
var $destroy = self.destroy;
self.destroy = function _destroy() {
delete this.options;
// custom destruction logic
// remove elements and other events / data not stored on .$elem
$destroy.apply(this, arguments);
};
// set the main PLUGIN_NAME method to be main.
self[PLUGIN_NAME] = main;
// TODO: Add custom logic for public methods
return self;
}());
})(jQuery.sub(), jQuery, this, document);
可以看出，您应该编辑的代码位于 YOUR CODE 行下方.Wrap 对象的作用类似于您的 Internal 对象.
As can be seen the code your supposed to edit is below the YOUR CODE line. The Wrap object acts similarly to your Internal object.
main 函数是用 $.PLUGIN_NAME() 或 $(selector).PLUGIN_NAME() 调用的主函数，应该包含你的主要逻辑.
The function main is the main function called with $.PLUGIN_NAME() or $(selector).PLUGIN_NAME() and should contain your main logic.
这篇关于jQuery 插件模板 - 最佳实践、约定、性能和内存影响的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
