一炊林、寫出 構(gòu)造函數(shù)模式姥卢、混合模式、模塊模式渣聚、工廠模式独榴、單例模式、發(fā)布訂閱模式的范例奕枝。
//模塊模式
var Person =(function(){
var name = 'ahong';
function sayName(){
console.log(name);
}
return {
name:name,
sayName:sayName
}
})()
Person.sayName();
//構(gòu)造函數(shù)模式
function Person(){
this.name = name;
this.age = age;
}
Person.prototype.sayName = function(){
return this.name;
}
var student = new Person("ahong",23);
//構(gòu)造器方式與原型方式的混合模式
var Person = function(name, age) {
this.name = name;
this.age = age;
};
Person.prototype.sayName = function(){
console.log(this.name);
}
var Student = function(name, age, score) {
Person.call(this, name, age);
this.score = score;
};
//Student.prototype = Object.create(Person.prototype);
Student.prototype = create(Person.prototype);
function create (parentObj){
function F(){}
F.prototype = parentObj;
return new F();
};
Student.prototype.sayScore = function(){
console.log(this.score);
}
var student = new Student("饑人谷", 28, 99);
console.log(student);
//工廠模式
在函數(shù)內(nèi)創(chuàng)建一個對象棺榔,給對象賦予屬性及方法再將對象返回。
function createCar(name,age){
var oTemp = new Object();
oTemp.name = name;
oTemp.age = age;
oTemp.sayName = function(){
console.log(this.name);
}
return oTemp; // return出來一個對象 創(chuàng)建不同的引用
}
var c1 = createCar("tom","80");
c1.sayName();
//單例模式
var People = (function(){
var instance; // 用閉包來保存一個引用 不用重復(fù)創(chuàng)建
function init(){
console.log('1');
}
return {
createPeople:function(){
if(!instance){ // 執(zhí)行一次后引用就存在了 之后就不會再執(zhí)行了
instance = init();
}
return instance;
}
}
})()
var obj1 = People.createPeople();
var obj2 = People.createPeople();
obj1 === obj2; // 單例模式節(jié)約內(nèi)存 把原來存儲的類型return出來
//發(fā)布訂閱模式
var EventCenter = (function(){
var events = {}; // 儲存所有的key與value
function on(evt,handler){
events[evt] = events[evt] || [];
events[evt].push({
handler:handler
})
}
function fire(evt,args){
if(!events[evt]){ //沒有訂閱就不執(zhí)行
return;
}
for(var i=0; i<events[evt].length; i++){
events[evt][i].handler(args);
}
}
return{
on:on, // 訂閱
fire:fire // 觸發(fā)
}
})() // 處理異步場景
二隘道、使用發(fā)布訂閱模式寫一個事件管理器症歇,可以實現(xiàn)如下方式調(diào)用
Event.on('change', function(val){
console.log('change... now val is ' + val);
});
Event.fire('change', '饑人谷');
Event.off('changer');
var EventManager = (function () {
var event = {};
function on(evt,handler){
event[evt] = event[evt] || [];
event[evt].push({
handler: handler
})
}
function fire(evt,args) {
if(!event[evt]){
return
}
for(var i = 0; i<event[evt].length;i++){
event[evt][i].handler(args);
}
}
function off(evt) {
if(!event[evt]){
return
}else{
event[evt] = [];
}
}
return {
on: on,
fire: fire,
off: off
}
})()
EventManager.on('text:change', function(val){//添加數(shù)組
console.log('text:change... now val is ' + val);
});
EventManager.fire('text:change', '饑人谷');//運行
EventManager.off('text:change');//刪除