常見的6種JavaScript設計模式

構造函數模式

/*** 構造一個動物的函數 */
function Animal(name, color){this.name = name;this.color = color;this.getName = function(){return this.name;}
}
// 實例一個對象
var cat = new Animal('貓', '白色');
console.log( cat.getName() );

工廠模式

/*** 工廠模式*/
function Animal(opts){var obj = new Object();obj.name = opts.name;obj.color = opts.color;obj.getInfo = function(){return '名稱：'+obj.name +'， 顏色：'+ obj.color;}return obj;
}
var cat = Animal({name: '波斯貓', color: '白色'});
cat.getInfo();

模塊模式

/*** 模塊模式 = 封裝大部分代碼，只暴露必需接口*/
var Car = (function(){var name = '法拉利';function sayName(){console.log( name );}function getColor(name){console.log( name );}return {name: sayName,color: getColor}
})();
Car.name();
Car.color('紅色');

混合模式

/*** 混合模式 = 原型模式 + 構造函數模式*/
function Animal(name, color){this.name = name;this.color = color;console.log( this.name  +  this.color)
}
Animal.prototype.getInfo = function(){console.log('名稱：'+ this.name);
}function largeCat(name, color){Animal.call(null, name, color);this.color = color;
}largeCat.prototype = create(Animal.prototype);
function create (parentObj){function F(){}F.prototype = parentObj;return new F();
};largeCat.prototype.getColor = function(){return this.color;
}
var cat = new largeCat("Persian", "白色");
console.log( cat )

單例模式

/*** 在執行當前 Single 只獲得唯一一個對象*/
var Single = (function(){var instance;function init() {//define private methods and properties//do somethingreturn {//define public methods and properties};}return {// 獲取實例getInstance:function(){if(!instance){instance = init();}return instance;}}
})();var obj1 = Single.getInstance();
var obj2 = Single.getInstance();console.log(obj1 === obj2);

發布訂閱模式

/*** 發布訂閱模式*/
var EventCenter = (function(){var events = {};/*{my_event: [{handler: function(data){xxx}}, {handler: function(data){yyy}}]}*/// 綁定事件 添加回調function on(evt, handler){events[evt] = events[evt] || [];events[evt].push({handler:handler})}function fire(evt, arg){if(!events[evt]){return }for(var i=0; i < events[evt].length; i++){events[evt][i].handler(arg);}}function off(evt){delete events[evt];}return {on:on,fire:fire,off:off}
}());var number = 1;
EventCenter.on('click', function(data){console.log('click 事件' + data + number++ +'次');
});
EventCenter.off('click');   //  只綁定一次
EventCenter.on('click', function(data){console.log('click 事件' + data + number++ +'次');
});EventCenter.fire('click', '綁定');

?