Skip to content

Commit 1df3d14

Browse files
csxiaoyaojianxiancsxiaoyaojianxian
committed
模块化
1 parent 4195e25 commit 1df3d14

24 files changed

+2418
-6312
lines changed

‎01-JS基础/04-模块化/01-Javascript模块的基本写法.html‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Document</title>
6+
</head>
7+
<body>
8+
9+
<script>
10+
/*
11+
* @Author: victorsun
12+
* @Date: 2017-08-24 14:12:02
13+
* @Last Modified by: victorsun
14+
* @Last Modified time: 2017-08-24 14:33:08
15+
*/
16+
17+
/**
18+
* 【 1.对象写法 】
19+
* 优点：有效解决全局变量"污染"问题
20+
* 缺点：会暴露所有模块成员，内部状态可以被外部改写，如外部代码可以直接改变内部计数器的值
21+
*/
22+
var module1 = new Object({
23+
_count : 0,
24+
m1 : function (){
25+
//...
26+
},
27+
m2 : function (){
28+
//...
29+
}
30+
});
31+
module1.m1();
32+
module1._count = 5; // 内部状态可以被外部改写
33+
34+
/**
35+
* 【 2.立即执行函数写法 】
36+
* "立即执行函数"（Immediately-Invoked Function Expression，IIFE），可以达到不暴露私有成员的目的
37+
*/
38+
var module1 = (function(){
39+
var _count = 0;
40+
var m1 = function(){
41+
//...
42+
};
43+
var m2 = function(){
44+
//...
45+
};
46+
return {
47+
m1 : m1,
48+
m2 : m2
49+
};
50+
})();
51+
console.info(module1._count); //undefined
52+
53+
/**
54+
* 【 3.放大模式 】
55+
* 如果一个模块很大，必须分成几个部分，或者一个模块需要继承另一个模块，这时就有必要采用"放大模式"（augmentation）
56+
*/
57+
var module1 = (function (mod){
58+
mod.m3 = function () {
59+
//...
60+
};
61+
return mod;
62+
})(module1);
63+
64+
/**
65+
* 【 4.宽放大模式 】
66+
* 宽放大模式（Loose augmentation）
67+
* 在浏览器环境中，模块的各个部分通常都是从网上获取的，有时无法知道哪个部分会先加载。如果采用上一节的写法，第一个执行的部分有可能加载一个不存在空对象，这时就要采用"宽放大模式"
68+
* 与"放大模式"相比，＂宽放大模式＂就是"立即执行函数"的参数可以是空对象
69+
*/
70+
var module1 = ( function (mod){
71+
//...
72+
return mod;
73+
})(window.module1 || {});
74+
75+
/**
76+
* 【 5.输入全局变量 】
77+
* 为了在模块内部调用全局变量，必须显式地将其他变量输入模块
78+
*/
79+
var module1 = (function ($, YAHOO) {
80+
//...
81+
})(jQuery, YAHOO);
82+
83+
</script>
84+
</body>
85+
</html>

‎01-JS基础/04-模块化/02-规范化使用模块.html‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Document</title>
6+
</head>
7+
<body>
8+
9+
<script>
10+
/*
11+
* @Author: victorsun
12+
* @Date: 2017-08-24 14:34:31
13+
* @Last Modified by: victorsun
14+
* @Last Modified time: 2017-08-24 14:48:26
15+
*/
16+
17+
/**
18+
* CommonJS & AMD
19+
*/
20+
21+
/**
22+
* 【 CommonJS 】
23+
* node.js
24+
* 问题：
25+
* require('math') 必须等math.js加载完成之后运行
26+
* 服务器端所有的模块都存放在本地硬盘，可以同步加载完成，等待时间就是硬盘的读取时间
27+
* 浏览器，等待时间取决于网速的快慢，可能要等很长时间，浏览器处于"假死"状态
28+
* 因此，浏览器端的模块，不能采用"同步加载"（synchronous），只能采用"异步加载"（asynchronous）
29+
*/
30+
// 假定加载一个数学模块math.js
31+
var math = require('math');
32+
math.add(2,3); // 5
33+
34+
/**
35+
* 【 AMD 】
36+
* AMD "Asynchronous Module Definition" 异步模块定义
37+
* 所有依赖某个模块的语句，都定义在回调函数中，等到加载完成后，回调函数才会运行
38+
* require([module], callback);
39+
* 主要有两个Javascript库实现了AMD规范：require.js和curl.js
40+
*/
41+
require(['math'], function (math) {
42+
math.add(2, 3);
43+
});
44+
45+
/**
46+
* 【 AMD - require.js 】
47+
* 1.实现js文件的异步加载，避免网页失去响应
48+
* 2.管理模块之间的依赖性，便于代码的编写和维护
49+
*/
50+
51+
52+
</script>
53+
</body>
54+
</html>

