文章目录
1.模块化
将一个大的程序文件拆分成许多小的文件,然后再将小的文件组合起来。
2.模块化的好处
- 防止命名冲突
- 实现代码复用
- 高维护性
3.ES6模块化语法
模块化功能主要由2个命令构成 export和import
export命令用于规定模块的对外接口
import命令用于输入其他模块提供的功能
export和import的一个重要限制是他们必须在其他语句和函数之外使用。只能在模块顶部使用export。
4.导出的基本语法(export)
</script>
// example.js
export var color = 'red';
export let name = 'galaxy';
export const myNumber = 7;
// 导出函数
export function sum(num1,num2){
return num1+num2;
}
// 导出类
export class Rectange{
constructor(length,width){
this.length = length;
this.width = width;
}
}
</script>
5.导入的基本语法(import)
1.导入单个绑定
import {sum} from "./example.js"
console.log(sum(1,2));
2.导入多个绑定
import {sum,myNumber} from "./example.js"
console.log(sum(1,myNumber));
3.导入整个模块
import * as example from './example.js'
console.log(example.sum(1,example.myNumber))
在这段代码中,从example.js中导出的所有绑定都被加载到一个被称作example的对象身上,指定的导出会作为example的属性被访问。
如果多次重复执行同一句import语句,那么只会执行一次,而不会执行多次。
import { foo } from 'my_module';
import { bar } from 'my_module';
// 等同于
import { foo, bar } from 'my_module';
然foo和bar在两个语句中加载,但是它们对应的是同一个my_module实例
当从模块中导入一个绑定的时候,就像使用const定义一样,结果是无法定义一个同名变量,也无法在import语句之前使用标识符或改变绑定的值。
6.导入和导出式重命名
导出时重命名
function sum(num1,num2){
return num1+num2;
}
export {sum as add}
函数sum()时本地名称,add()是导出时使用的名称,即在另外一个模块要导入这个函数的时候,必须使用add这个名称。
导入时重命名
//将add重新命名为sum
import {add as sum} from "./example.js"
7.模块的默认值
1.导出默认值
由于函数被模块所代表,因此不需要名称。
export default function(num1,num2){
return num1+num2;
}
也可以在先定义函数,再将其导出为默认值
function sum(num1,num2){
return num1+num2;
}
export default sum;
2.导入默认值
import sum from "./example.js"
这里将模块导出的任何默认函数用sum来表示。
export var color = 'red';
export default function(num1,num2){
return num1+num2;
}
用逗号将默认和用{}包裹的非默认值分隔开,在import语句中import默认值必须排在非默认值前面。
import sum,{color} from "./example.js"
导出默认值时重命名
import {default as sum,color} from "./example.js"
8.export 与 import 的复合写法
import {sum} from "./example.js"
export {sum}
等同于
export {sum} from "./example.js"
9.浏览器的模块加载
浏览器使用 ES6 模块的语法如下。
<script type="module" src=""></script>
type属性设为module,所以浏览器知道这是一个 ES6 模块。