Coin163

首页 > JavaScript设计模式学习笔记

JavaScript设计模式学习笔记

2018阿里云全部产品优惠券(升级也可以使用,强烈推荐!!!)
领取地址https://promotion.aliyun.com/ntms/act/ambassador/sharetouser.html?userCode=gh9qh5ki&utm_source=gh9qh5ki

相关推荐:javaScript设计模式之装饰者模式

1.介绍        装饰者模式能够在不改变对象自身的基础上,在程序运行期间对对象动态的添加职责。与继承相比,装饰者是一种更加轻便灵活的做法,这是一种“即用即付”的方式。 2.实例引入 <span style="font-size:14px;"> var Plane = function(){}; Plane.p

设计模式可以帮助我们更好的解决一类问题,重复代码。
下面学习一下作为一名前端工程师应该掌握的设计模式:
1.单体模式,也叫单例模式

其实就是把自己的代码的作用变量全部放到一个命名空间下面,以便日后的维护和避免全局变量的使用。

var functionGroup = {
            name:'sufubo',
            method1:function () {
                //code
            },
            init:function () {
                // body...
            }
        }

大概就是这个样子就是单例模式。
2.工厂模式。就是把你要用的一部分功能专门交给一个对象去做,就好像这部分功能是他生产的一样,所以也叫做工厂模式。

//工厂模式
        var XMLHttpFactory = function () {};
        XMLHttpFactory.createXMLHttp = function () {
            var XMLHttp = null;
            if(window.XMLHttpRequest){
                XMLHttp = new XMLHttpRequest();
            }else if(window.ActiveXObject){
                XMLHttp = new ActiveXObject("Msxml2.XMLHTTP");
            }
            return XMLHTTP; 
        }
        var AjaxHandler = function(){
            var XMLHttp = XMLHttpFactory.createXMLHttp();
            //code
        }

3.桥梁模式,这个也是js中常用的一种模式,把抽象和实现隔离开来的一种方式。其实经常用:

element.onclick = function () {
 new eventHandler(element,param,callback);
        }

这种回调函数的模式就是桥接模式,在里面的处理函数中。尽可能多的暴露api,让里面的行为可控。

4.装饰者模式
就是为对象添加一些属性,所以叫装饰

var myText = {};
        myText.Decoration = {};
        myText.Core = function (myString) {
            this.show = function () {
                return myString;
            }
        }
        //装饰
        myText.Decoration.addQuestuibMark = function (myString) {
            this.show = function(){return myString.show()+'?';};
        }

5.门面模式
这是所有js的库,或者我们自己写的函数都会用到的准则。就是把功能都封装在内部,只给外部暴露相应的接口操作就行了,看了下面的例子,你会马上明白。

    var addEvent = function(el,type,fn){ 
        if(window.addEventListener){  
           el.addEventListener(type,fn); 
        }else if(window.attachEvent){  
           el.attachEvent('on'+type,fn); 
        }else{  
           el['on'+type] = fn;  
        }  
     } 

这就相当于一个门面了。只对外面暴露了一些接口。

6.适配器模式
顾名思义就是把一种接口模式转化为另外一种模式。就是跟适配器一样进行转换,看下面这个例子:

var strObj = {
            str1:"str1",
            str2:"str2",
            str3:"str3"
        }
        function interfaceMethod(str1,str2,str3){
            console.log(str1);
        }
        //适配器函数
        function adapterMethod (o) {
            interfaceMethod(o.str1,o,str2,o.str3);
        }
        adapterMethod(strObj);

