怎样开发支持多个实例的js插件？

Question

尝试开发了几个插件，但都仅支持同一个页面中使用一次，否则会互相影响。
请教大家，如何开发支持一个页面中多个实例的js/jQuery插件？只要简单说明主要架构就可以。
谢谢！

Answer 1

1. 要实例化多次使用构造函数的方式去实现是比较好得选择；

2. 当页面需要使用时，通过new去实例化，而不需要时则不调用；

3. 楼主说的只支持同一个页面使用，可能是抽离的不够好，注意参数的抽离，构造函数中一定不要有引用页面dom元素或依赖当前页面的其他js变量，需要引用的地方应该作为参数去传递

Answer 2

大概可分以下几部分。

(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 上挂的时候注意的东西，注释里已经写了。

Answer 3

jqueryDom对象不一样，生成的实例不一样，不存在相互影响啊，没看出来