简介
早期的javascript版本没有块级作用域、没有类、没有包、也没有模块,这样会带来一些问题,如复用、依赖、冲突、代码组织混乱等,随着前端的膨胀,模块化显得非常迫切。
模块就是一个实现特定功能的文件,有了模块我们就可以更方便的使用别人的代码,要用什么功能就加载什么模块。
模块化开发的四点好处:
(1)、 避免变量污染,命名冲突
(2)、提高代码复用率
(3)、提高了可维护性
(4)、方便依赖关系管理
常见的的JavaScript模块规范有:CommonJS、AMD、CMD、UMD、还有EC6的Module
CommonJS的了解
1、CommonJS的导出
function sum(num1, num2) {
return num1 + num2
}
var flag = true
if (flag) {
console.log(sum(10, 20))
}
//方式一:导出对象
module.exports = {
flag : flag,
sum : sum
}
//方式二:导出对象
module.exports = {
flag,
sum
}
2、CommonJS的导入
var {flag,sum} = require("./aaa")
console.log(sum(10,20));
if(flag){
console.log("flag is true");
}
注:CommonJS需要nodeJS支持,直接运行会报错
EC6的模块化开发
方法一:
这里是aaa.js,export(导出)
//1.直接默认导出
export let name = '小明'
//2.最后统一导出
function sum(num1, num2) {
return num1 + num2
}
var flag = true
if (flag) {
console.log(sum(10, 20))
}
export {
flag,sum,age
}
//3.导出函数
export function say(value) {
console.log(value);
}
//4.导出类
export class Person{
run(){
console.log("奔跑");
}
}
mmm.js,import(导入)
import {name,flag,sum,say,Person} from './aaa.js'
console.log(name)
if(flag){
console.log("小明是天才");
}
console.log(sum(20,30));
//函数和类
say('hello')
const p = new Person();
p.run();
方法二:
2、export default
aa.js:
var name = "小明";
export default name;
mian.js:
import n from "./aa.js";
console.log(n);
作用:
export和export default实现的功能相同,即:可用于导出(暴露)常量、函数、文件、模块等,以便其他文件调用。
区别:
(1)export导出多个对象,export default只能导出一个对象
(2)export导出对象需要用{ },export default不需要{ },如:
export {A,B,C};
export default A;
(3)在其他文件引用export default导出的对象时不一定使用导出时的名字,因为这种方式实际上是将该导出对象设置为默认导出对象
4、EC6的Module进行导入和导出,HTML的JS必须在script加上type="module",不然无法解析
<script src="b.js" type="module"></script>