技術標籤：vue

三、模組化開發

主要是以ES6的模組化開發進行設計

3.1 使用ES6的export進行匯出

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);
}

3.2 使用import進行匯入 然後在html介面進行引入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);