ES6模块

Posted 2021-09-27 前端纸飞机

ES6引入了原生的模块化机制，其设计思想是在编译时就能确定模块的依赖关系，以及输入和输 出的变量。 ES6使用export和import来导出和导入模块。ES6的模块自动开启严格模式。

export 导出模块

a.js

//导出数摒
export let myName = "Tom";
export let myAge = 20;

//导出函数
export function sum(num1, num2) {
    return num1 + num2;
｝

//导出类
export class Myclass {
    constructor(length, width) {
        this.length = length;
        this.width = width;
    ｝
｝

//未导出，私有模快，无法从模抉外部访问
function sub(num1, num2) {
    return num1 - num2;
｝

//不必总是导出声明，可以导出引用
function mul(num1, num2) {
    return num1 * num2;
｝
export { mul }

import 导入模块

b.js

import { sum, mul, myAge} from "./a.js";
console.log(sum(1, myAge)); //21
console.log(mul(1, 2)); //2

重命名 as

a.js

function sum(num1, num2) {
    return num1 + num2;
｝
//as XX: 指定函数在模块外的名称
export {sum as add};


b.js

//导入时，须使用新名称add
import {add} from "./a.js";

a.js

function sum(num1, num2) {
    return num1 + num2;
｝
export {sum};

b.js

//as XX： 导入时重命名
import {sum as add } from "./a.js";
console.log(add(1, 2)); // 3

默认值default

//default关健字表示默认导出，每个模块只能设置一个默认的导出值

a.js 

export default function(num1, num2) { 
    return num1 + num2; 
｝ 

//或者 
function sum(num1, num2) { 
    return num1 + num2; 
｝ 

export default sum; 



b.js 

//导入默认值，注意这里没有使用大括号 
import sum from "./a.js"; 
console.log(sum(1, 2)); // 3 

import导入均为只读

import { a } from "./xx.js"
a = {};//error
import { a } from "./xx.js"
a.foe = "hello"; //a = { foo:'hello'}
//对象不能重新赋值（地址引用），但可以增删其中的属性。