链模式

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

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

等待者模式

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

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

  1. JS设计模式(一)

    刚入职时,看过一段时间的设计模式,似懂非懂.不知不觉过去七个月了,对JS的理解更深刻了,数据结构与算法的基础也基本上算是过了一遍了,接下来要把设计模式搞定,然后不再深层次研究JS了,而是学习前端自动化 ...

  2. js设计模式(12)---职责链模式

    0.前言 老实讲,看设计模式真得很痛苦,一则阅读过的代码太少:二则从来或者从没意识到使用过这些东西.所以我采用了看书(<js设计模式>)和阅读博客(大叔.alloyteam.聂微东)相结合 ...

  3. JS设计模式——5.单体模式

    JS设计模式——5.单体模式 http://www.cnblogs.com/JChen666/p/3610585.html   单体模式的优势 用了这么久的单体模式,竟全然不知!用它具体有哪些好处呢? ...

  4. js 设计模式-接口

    js模拟java接口检测函数:确保子类实现接口中的方法:(出自js设计模式) 上代码: <script type="text/javascript" > <%-- ...

  5. 前端笔记之JavaScript面向对象(三)初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发

    一.ES6语法 ES6中对数组新增了几个函数:map().filter().reduce() ES5新增的forEach(). 都是一些语法糖. 1.1 forEach()遍历数组 forEach() ...

  6. [js]js设计模式小结

    js设计模式小结 工厂模式/构造函数--减少重复 - 创建对象有new - 自动创建obj,this赋值 - 无return 原型链模式 - 进一步去重 类是函数数据类型,每个函数都有prototyp ...

  7. [js]设计模式小结&对原型的修改

    js设计模式小结 工厂模式/构造函数--减少重复 - 创建对象有new - 自动创建obj,this赋值 - 无return 原型链模式 - 进一步去重 类是函数数据类型,每个函数都有prototyp ...

  8. js设计模式总结1

    js设计模式有很多种,知道不代表会用,更不代表理解,为了更好的理解每个设计模式,对每个设计模式进行总结,以后只要看到总结,就能知道该设计模式的作用,以及模式存在的优缺点,使用范围. 本文主要参考张容铭 ...

  9. js设计模式-观察者模式

    定义: 观察者模式又叫发布订阅模式,它定义了对象间的一种一对多的依赖关系.观察者模式让两个对象松耦合地联系在一起,虽然不太清楚彼此的细节,但这不影响他们之间的互相通信. 思路 定义一个对象,在对象中实 ...

  10. js设计模式:工厂模式、构造函数模式、原型模式、混合模式

    一.js面向对象程序 var o1 = new Object();     o1.name = "宾宾";     o1.sex = "男";     o1.a ...

随机推荐

  1. centos下添加epel源

    RHEL以及他的衍生发行版如CentOS.Scientific Linux为了稳定,官方的rpm repository提供的rpm包往往是很滞后的,当然了,这样做这是无可厚非的,毕竟这是服务器版本,安 ...

  2. HDU 1556 区间查询

    Color the ball Time Limit: 3000 MS Memory Limit: 32768 KB 64-bit integer IO format: %I64d , %I64u Ja ...

  3. Java基础巩固——反射

    什么是反射 反射机制就是指程序运行时能够获取自身的信息.在Java中,只要给出类的名字,就可以通过反射机制来获取类的信息 哪里用的到反射机制 在jdbc中就是使用的反射来实例化对象,比如:Class. ...

  4. Lerning Entity Framework 6 ------ Introduction to TPT

    Sometimes, you've created a table for example named Person. Just then, you want to add some extra in ...

  5. dapper视频

    dapper是dotnet下的一种小巧快捷的ORM框架,本视频主要讲解了dapper的多库使用,以及常见的操作,如:对象查询.多集合查询,关联查询等,添加.修改.删除等. 视频地址:https://w ...

  6. safe close tcp connection

    https://blog.netherlabs.nl/articles/2009/01/18/the-ultimate-so_linger-page-or-why-is-my-tcp-not-reli ...

  7. CDH中如何升级Spark

    公司平时使用的CDH版本的hadoop生态,spark任务是基于yarn来管理的,而不是基于原生的spark master slave集群管理. 因此任务的大致启动模式是: 如果是Cluster模式: ...

  8. Javascript如何避免连续调用中取到不存在的属性而导致报TypeError错?

    背景: 在最近的 NODEJS 项目中,涉及到数据库的查询,回调函数里返回了查询结果,我这样做处理然后返回给前端: return results.collect_coupon[0].count 但是这 ...

  9. Shell - 简明Shell入门01 - 第一个脚本(HelloShell)

    示例脚本及注释 #!/bin/bash echo "hello shell!" # 打印字符串"hello shell!" echo "Date: & ...

  10. 关于SQL的常用操作(增、删、改、查)

    关于SQL的常见操作主要是增.删.改.查. 1.增,顾名思义就是新增数据(insert into).该语句用于向表中插入新纪录.insert into有两种用法. (1).无需指定要插入数据的列名,只 ...