add：AMD相关。

2018-04-12 11:13:57 +08:00 · 2018-04-12 11:13:57 +08:00 · 07cb09c4f8
commit 07cb09c4f8
parent a1edf28f97
5 changed files with 309 additions and 52 deletions
--- a/09-Node.js/02-JavaScript模块化01：CommonJS.md
+++ b/09-Node.js/02-JavaScript模块化01：CommonJS.md
@ -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：
--- a/09-Node.js/02-JavaScript模块化02：AMD.md
+++ b/09-Node.js/02-JavaScript模块化02：AMD.md
@ -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
+
+```
+
+
+
+
+
+
+
+
+
+
+
--- a/09-Node.js/02-JavaScript模块化03：CMD.md
+++ b/09-Node.js/02-JavaScript模块化03：CMD.md
@ -0,0 +1,20 @@
+
+
+
+## CMD的基本语法
+
+### CMD的概念
+
+**CMD**（Asynchronous Module Definition）：异步模块定义。AMD专门用于浏览器端，模块的加载是异步的。
+
+[**CMD规范**](https://github.com/amdjs/amdjs-api)：是 **[SeaJS](http://requirejs.org/)** 在推广过程中对模块化定义的规范化产出。
+
+SeaJS：一个基于CMD规范实现的模块化开发解决方案。
+
+
+### 暴露模块的方式
+
+
+
+
+
--- a/09-Node.js/03-JavaScript模块化：AMD.md
+++ b/09-Node.js/03-JavaScript模块化：AMD.md
@ -1,14 +0,0 @@
-
-
-## AMD的引入
-
-### AMD的概念
-
-[**AMD规范**](https://github.com/amdjs/amdjs-api)：是 **[RequireJS](http://requirejs.org/)** 在推广过程中对模块化定义的规范化产出。
-
-AMD：
-
-
-AMD专门用于浏览器端，模块的加载是异步的。
-
-
--- a/09-Node.js/server.js
+++ b/09-Node.js/server.js
@ -1,5 +0,0 @@
-
-
-const http = require('http');  //因为 这个 http 库引用之后就不会去改它，所以我们用常量来表示
-
-http.createServer();   //创建一台服务器