初步認識瞭解require與AMD模式
在網上看到一篇比較好的文章，摘抄作參考。原文地址：https://segmentfault.com/a/1190000002515305；javascript
http://www.cnblogs.com/johnl/archive/2015/01/26/4251300.htmlphp
寫過php的人對於require函數都不陌生，它的做用爲文件導入，也能夠把文件理解爲模塊、導入理解爲調用，稱爲模塊調用html
隨着用戶體驗的極致追求，前端業務所佔比重逐漸增長，因而出現了前端領域的模塊化編程前端
可是模塊加載（javascript文件加載）的前後順序卻給咱們帶來了不小的麻煩，好比處理模塊間的依賴關係java
核心是經過define方法對無序的代碼進行有序的模塊化定義，經過require方法實現代碼的模塊化加載
須要載入的文件：requirejquery
主要做用是把龐大的客戶端代碼分割爲各模塊從而實現模塊化管理，便於代碼的編寫與維護
require能夠理解爲一個工具庫，幫助咱們更好的架構前端框架，其自己並不是前端框架編程
其次實現了異步加載解決了網頁加載時的阻塞問題
客戶端代碼被定義爲各模塊後，模塊之間錯綜複雜的依賴關係以及模塊的按需加載、加載順序就成了問題segmentfault
require很好的解決了這個問題，它的模塊化管理遵循AMD規範，模塊加載不影響後續語句執行前端框架
不得不說的ADM規範
Asynchronous Module Definition - 異步加載模塊規範cookie
解決模塊化編程帶來的代碼加載前後順序問題及常規異步加載代碼帶來的不肯定因素
載入require實現模塊化編程
|
1
|
<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重置相對路徑
|
1
2
3
|
require.config({
baseUrl :
'js/lib'
});
|
paths配置待調用模塊路徑
|
1
2
3
4
5
6
|
require.config({
paths : {
jquery :
'jquery.min'
,
control :
'control'
}
});
|
已配置路徑的模塊的調用方式
|
1
2
3
|
require([
'jquery'
,
'control'
],
function
($, Control){
return
true
;
});
|
shim墊片
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
require.config({
paths : {
underscore :
'underscore.min'
,
backbone :
'backbone.min'
},
shim : {
underscore : {
exports :
'_'
},
backbone : {
deps : [
'underscore'
],
exports :
'Backbone'
}
}
});
|
有時咱們須要使用非AMD定義模塊，如jQuery，須要shim參數來幫助解決這些庫的解析名稱及載入順序問題
項目入口配置文件shop.js代碼展現
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
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方法
獨立模塊
|
1
2
3
4
|
define(
function
(){
var
control = {};
return
control;
});
|
該模塊調用不依賴其它模塊
依賴模塊
|
1
2
3
4
|
define([
'base'
],
function
(){
var
control = {};
return
control;
});
|
該模塊調用須要依賴base模塊
項目控制器模塊control.js代碼展現
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
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方法
異步加載
|
1
2
3
4
|
require([
'control'
],
function
(Control){
Control.cookie();
Control.template();
});
|
AMD模式
定義模塊的define方法和調用模塊的require方法，合稱AMD模式
該模式的定義模塊方法清晰且不會污染全局環境，可以清楚的顯示依賴關係
- 1. 初步認識瞭解require與AMD模式
- 2. confluence的初步認識和了解
- 3. API的初步瞭解和認識
- 4. 認識Require
- 5. Maven 教程（1）— Maven初步瞭解與認識
- 6. 初步認識AutoMapper
- 7. 初步認識Hive
- 8. Nginx 初步認識
- 9. 初步認識JUnit
- 10. 初步認識Vuex
- 更多相關文章...
- • Lua 模塊與包 - Lua 教程
- • Scala 模式匹配 - Scala教程
- • 委託模式
- • 三篇文章瞭解 TiDB 技術內幕——說存儲
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 初步認識瞭解require與AMD模式
- 2. confluence的初步認識和了解
- 3. API的初步瞭解和認識
- 4. 認識Require
- 5. Maven 教程（1）— Maven初步瞭解與認識
- 6. 初步認識AutoMapper
- 7. 初步認識Hive
- 8. Nginx 初步認識
- 9. 初步認識JUnit
- 10. 初步認識Vuex