1.写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。
//工厂模式
function createPerson(name,age,job){
var person = {
name:name,
age:age,
job:job,
sayName:function(){
console.log(this.name)
}
};
return person
}
var people = createPerson("Clark","30","Doctor");
console.log(people.job);
people.sayName();
//构造函数模式
function Person(name){
this.name = name;
}
Person.prototype.sayName = function(){
console.log('my name is '+this.name)
};
var people1 = new Person("Clark");
people1.sayName();
//混合模式
function Person(name,sex){
this.name = name;
this.sex = sex;
}
Person.prototype.getName = function(){
console.log('my name is '+this.name)
};
function Male(name,sex,age){
Person.call(this,name,sex);
this.age = age;
}
Male.prototype = Object.create(Person.prototype);
Male.prototype.getAge = function(){
console.log(this.age)
};
Male.prototype.constructor = Male;
var Clark = new Male('Clark', '男', 27);
Clark.getName();
Clark.getAge();
console.log(Clark.sex);
//模块模式
var Person = (function(){
function People(name){
this.name = name;
}
People.prototype.sayName = function(){
console.log('my name is '+this.name)
};
return new People("Clark")
})();
var Person = (function(){
var name = "Clark";
return {
changeName: function(newName){
name = newName;
},
sayName: function(){
console.log(name);
}
};
})();
Person.sayName();
Person.changeName("xuyangjie");
Person.sayName();
//单例模式
var People = (function(){
var instance;
function init() {
//define private methods and properties
//do something
return {
//define public methods and properties
};
}
return {
createPeople: function() {
if (!instance) {
instance = init();
}
return instance;
}
};
}());
var obj1 = People.createPeople();
var obj2 = People.createPeople();
//发布订阅模式
var EventCenter=(function(){
var events={};
/*
{
my_event:[{handler:function(data){xxx}},{handler:function(data){zzz}}]
}
*/
function on(evt,handler){
events[evt]=events[evt] || [];
events[evt].push({
handler:handler
})
}
function fire(evt,arg){
if(!events[evt]){
return
}
for(var i=0;i<events[evt].length;i++){
events[evt][i].handler(arg)
}
}
function off(evt){
delete events[evt];
}
return {
on:on,
fire:fire,
off:off
}
})()
EventCenter.on('my_evetn',function(){
console.log('my_event received...');
})
EventCenter.on('my_evetn',function(){
console.log('my_event22 received...');
})
EventCenter.fire("my_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={};
/*
{
my_event:[{handler:function(data){xxx}},{handler:function(data){zzz}}]
}
*/
function on(evt,handler){
events[evt]=events[evt] || [];
events[evt].push({
handler:handler
})
}
function fire(evt,arg){
if(!events[evt]){
return
}
for(var i=0;i<events[evt].length;i++){
events[evt][i].handler(arg)
}
}
function off(evt){
delete events[evt];
}
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('change');//不能在绑定change事件