js设计模式总结4

Posted 2020-08-08 huansky

链模式

链模式：通过在对象方法中将当前对象返回，实现对同一个对象多个方法的链式调用，从而简化多次调用该对象多个方法时的对该对象的多次引用。

具体不多说；主要是方法最后return this;

委托模式

委托模式：多个对象接受并处理同一请求，他们将请求委托给另一个对象同一处理请求。

比如所说的事件绑定，没必要将事件绑定在具体的元素上，可以将其绑定在父元素上，可以起到对页面的优化，比如减少绑定次数，对页面起到优化作用。

此外还可以处理一些内存外泄问题的存在。

举例子：比如当我们为某一具体元素绑定事件，其效果是该元素从页面中移除，但是其绑定的事件没有清除，会泄漏到内存中去。有一种方法是将元素的引用设置为null，但是这对标准浏览器来说是不需要的，他们采用的是标记清除的方式管理内存的。所以更好地办法是采用委托模式，通过判断事件的目标id来实现事件的响应。这样，即使目标元素被清除了，也不会引起泄漏。

委托模式解决了请求与委托者之间的耦合。通过被委托者对接收到的请求的处理后，分法给相应的委托者去处理。

 

数据访问对象模式

数据访问对象模式：抽象和封装对数据源的访问和存储，DAO通过对数据源链接的管理方便对数据的访问和存储。

具体看书，不好描述。注意点：我们再划分本地存储的时候，为了与其他的存储进行区分，需要添加特定的前缀来进行区分。

 

节流模式

节流模式：对重复的业务逻辑进行节流控制，执行最后一次操作并取消其他操作，以提高性能。

举例子：比如scroll事件，一进一出事件，图片较多的页面等等，都可以在采用节流模式进行优化。

以下是一个节流器：

var throttle=function(){
    //获取第一个参数
    var isClear=arguments[0],fn;
    //如果第一个参数是boolean类型那么第一个参数则表示是否清除计时器
    if(typeof isClear ===="boolean"){
        //第二个参数为函数
        fn=arguments[1];
        fn._throttleID && clearTimeout(fn._throttleID);
    //通过计时器延迟函数的执行
    }else{
        //第一个参数为函数
        fn=isClear;
        //第二个参数为函数执行时的参数
        param=arguments[1];
        var p={
            context:null,
            args:[],
            time；300
        }
        arguments.callee(true,fn);//清除计时器
        fn._throttleID=setTimeout(function(){
            //执行函数
            fn.apply(p.context,p.args)
        },p.time)

    }
}

其主要思想是：刚开始不管之前存不存在定时器，先清除一遍，然后再绑定计时器。如果时间一直在响应，就会一直清除，绑定，事件永远得不到响应。只有当你暂停，并超过一定的时间，才会执行响应函数。

对于图片的延迟加载，主要思想如下：判断图片的位置，决定是否加载，当停留在某处不动的时候，而此时可视区的图片也已经加载成功的话，就开始从头加载那些没有加载的。要达到这个目的，要求我们不能一开始就把img的src属性给定，而是通过从data-src中获取。

 

简单模板模式

简单模板模式：通过格式化字符串拼凑出视图避免创建视图时大量节点操作。优化内存开销。

好处：解决采用DOM操作创建视图时造成资源消耗大、性能低下、操作复杂等问题。用正则匹配方式去格式化字符串的执行的性能要高于DOM操作拼接的视图，并且这种方法被用于大型框架（如MVC等）创建视图操作中。

 

惰性模式

惰性模式：减少每次代码执行时重复性分支判断，通过对对象重新定义来屏蔽对原对象中的分支判断。

有两种表现形式：1是立即执行函数；2是在用的的时候再来抉择

//第一种方式
A.on=function(dom,type,fn){
    if(document.addEventListener){
        return function(dom,type,fn){
            dom.addEventListener(type,fn,false);
        }
    }else if(....){
            return function(dom,type,fn){}
        }else{
            return function(dom,type,fn){
                dom["on"+type]=fn;
            }
        }
}();
//第二种方式
A.on=function(dom,type,fn){
    if(document.addEventListener){
        A.on=function(dom,type,fn){
            dom.addEventListener(type,fn,false);
        }
    }else if(.....){
            A.on=function(dom,type,fn){}
        }else{
            A.on=function(dom,type,fn){
                dom["on"+type]=fn;
            }
        }
    A.on(dom,type,fn);
};

第一种会占用一些资源；第二种由于在第一次使用的时候会冲重新定义对象，以致第一次执行时间增加。

 

参与者模式

参与者模式：在特定的作用域中执行给定的函数，并将参数原封不动地传递。

具体看书。

参与者模式实际上是两种技术的结晶，函数绑定和函数柯里化。早期的浏览中并未提供bind方法，因此聪明的工程师们为了使添加的事件能够移除，事件回调函数中能够访问到事件源，并且可以向事件回调函数中传入自定义数据，才发明了函数绑定与柯里化技术。

 

等待者模式

等待者模式：通过对多个异步进程监听，来触发未来发生的动作。