模塊化編程

1.基本介紹

1. 傳統的非模塊化開發有如下的缺點：（1）命名沖突（2）檔案依賴
2. JavaScript代碼越來越龐大，JavaScript引入模塊化編程，開發者只需要實作核心的業務邏輯，其他都可以加載別人已經寫好的模塊
3. JavaScript使用“模塊”（module）的概念來實作模塊化編程，解決非模塊化編程問題，
4. 模塊化也是ES6新特性

2.模塊化編程原理示意圖

3.模塊化編程的分類

1. CommonJS模塊化規范/ES5的寫法
2. ES6模塊化規范

3.1CommonJS模塊化規范/ES5的寫法

3.1.1介紹

1. 每個js檔案就是一個模塊，有自己的作用域，在檔案中定義的變數、函式、類/物件，都是私有的，對其他js檔案不可見
2. CommonJS使用module.exports={}或者exports={}匯出模塊，使用let/const 名稱=require("xx.js")匯入模塊

3.1.2應用實體

1. 需求說明

   • 撰寫function.js，該檔案有函式，變數，常量，物件，陣列....
   • 要求在use.js，可以使用到function.js中定義的函式/變數/常量/物件
   • 請用模塊化編程的方式完成，盡量將各種寫法都寫一下

2. 思路分析

   

3. 代碼應用

   function.js

   //定義一些物件，變數，常量，函式等
   const sum = function (a, b) {
       return parseInt(a) + parseInt(b);
   }
   
   const sub = function (a, b) {
       return parseInt(a) - parseInt(b);
   }
   
   let name = "jack";
   
   const PI = 3.14;
   
   const monster = {
       name: "牛魔王",
       age: 500,
       hi() {
           console.log("hi 你好，牛魔王");
       }
   }
   
   //匯出
   /**
    * 1.module.exports 匯出模塊
    * 2.把你需要匯出的資料，寫入到{}中即可
    * 3.可以全部匯出，也可以部分匯出
    * 4.理解：相當于把所有匯出的資料當做一個物件
    * 5.如果屬性名和屬性值（即要匯出的函式/變數/物件...）的名字相同，可以簡寫
    * 6.module.exports ={} 也可以簡寫為 exports= {}
    */
   exports = {
       //簡寫
       sum,
       sub,
       name,
       PI
   }
   // module.exports = {
   //完整的寫法--屬性：屬性值
   // sum: sum,
   // sub: sub,
   // myname: name,
   // PI: PI
   // }
   

   use.js

   //匯入
   /**
    * 1.在es5中，通過require 把對應檔案.js 中的資料/物件 引入
    * 2.通過 物件.屬性 的形式使用
    * 3.如果我們匯入時，不需要所有的資料，可以匯入部分資料
    */
   const m = require("./function.js");
   const {sub} = require("./function.js");
   
   //使用
   console.log(m.sub("100", "200"));
   console.log(m.sum(10, 90));
   console.log(m.name);
   console.log(m.PI);
   console.log(sub(19, 3));
   

3.2ES6模塊化規范

3.2.1介紹

1. ES6使用

   （1）export{物件/函式/變數/常量等} （批量匯出）

   （2）export 定義 = {} （定義匯出）

   （3）export default {}（默認匯出）

   以上三種方式都可匯出模塊

2. 如果使用的是批量匯出或定義匯出的，匯入時要用import {} from "xx.js"形式

   如果用默認匯出的，匯入時要用 import 名稱 from "xx.js"形式

3.2.2應用實體-批量匯出形式

1. 需求說明

   • 撰寫common.js，該檔案有函式，變數，常量，物件
   • 要求在use_common.js中，可以使用到common.js中定義的 函式/變數/常量/物件
   • 請使用ES6模塊化編程的方式完成

2. 代碼實作

   common.js

   //定義一些物件，變數，常量，函式等
   const sum = function (a, b) {
       return parseInt(a) + parseInt(b);
   }
   
   const sub = function (a, b) {
       return parseInt(a) - parseInt(b);
   }
   
   let name = "jack";
   
   const PI = 3.14;
   
   const monster = {
       name: "牛魔王",
       age: 500,
       hi() {
           console.log("hi 你好，牛魔王");
       }
   }
   
   
   /**
    * es6之批量匯出
    * 1.export 就是匯出模塊/資料
    * 2.可以全部匯出，也可以部分匯出
    */
   export {
       sum,
       sub,
       name,
       monster
   }
   

   use_common.js

   /**
    * 匯入
    * 1.可以使用{} 來接識訓出的資料
    * 2.可以全部接收，也可以選擇的接收
    * 3.細節：匯入{}中的名字，要求和匯出{}中的名稱一致
    */
   import {monster, name} from "./common.js";
   
   //使用
   console.log(monster);
   console.log(name);
   

