模块化概念
最开始 js 是没有模块化的概念的,就是普通的脚本语言放到 script 标签里,做些简单的校验,代码量比较少。随着 ajax 的出现,前端可以请求数据了,做的事情更多了,逻辑越来越复杂,就会出现很多问题。
- 全局变量冲突,因为大家的代码都在一个作用域,不同人定义的变量名可能重复,导致覆盖。
- 需要清楚相互的依赖关系,难以维护
模块化就是把复杂的问题分解成相对独立的模块,这样的设计可以降低程序复杂性,提高代码的重用,也有利于团队协作开发与后期的维护和扩展
其核心有三:
- 独立的作用域与依赖关系处理
- 如何导出模块内部数据
- 如果导入外部模块数据
JS模块化发展史
commonJS规范
模块内容及其导出:
commonjs.js
//模块内容
function sum(a,b){
return a+b;
}
function sub(a,b){
return a-b;
}
//模块导出
module.exports ={
sum,
sub
}
模块内容及其导入:
//模块引入(整个模块)
const math=require('./commonjs');
//模块内方法使用
const rs1=math.sub(2,1);
问题:
commonJS不适合浏览器端,它加载模块是同步的,会造成堵塞浏览器。
AMD规范
模块定义
独立模块(不需要依赖任何其他模块)
define({
method1: function(){},
method2: function(){},
})
define(function(){
returen {
method1: function(){},
method2: function(){},
}
})
非独立模块(需要依赖其他模块)
js复制代码 // 不带 .js 后缀
define(['module1', 'module2'], function(m1, m2){
returen {
m1.methodA: function(){},
m2.methodA: function(){},
}
})
模块调用
require(["a", "b"], function(a, b){
a.methodA()
})
ES6模块化
导出模块内部数据
// 导出单个特性
export let name1, name2, …, nameN;
export let name1 = …, name2 = …, …, nameN;
export function FunctionName(){...}
export class ClassName {...}
// 导出列表
export { name1, name2, …, nameN };
// 重命名导出
export { variable1 as name1, variable2 as name2, …, nameN };
// 默认导出
export default expression;
export default function (…) { … }
export default function name1(…) { … }
export { name1 as default, … };
var a = 1;
export default a;
// export default a 的含义是将变量 a 的值赋给变量 default 。
// 注意:正是因为export default命令其实只是输出一个叫做default的变量,所以它后面不能跟变量声明语句。
// export default var a = 1; 错误的
导入模块内部数据
import defaultExport from "module-name";
import * as name from "module-name";//将整个模块引用为名为name的对象
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";