JS设计模式（一）

(参考书籍 《JavaScript设计模式与开发实践》 曾探·著 人民邮电出版社)

单例模式

demo1

var Singleton= function (name) {  this.name=name;  this.instance=null;};Singleton.prototype.getName= function () {  console.log(this.name);};Singleton.getInstance= function (name) {  if(!this.instance){    this.instance=new Singleton(name);  }  return this.instance;};var a= Singleton.getInstance('dom');var b= Singleton.getInstance('bom');console.log(a === b); // true;a.getName(); // tomb.getName(); // tom

demo2

  var CreateDiv=(function(){    var instance;    var CreateDiv= function (html) {      if(instance){        return instance;      }      this.html=html;      this.start();      return instance=this;    };    CreateDiv.prototype.start= function () {      var div = document.createElement('div');      div.innerHTML=this.html;      document.body.appendChild(div);    };    return CreateDiv;  })();  var a = new CreateDiv('zhuge');  var b = new CreateDiv('zhaoyun');  console.log(a === b); // true

demo3

  var UniqueDiv= function (html) {    this.html=html;    this.start();  };  UniqueDiv.prototype.start= function () {    var div = document.createElement('div');    div.innerHTML=this.html;    document.body.appendChild(div);  };  var ProxyUniqueDiv=(function(){    var ins;    return function (html) {      if(!ins){        ins=new UniqueDiv(html);      }      return ins;    }  })();  var c = new ProxyUniqueDiv('赵云');  var d = new ProxyUniqueDiv('马超');  console.log(c === d); // true

demo4 -js

  // 使用命名空间  var namespace1={    a: function () {      console.log(111);    },    b: function () {      console.log(222);    }  };  // 使用闭包  var myOne = (function(){    var _name = 'zhuge';    var _age=66;    return {      getMsg: function () {        return _name+" : "+_age;      }    }  })();  console.log(myOne.getMsg()); // zhuge : 66

demo5 -base

  var createLoginLayer=(function(){    var div;    return function () {      if(!div){        div=document.createElement('div');        div.innerHTML='login window';        div.style.display='none';        document.body.appendChild(div);      }      return div;    }  })();  document.getElementById('btn').onclick= function () {    var loginLayer = createLoginLayer();    loginLayer.style.display='block';  };

demo6 -better

  var createLoginLayer= function () {    var div = document.createElement('div');    div.innerHTML = 'this is login window';    div.style.display = 'none';    document.body.appendChild(div);    return div;  };  var getSingle= function (fn) {    var result ;    return function () {      return result || ( result=fn.apply(this,arguments) );    }  };  var createSingleLoginLayer = getSingle(createLoginLayer);  document.getElementById('btn').onclick= function () {    var loginLayer=createSingleLoginLayer();    loginLayer.style.display='block';  };  var createSingleIframe=getSingle(function () {    var iframe = document.createElement('iframe');    document.body.appendChild(iframe);    return iframe;  });  document.getElementById('btn').onclick= function () {    var loginLayer= createSingleIframe();    loginLayer.src='https://www.baidu.com';  };