1. 写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。
-
构造函数模式
写一个函数，把私有属性绑定到函数内部的this上，
把一些私有方法写到函数的原型链上, 然后通过new 关键字来创建一个实例对象。
function Pepole(name, age) {
this.name = name;
this.age = age;
}
Pepole.prototype.sayName = funcion() {
return this.name;
};
var student = new Pepole("xsnowholy", 22);
console.log(student);
-
混合模式
建立在构造函数模式的基础上，实现子类继承父类的属性和方法，子类可以在扩展属性和方法。
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); //ES5方法，原型链继承
Student.prototype = create(Person.prototype);
function create (parentObj){ // 兼容IE
function F(){}
F.prototype = parentObj;
return new F();
};
Student.prototype.sayScore = function(){
console.log(this.score);
}
var student = new Student("xsnowholy", 22, 95);
console.log(student);
-
模块模式
使用立即执行函数包裹代码段，使内部的私有变量和方法不会暴露出来，通过return函数给外部提供使用内部方法的接口。
这样的好处是不会污染全局变量，外部无法访问或者改变模块内部的变量和方法。
var Pepole = (function(){
var name = "xsnowholy";
return {
sayName : function() {
console.log(name);
},
changeName : function(newName) {
name = newName;
}
}
})();
Pepole.sayName();
Pepole.changeName("萧雪圣");
Pepole.sayName();
-
工厂模式
工厂模式可以算是构造函数模式的基础版，
需要一个对象的时候可以通过这个函数创建一个对象，
但是这个对象没有构造函数，无法用 instanceof 的方法判断是否为实例。
function createPerson(opts){
var person = {
name: opts.name||'xsnowholy'
};
person.sayName: function(){
console.log(this.name);
}
return person;
}
var p1 = createPerson({name:'xsnowholy'});
var p2 = createPerson({name: '萧雪圣'});
-
单例模式
单例模式就是，如果你要使用这个函数创建一个对象，如果这个对象存在则直接返回这个对象，如果对象不存在则创建这个对象。
无论你使用这个函数多少次，得到的都是同一个对象。
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 = {};
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.length; i++) {
events[evt][i].handler(args); // 执行事件的多个方法
}
}
function off(evt) { // 删除事件
if(!events[evt]) return;
delete events[evt];
}
return {
on: on,
fire: fire,
off: off;
}
})();
EventCenter.on("myEvent", function(data){
console.log("myEvent received...");
})
//发布事件
EventCenter.fire("myEvent");
//订阅事件，如果该事件被添加发布过，则执行相应的函数方法
EventCenter.off("myEvent");
//删除事件 myEvent 事件
2. 使用发布订阅模式写一个事件管理器，可以实现如下方式调用
Event.on('change', function(val){
console.log('change... now val is ' + val);
});
Event.fire('change', '饥人谷');
Event.off('change');
var Event = (function() {
var events = {};
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.length; i++) {
events[evt][i].handler(args); // 执行事件的多个方法
}
}
function off(evt) { // 删除事件
if(!events[evt]) return;
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'); // 删除事件
网友评论