JavaScript模块化开发

CommonJS规范和Node关系

◼ 我们需要知道CommonJS是一个规范，最初提出来是在浏览器以外的地方使用，并且当时被命名为ServerJS，后来为了体现它 的广泛性，修改为CommonJS，平时我们也会简称为CJS。

         Node是CommonJS在服务器端一个具有代表性的实现；

         Browserify是CommonJS在浏览器中的一种实现；

         webpack打包工具具备对CommonJS的支持和转换；

◼ 所以，Node中对CommonJS进行了支持和实现，让我们在开发node的过程中可以方便的进行模块化开发：

         在Node中每一个js文件都是一个单独的模块；node开发就是涉及多文件开发

         这个模块中包括CommonJS规范的核心变量：exports、module.exports、require；

         我们可以使用这些变量来方便的进行模块化开发；

◼ 前面我们提到过模块化的核心是导出和导入，Node中对其进行了实现：

         exports和module.exports可以负责对模块中的内容进行导出；

         require函数可以帮助我们导入其他模块（自定义模块、系统模块、第三方库模块）中的内容；

         AMD和CMD已经使用非常少了；

AMD和CMD

◼ AMD主要是应用于浏览器的一种模块化规范：

         AMD是Asynchronous Module Definition（异步模块定义）的缩写；

         它采用的是异步加载模块；

         事实上AMD的规范还要早于CommonJS，但是CommonJS目前依然在被使用，而AMD使用的较少了；

◼ 我们提到过，规范只是定义代码的应该如何去编写，只有有了具体的实现才能被应用：

          AMD实现的比较常用的库是require.js和curl.js

require.js的使用

下载地址：https://github.com/requirejs/requirejs

找到其中的require.js文件；

定义HTML的script标签引入require.js和定义入口文件：

         data-main属性的作用是在加载完src的文件后会加载执行该文件

◼CMD规范也是应用于浏览器的一种模块化规范

         CMD 是Common Module Definition（通用模块定义）的缩写；

         它也采用的也是异步加载模块，但是它将CommonJS的优点吸收了过来；

         但是目前CMD使用也非常少了；

◼ CMD也有自己比较优秀的实现方案：

          SeaJS

SeaJS的使用

下载地址：https://github.com/seajs/seajs

找到dist文件夹下的sea.js

引入sea.js和使用主入口文件

          seajs是指定主入口文件的

认识 ES Module 

     ES Module和CommonJS的模块化有一些不同之处：

         一方面它使用了import和export关键字；

         另一方面它采用编译期的静态分析，并且也加入了动态引用的方式； 

     ES Module模块采用export和import关键字来实现模块化：

         export负责将模块内的内容导出；

         import负责从其他模块导入内容； 

采用ES Module将自动采用严格模式：use strict 

export关键字 

      export关键字将一个模块中的变量、函数、类等导出

 ◼ 方式一：将所有需要导出的标识符，放到export后面的 {}中

         注意：这里的 {}里面不是ES6的对象字面量的增强写法，{}也不是表示一个对象的；

         所以： export {name: name}，是错误的写法；

◼ 方式二：导出时给标识符起一个别名

         通过as关键字起别名

◼ 方式三：在语句声明的前面直接加上export关键字

import关键字 

        import关键字负责从另外一个模块中导入内容

◼ 方式一：import {标识符列表} from '模块'；

         注意：这里的{}也不是一个对象，里面只是存放导入的标识符列表内容；

◼ 方式二：导入时给标识符起别名

         通过as关键字起别名

◼ 方式三：通过 * 将模块功能放到一个模块功能对象（a module object）上

 export和import结合使用

       export和import可以结合使用:

 因为1、在开发和封装一个功能库时，通常我们希望将暴露的所有接口放到一个文件中；

        2、这样方便指定统一的接口规范，也方便阅读；

        3、这个时候，我们就可以使用export和import结合使用；

default用法 

 导出功能都是有名字的导出（named exports）：

         在导出export时指定了名字；

         在导入import时需要知道具体的名字；

◼ 还有一种导出叫做默认导出（default export）

         默认导出export时可以不需要指定名字；

         在导入时不需要使用 {}，并且可以自己来指定名字；

         它也方便我们和现有的CommonJS等规范相互操作；

◼ 注意：在一个模块中，只能有一个默认导出（default export）

（从左往右看）