add:AMD相关。
This commit is contained in:
		
							parent
							
								
									a1edf28f97
								
							
						
					
					
						commit
						07cb09c4f8
					
				@ -73,7 +73,7 @@
 | 
			
		||||
 | 
			
		||||
- 请求过多:引入十个js文件,就有十次http请求。
 | 
			
		||||
 | 
			
		||||
- 依赖模糊:不同的js文件可能会相互依赖,如果该其中的一个文件,另外一个文件可能会报错。
 | 
			
		||||
- 依赖模糊:不同的js文件可能会相互依赖,如果改其中的一个文件,另外一个文件可能会报错。
 | 
			
		||||
 | 
			
		||||
以上两点,最终导致:**难以维护**。
 | 
			
		||||
 | 
			
		||||
@ -113,11 +113,11 @@ CommonJS 就是一套约定标准,不是技术。用于约定我们的代码
 | 
			
		||||
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
	同步加载模块;
 | 
			
		||||
  同步加载模块;
 | 
			
		||||
 | 
			
		||||
	依赖就近,延迟执行:require(./a) 直接引入。或者Require.async 异步引入。   //依赖就近:执行到这一部分的时候,再去加载对应的文件。
 | 
			
		||||
  依赖就近,延迟执行:require(./a) 直接引入。或者Require.async 异步引入。   //依赖就近:执行到这一部分的时候,再去加载对应的文件。
 | 
			
		||||
 | 
			
		||||
	define 定义模块, export 导出:define(function(require, export, module){});
 | 
			
		||||
  define 定义模块, export 导出:define(function(require, export, module){});
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -151,7 +151,7 @@ PS:面试时,经常会问AMD 和 CMD 的区别。
 | 
			
		||||
**方式一**:
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
	module.exports = value
 | 
			
		||||
  module.exports = value
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
这个 value 可以是任意的数据类型。
 | 
			
		||||
@ -159,7 +159,7 @@ PS:面试时,经常会问AMD 和 CMD 的区别。
 | 
			
		||||
**方式二**:
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
	exports.xxx = value
 | 
			
		||||
  exports.xxx = value
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -206,7 +206,7 @@ app.js
 | 
			
		||||
然后在根目录下新建如下命令:
 | 
			
		||||
 | 
			
		||||
```
 | 
			
		||||
	npm init
 | 
			
		||||
  npm init
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -243,7 +243,7 @@ app.js
 | 
			
		||||
`uniq`这个第三方包的作用是保证唯一性(我们拿它来举例)。我们在当前工程目录下,输入如下命令进行安装:
 | 
			
		||||
 | 
			
		||||
```
 | 
			
		||||
	npm install uniq
 | 
			
		||||
  npm install uniq
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
安装成功后,根目录下会自动生成相应的文件:
 | 
			
		||||
@ -262,11 +262,11 @@ app.js
 | 
			
		||||
