早先要想在前端做模块化开发,必须依赖第三方框架来实现,如:requireJS(AMD规范的起源)和seaJS(CMD规范的起源)。因两者功能高度重合,后来seaJS不再维护。直到ES6的出现,迅速成为前端和服务器端通用的模块解决方案。
ES6
ES6的模块化分为导出(export)与导入(import)两个模块。它把一个文件当作一个模块,每个模块有自己独立租用与。外部要想读取模块当中的内容,就需要使用export将其暴露(输出)。
基本使用
//myModule.js
//export后只能跟function、class、var、let、const、default、{}
//export作用:给当前“模块对象”添加属性
export var name = 'test';//导出较少时推荐此方法
/******************myModule结束*************************************/
//a模块引入myModule模块
import { name } from "./myModule"//后缀可省略
console.log(name);//test
as重命名
避免导出名与当前模块变量命名起冲突等原因,需要改导出属性名,此时关键字“as”可实现该需求
import { name as myName } from "./myModule"//as指定接收的名字
console.log(myName );//test
多变量输出
多变量输出,可以将这些变量包装成对象进行模块化输出
//myModule.js
let myName = "test";
let myAge = 60;
let myfn = function(){
return "我叫" + myName + ",今年" + myAge + "岁"
}
export {
myName,
myAge,
myfn
}
/******************myModule结束*************************************/
//a模块引入myModule模块
import { myfn,myAge,myName } from "./test.js";
console.log(myfn());//我叫test,今年60岁
console.log(myAge);//60
console.log(myName);//test
也可以直接导出整个模块,使用*和as或者使用模块的default属性
方法1
import * as info from "./test.js";//通过*来批量接收,as 来指定接收的名字
console.log(info.myfn());//我叫test,今年60岁
console.log(info.myAge);//60
console.log(info.myName);//test
方法2
//myModule.js
let myName = "test";
let myAge = 60;
let myfn = function(){
return "我叫" + myName + ",今年" + myAge + "岁"
}
export default{
myName,
myAge,
myfn
}
/********myModule结束**************/
//a模块引入myModule模块
import myObj from "./myModule"
console.log(myObj.myName)//test
console.log(myObj.myfn());//我叫test,今年60岁
混合导出
//myModule.js
let myfn = function(){
return "我叫" + myName + ",今年" + myAge + "岁"
}
export default{ myfn }
export let myName = "test";
/********myModule结束**************/
//a模块引入myModule模块
import myfn,{ myName } from "./myModule"
console.log(myName)//test
console.log(myfn());//我叫test,今年60岁
CommonJS
Node中使用的模块化解决方案。
CommonJS规范规定,每个模块内部,module变量代表当前模块。这个变量是一个对象,它的exports属性(即module.exports)是对外的接口。加载某个模块,其实是加载该模块的module.exports属性。
//a.js
var a = 1;
var addA = function(value){
return value + a;
}
module.exports.a = a;
module.exports.addA = addA;
//b.js引入a.js
var obj = require('./a.js');
console.log(example.a); // 1
console.log(example.addA(1)); // 2
module.exports与exports的区别
exports = module.exports = {},exports 是 module.exports 的一个引用。
- require 引用模块后,返回的是 module.exports 而不是 exports。
- exports.xxx 相当于在导出对象上挂属性,该属性对调用模块直接可见
- module.exports 初始值为一个空对象 {},所以 exports 初始值也是 {}