JS模块化
- 什么是模块?
- 将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起
- 块的内部数据/实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信
- 为什么要模块化？
- 部署简单
- 降低复杂度，提高解耦性
- 避免命名冲突(减少命名空间污染)
- 更好的分离, 按需加载
- 更高复用性，高可维护性
模块化规范
现在比较流行的模块化规范有以下几种：CommonJS, AMD, ES6, CMD
CommonJS
- 特点：
- 每个文件都可当作一个模块
- 在服务器端: 模块的加载是运行时同步加载的
- 在浏览器端: 模块需要提前编译打包处理
基本语法
| 暴露模块 | 引入模块 |
|---|---|
| module.exports = 要暴露的内容 | 第三方模块:require(xxx),xxx为模块名 |
| exports.xxx = 要暴露的内容 | 自定义模块:require(xxx), xxx为模块文件路径 |
实现
| 服务器端 | 浏览器端 |
|---|---|
| Node.js | Browserify(CommonJs的打包工具) |
| Node.js运行时动态加载模块(同步) | Browserify是在转译(编译)时就会加载打包(合并)require的模块 |
具体实现教程
http://www.884358.com/md/nodejs/02
ES6
概念
https://es6.ruanyifeng.com/#docs/module
基本语法
- 1) 暴露模块: export
-
- 分别暴露：export 暴露内容
-
- 统一暴露：export {xxx, yyy}
-
- 默认暴露：export defalut 暴露内容
-
- 2) 引入模块: import
-
- import {xxx,yyy} from ‘./module1’
-
- import module3 from ‘./module3’
-
实现
- 浏览器端
- 使用Babel将ES6编译为ES5代码
- 使用Browserify编译打包js