3.2.3應用實體-其他匯出形式

• 定義匯出

common2.js

//定義一些物件，變數，常量，函式等

//定義匯出
//定義sum函式時，就直接匯出
//如果在定義時匯出的資料，在匯入時要保持名稱一致
export const sum = function (a, b) {
    return parseInt(a) + parseInt(b);
}

use_common2.js

//可以匯入模塊/資料

import {sum} from "./common2.js";

//使用
console.log(sum(10, 40));

• 默認匯出

common3.js

//定義一些物件，變數，常量，函式等

//演示默認匯出
//可以這樣理解，類似于把{}內的資料當做一個物件匯出
export default {
    sum(a, b) {
        return parseInt(a) + parseInt(b);
    },
    sub(a, b) {
        return parseInt(a) - parseInt(b);
    }
}

use_common3.js

//匯入默認匯出的模塊/資料
//m的名稱是可以自定義的，因此就可以解決命名沖突的問題
import m from "./common3.js";

//以 物件.屬性 的形式使用
console.log(m.sum(11, 22));
console.log(m.sub(88, 66));

3.2.4注意事項和細節

1. ES6的模塊化無法在Node.js中執行，需要用Babel轉碼ES5后再執行
2. export不僅可以匯出物件，一切JS變數都可以匯出，比如：基本型別變數，函式，陣列，物件
3. 沒有匯出的資料不能使用
4. ES6的匯出方式有很多，不同的匯出方式對匯入方式也有影響

4.練習

1. 請撰寫一個檔案hw_common.js，該檔案有物件cat（屬性有name，age，cry() ），物件dog（屬性有name，age，hi() ）

   • 使用批量匯出
   • 使用定義匯出
   • 使用默認匯出

   hw_common.js

   （1）批量導出：

   const cat = {
       name: "貓貓",
       age: 2,
       cry() {
           console.log("喵喵");
       }
   }
   
   const dog = {
       name: "狗狗",
       age: 3,
       hi() {
           console.log("旺旺");
       }
   }
   
   //批量匯出
   export {cat,dog}
   

   （2）定義匯出

   export const cat = {
       name: "貓貓",
       age: 2,
       cry() {
           console.log("喵喵");
       }
   }
   
   export const dog = {
       name: "狗狗",
       age: 3,
       hi() {
           console.log("旺旺");
       }
   }
   

   （3）默認匯出

   //默認匯出
   //注意寫法有一些變化，把我們的兩個物件當做{}的屬性即可
   export default {
       cat: {
           name: "貓貓",
           age: 2,
           cry() {
               console.log("喵喵");
           }
       },
   
       dog: {
           name: "狗狗",
           age: 3,
           hi() {
               console.log("旺旺");
           }
       }
   }
   

2. 撰寫use_common.js，在該檔案中使用hw_common.js匯出的模塊/資料，注意體會使用特點

   匯入默認匯出的資料：

   //匯入默認匯出的資料
   import m from "./hw_common.js";
   //使用
   console.log(m.cat.name, m.cat.age, m.cat.cry());
   console.log(m.dog.name, m.dog.age, m.dog.hi());
   

   匯入 批量匯出或定義匯出 的資料：

   //匯入 批量匯出或定義匯出 的資料
   import {dog, cat} from "./hw_common.js";
   //使用
   console.log(dog.name,dog.hi());
   console.log(cat.name,cat.cry());
   

3. a.js有一個dog物件（含有hi()方法），b.js也有一個dog物件（含有say()方法），請使用模塊化的編程思路，在a.js能使用到不同的dog物件，請編程完成，

   使用默認匯出解決命名沖突

   b.js

   //默認匯出
   export default {
       dog: {
           say() {
               console.log("say...")
           }
       }
   }
   

   a.js

   const dog = {
       hi() {
           console.log("hi..")
       }
   }
   
   //匯入默認匯出的資料
   import dog2 from "./b.js";
   
   //使用
   console.log(dog2.dog.say(), dog.hi());
   

標籤：JavaScript

上一篇：可以一學的代碼優化小技巧：減少if-else冗余

下一篇：cookie、session,、token，還在傻傻分不清？