js设计模式总结4

链模式

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

具体不多说;主要是方法最后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方法,因此聪明的工程师们为了使添加的事件能够移除,事件回调函数中能够访问到事件源,并且可以向事件回调函数中传入自定义数据,才发明了函数绑定与柯里化技术。

等待者模式

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

时间: 2024-08-25 12:31:12

js设计模式总结4的相关文章

JS设计模式(门面模式)

<!--JS设计模式(门面模式)--> // 门面模式的概念:简化API接口 最经典的就是事件 // 做一件事情: 必须要调用2个函数分别是 a , b //案例:获得页面上多个元素并设置css样式 window.onload=function(){ setCss(["div1","div2","div3"],{ background:"blue", color:"#fff" }); } fun

JS 设计模式(工厂模式环境搭建)

<!--引入的核心JS文件--> <script type="text/javascript" src="CommonUtil.js"></script> <script type=text/javascript charset=utf-8> <!--JS设计模式(工厂模式)--> //搭建一个工厂环境 //卖车店 function CarShop(){}; CarShop.prototype={ cons

js 设计模式学习(1)

最近一个人外出旅行 顺便在那座城市买了一本关于JS设计模式的书 供无聊的时候阅读 却发现小有收获 旅游回来以后立马写下心得 做了一个地图 并以此总结此次旅行的经过的地方 尝试1: 尝试写JS类 1 var TianDiTu = function (lat, lng, zoom) { 2 if (this instanceof TianDiTu) { 3 var zoomSize = { maxZoom: 18, minZoom: 5 }, 4 normalm = L.tileLayer.chin

JS设计模式(桥接模式)

<!--引入的核心JS文件--> <script type="text/javascript" src="CommonUtil.js"></script> <script type=text/javascript charset=utf-8> <!--JS设计模式(桥接模式)--> //桥接模式:主要是把抽象和现实分离开来,使他们独立开来 //应用场景:事件监听回掉机制 window.onload=func

JS设计模式(动态工厂模式)

<!--引入的核心JS文件--> <script type="text/javascript" src="CommonUtil.js"></script> <script type=text/javascript charset=utf-8> <!--JS设计模式(细粒度工厂模式)--> //搭建一个工厂环境 买什么车——(去什么店)卖车的店——卖车——生产车 //卖车店 super Shop 只有卖车的方

【转】JS设计模式开篇

(原文地址:http://blog.chinaunix.net/uid-26672038-id-3904513.html) 本文主要讲述一下,什么是设计模式(Design pattern),作为敲键盘的我们要如何学习设计模式.设计模式真的是一把万能钥匙么? 各个代码的设计模式几乎每个人都知晓,就算不会那也一定在一些装逼的大牛(部分而已)口中听过.但可能很少有人知道设计模式的由来: 设计模式该术语源自Erich Gamma等人在上世纪90年代从建筑设计领域引入到计算机科学的(很难想象到底有多大关联

JS设计模式(一)

刚入职时,看过一段时间的设计模式,似懂非懂.不知不觉过去七个月了,对JS的理解更深刻了,数据结构与算法的基础也基本上算是过了一遍了,接下来要把设计模式搞定,然后不再深层次研究JS了,而是学习前端自动化.linux.数据库.服务器等的基础知识. 设计模式的学习主要参考<JavaScript设计模式与开发实践>一书,很多笔记也会从该书抄录.开始JS设计模式的学习. 1.原型模式 原型模式既是一种设计模式,也是一种编程泛型.原型模式是JS最基础的继承实现,在这儿就不多讲了,写一下JS原型继承的基本原

【JS 设计模式 】用组合模式来实现树形导航--代码结构思路分析(一)

树导航效果图: 组合模式的描述: 将对象组合成树形结构以表示"部分-整体"的层次结构,组合模式使得用户对单个对象和组合对象的使用具有一致性. 我们把部分用Leaf表示, 把整体用Composite表示.组合模式是有一定规律的,在实现树导航的情况下,Composite需要包含一个以上Leaf,也可以包含一个以上Leaf和一个以Composite,为什么说要包含一个以上的,如果Composite不包含任何子child的话那么它就是Leaf,Leaf表示是最后一层结节. 树形导航代码片段:

【JS 设计模式 】用组合模式来实现树形导航--JS代码结构思路分析(二)

[JS 设计模式 ]用组合模式来实现树形导航--代码结构思路分析(一) 根据上一节中的HTML代码结构我们通过JS来渲染HTML代码,我们先提供一下JS的代码片段,这代码代码不是一个完整的代码是经过简化的.通过JS代码来分析如何组装HTML的 Composite类型的代码: function TreeComposite(id, name, total, level, last) { var root = document.createDocumentFragment(); var panel =

js 设计模式-接口

js模拟java接口检测函数:确保子类实现接口中的方法:(出自js设计模式) 上代码: <script type="text/javascript" > /** name:接口名称:字符串类型 arr_method:接口中的方法名称:数组形式['method1','method2',····] 可以定义接口名称和接口定义的方法名称, **/ var Interface = function(name,arr_method){ if(arguments.length!=2){