首页 > 怎样开发支持多个实例的js插件?

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

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


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

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

  3. 楼主说的只支持同一个页面使用,可能是抽离的不够好,注意参数的抽离,构造函数中一定不要有引用页面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对象不一样,生成的实例不一样,不存在相互影响啊,没看出来

【热门文章】
【热门文章】