读书笔记-JavaScript面向对象编程（三）

setTimeout("alert('boo')",2000);//首参数是一个可以被eval执行的字符串，但应尽量避免
setTimeout(function(){alert('boo')},2000)//推荐：将相关函数调用封装在另一个函数中

<div onclick="alert('boo!')">click</div>

<div id="mybtn">click</div>
//以下JS部分
document.getElementById('mybtn').onclick=function(){alert('boo!')}

var btn=document.getElementById('mybtn');
btn.addEventListener('click',function(){alert('boo!')})

var xhr=new XMLHttpRequest();
xhr.onreadystatechange=myCallback;
xhr.open('GET','somfile.txt',true);
xhr.send('')

var xhr=new ActiveXObject('MSXML2.XMLHTTP.3.0');

var MYAPP={}
MYAPP.namespace=function(str){
  var parts=str.split('.'),curr=MYAPP;
  for(var i in parts){
    if(!curr[parts[i]]){curr[parts[i]]={}}
    curr=curr[parts[i]]
  }
}
MYAPP.namespace('dom.style');
//等价于如下
var MYAPP={
  dom:{
    style:{}
  }  
}

var MYAPP={};
MYAPP.event={
  addListener:null,
  removeListener:null
}
if(typeof window.addEventListener==='function'){
  MYAPP.event.addListener=function(el,type,fn){el.addEventListener(type,fn,false);}
  MYAPP.event.removeListener=function(el,type,fn){el.removeEventListener(type,fn,false);}
}else if(typeof document.attachEvent==='function'){//IE
  MYAPP.event.addListener=function(el,type,fn){el.attachEvent('on'+type,fn);}
  MYAPP.event.removeListener=function(el,type,fn){el.detachEvent('on'+type,fn);}
}else{//older browsers
  MYAPP.event.addListener=function(el,type,fn){el['on'+type]=fn;}
  MYAPP.event.removeListener=function(el,type,fn){el['on'+type]=null;}
}

var MYAPP={};
MYAPP.myevent={
  addListener:function(el,type,fn){
    if(typeof window.addEventListener==='function'){
      MYAPP.myevent.addListener=function(el,type,fn){el.addEventListener(type,fn,false);}
    }else if(typeof document.attachEvent==='function'){//IE
      MYAPP.myevent.addListener=function(el,type,fn){el.attachEvent('on'+type,fn);}
    }else{//older browsers
      MYAPP.myevent.addListener=function(el,type,fn){el['on'+type]=fn;}
    }
    MAAPP.myevent.addListener(el,type,fn);
  }
}

var MYAPP={};
MYAPP.dom=(function(){
  var _setStyle=function(el,prop,value){console.log('setstyle')}
  var _getStyle=function(el,prop){console.log('getstyle')}
  return {
    setstyle:_setStyle,
    getstyle:_getStyle,
    yetAnother:_setStyle
  }
})()
MYAPP.dom.setstyle=function(){alert('b')}//外部可以改写setstyle方法，yetAnother依然指向_setStyle

var single={};//最基本的单件模式

function Logger(){
  if(typeof global_log==='undefined'){global_log=this;}
  return global_log;
}
var a=new Logger();
var b=new Logger();
alert(a===b);//true,此方法产生全局变量global_log

var Logger=(function(){
  var instance=null;
  return {
    getinstance:function(){
      if(instance==null){instance=this};
      return instance;
    }
  }
})()
var a=Logger.getinstance();
var b=Logger.getinstance();
alert(a===b);//true,利用只执行函数和闭包来实现

