### JavaScript編碼規范
MuuCmf T5系統中，公共引用的js文件包括**Jquery**、**Util**在使用以上兩個Js文件時不需要require引用，使用其它Js文件需要遵循**AMD**的引用方式。
我們先介紹下**AMD**( Asynchronous Module Definition )——“**異步模塊定義**”。
**require.js**是微擎系統默認采用的**AMD**加載類 采用異步方式加載模塊,模塊的加載不影響它后面語句的運行。所有依賴這個模塊的語句,都定義在一個回調函數中,等到加載完成之后,這個回調函數才會運行。
實現 AMD 規范的加載器其實很多,微擎系系統使用的是 require.js 。
微擎系統使用 require.js 的好處：
* 實現 js 文件的異步加載,避免網頁失去響應;
* 管理模塊之間的依賴性,便于代碼的編寫和維護。
> 注意系統中已經默認jquery、bootstrap、angularjs、util等js文件，無需要重復引用
#### **使用說明**
#### 1. require.js 加載 （已默認加載，無需手動引用）
```
<script src="js/require.js" defer async="true" ></script>
```
#### 2. 模塊調用
* 如果我們的代碼不依賴任何其他模塊,那么我們就沒有必要使用 require.js .
* 如果我們的代碼依賴其他的模塊,那么就需要requrie.js , 例如：
```
require(['jquery', 'underscore', 'util'], function ($, _, u){
// code here 主模塊代碼
$('#id').show();
var index = _.inArray(1, [1,2,3]);
u.message('hehe');
});
```
require.js 會先加載 jQuery、underscore 和 backbone, 然后再運行回調函數。主模塊的代碼就寫在回調函數中。
##### 2.1 調用自定義 js
如果調用非模塊化的 js, 以**require.config**中配置的**baseUrl**為基路徑, 采用相對路徑直到所需要的 js 文件, 一定要帶后綴**.js**.
```
< javascript addons/we7_store/template/js/amd.js>
/**
* 路徑: addons/we7_store/template/js/amd.js
*/
define(['util'], function(u){
var module = {};
module.msg = function(message){
u.message(message);
}
return module;
});
<javascript addons/we7_store/template/js/test.js>
/**
* 路徑: addons/we7_store/template/js/test.js
*/
function hello(){
return 'hello world';
}
```
注意: require 引入的 js 都需要從 "/app/resource/js/app" 開始定位到 app 轉到 addons , 最后定位到模塊文件夾.
```
<script>
require(['../../../addons/we7_store/template/js/amd.js', // 輸出變量 amd (1)
'../../../addons/we7_store/template/js/test.js'] // 非標準 js, 無需設置輸出參數.
, function(amd){ // 輸出變量(1)
amd.msg(hello());
}
);
</script>
```
非模塊化 js, 在 require 的回調函數中無需設置參數
#### 3. 模塊加載
require.js 在 js 目錄下,其他標準庫置于 js目錄下 lib 文件夾中,自定義模塊置于 app 文件夾中。
按微擎系統的js目錄結構。使用 require.config() 方法,我們可以對模塊的加載行為進行定義。可以將 require.config() 方法置于模塊文件頭部,或抽離單獨的 js文件（config.js）。
```
require.config({
paths: {
"jquery": "lib/jquery.min",
"underscore": " lib/underscore.min"
}
});
```
或使用 baseUrl 來改變基路徑
```
require.config({
// 設置為自定義模塊路徑。
baseUrl: " resource/js/app",
// require.js要求,每個模塊是一個單獨的js文件。
paths: {
// '模塊名稱'： '相對 baseUrl 的路徑 '
'jquery': '../lib/jquery-1.11.1.min',
'underscore': '../lib/underscore-min',
}
});
```
#### 4. 加載非規范模塊
```
require.config({
shim: {
'colorpicker': {
//（輸出的變量名）,表明這個模塊外部調用時的名稱;
exports: '$',
// 依賴項, css! 依賴外部css
deps: ['css!../../components/colorpicker/spectrum.css']
},
}
});
```
#### 5. 加載插件
```
require.js 還提供一系列插件,實現一些特定的功能。
domready 插件,可以讓回調函數在頁面 DOM 結構加載完成后再運行。
require(['domready!'], function (doc){
called once the DOM is ready
});
```
#### 6. 定義模塊
```
define(['jquery', 'underscore'], function($, _ ){
var mod = {};
// code-segment
return mod;
});
```
參數：
['jquery', 'underscore'] 數組的元素是 require.config() 中聲明的模塊名,回調函數中會使用.
```
'$' 為 'jquery' 模塊的輸出變量,
'_' 為 'underscroe'模塊的輸出變量，
$, _ 可以在回調function 中直接使用。
```
