🔧 外部插件

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 配置说明**

RequireJS 的配置通常在系统初始化时自动完成,开发者可以通过 `admin/api.plugs/script` 接口获取配置信息。

**常用插件路径映射:**

| 插件名称 | 路径 | 说明 |
|---------|------|------|
| `md5` | `plugs/jquery/md5.min` | MD5 加密插件 |
| `json` | `plugs/jquery/json.min` | JSON 处理插件 |
| `xlsx` | `plugs/jquery/xlsx.min` | Excel 文件读取 |
| `excel` | `plugs/admin/excel` | Excel 导入导出工具 |
| `base64` | `plugs/jquery/base64.min` | Base64 编码解码 |
| `upload` | `api.upload?.js` | 文件上传接口 |
| `echarts` | `plugs/echarts/echarts.min` | 百度图表库 |
| `ckeditor` | `plugs/ckeditor/ckeditor` | 富文本编辑器 |
| `websocket` | `plugs/socket/websocket` | WebSocket 连接 |
| `notify` | `plugs/notify/notify` | 通知插件 |

**RequireJS 默认配置示例:**

```javascript
 require.config({
 waitSeconds: 60, // 加载超时时间(秒)
 baseUrl: baseRoot, // 基础路径
 map: {
 '*': {
 css: baseRoot + 'plugs/require/css.js' // CSS 加载器
 }
 },
 paths: {
 'md5': ['plugs/jquery/md5.min'],
 'json': ['plugs/jquery/json.min'],
 'xlsx': ['plugs/jquery/xlsx.min'],
 'excel': ['plugs/admin/excel'],
 'base64': ['plugs/jquery/base64.min'],
 'upload': [tapiRoot + '/api.upload?.js'],
 'echarts': ['plugs/echarts/echarts.min'],
 'ckeditor': ['plugs/ckeditor/ckeditor'],
 'websocket': ['plugs/socket/websocket'],
 'notify': ['plugs/notify/notify'],
 },
 shim: {
 // 定义非 AMD 模块的依赖关系
 'websocket': {
 deps: [baseRoot + 'plugs/socket/swfobject.min.js']
 },
 'jquery.ztree': {
 deps: ['jquery', 'css!' + baseRoot + 'plugs/ztree/zTreeStyle/zTreeStyle.css']
 }
 }
 });

注意: 实际配置由系统自动生成,开发者无需手动配置。如需添加自定义插件,可以通过修改系统配置或使用动态加载方式。