diff --git a/09-Node.js/02-JavaScript模块化：CommonJS.md b/09-Node.js/02-JavaScript模块化01：CommonJS.md similarity index 92% rename from 09-Node.js/02-JavaScript模块化：CommonJS.md rename to 09-Node.js/02-JavaScript模块化01：CommonJS.md index 675010c..f7667c1 100644 --- a/09-Node.js/02-JavaScript模块化：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： 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： diff --git a/09-Node.js/02-JavaScript模块化02：AMD.md b/09-Node.js/02-JavaScript模块化02：AMD.md new file mode 100644 index 0000000..a42b095 --- /dev/null +++ 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的实现 + +- + +- + + + +## RequireJS的使用举例（自定义模块） + + +### 1、创建项目结构 + + +在工程文件中新建如下目录： + + + ``` +js + | libs + + | modules + | alerter.js + | dataService.js + | main.js + +index.html + ``` + + +所有的代码写完之后，项目结构如下： + +20180411_1331.png + + +### 2、下载require.js，并导入 + +- 官网: + +- GitHub： + +在官网下载`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 + + + + + + + Document + + + + + + +``` + +注意，上面的代码中，我们直接通过`src`属性引入`requre.js `文件，一旦这个文件发挥作用了，会去找`data-main`属性里的指向，它正好指向的是主模块。 + +有了上面这种引入的方式，我们就不用再老土地引入多个`