524 前端模块化

 

JavaScript原始功能

---

匿名函数的解决方案

---

使用模块作为出口

---

CommonJS

---

export基本使用

---

导出函数或类

---

export default

---

import使用

---

aaa.js

var name = '小明'
var age = 18
var flag = true

function sum(num1, num2) {
  return num1 + num2
}

if (flag) {
  console.log(sum(20, 30));
}

// 1.导出方式一:
export {
  flag, sum
}

// 2.导出方式二:
export var num1 = 1000;
export var height = 1.88


// 3.导出函数/类
export function mul(num1, num2) {
  return num1 * num2
}

export class Person {
  run() {
    console.log('在奔跑');
  }
}

// 5.export default
// const address = '北京市'
// export {
//   address
// }
// export const address = '北京市'
// const address = '北京市'
//
// export default address

export default function (argument) {
  console.log(argument);
}

---

mmm.js

// 1.导入{}中定义的变量
import { flag, sum } from "./aaa.js";

if (flag) {
  console.log('小明是天才, 哈哈哈');
  console.log(sum(20, 30));
}

// 2.直接导入export定义的变量
import { num1, height } from "./aaa.js";

console.log(num1);
console.log(height);

// 3.导入 export的function、class
import { mul, Person } from "./aaa.js";
console.log(mul(30, 50));

const p = new Person();
p.run()

// 4.导入 export default中的内容
import addr from "./aaa.js";
addr('你好啊');

// 5.统一全部导入
// import {flag, num, num1, height, Person, mul, sum} from "./aaa.js";

import * as aaa from './aaa.js'
console.log(aaa.flag);
console.log(aaa.height);