本文共 2371 字，大约阅读时间需要 7 分钟。

Module的使用

Module的基本使用

• index.html

• export.js

// export 用于导出变量和函数// 1.1 导出变量 方式一// export let name = "zhangsan";// export let age = 19;// 1.2 导出变量 方式二let name = "zhangsan";let age = 19;export {
    name, age };let obj = {
     name: "list",  age: 30,};export {
    obj };// 2.1 导出函数 方式一export function addFn(a, b) {
     console.log(a + b);}// 2.2 导出函数 方式二function fn1() {
     console.log("fn1");}function fn2() {
     console.log("fn2");}export {
    fn1 as tempFn1, fn2 as tempFn2 };

• import.js

// import 用于导入其他模块// 1.1 导入// import { name, age } from "./export.js";// console.log(`你好，我叫${name},今年${age}岁了`);// 1.2 可以对变量取别名import {
    name as myName, age } from "./export.js";console.log(`你好，我叫${
     myName},今年${
     age}岁了`);// 1.3 导入的变量都是制度的，不能够被修改// age = 50; // Assignment to constant variable.// 1.4 导入的对象属性是可以修改的import {
    obj } from "./export.js";obj.age = 50;console.log(obj);// 2.1 导入函数add(10, 20); // 存在变量提升的效果import {
    addFn as add } from "./export.js";// 2.2 导入函数import {
    tempFn1, tempFn2 } from "./export.js";tempFn1();tempFn2();// module是静态导入// 不能使用表达式和变量那些运行时才能看到结果的代码// 报错1// let path = "./export.js";// import {tempFn3} from path;// 报错2// if (1 == 1) {
   //   import { addFn as test1 } from "./export.js";// }

Module其他使用

• index.html

• export.js

// export function fn1(args) {
   //   return args;// }// export function fn2(args) {
   //   return args * 2;// }// 1.1 默认输出// export default function () {
   //   console.log("temp");// }// export default 一个模块中只能由一个export default// 也可以导出classexport default class Person {
     constructor(name) {
       this.name = name;  }}

• import.js

// 整体加载方式// import * as obj from "./export.js";// console.log(obj);// console.log(obj.fn1(5));// console.log(obj.fn2(5));// 1.1 匿名加载// import myfn from "./export.js";// myfn();// 1.2 对比正常的加载// 结论：正常输出，导入时要加{}//       默认输出，导入时不要加{} [export default]// 导入classimport Person from "./export.js";let p = new Person("zhangsan");console.log(p);

Module复合写法

• index.html

• export.js

// 导入public.js的number1变量// 继续导出 给 import.js使用// 普通写法// import { number1 } from "./public.js";// export { number1 };// 复合写法export {
    number1 } from "./public.js";

• import.js

import {
    number1 } from "./public.js";console.log(number1);

• public.js

export let number1 = 10;

转载地址：http://qcclf.baihongyu.com/