[回顾 js 模块化规范]

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 引入 依赖模块

• 前端 Browserify 使得浏览器 处理 require

报错： 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，声明 主模块 相对路径

5. CMD

专门用于浏览器端，模块加载是异步的

模块使用时才会加载

依赖 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) 参见 http://www.javashuo.com/article/p-vhajlzxb-dg.html