一、构造器模式
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源创计划”，欢迎正在阅读的你也加入，一块儿分享。设计模式