尝试开发了几个插件,但都仅支持同一个页面中使用一次,否则会互相影响。
请教大家,如何开发支持一个页面中多个实例的js/jQuery插件?只要简单说明主要架构就可以。
谢谢!
要实例化多次使用构造函数的方式去实现是比较好得选择;
当页面需要使用时,通过new去实例化,而不需要时则不调用;
楼主说的只支持同一个页面使用,可能是抽离的不够好,
注意参数的抽离,构造函数中一定不要有引用页面dom元素或依赖当前页面的其他js变量,需要引用的地方应该作为参数去传递
大概可分以下几部分。
(function(){
// 1. 公共常量,工具函数等
var a = xx;
var b = function(){}
// 2. 插件类
function Plugin(){}
// 3. 原型
Plugin.prototype = {
// ...
};
// 4. 如果要挂到 jq 上要再加一步
$.fn.pluginName = function(){
// 因为 jq 可以一次性选择多个元素,所以要 each
return this.each(function(){
if(!$(this).data('pluginName')) {
// 缓存插件实例,防止多次初始化
return $(this).data('pluginName', new Plugin());
} else {
// 已初始化,可以根据参数,去做其他的事
}
});
}
})()
第一步通常是不变的内容,比如默认配置。即使有用户配置,也是通过 $.extend
来混合的。
每个插件实例要把变化的内容放到原型上,这样各自的作用域和运行环境就隔离开了。
最后就是往 jq 上挂的时候注意的东西,注释里已经写了。
jqueryDom对象不一样,生成的实例不一样,不存在相互影响啊,没看出来