JS模块化

JS模块化

什么是模块化

将一个复杂的程序依据一定的规则（规范）封装成几个块（文件）并进行组合在一起。块的内部数据/实现是私有的，只是向外暴露一些接口（方法）与外部其他模块通信

模块化的好处

• 避免命名冲突（减少命名空间污染）
• 更好的分离，按需加载
• 更高复用性
• 高可维护性

---

1.CommonJS

概述

每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。

• 所有代码都运行在模块作用域，不会污染全局作用域。
• 模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。
• 模块加载的顺序，按照其在代码中出现的顺序。

基本语法

暴露模块：

1. module.exports = value
2. exports.XXX = value

引入模块：

1. require(xxx)

注：

• 第三方模块：xxx为模块名
• 自定义模块：xxx为模块文件路径

---

开始

• npm init 生成package.json文件（注意名称不能有中文，只能小写）
  

• npm install uniq --save

  • 添加该依赖到package.json中，在npm版本5以上默认–save

• 暴露自定义模块
  
  

• 引入自定义模块和第三方模块uniq

• 运行得到结果

---

Browserify模块化使用教程（CommonJS浏览器端打包工具）

1. 下载browserify

• 全局安装

npm install browserify -g

• 局部安装

npm install browserify --save-dev

注

devDependencies : 开发时依赖包

dependencies:运行时依赖包

• browserify 打包处理js：

           //打包文件路径        输出文件路径
browserify js/src/app.js -o js/dist/bundle.js
// -o   output

---

2.AMD

Asynchronous Module Definition(异步模块定义)

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

基本语法

定义暴露模块：

1. 定义没有依赖的模块

   define(function() {
     return 模块
   })
   

2. 定义有依赖的模块

define(['module1','module2'],function(m1,m2){
  return 模块
})

3. 实现（浏览器端）

开始

Require.js

目录结构

---

3.CMD

说明

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

模块使用时才会加载执行

基本语法

1. 定义暴露模块

// 定义没有依赖的模块
define(function(require,exports,module) {
  exports.xxx = value
  module.exports = value
})

//定义有依赖的模块
define(function(require,exports,module) {
 //引入依赖模块（同步）
  var module2 = require('./moduler2')
  //引入依赖模块（异步）
  require.async('./module3',function(m3) {
    
  })
})

//暴露模块
exports.xxx = value

2. 引入使用模块

define(function(require) {
  var m1 = require('./module1')
  var m2 = require('./module2')
  m1.show()
  m2.show()
})

---

实现

Sea.js

目录结构

---

4.ES6 规范

说明

依赖模块需要编译打包处理

语法

导出模块：export

引入模块：import

开始

使用Babel将ES6编译为ES5代码

//安装babel-cli
npm install babel-cli -g
cnpm install babel-preset-es2015 --save-dev
//present 预设（将es6转换成es5的所有插件打包）
//cli:command line interface 命令行接口

定义 .babelrc 文件

使用babel 将ES6转换为ES5

babel js/src -d js/build

目录结构

//执行
babel js/src -d js/build

//执行
browserify js/build/main.js -o js/dist/bundle.js

参考代码地址