‎01-JS基础/04-模块化/03-requirejs.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Document</title>
6+
</head>
7+
<body>
8+
<!--
9+
async属性表明这个文件需要异步加载，避免网页失去响应
10+
IE不支持这个属性，只支持defer，所以把defer也写上
11+
-->
12+
<!-- <script src="js/require.min.js" defer async="true"></script> -->
13+
14+
<!-- data-main属性指定网页程序的主模块，后缀 .js 可以省略 -->
15+
<script src="lib/require.min.js" defer async="true" data-main="js/main"></script>
16+
17+
<!-- 详细内容见 js/main.js -->
18+
19+
</body>
20+
</html>

‎01-JS基础/04-模块化/js/main.js‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
/*
2+
* @Author: victorsun
3+
* @Date: 2017-08-24 15:00:22
4+
* @Last Modified by: victorsun
5+
* @Last Modified time: 2017-08-24 15:59:38
6+
*/
7+
// main.js
8+
// alert("加载成功！");
9+
10+
/**
11+
* 【 加载方式1 】 参数
12+
require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
13+
// some code here
14+
});
15+
*/
16+
17+
/**
18+
* 【 加载方式2 】 config
19+
require.config({
20+
paths: {
21+
"jquery": "js/jquery.min",
22+
"underscore": "js/underscore.min",
23+
"backbone": "js/backbone.min"
24+
}
25+
});
26+
*/
27+
28+
/**
29+
* 【 加载方式3 】 config 含 baseUrl
30+
require.config({
31+
baseUrl: "js/lib",
32+
paths: {
33+
"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min",
34+
"underscore": "underscore.min",
35+
"backbone": "backbone.min"
36+
}
37+
});
38+
*/
39+
40+
/**
41+
* 【 加载非规范的模块 】
42+
* shim属性，专门用来配置不兼容的模块，定义
43+
* 1. exports值（输出的变量名）
44+
* 2. deps数组，表明该模块的依赖性
45+
require.config({
46+
shim: {
47+
'underscore':{
48+
exports: '_'
49+
},
50+
'backbone': {
51+
deps: ['underscore', 'jquery'],
52+
exports: 'Backbone'
53+
}
54+
}
55+
});
56+
// jQuery的插件可以这样定义：
57+
shim: {
58+
'jquery.scroll': {
59+
deps: ['jquery'],
60+
exports: 'jQuery.fn.scroll'
61+
}
62+
}
63+
*/
64+
65+
/**
66+
* 【 require.js插件 】
67+
// domready插件，让回调函数在页面DOM结构加载完成后再运行
68+
require(['domready!'], function (doc){
69+
// called once the DOM is ready
70+
});
71+
// text和image插件，允许require.js加载文本和图片文件
72+
define([
73+
'text!review.txt',
74+
'image!cat.jpg'
75+
],
76+
function(review,cat){
77+
console.log(review);
78+
document.body.appendChild(cat);
79+
}
80+
);
81+
*/
82+
83+
require.config({
84+
baseUrl: "js",
85+
paths: {
86+
"mylib": "mylib"
87+
}
88+
});
89+
require(['mylib'], function (mylib){
90+
alert(mylib.foo(1,2));
91+
});

‎01-JS基础/04-模块化/js/math.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// math.js
2+
define(function (){
3+
var add = function (x,y){
4+
return x+y;
5+
};
6+
return {
7+
add: add
8+
};
9+
});

‎01-JS基础/04-模块化/js/mylib.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// mylib.js
2+
define(['math'], function(math){
3+
function foo(x,y){
4+
return math.add(x,y);
5+
}
6+
return {
7+
foo : foo
8+
};
9+
});

0 commit comments

Comments
 (0)