我们去[官网](https://www.npmjs.com/package/uniq)看一下`uniq`的用法:
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
	let uniq = require('uniq');
 | 
			
		||||
  let uniq = require('uniq');
 | 
			
		||||
 | 
			
		||||
	let arr = [1, 1, 2, 2, 3, 5];
 | 
			
		||||
	uniq(arr);
 | 
			
		||||
	console.log(arr);  //输出结果:[ 1, 2, 3, 5 ]
 | 
			
		||||
  let arr = [1, 1, 2, 2, 3, 5];
 | 
			
		||||
  uniq(arr);
 | 
			
		||||
  console.log(arr);  //输出结果:[ 1, 2, 3, 5 ]
 | 
			
		||||
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
@ -494,6 +494,11 @@ module3.foo1();
 | 
			
		||||
module3.foo2();
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
引入的路径解释:
 | 
			
		||||
 | 
			
		||||
- `./`是相对路径,指的是当前路径(app.js的当前路径是src)
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
到此,我们的主要代码就写完了。
 | 
			
		||||
 | 
			
		||||
但是,如果我们直接在index.html中,像下面这样写,是不行的:(因为浏览器不认识 require 关键字)
 | 
			
		||||
@ -514,7 +519,6 @@ module3.foo2();
 | 
			
		||||
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
为了能够让index.html引入app.js,我们需要输入如下命令:
 | 
			
		||||
 | 
			
		||||
打包处理js:
 | 
			
		||||
@ -523,7 +527,6 @@ module3.foo2();
 | 
			
		||||
    browserify js/src/app.js -o js/dist/bundle.js
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
然后在index.html中引入打包后的文件:
 | 
			
		||||
 | 
			
		||||
```html
 | 
			
		||||
@ -533,10 +536,6 @@ module3.foo2();
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
## others
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -568,45 +567,33 @@ GitHub:<https://github.com/seajs/seajs>
 | 
			
		||||
1、RequireJS 和 AMD:
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
AMD 是 RequireJS 在推广过程中对模块化定义的规范化产出。
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
20180303_1653.png
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
异步模块定义,特点是依赖前置。
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
2、SeaJS 和 CMD:
 | 
			
		||||
 | 
			
		||||
CMD 是 SeaJS 在推广过程中对模块化定义的规范化产出
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
同步模块定义。
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
	// 所有模块都通过 define 来定义
 | 
			
		||||
	define(funtion(require, exports, module) {
 | 
			
		||||
  // 所有模块都通过 define 来定义
 | 
			
		||||
  define(funtion(require, exports, module) {
 | 
			
		||||
 | 
			
		||||
        //通过 require 引入依赖
 | 
			
		||||
 | 
			
		||||
        var $ require(`jquery`);
 | 
			
		||||
 | 
			
		||||
        var Spinning = require(`./spinning`);
 | 
			
		||||
	})
 | 
			
		||||
  })
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
SeaJS 是淘宝开发团队做的,知名度不如 RequireJS。
 | 
			
		||||
 | 
			
		||||
3、CommonJS:
 | 
			
		||||
 | 
			
		||||
CommonJS 的规范:module.exports
 | 
			
		||||
 | 
			
		||||
服务器端的 Node.js 推荐使用 CommonJS 规范,来定义模块化开发。前端浏览器不支持 CommonJS 规范。
 | 
			
		||||
 | 
			
		||||
20180303_1701.png
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
以上三个都是 ES5里面的规范。
 | 
			
		||||
 | 
			
		||||
4、ES6:
 | 
			
		||||
							
								
								
									
										269
									
								
								09-Node.js/02-JavaScript模块化02:AMD.md
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										269
									
								
								09-Node.js/02-JavaScript模块化02:AMD.md
									
									
									
									
									
										Normal file
									
								
							@ -0,0 +1,269 @@
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
## AMD的基本语法
 | 
			
		||||
 | 
			
		||||
### AMD的概念
 | 
			
		||||
 | 
			
		||||
**AMD**(Asynchronous Module Definition):异步模块定义。AMD专门用于浏览器端,模块的加载是异步的。
 | 
			
		||||
 | 
			
		||||
[**AMD规范**](https://github.com/amdjs/amdjs-api):是 **[RequireJS](http://requirejs.org/)** 在推广过程中对模块化定义的规范化产出。
 | 
			
		||||
 | 
			
		||||
RequireJS:一个基于AMD规范实现的模块化开发解决方案。
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
### 暴露模块的方式
 | 
			
		||||
 | 
			
		||||
**定义没有依赖的模块**:
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
define(function () {
 | 
			
		||||
 | 
			
		||||
    return 模块
 | 
			
		||||
 | 
			
		||||
})
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
**定义有依赖的模块**:
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
//定义有依赖的模块:第一个参数为数组
 | 
			
		||||
define(['module1', 'module2'], function (m1, m2) {
 | 
			
		||||
 | 
			
		||||
    return 模块
 | 
			
		||||
 | 
			
		||||
})
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
代码解释:
 | 
			
		||||
 | 
			
		||||
- 第一个参数必须是数组,里面存放的是,需要依赖的其他的模块。
 | 
			
		||||
 | 
			
		||||
- 第二个参数是function,里面带了形参 m1 和 m2,分别代表了 module1 和 module2。这个形参的作用是,前面依赖的模块一旦声明了,就可以一一对应地注入到 function中去,从而在 function 内部使用依赖的模块。这种方式称之为**显式声明依赖注入**。
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
### 引入模块的方式
 | 
			
		||||
 | 
			
		||||
在主模块中引入其他的模块:
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
//在主模块中引入其他的模块
 | 
			
		||||
require(['module1', 'module2'], function (m1, m2) {
 | 
			
		||||
 | 
			
		||||
    使用m1 / m2
 | 
			
		||||
 | 
			
		||||
})
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
### RequireJS:是AMD的实现
 | 
			
		||||
 | 
			
		||||
- <http://www.requirejs.org/>
 | 
			
		||||
 | 
			
		||||
- <http://www.ruanyifeng.com/blog/2012/11/require_js.html>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
## RequireJS的使用举例(自定义模块)
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
### 1、创建项目结构
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
在工程文件中新建如下目录:
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
  ```
 | 
			
		||||
js
 | 
			
		||||
    | libs
 | 
			
		||||
 | 
			
		||||
    | modules
 | 
			
		||||
      	| alerter.js
 | 
			
		||||
      	| dataService.js
 | 
			
		||||
    | main.js
 | 
			
		||||
 | 
			
		||||
index.html
 | 
			
		||||
  ```
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
所有的代码写完之后,项目结构如下:
 | 
			
		||||
 | 
			
		||||
20180411_1331.png
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
### 2、下载require.js,并导入
 | 
			
		||||
 | 
			
		||||
- 官网: <http://requirejs.org/docs/download.html>
 | 
			
		||||
 | 
			
		||||
- GitHub:<https://github.com/requirejs/requirejs>
 | 
			
		||||
 | 
			
		||||
在官网下载`require.js`文件:
 | 
			
		||||
 | 
			
		||||
20180411_1127.png
 | 
			
		||||
 | 
			
		||||
然后将`require.js`文件拷贝到项目的`js/libs/`目录中。
 | 
			
		||||
 | 
			
		||||
这样的话,就导入哈哦了。
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
### 3、自定义模块
 | 
			
		||||
 | 
			
		||||
(1)dataService.js:
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
//定义没有依赖的模块
 | 
			
		||||
define(function () {
 | 
			
		||||
    let name = '我是 dataService.js中的内容';
 | 
			
		||||
    function getName() {
 | 
			
		||||
        return name;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    //暴露模块
 | 
			
		||||
    return { getName };
 | 
			
		||||
});
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
这模块没有依赖。
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
(2)alerter.js:
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
//定义有依赖的模块
 | 
			
		||||
define(['myDataService'], function (dataService) {
 | 
			
		||||
    let msg = '我是 aleter.js中的内容';
 | 
			
		||||
    function showMsg() {
 | 
			
		||||
        console.log(dataService.getName());  //调用了 myDataService 模块中的内容
 | 
			
		||||
        console.log(msg);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    //暴露模块
 | 
			
		||||
    return { showMsg };
 | 
			
		||||
 | 
			
		||||
});
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
这个模块,依赖了`myDataService`这个模块,模块名是我自己起的。稍后,我们会在main.js中做映射,将`myDataService`这个名字和`dataService.js`文件关联起来。
 | 
			
		||||
 | 
			
		||||
(3)main.js:
 | 
			
		||||
 | 
			
		||||
> 这个是主模块。
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
requirejs.config({
 | 
			
		||||
    //baseUrl: 'js/',     //基本路径
 | 
			
		||||
    paths: {    //配置路径
 | 
			
		||||
        myDataService: './modules/dataService',
 | 
			
		||||
        myAlerter: './modules/alerter'
 | 
			
		||||
    }
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
requirejs(['myAlerter'], function (alerter) {
 | 
			
		||||
    alerter.showMsg();
 | 
			
		||||
})();
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
这个模块,依赖了`myAlerter`这个模块,模块名是我自己起的。并且,我们在文件的上方做了映射,将`myAlerter`这个名字和`alerter.js`文件关联了起来。
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
我们来讲一下最上方的几行代码(即`requirejs.config`里的内容)的意思:
 | 
			
		||||
 | 
			
		||||
目前为止,我们可以看到:文件(3)依赖了文件(2),文件(2)依赖了文件(1)。`paths`里做的就是映射:将键`myDataService`和`dataService.js`进行关联,将键`myAlerter`和`alerter.js`文件进行关联。
 | 
			
		||||
 | 
			
		||||
另外,再讲一下注释里的`baseUrl`的用法:如果没有这个注释,那么`paths`里的路径,是从**当前这个文件**(main.js)的角度出发的;如果加了一行`baseUrl`,表明它是 paths 里所有路径的最开头的部分,`baseUrl`的路径是从**项目的根目录**的角度出发的。
 | 
			
		||||
 | 
			
		||||
(4)index.html:
 | 
			
		||||
 | 
			
		||||
这个是入口文件。
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
```html
 | 
			
		||||
<!DOCTYPE html>
 | 
			
		||||
<html lang="en">
 | 
			
		||||
<head>
 | 
			
		||||
    <meta charset="UTF-8">
 | 
			
		||||
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 | 
			
		||||
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 | 
			
		||||
    <title>Document</title>
 | 
			
		||||
</head>
 | 
			
		||||
<body>
 | 
			
		||||
    <!-- 先通过 src 引入 require.js 文件,然后通过 data-main 引入主模块(main.js) -->
 | 
			
		||||
    <script data-main="js/main.js" src="js/libs/require.js"></script>
 | 
			
		||||
</body>
 | 
			
		||||
</html>
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
注意,上面的代码中,我们直接通过`src`属性引入`requre.js `文件,一旦这个文件发挥作用了,会去找`data-main`属性里的指向,它正好指向的是主模块。
 | 
			
		||||
 | 
			
		||||
有了上面这种引入的方式,我们就不用再老土地引入多个`<script>`标签了。
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
运行 index.html,打印结果如下:
 | 
			
		||||
 | 
			
		||||
20180411_1740.png
 | 
			
		||||
 | 
			
		||||
项目源码:[2018-04-11-RequireJSDemo](https://download.csdn.net/download/smyhvae/10341963)
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
							
								
								
									
										20
									
								
								09-Node.js/02-JavaScript模块化03:CMD.md
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										20
									
								
								09-Node.js/02-JavaScript模块化03:CMD.md
									
									
									
									
									
										Normal file
									
								
							@ -0,0 +1,20 @@
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
## CMD的基本语法
 | 
			
		||||
 | 
			
		||||
### CMD的概念
 | 
			
		||||
 | 
			
		||||
**CMD**(Asynchronous Module Definition):异步模块定义。AMD专门用于浏览器端,模块的加载是异步的。
 | 
			
		||||
 | 
			
		||||
[**CMD规范**](https://github.com/amdjs/amdjs-api):是 **[SeaJS](http://requirejs.org/)** 在推广过程中对模块化定义的规范化产出。
 | 
			
		||||
 | 
			
		||||
SeaJS:一个基于CMD规范实现的模块化开发解决方案。
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
### 暴露模块的方式
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -1,14 +0,0 @@
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
## AMD的引入
 | 
			
		||||
 | 
			
		||||
### AMD的概念
 | 
			
		||||
 | 
			
		||||
[**AMD规范**](https://github.com/amdjs/amdjs-api):是 **[RequireJS](http://requirejs.org/)** 在推广过程中对模块化定义的规范化产出。
 | 
			
		||||
 | 
			
		||||
AMD:
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
AMD专门用于浏览器端,模块的加载是异步的。
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -1,5 +0,0 @@
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
const http = require('http');  //因为 这个 http 库引用之后就不会去改它,所以我们用常量来表示
 | 
			
		||||
 | 
			
		||||
http.createServer();   //创建一台服务器
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user