1、構(gòu)造函數(shù)constructor
function Contructor() {
// public
this.age = 18;
// private
var myname = 'tom';
// public
this.say = function () {
console.log('say');
};
Contructor.prototype.father = 'bob';
Contructor.prototype.tell = function () {
console.log('tell');
}
}
var contructor = new Contructor();
console.log(contructor.age);
console.log(contructor.myname);
console.log(contructor.father);
contructor.say();
contructor.tell();
2烛愧、模塊化 module
var module = (function () {
// private
var myname = 'tom';
// private
var say = function () {
console.log('say');
};
return {
father: 'bob',
tell: function () {
console.log('tell');
},
// 將私有方法公開
publicSay: say
}
})();
console.log(module.myname);
console.log(module.father);
// module.say(); 私有方法無法使用
module.tell();
module.publicSay();
3油宜、揭示模塊 reavealing module
var revealingModule = function () {
function say() {
console.log('say');
}
function tell() {
console.log('tell');
}
return {
a: say,
b: tell
}
}();
revealingModule.a();
revealingModule.b();
4掂碱、單例模式 singleton
var singleton = (function () {
var instance;
function init() {
// private
function say() {
console.log('say');
}
var myname = 'tom';
var num = Math.random();
return {
// public
publicSay: say,
publicName: myname,
publicNum: num
}
}
return {
getInstance: function () {
if (!instance) {// 如果已經(jīng)有實(shí)例,則不再初始化慎冤。這樣全局就只有一個(gè)實(shí)例疼燥,不會重復(fù)實(shí)例化
instance = init();
}
return instance;
}
}
})();
console.log(singleton.getInstance().publicNum);
console.log(singleton.getInstance().publicNum);
5、觀察者模式 observer
- ObserverList 觀察者列表 : 就是用來儲存觀察者們的列表蚁堤,由Subject管理員進(jìn)行操作
- Subject 管理員 : 對觀察者進(jìn)行增刪改查操作醉者,通知觀察者進(jìn)行改變。
- Observer 觀察者 : 觀察目標(biāo)的變化违寿,接收到通知后湃交,更新自己的狀態(tài)。更新的內(nèi)容由觀察者自己決定藤巢。
- ConcreteSubject 目標(biāo) : 目標(biāo)發(fā)生變化時(shí)搞莺,向管理員報(bào)告,要求管理員發(fā)通知給觀察者掂咒,同時(shí)存儲自己的狀態(tài)
- 發(fā)布/訂閱模式 publish/subscribe
function Observer() {
this.list = [];
}
Observer.prototype = {
// 添加訂閱者
subscribe: function (obj) {
this.list.push(obj);
},
// 取消訂閱者
unsubcribe: function (obj) {
this.list = this.list.filter(function (item) {
if (item !== obj) {
return item;
}
})
},
publish: function (param) {
this.list.forEach(function (item) {
item.message = param;
})
}
};
var observer = new Observer();
var man1 = {age: 12, message: ''};
var man2 = {age: 13, message: ''};
observer.subscribe(man1);
observer.subscribe(man2);
observer.publish('hello');
console.log(man1.message, man1.age);
console.log(man2.message, man2.age);
observer.unsubcribe(man2);// 取消訂閱
observer.publish('hello2');
console.log(man1.message, man1.age);
console.log(man2.message, man2.age);
6才沧、中介者模式 mediator
var Mediator = (function () {
var list = [];
var subscribe = function (obj) {
list.push(obj);
};
var unsubscribe = function (obj) {
list = list.filter(function (item) {
if (item !== obj) {
return item;
}
})
};
var publish = function (param) {
list.forEach(function (item) {
item.message = param;
})
};
return {
Subscribe: subscribe,
Unsubscribe: unsubscribe,
Publish: publish
};
})();
Mediator.Subscribe(man1);
Mediator.Subscribe(man2);
Mediator.Publish('hello3');
console.log(man1.message, man1.age);
console.log(man2.message, man2.age);
7、原型模式 prototype
var Person = {
name: 'tom',
say: function () {
console.log('say');
}
};
// bob自身是空對象绍刮,但bob通過Object繼承了Person温圆,即bob擁有__proto__這個(gè)屬性,指向Pserson孩革,所以直接可以使用name和say屬性
var bob = Object.create(Person);
console.log(bob);
console.log(bob.name);
bob.say();
var cindy = Object.create(Person, {"age": {"value": "23"}});
console.log(cindy);
console.log(cindy.name);
cindy.say();
console.log(cindy.value);
// Object.create()的使用
var obj1;// 將沒有原型
obj1 = Object.create(null);
console.log(obj1);
var obj2;
obj2 = Object.create({});
console.log(obj2);
var obj3 = {};
console.log(obj3);
var obj4 = Object.create({}, {//會有p屬性岁歉,p屬性要用一個(gè)對象來定義,value值膝蜈,writable是否可寫
p: {value: 42, writable: true, enumerable: true, configurable: true}
});
console.log(obj4);
8锅移、命令模式 command
該模式旨在將方法調(diào)用、請示或者操作封裝到單一對象中饱搏。
(function () {
var Person = {// 封裝到單一對象
walk: function (step) {
step++;
return "我已經(jīng)走了" + step + "步";
},
say: function (name) {
return name;
}
};
console.log(Person.walk(2));// 在函數(shù)中執(zhí)行
console.log(Person.say('wlc'));
})();
9非剃、工廠模式 factory
理解,如果單單只是造個(gè)小車推沸,那直接定義小車并用來造車即可备绽,但如果要調(diào)用多個(gè)構(gòu)造函數(shù)來造車不同類型的車,就要工廠來鬓催,工廠根據(jù)定單中的參數(shù)造不同的車
//
// 造車工廠
//定義小車的構(gòu)造函數(shù)
function Car(option) {
this.doors = option.doors || 4;
this.brand = option.brand || '福特';
}
//定義卡車的構(gòu)造函數(shù)
function Truck(option) {
this.wheels = option.wheels || 4;
this.brand = option.brand || '東風(fēng)';
}
//定義工廠
function Factory() {
}
// 默認(rèn)創(chuàng)建小車
Factory.prototype.type = 'Car';
Factory.prototype.create = function (option) {
if (option.type === 'Car') {
this.createBy = Car;
} else {
this.createBy = Truck;
}
return new this.createBy(option)
};
var factory = new Factory();
var Benz = factory.create({
type: 'Car',
doors: 2,
brand: '奔馳'
});
console.log(Benz);
var Fute = factory.create({
type: 'Truck',
wheels: 6,
brand: '福特'
});
console.log(Fute);
10肺素、混入模式 mixin
沒有直接通過new來繼承,還是通過call來繼承了屬性深浮,再通過Object來繼承了原型
var Man = function (firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
this.sex = 'man';
};
var SuperMan = function (firstName, lastName, powers) {
Man.call(this,firstName,lastName);
this.powers = powers;
};
SuperMan.prototype = Object.create(Man.prototype);
var superMan = new SuperMan('a','b',['c','d']);
console.log(superMan);
11压怠、裝飾者模式 decorator
裝飾者模式和Mixin相類似,Decorator提供了將行為動態(tài)添加至系統(tǒng)的現(xiàn)有類的能力飞苇,裝飾本身對類原有的基本功能來說可能并不是必要的菌瘫,
不然最初的時(shí)候就應(yīng)該合并到父類中。裝飾者主要用于修改現(xiàn)有的系統(tǒng)布卡。希望在系統(tǒng)中為對象添加額外功能雨让,而不需要大量修改使用它們的底層代碼。
// 最初的類
function MacBook() {
this.cost = function () {
return 997;
};
this.size = function () {
return 11.6;
};
}
// 需要添加的插件,人具有改變最初的類的能力忿等,卻無須改動最初的類
function memory(macBook) {
var cost = macBook.cost();
mackBook.cost = function () {
return cost+70;
}
}
var mackBook = new MacBook();
memory(mackBook);
console.log(mackBook.cost());