Modular 模块化
将一个复杂的程序 依据一定的规则(规范) 拆分成几个块(文件)，并组合在一起。
块内部的数据是私有的，只是向外暴露一些接口(方法)与外部其他模块进行通信。
关键字： 模块的暴露、模块的引入
1. 发展
(1) 全局函数模式： window.属性
(2) js 文件分离
(3) 命名空间模式： 对象.属性
(4) IIFE 函数： 匿名函数自调用（闭包）
(5) 引入依赖： 如 jQuery ，是现代模块化的基石
(6) commonJS： node 模块化，就是基于 commonJS 编写的
浏览器不认识 commonJS 语法，需要 Browserify 工具 进行编译打包处理
(7) AMD
(8) CMD： 一个阿里人写的，卖给国外了。
(9) ES6
浏览器也不认识 import 语法，需要
npm install -g babel-cli browserify
- 先使用 Babel 将 ES6 转成 ES5，此时 import 语法 转成了 require 语法
- 最后使用 Browserify 进行编译打包处理，使浏览器认识 require 语法
2. 好处
减少命名空间污染
模块分离，按需加载
更高的复用性、可维护性
减少 js 资源请求（一个 script 标签引入资源，意味着一次请求）
3. commonJS
特点：
(1) 每个文件都是一个模块。
(2) 由于服务器端，模块的加载是同步的，意味着会有阻塞，
所以在客户端，请求模块，用户可能出现等待， 体验不好。
(3) 浏览器不认识 commonJS 语法，需要 Browserify 工具 进行编译打包处理。
基本语法：
- 暴露： （本质是： 暴露 exports, 需要知道，默认的 exports = {} ）
方式一： module.exports = value; // 最后一次暴露生效
方式二： exports.xxx = value; // 可以多次暴露不同的属性
- 引入：
自定义模块： require('./') 需要路径标识
第三方模块： require('包名')
- 后端 node.js 模块化____基于 commonJS
(1) 目录结构
(2) 暴露一个对象 module1.js
(3) 暴露一个函数 module2.js
(4) 暴露多个属性 module3.js
(5) app.js 引入 依赖模块
报错： require is not defined
解决：使用 browserify
(1) 安装 browserify
npm install -g browserify // 全局安装
npm install --save-dev browserify // 安装进 开发依赖 devDependencies: {}
(2) browserify ./js/src/app.js -o ./js/dist/app.js
(3) html 引入生成的 js 文件 <script src="./js/dist/app.js"></script>
4. AMD
专门用于浏览器端，模块加载是异步的，意味着可能多个模块同时加载
requireJS 就是 AMD
比 浏览器端 commonJS 实现更早
- 暴露
显示声明依赖注入
- 引入
一般也是在主模块 require
浏览器端的 AMD 实例
(1) 将 require.js 下载，项目目录：
(2) 定义暴露模块 dataService.js (无依赖模块)
(3) 定义暴露模块 alerter.js (有依赖模块)
(4) 主模块，配置 模块路径，汇集模块
main.js
注意：
- baseUrl 使用时，配置路径是从根目录出发。。。否则，从 main.js 目录出发
- 配置路径时，不能加 .js 后缀，因为 require.js 会加 .js ，会冲突
- 第三方模块 jquery-1.10.1 的使用：
main.js
根据 jquery-1.10.1 源码，这儿的声明，一定要小写 jquery
alerter.js
- 如果使用 angular.js 需要如下配置
main.js
(5) html 使用 script 引入 require.js，声明 主模块 相对路径
专门用于浏览器端，模块加载是异步的
模块使用时才会加载
依赖 sea.js
暴露
引入
(1) 下载 sea.js ，并创建项目结构
(2) 定义暴露模块 module1.js (定义没有依赖的模块)
(3) 定义暴露模块 module2.js ()
(4) 定义暴露模块 module3.js ()
(5) 定义暴露模块 module4.js ()
(6) main.js 入口
(7) index.html 使用
6. ES6 + bable + browserify
(1) 下载第三方库
npm install -g babel-cli browserify
npm install --save-dev bable-preset-es2015 // 将 es6 转成 es5 的所有插件包
(2) 配置 .babelrc
- run control
-
{ "presets": ["es2015"] }
(3) 参见 https://www.cnblogs.com/tianxiaxuange/p/10224194.html