写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。
工厂模式(factory)
function Person(name, age){
var o = new Object();
o.name = name;
o.age = age;
o.sayName = function(){
console.log(o.name);
} ;
o.sayAge = function(){
console.log(o.age);
}
return o;
}
var stu = Person('小明', 18);
stu.sayName();
stu.sayAge();
缺点:无法获知对象的类型,它们全部都是Object;每次调用都创建一个新的引用
构造函数模式(constructor)
function Person(name, age){
this.name = name;
this.age = age;
this.sayInfo = function(){
console.log("my name: " + this.name + ", my age: " + this.age);
};
}
var stu = new Person("xiaoming", 18);
stu.sayInfo()
缺点:每创建一个对象,就要重新创建一个方法,而它们的方法是相同的,不同的是属性
混合模式(mixin)
function Person(name, age){
this.name = name;
this.age = age;
}
Person.prototype.sayInfo = function(){
console.log("my name: " + this.name + ", my age: " + this.age);
};
var stu = new Person("xiaoming", 18);
stu.sayInfo()
解决了构造函数模式中,每创建一个对象就创建一次方法的缺点,将它们的功能部分放到原型上,不同部分放在构造函数中
模块模式(module)
使用的是闭包方式,可以避免只对外暴露接口,内部的细节不对外提供
var Person = (function(){
// 对外隐藏私有变量
var _school = '希望小学';
function getSchool(){
console.log(_school);
}
// 只对外暴露接口
return {
school: getSchool
}
})();
console.log(Person._school); //undefined
Person.school();
单例模式(singleton)
var Person = (function(){
var instance ; //这个实例是最终要返回的
function init(name){
// 在这里面定义需要做的事
return {
name: name
};
}
return {
createPerson: function(name){
if (!instance) {
instance = init(name);
}
// 返回该实例
return instance;
}
};
})();
var hexon = Person.createPerson('hexon');
console.log(hexon.name);
其实就是字面量对象,在属性中添加方法
优点:节约内存
实例: 页面中弹出窗 一般使用单例模式,因为在一个页面下,一般只能允许一个对话框弹出
发布/订阅模式(publish/subscribe)
这是一种消息范式;
订阅者将需要订阅的事件注册到调度中心(可以理解为当事件到来时需要执行的代码),当事件触发时,发布者将事件发送到调度中心,由调度中心统一处理注册到调度中心的代码。
在web开发中主要用于处理异步事件
如下图:
代码示例
var events = (function(){
var topics = {};
var hOP = topics.hasOwnProperty;
return {
// 订阅者
subscribe: function(topic, listener){
// 判断topic属性是否在topics中
// 理解为:判断该事件是否订阅,如果没有订阅,则进行订阅,否则退出
let a = hOP.call(topics, topic);
// 如果不在,说明没有注册,则进行注册;否则退出
if (!a) topics[topic] = [];
let index = topics[topic].push(listener) - 1;
return {
remove: function(){
delete topics[topic][index];
}
};
},
// 发布者
publish: function(topic, info){
// 当topic这个事件没有注册,说明没有人订阅,因此直接返回
let b = hOP.call(topics, topic);
if(!b) return;
// 事件有人订阅了,执行订阅者的处理代码
topics[topic].forEach(function(item){
item(info != undefined ? info : {});
});
}
};
})();
// 先注册,只有先注册了,发布者发布消息的时候才能获取
var subscription = events.subscribe('/page/load', function(obj){
console.log('订阅的事件到了');
})
// 发布消息
events.publish('/page/load', {
url: '/some/url/path'
});
// 删除事件
subscription.remove();
参考:
设计模式:发布/订阅模式解析
Pub/Sub JavaScript Object
使用发布订阅模式写一个事件管理器,可以实现如下方式调用
var Event = (function(){
var topics = {};
var hOP = topics.hasOwnProperty;
return {
on: function(topic, listener){
topics[topic] = topics[topic] || [];
topics[topic].push({
handler: listener
});
},
fire: function(topic, args){
if (!hOP.call(topics, topic)){
return ;
}
topics[topic].forEach(function(item){
item.handler(args);
});
},
off: function(topic){
delete topics[topic];
}
};
})();
Event.on('change', function(val){
console.log('change... now val is ' + val);
});
Event.fire('change', '饥人谷');
Event.off('changer');
注意:
着重实践:单例模式和发布/订阅者模式;其他几种模式中,在实际开发中都已经是司空见惯的