//假如我有三个不同的构造器，它们功能相似，但处理细节不同
var MYAPP={};
MYAPP.dom={};
MYAPP.dom.Text=function(){
  this.insert=function(where){
    var txt=document.createTextNode(this.url);
    where.appendChild(txt)
  }
};
MYAPP.dom.Link=function(){
  this.insert=function(where){
    var link=document.createElement('a');
    link.href=this.url;
    link.appendChild(document.createTextNode(this.url));
    where.appendChild(link)
  }
};
MYAPP.dom.Image=function(){
  this.insert=function(where){
    var img=document.createElement('img');
    img.src=this.url;
    where.appendChild(img)
  }
};
//使用三个构造器的方法都一样，设置URL属性并调用insert方法
var t=new MYAPP.dom.Text();
t.url='http://www.baidu.com/1.jpg';
t.insert(document.body)
//如果我们暂时不知道创建哪种对象，需要根据用户触发按钮来决定，按钮提供type表示创建类型，如下
var o;
if(type ==='Text'){o=new MYAPP.dom.Text();
}else if(type ==='Link'){o=new MYAPP.dom.Link();
}else if(type ==='Image'){o=new MYAPP.dom.Image();}
o.url='http://...';
o.insert();
//添加工厂方法factory，避免如上判断
MYAPP.dom.factory=function(type){return new MYAPP.dom[type];}
var o=MYAPP.dom.factory(type);
o.url='http://...';
o.insert();

//装饰者模式实例:装饰一颗圣诞树
var tree={
  decorate:function(){console.log('确保树不会倒');}
};
//接着定义方法用于添加额外的装饰器，装饰器实现为构造器函数，都继承tree
tree.getDecorate=function(deco){tree[deco].prototype=this;return new tree[deco];}//让每一个装饰后对象的原型等于父级
//下面创建装饰器，将他们设置为tree的属性（保证命名空间），它们提供decorate方法，单先调用父类的decorate
tree.RedBalls=function(){
  this.decorate=function(){this.RedBalls.prototype.decorate();console.log('上面放一些红球')}
}
tree.BlueBalls=function(){
  this.decorate=function(){this.BlueBalls.prototype.decorate();console.log('下面放一些蓝球')}
}
tree.Angel=function(){
  this.decorate=function(){this.Angel.prototype.decorate();console.log('在树顶放一个小天使')}
}
//再把所有的装饰器都添加到基础对象上
tree=tree.getDecorate('BlueBalls')
tree=tree.getDecorate('Angel')
tree=tree.getDecorate('RedBalls')
tree.decorate();
//tree.Redballs的原型为父类tree.Angel的原型为父类tree.RedBalls的原型为父类tree(初始状态)
console.log(tree.getDecorate('BlueBalls').getDecorate('Angel').getDecorate('RedBalls'))

//先创建一个观察者，它包含由回调函数构成的订阅者数组，用于增加和删除订阅者的方法，publish授受并传递数据给订阅者，make将任意对象转变为发行商并添加上述方法
var observer={
  addSubscriber:function(callback){this.subscribers[this.subscribers.length]=callback;},
  removeSubscriber:function(callback){
    for(var i=0; i<this.subscribers.length;i++){if(this.subscribers[i]==callback){delete(this.subscribers[i])}}
  },
  publish:function(what){
    for(var i=0; i<this.subscribers.length;i++){if(typeof this.subscribers[i]==='function'){this.subscribers[i](what)}}
  },
  make:function(o){
    for(var i in this){o[i]=this[i];o.subscribers=[]}
  }
}
//接下来我们创建一些订阅者，它们可以是任意对象，唯一职责就是在发生重要事件时调用publish方法
var blogger={
  writeBlogPost:function(){var content='今天是'+new Date();this.publish(content);}
}
var latimes={
  newIssue:function(){var paper='火星人来地球了!';this.publish(paper);}
}
//它们都很容易转变为发行商
observer.make(blogger);
observer.make(latimes);
//于此同时，准备两个简单对象
var jack={
  read:function(what){console.log('我刚看了'+what)}
}
var jill={
  gossip:function(what){console.log('你没听到我的话，但'+what)}
}
//将他们订阅blogger，只需要提供事件发生时的回调函数
blogger.addSubscriber(jack.read);
blogger.addSubscriber(jill.gossip);
//当blogger写了新的博客时，jack和jill都会收到通知
blogger.writeBlogPost();
//任何时候jill都可以取消订阅，再推送时将不再收到通知
blogger.removeSubscriber(jill.gossip);
blogger.writeBlogPost();
//jilly也可以订阅latimes，因为一个订阅者可以对应多个发行商
latimes.addSubscriber(jill.gossip);
latimes.newIssue()