常用的javascript设计模式

/*Basic Singleton*/var Singleton = {  attribute:true,  method1:function(){},　　 method2:function(){}};

var XMLHttpFactory =function(){};　　　　　　//这是一个简单工厂模式　　XMLHttpFactory.createXMLHttp =function(){　　　 var XMLHttp = null;　　　　if (window.XMLHttpRequest){　　　　　　XMLHttp = new XMLHttpRequest()　　　 }else if (window.ActiveXObject){　　　　　　XMLHttp = new ActiveXObject("Microsoft.XMLHTTP")　　　　}　　return XMLHttp;　　}　　//XMLHttpFactory.createXMLHttp()这个方法根据当前环境的具体情况返回一个XHR对象。　　var AjaxHander =function(){　　　　var XMLHttp = XMLHttpFactory.createXMLHttp();　　　　...　　}

var XMLHttpFactory =function(){};　   //这是一个抽象工厂模式XMLHttpFactory.prototype = {　　//如果真的要调用这个方法会抛出一个错误，它不能被实例化，只能用来派生子类　　createFactory:function(){ 　　throw new Error('This is an abstract class');　　}}var XHRHandler =function(){}; //定义一个子类// 子类继承父类原型方法extend( XHRHandler , XMLHttpFactory );XHRHandler.prototype =new XMLHttpFactory(); //把超类原型引用传递给子类,实现继承XHRHandler.prototype.constructor = XHRHandler; //重置子类原型的构造器为子类自身//重新定义createFactory 方法XHRHandler.prototype.createFactory =function(){　　var XMLHttp =null;　　if (window.XMLHttpRequest){ 　　XMLHttp =new XMLHttpRequest();　　}else if (window.ActiveXObject){ 　　XMLHttp =new ActiveXObject("Microsoft.XMLHTTP")　　}　　return XMLHttp;}

