## 全局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`为插件标识。
~~~javascript
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){
//插件逻辑代码
$('.colorpicker').colorpicker({
color: "#000000"
});
});
~~~
我们可以通过上方插件的依赖和映射关系，然后使用`require`进行模块载入。
## 动态配置值
如果我们需要在JS中使用插件管理配置中的动态配置值，此时我们可以通过行为事件来渲染。
首先我们打开`addons/mydemo/Mydemo.php`文件，在类最后添加一个`configInit`方法，如下
~~~php
/**
* @param $params
*/
public function configInit(&$params)
{
//$config为`addons/mydemo/config.php`中的配置值
$config = $this->getConfig();
//为了安全，切记不可以将整个$config变量渲染输出，其中mydemo为插件标识
$params['mydemo'] = ['username' => $config['username']];
}
~~~
清空后台右上角缓存后，然后我们即可在`bootstrap.js`中通过以下代码
~~~undefined
Config.mydemo.username
~~~
来获取服务端配置`addons/mydemo/config.php`中`username`对应的值。
这种方式只适用于`bootstrap.js`中使用，如果你需要在你的外部JS中获取配置值，此方式并不适合。
## 外部JS
如果我们需要引入外部JS或CSS文件，我们需要在插件目录创建一个`assets`资源目录，`assets`这个文件夹很关键，FastAdmin会将`assets`中的所有文件夹和文件复制到`/public/assets/addons/mydemo/`文件夹中去。
这个`mydemo`即是我们的插件目录名称，`assets`文件夹中的所有文件不会进行文件冲突检测，`/public/assets/addons/mydemo/`这个目录下的文件，我们在视图文件中可以直接通过`__ADDON__`指向这个路径。因此在开发视图时我们可以先使用相对路径设计，完成后我们再统一加上这个`__ADDON__`的前缀。
例如我们在HTML视图中使用
~~~xml
<!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会是如下结果
~~~xml
<!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中的多语言处理 |
## 特别提醒
1. 不要直接修改`/public/assets/addons/mydemo`目录中的JS或CSS文件，因为此目录中的内容会在插件重新启用后被覆盖，正确的做法是修改`/addons/mydemo/assets/`目录中的JS和CSS，然后再重新启用插件即可生效。
2. 在生产环境下浏览器会缓存`/public/assets/js/addons.js`文件，如果发现功能不生效，请注意清除浏览器缓存。
