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(); // tom
b.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';
  };