7.享元模式
就是把多个使用同一个操作的对象封装成由(1)享元(抽离出来的外部对象和数据)(2)工厂(创造对象的工厂)(3)存储器(存储实例的对象和数组,供享元统一控制和管理)
下面的是我摘录别人的说的比较正规:
*应用场景

  1. 页面存在大量资源密集型对象;

  2. 这些对象具备一定的共性,可以抽离出公用的操作和数据

    相关推荐:设计模式笔记——装饰者模式

    应用场景举例:一碗普通的面条,加上几块红烧牛肉就是红烧牛肉面,再加上点辣椒就是香辣牛肉面,如果换成加老坛酸菜就是老坛酸菜面(这酸爽)。Java世界中的装饰者是 I/O类,如 <span style="font-size:18px;">InputStream is=new LineInputStream(new FileIn

关键

  1. 合理划分内部和外部数据。

既要保持每个对象的模块性、保证享元的独立、可维护,又要尽可能多的抽离外部数据。

  1. 管理所有实例

既然抽离出了外部数据和操作,那享元就必须可以访问和控制实例对象。在JavaScript这种动态语言中,这个需求是很容易实现的:我们可以把工厂生产出的对象简单的扔在一个数组中。为每个对象设计暴露给外部的方法,便于享元的控制。

优点

  1. 将能耗大的操作抽离成一个,在资源密集型系统中,可大大减少资源和内存占用;

  2. 职责封装,这些操作独立修改和维护;

缺点

  1. 增加了实现复杂度。

将原本由一个工厂方法实现的功能,修改为了一个享元+一个工厂+一个存储器。

  1. 对象数量少的情况,可能会增大系统开销。*

示例:

    //汽车登记示例 
     var Car = function(make,model,year,owner,tag,renewDate){  
     this.make=make;  
     this.model=model;  
     this.year=year;  
     this.owner=owner;  
     this.tag=tag;  
     this.renewDate=renewDate;  
     }  
     Car.prototype = {  
     getMake:function(){  
     return this.make;  
     },  
     getModel:function(){  
     return this.model;  
     },  
     getYear:function(){  
     return this.year;  
     },  
     transferOwner:function(owner,tag,renewDate){  
     this.owner=owner;  
     this.tag=tag;  
     this.renewDate=renewDate;  
     },  
     renewRegistration:function(renewDate){  
     this.renewDate=renewDate;  
     }  
     }  
     //数据量小到没多大的影响,数据量大的时候对计算机内存会产生压力,下面介绍享元模式优化后 
     //包含核心数据的Car类 
     var Car=function(make,model,year){  
     this.make=make;  
     this.model=model;  
     this.year=year;  
     }  
     Car.prototype={  
     getMake:function(){  
     return this.make;  
     },  
     getModel:function(){  
     return this.model;  
     },  
     getYear:function(){  
     return this.year;  
     }  
     }  
     //中间对象,用来实例化Car类 
     var CarFactory=(function(){  
     var createdCars = {};  
     return {  
     createCar:function(make,model,year){  
     var car=createdCars[make+"-"+model+"-"+year];  
     return car ? car : createdCars[make + '-' + model + '-' + year] =(new Car(make,model,year));  
     }  
     }  
     })();  
     //数据工厂,用来处理Car的实例化和整合附加数据 
     var CarRecordManager = (function() {  
     var carRecordDatabase = {};  
     return {  
     addCarRecord:function(make,model,year,owner,tag,renewDate){  
     var car = CarFactory.createCar(make, model, year);  
     carRecordDatabase[tag]={  
     owner:owner,  
     tag:tag,  
     renewDate:renewDate,  
     car:car  
     }  
     },  
     transferOwnership:function(tag, newOwner, newTag, newRenewDate){  
     var record=carRecordDatabase[tag];  
     record.owner = newOwner;  
     record.tag = newTag;  
     record.renewDate = newRenewDate;  
     },  
     renewRegistration:function(tag,newRenewDate){  
     carRecordDatabase[tag].renewDate=newRenewDate;  
     },  
     getCarInfo:function(tag){  
     return carRecordDatabase[tag];  
     }  
     }  
     })(); 

8.观察者模式
就是观察者观察被观察者有什么变换,而去产生什么处理。这种模式在js事件处理中比较常见

    //使用时间监听器可以让多个函数相应一个事件 
     var fn1 = function(){  
        //code 
    }  
     var fn2 = function(){  
        //code 
     }  
      addEvent(element,'click',fn1);  
     addEvent(element,'click',fn2)  
     //而时间处理函数就办不到 
     element.onclick = fn1;  
     element.onclick = fn2; 

9.命令模式
把命令封装成不同的对象,根据传进去参数的不同,使用不同的方法。

    car Calculator={  
        add:function(x,y){  
           return x+y;  
        },  
        substract:function(x,y){  
           return x-y;  
        },  
        multiply:function(x,y){  
           return x*y;  
        },  
        divide:function(x,y){  
           return x/y;  
        }  
     }  
     Calculator.calc = function(command){  
        return Calculator[command.type](command.op1,command.opd2)  
     };  
     Calculator.calc({type:'add',op1:1,op2:1});  
     Calculator.calc({type:'substract',op1:5,op2:2});  
     Calculator.calc({type:'multiply',op1:5,op2:2});  
     Calculator.calc({type:'divide',op1:8,op2:4}); 

这是我理解的几种模式,其他还有好多的设计模式。暂时没用到过,还不太理解就不说了。
原文js设计模式

原文

设计模式可以帮助我们更好的解决一类问题,重复代码。 下面学习一下作为一名前端工程师应该掌握的设计模式: 1.单体模式,也叫单例模式 其实就是把自己的代码的作用变量全部放到一个命名空间下

------分隔线----------------------------
阿里云优惠券
在线网页数据采集器