CommonJS
阮一峰教程
node中使用的是commonjs规范
特点:适用于服务器。
require
1、执行被加载模块中的代码
2、得到被加载模块中的exports导出接口对象
exports
1、node是模块作用域,默认文件中的成员只在当前文件模块有效
2、对于希望可以被其他模块访问的成员,我们就需要把这些公开的成员都挂载到exports接口对象中就可以了
3、模块输出的值是值的缓存,不存在动态更新
var module = {
exports: {}
}
return module.exports
每个模块默认会提供exports变量:exports = module.exports
所有需要注意的是:不能直接给exports变量赋值,这样会切断exports与module.exports的引用关系
CommonJS加载模块时同步的,只有加载完成,才能执行后面的操作
AMD规范
AMD
参考1
参考2
特点:异步加载,适用于浏览器
所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成后,运行这个回调函数
require([module],callback)
RequireJS工具库遵守的是AMD规范
ES6
参考教程
特点:浏览器和服务器通用的模块解决方案。
使用:
export:规定模块的对外接口;export 存在动态更新;
/*profiles.js*/
导出变量:
export var firstname = 'es6'
导出函数:
export function add(x,y) {
return x+y
}
批量导出:
var firstname = 'es6'
var lastname = 'amd'
function add(x,y) {
return x+y
}
export { firstname, lastname , add}
导出时希望重命名 as
function v1() {}
export { v1 as test1}
注意
export导出时需要与模块内部的变量建立一一对应的关系。export不可以放在块级作用域内
错误写法:
export 1 不可以直接输出值
var m =1
export m 改正: export {m}
function f() {}
export f 改正:export {f}
import:输入其他模块提供的功能
import命令接收{},大括号里面指定从其他模块导入的变量名。大括号里的变量名必须与被导入模块(profiles.js)对外接口的名称相同
import { firstname,lastname,add } from './profiles.js'
希望重新定义名字 as
import { firstname as first} from './profiles.js'
import 输入的变量为只读,不允许修改接口,可改写接口属性
import语句会提升到整个模块的头部,首先执行。在编译阶段执行,代码运行前,静态执行。
整体加载
/*circle.js*/
function area(radius) {
return Math.PI * radius * radius;
}
function circumference(radius) {
return 2 * Math.PI * radius;
}
export { area, circumference }
/*main.js*/
/*逐一加载*/
import { area, circumference} from './circle.js'
/*整体加载*/
import { * as circle } from './circle.js'
console.log('圆面积:' + circle.area(5))
默认输出export default
不再指定名字
/*default.js*/
export default funtion() {
console.log('foo')
}
// 或者
funtion foo() {
console.log('foo')
}
export default foo // export default后可以不使用大括号{}
/*main.js*/
import foo from './default.js' // import后不再使用大括号{}
foo() // 'foo'
注意:
// 正确
export var a = 1
// 错误
export default var a =1
// 正确
var a =1
export default a
// 错误
export a
export 42
//正确
export default 42
// 解析
export default a 等同于 export { a as default }
网友评论