JavaScript设计模式

一、单体模式
概念:单体模式是一个用来划分命名空间并将一批相关的属性和方法组织在一起的对象,如果他可以被实例化,那么他只能被实例化一次。
优点
1. 可以来划分命名空间,从而清除全局变量所带来的危险。
2. 利用分支技术来来封装浏览器之间的差异。
3. 可以把代码组织的更为一体,便于阅读和维护。
实例

var singleton = function( fn ){
    var result;
    return function(){
        return result || ( result = fn .apply( this, arguments ) );
    }
}
 
var createMask = singleton( function(){
 
	return document.body.appendChild( document.createElement('div') );
 
 })
二、工厂模式
概念 :提供创建对象的接口,意思就是根据领导(调用者)的指示(参数),生产相应的产品(对象)。
1.简单工厂模式 :使用一个类(通常为单体)来生成实例。
实例:
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();
    ...
  }
2.复杂工厂模式 :将其成员对象的实列化推到子类中,子类可以重写父类接口方法以便创建的时候指定自己的对象类型。
实例:
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;
}
应用场景:
(1)对象的构建十分复杂
(2)需要依赖具体环境创建不同实例
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值