初識異步加載require與AMD模式

寫過php的人對於require函數都不陌生，它的作用為文件導入，也可以把文件理解為模塊、導入理解為調用，稱為模塊調用

隨着用戶體驗的極致追求，前端業務所占比重逐漸增加，於是出現了前端領域的模塊化編程

但是模塊加載（javascript文件加載）的先后順序卻給我們帶來了不小的麻煩，比如處理模塊間的依賴關系

 

核心是通過define方法對無序的代碼進行有序的模塊化定義，通過require方法實現代碼的模塊化加載

需要載入的文件：require

 

主要作用是把龐大的客戶端代碼分割為各模塊從而實現模塊化管理，便於代碼的編寫與維護

require可以理解為一個工具庫，幫助我們更好的架構前端框架，其本身並非前端框架

 

其次實現了異步加載解決了網頁加載時的阻塞問題

客戶端代碼被定義為各模塊后，模塊之間錯綜復雜的依賴關系以及模塊的按需加載、加載順序就成了問題

require很好的解決了這個問題，它的模塊化管理遵循AMD規范，模塊加載不影響后續語句執行

 

不得不說的ADM規范

Asynchronous Module Definition - 異步加載模塊規范

解決模塊化編程帶來的代碼加載先后順序問題及常規異步加載代碼帶來的不確定因素

 

載入require實現模塊化編程

<script src="/static/js/require.min.js" data-main="/static/js/shop"></script>

data-main指定了入口配置文件shop.js，同時指定了基於shop.js的相對路徑baseUrl，baseUrl可以在config配置方法內重置

 

require.config配置方法

baseUrl重置相對路徑

require.config({
    baseUrl : 'js/lib'
});

 

paths配置待調用模塊路徑

require.config({
    paths : {
        jquery : 'jquery.min',
        control : 'control'
    }
});

已配置路徑的模塊的調用方式

require(['jquery', 'control'], function ($, Control){
    return true;
});

 

shim墊片

require.config({
    paths : {
        underscore : 'underscore.min',
        backbone : 'backbone.min'
    },
    shim : {
        underscore : {
            exports : '_'
        },
        backbone : {
            deps : ['underscore'],
            exports : 'Backbone'
        }
    }
});

有時我們需要使用非AMD定義模塊，如jQuery，需要shim參數來幫助解決這些庫的解析名稱及載入順序問題

 

項目入口配置文件shop.js代碼展示

require.config({
	paths : {
		jquery   : 'jquery.min',
		jqmd5    : 'jquery.md5',
		cookie   : 'public/cookie',

		jqui     : 'jquery.ui.min', /* 前端UI框架 */
		jquid    : 'jquery.ui.dialog.min', /* 前端UI框架 - 模態框模塊 */
		jqtmpl   : 'jquery.tmpl.min', /* 模版引擎 */
		jqvali   : 'jquery.validation.min', /* 表單驗證 */
		jqvalicn : 'jquery.validation.cn.min', /* 表單驗證漢化 */

		base     : 'base', /* 基礎功能 */
		control  : 'control', /* 控制器模塊 */
		login    : 'login/index', /* 登錄頁模塊 */
		register : 'register/index', /* 注冊頁模塊 */
		detail   : 'detail/index' /* 詳情頁模塊 */
	}
});

require(['control'], function (Control){
	Control.cookie();
	Control.template();
});

 

定義模塊的define方法

獨立模塊

define(function (){
    var control = {};
    return control;
});

該模塊調用不依賴其它模塊

 

依賴模塊

define(['base'], function (){
    var control = {};
    return control;
});

該模塊調用需要依賴base模塊

 

項目控制器模塊control.js代碼展示

define(['jquery', 'jqmd5', 'cookie', 'base'], function (){
	var control = {};

	/**
	 * 登錄狀態檢測
	 */
	control.cookie = function (){
		setTimeout(WK.LC.syncLoginState, 100);
	};

	/**
	 * 模塊調用及配置
	 */
	control.template = function (){
		if($('.naver').length > 0) base.naver();

		if(CATEGORY == 'login')
		{
			if(MODEL == 'index'){
				// 登錄頁
				require(['login'], function (Login){
					Login.form();
				});
			};

			if(MODEL == 'register' || MODEL == 'check'){
				// 注冊頁
				require(['register'], function (Register){
					Register.form(MODEL);
				});
			};
		};

		if(CATEGORY == 'goods')
		{
			// 詳情頁
			if(MODEL == 'index'){
				require(['detail'], function (Detail){
					// Detail.form();
				});
			};
		};
	};

	return control;
});

 

加載模塊的require方法

異步加載

require(['control'], function (Control){
	Control.cookie();
	Control.template();
});

 

AMD模式

定義模塊的define方法和調用模塊的require方法，合稱AMD模式

該模式的定義模塊方法清晰且不會污染全局環境，能夠清楚的顯示依賴關系

 

require是一款可以幫助我們架構好前端框架的好工具，為我們帶來更為方便的模塊化編程，輕松控制好模塊載入的數量和順序，並且性能優秀