全局JS
在FastAdmin应用插件开发中会经常在全局载入JS或JS插件。FastAdmin基于RequireJS进行模块化加载JS，因此插件如需使用到JS必须基于RequierJS进行开发。
启动方式
FastAdmin在安装、禁止、启用、卸载插件时会读取所有正常状态下的插件目录下的bootstrap.js，并将他们的代码合并成一个addons.js文件，路径位于/public/assets/js/addons.js。因此我们不能直接修改addons.js这个文件，因为一旦我们在插件管理中对任何一个插件状态进行变更，这个addons.js文件内容就会被重写。
插件目录下的bootstrap.js这个文件是插件的启动文件，你可以在此编写插件核心JS或注册事件，在此JS中可以使用RequireJS依赖其它模块。同时在此插件中可以使用Fast、Backend、Lang等全局对象，因为在此之前此类对象已经加载且注册。
基本示例
以下代码为加载多个外部JS插件的方法，其中mydemo为插件标识。
require.config({
paths: {
'mydemo-jquery-colorpicker': '../addons/mydemo/js/jquery.colorpicker.min',
'mydemo-jquery-autocomplete': '../addons/mydemo/js/jquery.autocomplete',
'mydemo-jquery-tagsinput': '../addons/mydemo/js/jquery.tagsinput',
},
shim: {
'mydemo-jquery-colorpicker': {
deps: ['jquery'],
exports: '$.fn.extend'
},
'mydemo-jquery-autocomplete': {
deps: ['jquery'],
exports: '$.fn.extend'
},
'mydemo-jquery-tagsinput': {
deps: [
'jquery',
'mydemo-jquery-autocomplete',
'css!../addons/cms/css/jquery.tagsinput.min.css'
],
exports: '$.fn.extend'
}
}
});
require(['fast', 'template', 'mydemo-jquery-colorpicker'], function(Fast, Template, undefined){
try {
//插件逻辑代码
$('.colorpicker').colorpicker({
color: "#000000"
});
} catch (e) {
console.log(e);
}
});我们可以通过上方插件的依赖和映射关系，然后使用require进行模块载入。
动态配置值
如果我们需要在JS中使用插件管理配置中的动态配置值，此时我们可以通过行为事件来渲染。
首先我们打开addons/mydemo/Mydemo.php文件，在类最后添加一个configInit方法，如下
/**
* @param $params
*/
public function configInit(&$params)
{
//$config为`addons/mydemo/config.php`中的配置值
$config = $this->getConfig();
//为了安全，切记不可以将整个$config变量渲染输出，其中mydemo为插件标识
$params['mydemo'] = ['username' => $config['username']];
}清空后台右上角缓存后，然后我们即可在bootstrap.js中通过以下代码
Config.mydemo.username来获取服务端配置addons/mydemo/config.php中username对应的值。
这种方式只适用于bootstrap.js中使用，如果你需要在你的外部JS中获取配置值，此方式并不适合。
特别注意
在使用Config.mydemo.username前最好先判断下Config.mydemo是否能正常读取，且添加try catch捕获可能出现的错误，如：
try {
var username = '';
if(typeof Config.mydemo !== 'undefined') {
username = Config.mydemo.username;
}
} catch(e) {
console.log(e);
}外部JS
如果我们需要引入外部JS或CSS文件，我们需要在插件目录创建一个assets资源目录，assets这个文件夹很关键，FastAdmin会将assets中的所有文件夹和文件复制到/public/assets/addons/mydemo/文件夹中去。
这个mydemo即是我们的插件目录名称，assets文件夹中的所有文件不会进行文件冲突检测，/public/assets/addons/mydemo/这个目录下的文件，我们在视图文件中可以直接通过__ADDON__指向这个路径。因此在开发视图时我们可以先使用相对路径设计，完成后我们再统一加上这个__ADDON__的前缀。
例如我们在HTML视图中使用
<!DOCTYPE html>
<html lang="en">
<head>
<title>FastAdmin示例页面</title>
<link href="__ADDON__/css/common.css" rel="stylesheet">
</head>
<body>
<script src="__ADDON__/js/jquery.tagsinput.js"></script>
</body>
</html>生成的HTML会是如下结果
<!DOCTYPE html>
<html lang="en">
<head>
<title>FastAdmin示例页面</title>
<link href="/assets/addons/mydemo/css/common.css" rel="stylesheet">
</head>
<body>
<script src="/assets/addons/mydemo/js/jquery.tagsinput.js"></script>
</body>
</html>全局变量
我们在bootstrap.js或控制器对应的JS模块中可以使用以下全局变量。
| 变量名 | 描述 |
|---|---|
| Fast | 对应fast.js，其封装了常用的Ajax请求、参数查询、弹窗等功能 |
| Config | 用于获取从服务端渲染的配置以便于在JS中可以读取 |
| Layer | layer弹窗组件，可用于一些弹窗、提示等操作 |
| Toastr | 提示组件，可用于一些成功或失败提示 |
__ | 多语言函数，用于JS中的多语言处理 |
特别提醒
- 不要直接修改
/public/assets/addons/mydemo目录中的JS或CSS文件，因为此目录中的内容会在插件重新启用后被覆盖，正确的做法是修改/addons/mydemo/assets/目录中的JS和CSS，然后再重新启用插件即可生效。 - 在生产环境下浏览器会缓存
/public/assets/js/addons.js文件，如果发现功能不生效，请注意清除浏览器缓存。