一、構造器模式
function Car(model, year, miles) { this.model = model; this.year = year; this.miles = miles;}// Usage:var bmw = new Car('M4', '2019', '1000');
二、moModuleattern
對象文字符號javascript
模塊模式前端
AMD模塊java
CommonJS模塊web
ECMAScript Harmony模塊編程
var newObject = { variableKey：variableValue， functionKey：function（）{ //… }};
var testModule = (function() { var counter = 0; return { incrementCounter: function() { return ++counter; }, resetCounter: function() { counter = 0; } };})();// Usage:testModule.incrementCounter();testModule.resetCounter();
三、顯示模塊模式
var myRevealingModule = (function() { var privateVariable = 'not okay', publicVariable = 'okay'; function privateFun() { return privateVariable; }function publicSetName(strName) { privateVariable = strName; }function publicGetName() { privateFun(); }return { setName: publicSetName, message: publicVariable, getName: publicGetName };})();//Usage:myRevealingModule.setName('Marvin King');
四、單例模式
var singletonPattern = (function() { var instance; function init() { // Singleton function privateMethod() { console.log('privateMethod'); } var privateVariable = 'this is private variable'; var privateRandomNumber = Math.random(); return { publicMethod: function() { console.log('publicMethod'); }, publicProperty: 'this is public property', getRandomNumber: function() { return privateRandomNumber; } }; }return { // Get the singleton instance if one exists // or create if it doesn't getInstance: function() { if (!instance) { instance = init(); } return instance; } };})();// Usage:var single = singletonPattern.getInstance();
五、觀察者模式
-
學科 -
維護觀察者列表，添加或刪除觀察者的設施 -
觀察者 -
爲須要通知受試者狀態變化的對象提供更新的接口 -
具體主題 -
向狀態觀察者廣播通知，存儲具體觀察者的狀態 -
具體觀察者 -
存儲對ConcreteSubject的引用，爲觀察者實現更新的接口，以確保狀態與主題一致
function ObserverList() { this.observerList = [];}ObserverList.prototype.Add = function(obj) { return this.observerList.push(obj);};ObserverList.prototype.Empty = function() { this.observerList = [];};ObserverList.prototype.Count = function() { return this.observerList.length;};ObserverList.prototype.Get = function(index) { if (index > -1 && index < this.observerList.length) { return this.observerList[index]; }};//...
六、中介者模式
var mediator = (function() { var topics = {}; var subscribe = function(topic, fn) { if (!topics[topic]) { topics[topic] = []; } topics[topic].push({ context: this, callback: fn }); return this; };// publish/broadcast an event to the rest of the application var publish = function(topic) { var args; if (!topics[topic]) { return false; } args = Array.prototype.slice.call(arguments, 1); for (var i = 0, l = topics[topic].length; i < l; i++) { var subscription = topics[topic][i]; subscription.callback.apply(subscription.content, args); } return this; }; return { publish: publish, subscribe: subscribe, installTo: function(obj) { obj.subscribe = subscribe; obj.publish = publish; } };})();
七、原型模式
var myCar = { name: 'bmw', drive: function() { console.log('I am driving!'); }, panic: function() { console.log('wait, how do you stop this thing?'); }};//Usages:var yourCar = Object.create(myCar);console.log(yourCar.name); //'bmw'
八、工廠模式
function Car(options) { this.doors = options.doors || 4; this.state = options.state || 'brand new'; this.color = options.color || 'silver';}
九、Mixin模式
var Person = function(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; this.gender = 'male';};var clark = new Person('Clark', 'kent');var Superhero = function(firstName, lastName, powers) { Person.call(this.firstName, this.lastName); this.powers = powers;};SuperHero.prototype = Object.create(Person.prototype);var superman = new Superhero('Clark', 'Kent', ['flight', 'heat-vision']);console.log(superman); //output personal attributes as well as power
十、裝飾器模式
function MacBook() { this.cost = function() { return 997; }; this.screenSize = function() { return 11.6; };}// Decorator 1function Memory(macbook) { var v = macbook.cost(); macbook.cost = function() { return v + 75; };}// Decorator 2function Engraving(macbook) { var v = macbook.cost(); macbook.cost = function() { return v + 200; };}// Decorator 3function Insurance(macbook) { var v = macbook.cost(); macbook.cost = function() { return v + 250; };}var mb = new MacBook();Memory(mb);Engraving(mb);Insurance(mb);mb.cost(); // 1522
本文分享自微信公衆號 - web前端開發（web_qdkf）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。設計模式