中级会员
 
- 威望
- 92
- 贡献
- 132
- 热心值
- 0
- 金币
- 0
- 注册时间
- 2020-12-16
|
# 模块化规范
- CommonJS
1. 说明
- 每个文件都可当作一个模块
- 服务器端：模块的加载是运行时同步加载的
- 浏览器端：模块需要提前编译打包处理
2. 基本语法
- 暴露模块
```js
exports.xxx = value
module.exports = value
```
- 引入模块
第三方模块：xxx为模块名，自定义模块：xxx为模块文件路径
```js
require('xxx')
```
3. 实现
- 服务端： nodeJs
- 浏览器端：browserify 打包commonjs cnpm i browserify -g cnpm i browserify -S
- AMD
1. 说明
- 专门用于浏览器端，模块的加载是异步的
2. 基本语法
- 暴露模块
- 定义没有依赖的模块
```js
define(function(){
})
```
- 定义有依赖的模块
```js
define(['module1','module2'],function (m1,m2) {
})
```
- 引入模块
```js
require(['module1','module2'],function(m1,m2){
})
```
3. 实现
require.js
- CMD
1. 说明
- 专用于浏览器端，模块的加载是异步的
- 模块使用时才会加载执行
2. 基本语法
- 暴露模块
- 定义没有依赖的模块
```js
define(function(require,exports,module){
exports.xxx = value
module.exports = value
})
```
- 定义有依赖的模块
```js
define(function(require,exports,module){
var module2 = require('./module2')
// 异步加载
require.async('./module3',function(m3){
})
exports.xxx = value
})
```
- 引入模块
```js
define(function(require){
})
```
3. 实现
Seajs
- ES6
1. 说明
- 依赖模块需要编译打包处理
2. 基本语法
- 导出模块：export
- 引入模块：import
3. 实现
- 使用Babel讲ES6转化ES5
- browserify
cli: command line interface
babel-cli:
babel-preset-es2015 browserify
cnpm i babel-cli browserify -g
cnpm i babel-preset-es2015 -D : es6->es5
|
|
楼主: aping
[复制链接]
发表于 2020-12-26 16:37
