//構造函數模式
function Person(name){
this.name=name
}
Person.prototype.sayHello=function(){
console.log('My name is '+this.name)
}
new Person('Tim').sayHello()//My name is Tim
//混合模式
function People(name, age) {
this.name = name;
this.age = age;
}
People.prototype.sayMyName = function() {
console.log('my name is ' + this.name);
}
//混合模式常用于實現繼承
//Student繼承People
function Student(name, age, major) {
People.call(this);
this.major = major;
}
//繼承People的prototype
Student.prototype = Object.create(People.prototype);
Student.prototype.constructor = Student;
Student.prototype.myMajor = function() {
console.log('my major is ' + this.major);
}
var tom = new Student('tom', '11', 'run');
tom.sayMyName();
tom.myMajor();
//模塊模式
var person=(function(){
var name='XiaoMing'
function sayHello(){
console.log('My name is '+this.name)
}
return{
name:name,
sayHello:sayHello
}
})()
//工廠模式
function creatPerson(opts){
opts=opts||{}
var person={
name:opts.name||'XiaoMing',
}
person.sayHello=function(){
console.log('My name is '+this.name)
}
return person
}
var p1=creatPerson({name:'Tim'})
var p2=creatPerson()
//單例模式
var people=(function(){
var name
function init(){
name='XiaoMing'
return name
}
return{
sayHello:function(name){
if(!name){
name=init()
}
return name
}
}
})()
//發布訂閱模式
var Event=(function(){
var events={}
//掛載事件
function on(event,handler){
events[event]=events[event]||[]
events[event].push({
handler:handler
})
}
//觸發事件
function fire(event,args){
if (!events[event]) return
for (var i = 0; i < events[event].length; i++) {
events[event][i].handler(args)
}
}
//清除事件
function off(event){
events[event]=[]
}
return{
on:on,
fire:fire,
off:off
}
})()
2.使用發布訂閱模式寫一個事件管理器,可以實現如下方式調用
var Event=(function(){
var events={}
//掛載事件
function on(event,handler){
events[event]=events[event]||[]
events[event].push({
handler:handler
})
}
//觸發事件
function fire(event,args){
if (!events[event]) return
for (var i = 0; i < events[event].length; i++) {
events[event][i].handler(args)
}
}
//清除事件
function off(event){
events[event]=[]
}
return{
on:on,
fire:fire,
off:off
}
})()
Event.on('change', function(val){
console.log('change... now val is ' + val);
});
Event.fire('change', '饑人谷');
Event.off('changer');