初步认识了解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