javascript - 怎样开发支持多个实例的js插件？-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI聊天问答 Agent智能体 AI文本写作 AI绘画作图 AI设计工具 AI视频创作 AI音频制作 AI办公学习 AI编程开发 AI提示词

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

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

PHP中文网 2017-04-11 11:04:38

[JavaScript讨论组]

519

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

PHP中文网

认证高级PHP讲师

全部回复(3)

ringa_lee2017-04-11 11:06:38 3楼

要实例化多次使用构造函数的方式去实现是比较好得选择；
当页面需要使用时，通过new去实例化，而不需要时则不调用；
楼主说的只支持同一个页面使用，可能是抽离的不够好，注意参数的抽离，构造函数中一定不要有引用页面dom元素或依赖当前页面的其他js变量，需要引用的地方应该作为参数去传递

赞 +0

添加回复

巴扎黑2017-04-11 11:06:38 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 上挂的时候注意的东西，注释里已经写了。

赞 +0

添加回复