[TOC=1,4] ### JavaScript編碼規范 #### 微擎系統中，公共引用的js文件包括 **Jquery**、**Util** 在使用以上兩個Js文件時不需要require引用，使用其它Js文件需要遵循 **AMD** 的引用方式。 我們先介紹下 **AMD** ( Asynchronous Module Definition )——“**異步模塊定義**”。 **require.js** 是微擎系統默認采用的 **AMD** 加載類 采用異步方式加載模塊,模塊的加載不影響它后面語句的運行。所有依賴這個模塊的語句,都定義在一個回調函數中,等到加載完成之后,這個回調函數才會運行。 實現 AMD 規范的加載器其實很多,微擎系系統使用的是 require.js 。 微擎系統使用 require.js 的好處： * 實現 js 文件的異步加載,避免網頁失去響應; * 管理模塊之間的依賴性,便于代碼的編寫和維護。 >[warning] 注意系統中已經默認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 中直接使用。