🔧 前端 - 外部插件

ThinkAdmin 提供完善的外部插件管理机制，基于 requirejs 进行 JavaScript 模块的加载和管理。

🚀 主要功能

模块管理: 基于 requirejs 的 JavaScript 模块管理
标准支持: 支持 AMD/CMD 标准的插件
动态加载: 支持动态加载外部插件
对象管理: 避免 JavaScript 对象冲突
单页应用: 支持单页应用程序的插件管理
灵活集成: 支持多种插件集成方式

⚠️ 重要提示

对象销毁: 部分插件需要进行对象销毁，避免二次初始化异常。

单页应用: 后台大部分页面都是单页应用程序，需要注意对象冲突问题。

📋 插件类型

AMD/CMD 标准插件

require 函数: 使用 require 函数进行加载
模块化: 支持模块化的插件管理
依赖管理: 自动处理插件依赖关系
示例: MD5、ECharts 等插件

非标准插件

script 标签: 直接使用 script 标签加载
全局对象: 插件作为全局对象使用
简单集成: 适合简单的插件集成
兼容性: 支持各种类型的插件

🔧 使用方法

标准插件加载

// 加载配置 AMD/CMD 插件
require(['md5'], function (md5) {
    var value = md5.hash('test');
    // console.log(value)
});

// 加载百度图表
require(['echarts'], function (echarts) {
    echarts.init($options)
});

外部插件加载

// 加载外部插件
require(['https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.cjs.js'], function (vue) {
    console.log(vue)
});

非标准插件

<!-- 直接使用 script 标签加载 -->
<script src="path/to/plugin.js"></script>

🎯 最佳实践

对象管理

及时销毁: 页面切换时及时销毁插件对象
避免冲突: 避免 JavaScript 对象冲突
内存管理: 合理管理插件内存使用
单页应用: 注意单页应用的对象管理

性能优化

按需加载: 按需加载插件，避免不必要的资源消耗
缓存利用: 合理利用插件缓存
异步加载: 使用异步加载提升页面性能
依赖管理: 合理管理插件依赖关系

开发建议

标准优先: 优先使用符合 AMD/CMD 标准的插件
版本控制: 注意插件版本兼容性
测试验证: 充分测试插件功能
文档参考: 参考插件官方文档


<script>

    // 加载配置 AMD/CMD 插件
    require(['md5'], function (md5) {
        var value = md5.hash('test');
        // console.log(value)
    });

    // 加载百度图表
    require(['echarts'], function (echarts) {
        echarts.init($options)
    });

    // 加载外部插件
    require(['https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.cjs.js'], function (vue) {
        console.log(vue)
    });

</script>


// RequireJs 默认配置如下
<script>
    require.config({
        waitSeconds: 60,
        baseUrl: baseRoot,
        map: {'*': {css: baseRoot + 'plugs/require/css.js'}},
        paths: {
            'md5': ['plugs/jquery/md5.min'],
            'chat': ['plugs/michat/michat'],
            'json': ['plugs/jquery/json.min'],
            'xlsx': ['plugs/jquery/xlsx.min'],
            'excel': ['plugs/jquery/excel.xlsx'],
            'base64': ['plugs/jquery/base64.min'],
            'upload': [tapiRoot + '/api.upload?.js'],
            'angular': ['plugs/angular/angular.min'],
            'echarts': ['plugs/echarts/echarts.min'],
            'ckeditor': ['plugs/ckeditor/ckeditor'],
            'websocket': ['plugs/socket/websocket'],
            'pcasunzips': ['plugs/jquery/pcasunzips'],
            'jquery.ztree': ['plugs/ztree/ztree.all.min'],
            'jquery.masonry': ['plugs/jquery/masonry.min'],
            'jquery.autocompleter': ['plugs/jquery/autocompleter.min'],
        },
        shim: {
            'websocket': {deps: [baseRoot + 'plugs/socket/swfobject.min.js']},
            'jquery.ztree': {deps: ['jquery', 'css!' + baseRoot + 'plugs/ztree/zTreeStyle/zTreeStyle.css']},
            'jquery.autocompleter': {deps: ['jquery', 'css!' + baseRoot + 'plugs/jquery/autocompleter.css']},
        }
    });
</script>