ES6(四)：子產品化

概念

• 将一個大的程式檔案，拆分成許多小的檔案，然後将小檔案組合起來

好處

1. 防止命明沖突
   • 彼此互不幹擾，每個js檔案聲明的data不會沖突
2. 代碼複用
   • 可以把功能函數封裝成一個檔案，對外暴露一個接口，哪個項目想用直接用即可
3. 高維護性
   • 開發人員對檔案修改不會産生過多沖突
   • 更新隻需要對某一些子產品更新

子產品化規範産品

ES6之前的子產品化規範有:

前面是子產品規範，後面是産品

1. CommonJS => Node.js、Browserify(前端代碼的打包)
2. AMD => requireJS
3. CMD => seaJS

ES6子產品化文法

• 子產品功能主要由兩個指令構成:export 和 import
  • export 指令用于規定子產品對外接口
  • import 指令用于輸入其他子產品提供的功能

ES6子產品資料暴露文法彙總

1. 分别暴露

//分别暴露

export let school = 'GDUT';

export  function introduce () {
    console.log('廣工大挺牛的');
}
           

1. 統一暴露

//統一暴露

let school = 'gdut';

function tuanwei(){
    console.log('這裡是團委');
}

export {school,tuanwei}

           

1. 預設暴露

//預設暴露
export default {
    //暴露的資料(任意資料類型，對象居多)
    school:'gdut',
    name:'Joseph',
    change : function(){
        console.log(`${this.name}好像又變強了一點`);
    }
}
           

ES6子產品資料引入文法彙總

• 上面三個檔案分别是m1.js,m2.js,m3.js

• 以前的方式我們是通過script标簽引入，現在我們可以不用，然後在一個script中得到多個js檔案的資料

  1.通用的導入方式

import * as m1 from "./js/m1.js";
      //m1.js中所有暴露的資料都會放到變量m1中

      //引入 m2.js 子產品内容
      import * as m2 from "./js/m2.js";

      //引入 m3.js
      import * as m3 from "./js/m3.js";

      console.log(m3);
      //如果我們想要調用
      m3.default.change();

           

​ 2.利用結構指派形式

//2.利用解構指派形式
      import { school, tuanwei } from "./js/m2.js";
      //但這裡會存在重名問題
      //我們需要給它弄重名
      import { school as GDUT, introduce } from "./js/m1.js";
         console.log(GDUT);

           

• 如何解決預設暴露

//解決預設暴露
      //這裡是固定寫法,不能直接使用default,一定要給它别名
      //注意這裡m3.js暴露出來的輸出是一個對象
      //對象裡面有個defalut,defalut才是定義的屬性和方法
         import { default as m3 } from "./js/m3.js";
         m3.change();
           

3.簡便形式

//3.簡便形式，隻能針對預設暴露
      import m3 from "./js/m3.js";
      m3.change();
           

一般來說我們設定一個app.js()專門對于各個js子產品檔案的引入

//入口檔案


//子產品引入
import * as m1 from "./m1.js";
import * as m2 from "./m2.js";
import * as m3 from "./m3.js";

console.log(m1);
console.log(m2);
console.log(m3);
           

html中