iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 20
1
Modern Web

【這些年我似是非懂的 Javascript】系列 第 20

【這些年我似是非懂的 Javascript】Day 20 - 閉包 (Closure) # Part 2

今天要來分享一下一些 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))


上一篇
# 【這些年我似是非懂的 Javascript】Day 19 - 閉包 (Closure) # Part 1
下一篇
【這些年我似是非懂的 Javascript】Day 21 - 是這個不是那個的 this # Part 1.
系列文
【這些年我似是非懂的 Javascript】34

尚未有邦友留言

立即登入留言