一、写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。
//模块模式
var Person =(function(){
var name = 'ahong';
function sayName(){
console.log(name);
}
return {
name:name,
sayName:sayName
}
})()
Person.sayName();
//构造函数模式
function Person(){
this.name = name;
this.age = age;
}
Person.prototype.sayName = function(){
return this.name;
}
var student = new Person("ahong",23);
//构造器方式与原型方式的混合模式
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);
//工厂模式
在函数内创建一个对象，给对象赋予属性及方法再将对象返回。
function createCar(name,age){
var oTemp = new Object();
oTemp.name = name;
oTemp.age = age;
oTemp.sayName = function(){
console.log(this.name);
}
return oTemp; // return出来一个对象 创建不同的引用
}
var c1 = createCar("tom","80");
c1.sayName();
//单例模式
var People = (function(){
var instance; // 用闭包来保存一个引用 不用重复创建
function init(){
console.log('1');
}
return {
createPeople:function(){
if(!instance){ // 执行一次后引用就存在了 之后就不会再执行了
instance = init();
}
return instance;
}
}
})()
var obj1 = People.createPeople();
var obj2 = People.createPeople();
obj1 === obj2; // 单例模式节约内存 把原来存储的类型return出来
//发布订阅模式
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]){ //没有订阅就不执行
return;
}
for(var i=0; i<events[evt].length; i++){
events[evt][i].handler(args);
}
}
return{
on:on, // 订阅
fire:fire // 触发
}
})() // 处理异步场景
二、使用发布订阅模式写一个事件管理器，可以实现如下方式调用
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){//添加数组
console.log('text:change... now val is ' + val);
});
EventManager.fire('text:change', '饥人谷');//运行
EventManager.off('text:change');//删除
