Learning JavaScript Design Patterns 筆記

Learning JavaScript Design Patterns 說明許多javascript模式，在此作些筆記。

由於Javascript是個有「洞」的語言，因此試圖去理解別人寫的javascript程式碼，無疑是給自己找麻煩，而自己寫javascript若沒有採用好的模式，將來作維護時，也很容易就發生看不懂的狀況。因此，寫 javascript 之前，先了解可用的模式，是「初學者」必需要作的第一步。當然，直接看模式對初學者來說，會比較辛苦些，但至少看過一遍後，寫的程式比較有機會將來可以維護。以前作大型專案時，若前端用很多javascript，在作程式改版或維護時，至少80%就是打掉重寫! 跟 Java 比，javascript困難太多了。

由於該書的程式碼用長名稱，使得模式的「樣子」不易一眼看出來，所以將此書中的模式，用較短命名重寫，重點是方便一眼看出模式的樣子，實際命名時還是要注意使用常用的命名方式。


What is a Pattern? 什麼是模式

• Patterns are proven solutions 模式已驗證可提供解決方案
• Patterns can be easily reused 模式易於理解
• Patterns can be expressive 模式易於表達

---

The Constructor Pattern

// 1. Object Creation
var a = {};
var a = Object.create( Object.prototype );
var a = new Object();  

// Object keys and values
// 2.1 dot
a.k = "v";
var value = a.k;

// 2.2 Square bracket
a["k"] = "v";
var value = a["k"];

// 2.3 Object.defineProperty
Object.defineProperty( a, "k", {
    value: "v",
    writable: true,
    enumerable: true,
    configurable: true
});

// 2.4 Object.defineProperties
Object.defineProperties( a, {
  "k": { value: "v", writable: true },
  "l": { value: "w", writable: false}
});

// 3 Basic Constructors
function A(i, j) {
  this.i = i;
  this.j = j;
  this.total = function () { return this.i + this.j; };
  this.max   = function () { return Math.Max(this.i, this.j); };
}

// 4 Constructors With Prototypes
function A(i, j) {
  this.i = i;
  this.j = j;
}
A.prototype.total = function () { return this.i + this.j; };
A.prototype.max   = function () { return Math.Max(this.i, this.j); };

---

The Module Pattern

// Object Literals
var a = {
    k: "v",
    f: function () { return k; }
};

// The Module Pattern
var a = (function () {
  var k = "v";
  function up() { k = k.toUpperCase(); }
  return {
    publicK: "value",
    getK:   function () { return k; },
    setK:   function (value) { k = value; },
    getUpK: function () { up(); return k; }
  };
})();

// Import mixins
var a = (function (b, c) {
  var k = "v";
  function up() { k = k.toUpperCase() + b + c; }
  return {
    publicK: "value",
    getKBC: function () { return k + b + c; },
    setK:   function (value) { k = value; },
    getUpK: function () { up(); return k; },
  };
})(b ,c);

// Exports
var a = (function () {
  var b = {};

  var k = "v";
  function up() { k = k.toUpperCase(); }

  b.publicK = "value";
  b.getK    = function () { return k; };
  b.setK    = function (value) { k = value; };
  b.getUpK  = function () { up(); return k; }

  return b;
})();

---

The Singleton Pattern

var singleton = (function () {
  var instance;

  function init() {
    var k = "v";
    function privateM(){ /* ... */ }
    return {
      publicK: "public",
      publicM: function () { privateM(); }
    };
  };
 
  return {
    getInstance: function () {
      if ( !instance ) { instance = init(); }
      return instance;
    }
  };
 
})();