1. 写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。
模块模式
var Person = (function(){
var name = 'liqi';
function sayName(){
console.log(name)
}
return {
name: name,
sayName: sayName
}
})() //把一个立即执行函数赋给对象，对象的属性隐藏在函数的return中，
//利用外部无法访问函数内的局部变量的特性，起到了封装的作用
Person.sayName() //liqi-
构造函数模式
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype.sayName = function(){
return(this.name)
};var person = new Person('liqi',24); console.log(person) //Person {name: "liqi", age: 24} person.sayName('liqi') //'liqi' -
混合模式，同时使用构造函数模式和继承
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype.sayName = function(){
console.log(this.name)
};var Student = function(name,age,grade){ Person.call(this,name,age) //使Person的this指向Student,使Student构造的对象继承Person的name, sex属性 this.grade = grade; }; Student.prototype = Object.create(Person.prototype); //指定Student的原型为Person，实现继承Person原型里的属性和方法 Student.prototype.sayGrade = function(){ console.log(this.grade) } var student = new Student('liqi',24,'senior'); console.log(student)
-
工厂模式
function createPerson(options){
var person = {
name: options.name || 'Mr.Lee',
age: options.age || '18'
}
person.sayName = function(){
console.log(this.name)
}
return person
}var p1 = createPerson({name: 'liqi', age: 24}); //以传入的参数创建对象 p1.sayName() //liqi 单例模式
var singlePerson = (function(){
var exist;
function init(){
//定义局部变量
return{
//定义属性和方法
};
}
return{
isExist: function(){
if(!exist){ //第一次创建对象,exist不存在，调用init()
exist = init();
}
return exist; //第二次创建，exist存在，返回相同的init()
}
};
})();
var p1 = singlePerson.isExist();
var p2 = singlePerson.isExist(); //p1 === p2 ,true,两次创建的对象，属性和方法相同-
发布订阅模式 解耦代码
var EventCenter = (function(){
var events = {};function on(e,fn){ //'event'==>e ,function(data){}==>fn events[e] = events[e] || []; //判断events中是否存在{ event: [] },没有则创建 events[e].push({ handler: fn //events：[ { handler: fn } ] }); } function fire(evt,args){ if(events[evt]){ return; } for (var i = 0; i < events[evt].length; i++) { //遍历events[evt]，有handler则执行handler：fn(args){} events[evt][i].handler(args); } } } return { on: on, fire: fire } })(); EventCenter.on('event',function(data){ console.log('event start') }) EventCenter.fire('event')
2. 使用发布订阅模式写一个事件管理器，可以实现如下方式调用
Event.on('change', function(val){
console.log('change... now val is ' + val);
});
Event.fire('change', '饥人谷');
Event.off('changer');
--------------------------------------
var Event = (function(){
var events = {};
function on(e,fn){ //'event'==>e ,function(data){}==>fn
events[e] = events[e] || []; //判断events中是否存在{ event: [] },没有则创建
events[e].push({
handler: fn //events：[ { handler: fn } ]
});
}
function fire(evt,args){
if(events[evt]){
return;
}
for (var i = 0; i < events[evt].length; i++) { //遍历events[evt]，有handler则执行handler：fn(args){}
events[evt][i].handler(args);
}
}
}
function off(evt,args){
delete events[e]
}
return {
on: on,
fire: fire,
off: off
}
})();
Event.on('change', function(val){
console.log('change... now val is ' + val);
});
Event.fire('change', '饥人谷'); //change... now val is 饥人谷
Event.off('changer');
