js模块化规范---commonJs/ AMD /CMD /ES6
程序员文章站
2022-06-13 22:02:29
...
当项目功能越来越多,代码量便也会越来越多,后期的维护难度会增大,此时在JS方面就会考虑使用模块化规范去管理。
什么是模块?
将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起。
块的内部数据/实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信。
模块化
编码时时按照模块一个个编码的,整个项目就是一个模块化的项目,组合到一起。
模块化规范
- CommonJs
Node.js :服务器端
Browserify:浏览器端 也称为js 的打包工具
定义暴露模块 : exports
exports.xxx = value
module.exports = value
引入模块 : require
var module = require(‘模块名/模块相对路径’)
引入模块发生在什么时候?
-
Node : 运行时, 动态同步引入
-
Browserify : 在运行前对模块进行编译/转译/打包的处理(已经将依赖的模块包含进来了), 运行的是打包生成的js, 运行时不存在需要再从远程引入依赖模块
2 AMD : 浏览器端
- require.js
- 基本语法
- 定义暴露模块: define([依赖模块名], function(){return 模块对象})
- 引入模块: require([‘模块1’, ‘模块2’, ‘模块3’], function(m1, m2){//使用模块对象})
配置:
require.config({
//基本路径
baseUrl : ‘js/’,
//标识名称与路径的映射
paths : {
‘模块1’ : ‘modules/模块1’,
‘模块2’ : ‘modules/模块2’,
‘angular’ : ‘libs/angular’,
‘angular-messages’ : ‘libs/angular-messages’
},
//非AMD的模块
shim : {
‘angular’ : {
exports : ‘angular’
},
‘angular-messages’ : {
exports : ‘angular-messages’,
deps : [‘angular’]
}
}
})
3.CMD : 浏览器端
- sea.js
- 基本语法
- 定义暴露模块:
define(function(require, module, exports){
通过require引入依赖模块
通过module/exports来暴露模块
exports.xxx = value
})
使用模块seajs.use([‘模块1’, ‘模块2’])
- 定义暴露模块:
4 ES6
- ES6内置了模块化的实现
- 基本语法
-
定义暴露模块 : export
- 暴露一个对象:
export default 对象
暴露多个:
export var xxx = value1
export let yyy = value2
var xxx = value1
let yyy = value2
export {xxx, yyy}
引入使用模块 : import
default模块:
import xxx from ‘模块路径/模块名’
其它模块
import {xxx, yyy} from ‘模块路径/模块名’
import * as module1 from ‘模块路径/模块名’ - 暴露一个对象:
-
推荐阅读
-
再次梳理AMD、CMD、CommonJS、ES6 Module的区别
-
JavaScript模块化-CommonJS、AMD、CMD、UMD、ES6
-
前端模块化:CommonJS,CMD,AMD,ES6
-
一览js模块化:从CommonJS到ES6
-
详解搞清CommonJS、AMD、CMD、ES6的联系与区别
-
前端模块化小总结—commonJs,AMD,CMD, ES6 的Module
-
浅析JS中的模块规范AMD和CMD
-
javascript模块化之CommonJS、AMD、CMD、UMD、ES6
-
javascript模块化之CommonJS、AMD、CMD、UMD、ES6
-
JavaScript里面的模块化4种方式(CommonJS,AMD,CMD,es6Module)