谈谈javascript中设计模式第一篇

最近看了一本《Javascript设计模式与开发实践》;这本书写的很不错,书中举的例子也很通俗易懂。一早就想抽点时间写写的从中的感悟,好像也拖了好久了,什么课程设计呀,考试啦。今天终于静下来了。

首先我们来谈谈满大街都是的-单例模式:
单例模式的定义是:保证一个类仅有一个实例,并提供一个访问它的全局访问点。
单例模式虽然简单,但是在javascript这种弱类型的语言中却又着举足轻重的地位;它可以减少命名空间污染。尤其在大型的项目。十分重要。

var A={};//如果对象a是独一无二的,我们就定义了一个单例对象
A.sum=function(a,b){
    return a+b;
}
A.multiply=function(a,b){
    return a*b;
}
......

惰性单例:惰性单例指的是在需要的时候才创建对象实例。惰性单例是单例模式的重点,这种技术在实
际开发中非常有用,有用的程度可能超出了我们的想象。

Single.getInstance=(function(){
    var instance=null;
    return function(name){
        if(!instance){
            instance=new Single(name);
        }
    }
    return instance;
})();

//来一个具体的例子,生成一个遮幕,这是我们在开发中经常会遇到的。
    var createDiv=(function(){
    var div;
    return function(){
        div=document.createElement("div");
        div.style.width="100%";
        div.style.height="100%";
        div.style.zIndex="999";
        docment.body.appendChild(div);
    }
    return div;
})();

通用的惰性单例:

var getSingle = function( fn ){
    var result;
    return function(){
    return result || ( result = fn .apply(this, arguments ) );
    }
};

现在我们来说说策略模式:
策略模式的定义是:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换。
现在有一个问题是:根据用户的等级,返回用户每个月可领取的代金券数量。

var getVoucher=function(level){
    if(level=="H"){
        return 5;
    }
    if(level=="M"){
        return 3;
    }

    if(level=="L"){
        return 1;
    }
}

可以发现,这段代码十分简单,但是存在着显而易见的缺点。

  1. getVoucher函数比较庞大,包含了很多if-else 语句,这些语句需要覆盖所有的逻辑分支
  2. getVoucher 函数缺乏弹性,如果增加了一种新等级HH,那我们必须深入getVoucher 函数的内部实现,这是违反开放-封闭原则的。
  3. 算法的复用性差,如果在程序的其他地方需要重用用户每个月可领取的代金券数量?我们的选择只有复制和粘贴。

使用策略模式重构代码

//策略类
var levelH=function(){};
levelH.prototype.count=function(){
    return 5;
}
var levelM=function(){};
levelM.prototype.count=function(){
    return 3;
}
var levelL=function(){};
levelL.prototype.count=function(){
    return 1;
}
//
 var personLevel=function(){
    this.level=null;//原始等级
}
personLevel.prototype.setLevel=function(level){
    this.level=level;//设置等级
}
personLevel.prototype.setCount=function(count){//设置策略类
    this.count=count;
}
personLevel.prototype.getCount=function(){//获取代金券数量
    return this.count.count(this.level)
}

JavaScript 版本的策略模式

var   level={
    "H":function(){
                return 5;
        },
    "M":function(){
                return 5;
        },
    "L":function(){
                return 1;
        }
}
//
var personCount=function(level){
    return level[level]();
}
console.log(personCount('H'));//输出5;

1.策略模式利用组合、委托和多态等技术和思想,可以有效地避免多重条件选择语句。
2.策略模式提供了对开放—封闭原则的完美支持,将算法封装在独立的strategy 中,使得它们易于切换,易于理解,3.易于扩展。
4.策略模式中的算法也可以复用在系统的其他地方,从而避免许多重复的复制粘贴工作。
5.在策略模式中利用组合和委托来让Context 拥有执行算法的能力,这也是继承的一种更轻便的替代方案。
当然,策略模式也有一些缺点,但这些缺点并不严重。
首先,使用策略模式会在程序中增加许多策略类或者策略对象。其次,要使用策略模式,必须了解所有的策略类。

最后我们来聊聊代理模式:
代理模式是为一个对象提供一个代用品或占位符,以便控制对它的访问。
代理分为:保护代理,虚拟代理,远程代理,缓存代理等等。
保护代理用于控制不同权限的对象对目标对象的访问,但在JavaScript 并不容易实现保护代理,因为我们无法判断谁访问了某个对象。而虚拟代理是最常用的一种代理模式,下面我们主要说虚拟代理。

虚拟代理实现图片预加载:
在Web 开发中,图片预加载是一种常用的技术,如果直接给某个img 标签节点设置src 属性,
由于图片过大或者网络不佳,图片的位置往往有段时间会是一片空白。常见的做法是先用一张
loading 图片占位,然后用异步的方式加载图片,等图片加载好了再把它填充到img 节点里,这种
场景就很适合使用虚拟代理。

var myImage = (function(){
    var imgNode = document.createElement( 'img' );
    document.body.appendChild( imgNode );
    return {
        setSrc: function( src ){
            imgNode.src = src;
        }
  }
})();
myImage.setSrc( 'http:// imgcache.qq.com/music/photo/k/000GGDys0yA0Nk.jpg' );

我们把网速调至5KB/s,然后通过MyImage.setSrc 给该img 节点设置src,可以看到,在图片被加载好之前,页面中有一段长长的空白时间。现在开始引入代理对象proxyImage,通过这个代理对象,在图片被真正加载好之前,页面中将出现一张占位的菊花图loading.gif, 来提示用户图片正在加载。代码如下:

var myImage = (function(){
    var imgNode = document.createElement( 'img' );
    document.body.appendChild( imgNode );
    return {
        setSrc: function( src ){
        imgNode.src = src;
        }
    }
    })();
var proxyImage = (function(){
    var img = new Image;
    img.onload = function(){
         myImage.setSrc( this.src );
    }
    return {
            setSrc: function( src ){
            myImage.setSrc( 'file:// /C:/Users/svenzeng/Desktop/loading.gif' );
            img.src = src;
        }
    }
})();

缓存代理用于ajax异步请求数据
我们在常常在项目中遇到分页的需求,同一页的数据理论上只需要去后台拉取一次,这些已经拉取到的数据在某个地方被缓存之后,下次再请求同一页的时候,便可以直接使用之前的数据。
这里写图片描述
一个网页中有4个tab标签,每切换一个就从后台抓取相对性的数据显示到content中。用缓存代理的话,每个tab只需要从后台抓取一次数据,减少请求。

//缓存代理去保存数据
var proxyAjaxData=(function(){
    var cache={};
    return function(obj){//传入参数
        if(obj in cache){
            return cache[obj];//保存在cache中
    }
        return cache[obj]=getData();//从后台抓取的数据
    }
})();

本文章参考:《Javascript设计模式与开发实践》—–AlloyTeam出品

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值