今天要來分享一下一些 Module Pattern 使用閉包強大的功能。

模組 (Module Pattern)

在 JS 中可以藉由使用閉包的特性，隱藏一些模組內資訊，並且選擇供外部的 API ，例如以下範例

function fooModule() {
  var something = 'hellow';
  var another = [1, 2, 3];

  function bar() {
    console.log(something);
  }

  function baz() {
    console.log(another.join(' ! '));
  }

  return {
    bar: bar,
    baz: baz,
  };
}

var someModule = fooModule();

someModule.bar(); // hellow
someModule.baz(); // 1 ! 2 ! 3

像是以上的範例
這種實作的方式也叫做 揭露模組，
要使用模組模式以下兩個條件

• 必須要有一個外層的包含函式，然後他必須至少被調用一次

  例如上範例的 var someModule = fooModule();

• 函式內至少必須要回傳一個內層函式，這樣才能讓該函式可以透過閉包存取該模組私有的資料或狀態。

除了上述做法外，還可以把它變成一個 IIFE(即刻調用函式)。

const foo =(function fooModule() {
  var something = 'hellow';
  var another = [1, 2, 3];

  function bar() {
    console.log(something);
  }

  function baz() {
    console.log(another.join(' ! '));
  }

  return {
    bar: bar,
    baz: baz,
  };
})();

foo.bar(); // hellow
foo.baz(); // 1 ! 2 ! 3

ES6 之後的模組

ES6 之後在模組概念新增了一級的語法支援，主要是可以經過模組系統載入之後，ES6 會把一個檔案當作一個個別的模組，每個模組都能匯入其他模組或是特定 API 的成員 ，或是能夠匯出自己公開的 API 成員。

這部分我很常用到呢 xD 但是我不知道他是 ES6 後新增的。

範例

// foo.js
import sayHellow from "bar";

const name = "robin"

function printHellowName(){
    console.log(`${sayHellow()}, ${name}`)
}

export printHellowName;

// bar.js

function sayHellow(){
    return `Hellow`
}

export sayHellow;

以上是今天的內容

連假終於到了尾聲，
我也從台南回到了台北，
還記得去年當兵時有人跟我說，
在連假就可以明顯看得出來有錢跟沒有錢的人的區別，
就是有錢人搭高鐵，沒錢的人搭台鐵人擠人，
我現在不算是有錢但是至少還搭的起高鐵，
但是這次連假我去台南...
卻還是像沙丁魚一樣xDD
我卻想不起來是誰跟我說的 (氣到想不起來xD)

寫文章似乎已經成為了生活的一部分，
雖然感覺會有一點掃興的感覺，

我： 等等等等!!再給我半小時，我寫完就走 Orz

發完文章後有種特別踏實的感覺，
今天是鐵人賽的第 20 天
剩餘 10 天!
還在努力的你也堅持住啊！！！
感謝你的觀看
我們明天見

參考來源：

你所不知道的 JS｜範疇與 Closures，this 與物件原型 (You Don't Know JS: this & Object Prototypes))