var single = (function(){  var unique;  function getInstance(){　　　　// 如果该实例存在，则直接返回，否则就对其实例化    if( unique === undefined ){      unique = new Construct();    }    return unique;  }  function Construct(){    // ... 生成单例的构造函数的代码  }  return {    getInstance : getInstance  }})();

var pubsub = {};  // 定义发布者(function (q) {  var list = [], //回调函数存放的数组，也就是记录有多少人订阅了我们东西    subUid = -1;  // 发布消息,遍历订阅者  q.publish = function (type, content) {    // type 为文章类型，content为文章内容    // 如果没有人订阅，直接返回    if (!list[type]) {      return false;    }    setTimeout(function () {      var subscribers = list[type],        len = subscribers ? subscribers.length : 0;      while (len--) {        // 将内容注入到订阅者那里        subscribers[len].func(type, content);      }    }, 0);    return true;  };  //订阅方法，由订阅者来执行  q.subscribe = function (type, func) {    // 如果之前没有订阅过    if (!list[type]) {      list[type] = [];    }    // token相当于订阅者的id，这样的话如果退订，我们就可以针对它来知道是谁退订了。    var token = (++subUid).toString();    // 每订阅一个，就把它存入到我们的数组中去    list[type].push({      token: token,      func: func    });    return token;  };  //退订方法  q.unsubscribe = function (token) {    for (var m in list) {      if (list[m]) {        for (var i = 0, j = list[m].length; i < j; i++) {          if (list[m][i].token === token) {            list[m].splice(i, 1);            return token;          }        }      }    }    return false;  };} (pubsub));//将订阅赋值给一个变量，以便退订var girlA = pubsub.subscribe('js类的文章', function (type, content) {  console.log('girlA订阅的'+type + ": 内容内容为：" + content);});var girlB = pubsub.subscribe('js类的文章', function (type, content) {  console.log('girlB订阅的'+type + ": 内容内容为：" + content);});var girlC = pubsub.subscribe('js类的文章', function (type, content) {  console.log('girlC订阅的'+type + ": 内容内容为：" + content);});//发布通知pubsub.publish('js类的文章', '关于js的内容'); // 输出：// girlC订阅的js类的文章: 内容内容为：关于js的内容// test3.html:78 girlB订阅的js类的文章: 内容内容为：关于js的内容// test3.html:75 girlA订阅的js类的文章: 内容内容为：关于js的内容//girlA退订了关于js类的文章 setTimeout(function () {  pubsub.unsubscribe(girlA);}, 0);//再发布一次，验证一下是否还能够输出信息pubsub.publish('js类的文章', "关于js的第二篇文章");// 输出：// girlB订阅的js类的文章: 内容内容为：关于js的第二篇文章// girlC订阅的js类的文章: 内容内容为：关于js的第二篇文章

function Price(personType, price) {  //vip 5 折  if (personType == 'vip') {    return price * 0.5;  }   else if (personType == 'old'){ //老客户 3 折    return price * 0.3;  } else {    return price; //其他都全价  }}

// 对于vip客户function vipPrice() {  this.discount = 0.5;}vipPrice.prototype.getPrice = function(price) {　　return price * this.discount;}// 对于老客户function oldPrice() {  this.discount = 0.3;}oldPrice.prototype.getPrice = function(price) {  return price * this.discount;}// 对于普通客户function Price() {  this.discount = 1;}Price.prototype.getPrice = function(price) {  return price ;}// 上下文，对于客户端的使用function Context() {  this.name = '';  this.strategy = null;  this.price = 0;}Context.prototype.set = function(name, strategy, price) {  this.name = name;  this.strategy = strategy;  this.price = price;}Context.prototype.getResult = function() {  console.log(this.name + ' 的结账价为: ' + this.strategy.getPrice(this.price));}var context = new Context();var vip = new vipPrice();context.set ('vip客户', vip, 200);context.getResult();  // vip客户 的结账价为: 100var old = new oldPrice();context.set ('老客户', old, 200);context.getResult(); // 老客户 的结账价为: 60var Price = new Price();context.set ('普通客户', Price, 200);context.getResult(); // 普通客户 的结账价为: 200

var Interview = function(){};// 笔试Interview.prototype.writtenTest = function(){  console.log("这里是前端笔试题");};// 技术面试Interview.prototype.technicalInterview = function(){  console.log("这里是技术面试");}; // 领导面试Interview.prototype.leader = function(){  console.log("领导面试");};// 领导面试Interview.prototype.HR = function(){  console.log("HR面试");};// 等通知Interview.prototype.waitNotice = function(){  console.log("等通知啊，不知道过了没有哦");};// 代码初始化Interview.prototype.init = function(){  this.writtenTest();  this.technicalInterview();  this.leader();  this.HR();  this.waitNotice();};// 阿里巴巴的笔试和技术面不同，重写父类方法，其他继承父类方法。var AliInterview = function(){};AliInterview.prototype = new Interview();// 子类重写方法 实现自己的业务逻辑AliInterview.prototype.writtenTest = function(){  console.log("阿里的技术题就是难啊");}AliInterview.prototype.technicalInterview = function(){  console.log("阿里的技术面就是叼啊");}var AliInterview = new AliInterview();AliInterview.init();// 阿里的技术题就是难啊// 阿里的技术面就是叼啊// 领导面试// HR面试// 等通知啊，不知道过了没有哦

// 补打卡事件var fillOut = function (lateDate) {  this.lateDate = lateDate;};// 这是bigBossvar bigBoss = function (fillOut) {  this.state = function (isSuccess) {    console.log("忘记打卡的日期为：" + fillOut.lateDate + ", 补打卡状态：" + isSuccess);  }};// 助理代理大boss 完成补打卡审批var proxyAssis = function (fillOut) {  this.state = function (isSuccess) {    (new bigBoss(fillOut)).state(isSuccess); // 替bigBoss审批  }};// 调用方法：var proxyAssis = new proxyAssis(new fillOut("2016-9-11"));proxyAssis.state("补打卡成功");// 忘记打卡的日期为：2016-9-11, 补打卡状态：补打卡成功

var myImage = (function(){  var imgNode = document.createElement("img");  document.body.appendChild(imgNode);  return function(src){    imgNode.src = src;   }})();// 代理模式var ProxyImage = (function(){  var img = new Image();  img.onload = function(){    myImage(this.src);  };  return function(src) {        // 占位图片loading        myImage("http://img.lanrentuku.com/img/allimg/1212/5-121204193Q9-50.gif");    img.src = src;  }})();// 调用方式ProxyImage("https://img.alicdn.com/tps/i4/TB1b_neLXXXXXcoXFXXc8PZ9XXX-130-200.png"); // 真实要展示的图片

function ajaxCall(type,url,callback,data){  // 根据当前浏览器获取对ajax连接对象的引用  var xhr=(function(){    try {      // 所有现代浏览器所使用的标准方法      return new XMLHttpRequest();    }catch(e){}    // 较老版本的internet Explorer兼容    try{      return new ActiveXObject("Msxml2.XMLHTTP.6.0");    }catch(e){}    try{      return new ActiveXObject("Msxml2.XMLHTTP.3.0");    }catch(e){}    try{      return new ActiveXObject("Microsoft.XMLHTTP");    }catch(e){}    // 如果没能找到相关的ajax连接对象，则跑出一个错误。    throw new Error("Ajax not support in this browser.")  }()),  STATE_LOADED=4,  STATUS_OK=200;  // 一但从服务器收到表示成功的相应消息，则执行所给定的回调方法  xhr.onreadystatechange=function{    if(xhr.readyState !==STATE_LOADED){      return;    }    if(xhr.state==STATUS_OK){      callback(xhr.responseText);    }  }  // 使用浏览器的ajax连接对象来向所给定的URL发出相关的调用  xhr.open(type.toUpperCase(),url);  xhr.send(data);}// 使用方法ajaxCall("get","/user/12345",function(rs){  alert('收到的数据为：'+rs);})