模块化概述
模块化就是将独立的一个功能封装到一个模块(文件)中,模块和模块之间是相互独立、相互隔离。
模块和模块之间虽然是相互独立的,但一个模块可以通过特定的接口公开自己的内部成员,以便让其它的模块可以使用或者访问自己的内部成员
模块化规范
浏览器端的模块化
1…AMD(Asynchronous Module Definition,异步模块定义)
代表产品为:Require.js
2…CMD(Common Module Definition,通用模块定义)
代表产品为:Sea.js
服务器端的模块化
服务器端的模块化规范是使用 CommonJS 规范:
- 使用 require 引入其他模块或者包
- 使用 exports 或者 module.exports 导出模块成员
- 一个文件就是一个模块,都拥有独立的作用域
ES6模块化
ES6模块化规范中定义:
- 每一个 js 文件都是独立的模块
- 导入模块成员使用 import 关键字
- 暴露模块成员使用 export 关键字
默认导出和默认导入
1.默认导出
let num = 10;
let name = '张三;
function show() {
console.log('1111111111111')
}
//属性名和属性值一样,可以只写一个
export default {
num,
name,
show
}
2.默认导入
import m1 from './test.js'
注意:在一个模块中,只允许使用export default向外默认暴露一次成员,千万不要写多个export default,否则会报错
另外,如果在一个模块中没有向外暴露成员,其他模块引入该模块时将会得到一个空对象
按需导入和导出
1.按需导出
export let num = 998;
export let myName = "jack";
export function fn = function() {
console.log("fn")
}
2.按需导入
import { num,fn as printFn ,myName } from "./test.js"
3.同时导入默认导出的成员以及按需导入的成员
import test,{ num,fn as printFn ,myName } from "./test.js"
注意:一个模块中既可以按需导入也可以默认导入,一个模块中既可以按需导出也可以默认导出
直接导入并执行代码
import "./test2.js";
test2.js
for (let i = 0; i < 3; i++) {
console.log(i)
}
上面的知识简单的总结,另外具体的可以参考这篇