iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 6
1
Software Development

模組化設計系列 第 6

Day06 - 常見的 JS 模組模式 (Pattern)

  • 分享至 

  • xImage
  •  

Javascript 並不像其他程式語言有內建命名空間 (namespace) 的概念,也沒有 privatepublic 語法,但你還是可以透過結構化的方式組織你的程式碼達到類似的效果。

模組模式 (Module Pattern)

  • 利用 closure 特性,將函式和變數限制在一個範圍內存取與使用。
const counter = (function() {
  // private variable
  let i = 0;

  // private function
  const hello = function() {
    // 略...
  };

  return {
    // public function
    get: function() {
      return i;
    },
    set: function(val) {
      i = val;
    },
    increment: function() {
      return ++i;
    }
  };
})();

counter.get(); // 0
counter.set(3);
counter.increment(); // 4
counter.increment(); // 5

揭示模組模式 (Revealing Module Pattern)

揭示模組模式模組模式變形的模式,選擇在最後的時候才決定哪些函式是應該被揭露出來,好處是讓程式碼更結構化,提升可讀性。

const counter = (function() {
  let i = 0;

  const hello = function() {
    // 略...
  };

  const get = function() {
    return i;
  };

  const set = function(val) {
    i = val;
  };

  const increment = function() {
    return ++i;
  };

  // public function
  return {
    getValue: get,
    setValue: set,
    increment: increment
  };
})();

typeof counter.getValue; // "function"
typeof counter.get; // "undefined"

資料來源


上一篇
Day05 - 模組化原則 - API 優先的設計導向
下一篇
Day07 - 與模組模式的第一次相遇
系列文
模組化設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言