## 全局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`文件，如果發現功能不生效，請注意清除瀏覽器緩存。
