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方法,因此聪明的工程师们为了使添加的事件能够移除,事件回调函数中能够访问到事件源,并且可以向事件回调函数中传入自定义数据,才发明了函数绑定与柯里化技术。
等待者模式
等待者模式:通过对多个异步进程监听,来触发未来发生的动作。
js设计模式总结4的更多相关文章
- JS设计模式(一)
刚入职时,看过一段时间的设计模式,似懂非懂.不知不觉过去七个月了,对JS的理解更深刻了,数据结构与算法的基础也基本上算是过了一遍了,接下来要把设计模式搞定,然后不再深层次研究JS了,而是学习前端自动化 ...
- js设计模式(12)---职责链模式
0.前言 老实讲,看设计模式真得很痛苦,一则阅读过的代码太少:二则从来或者从没意识到使用过这些东西.所以我采用了看书(<js设计模式>)和阅读博客(大叔.alloyteam.聂微东)相结合 ...
- JS设计模式——5.单体模式
JS设计模式——5.单体模式 http://www.cnblogs.com/JChen666/p/3610585.html 单体模式的优势 用了这么久的单体模式,竟全然不知!用它具体有哪些好处呢? ...
- js 设计模式-接口
js模拟java接口检测函数:确保子类实现接口中的方法:(出自js设计模式) 上代码: <script type="text/javascript" > <%-- ...
- 前端笔记之JavaScript面向对象(三)初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发
一.ES6语法 ES6中对数组新增了几个函数:map().filter().reduce() ES5新增的forEach(). 都是一些语法糖. 1.1 forEach()遍历数组 forEach() ...
- [js]js设计模式小结
js设计模式小结 工厂模式/构造函数--减少重复 - 创建对象有new - 自动创建obj,this赋值 - 无return 原型链模式 - 进一步去重 类是函数数据类型,每个函数都有prototyp ...
- [js]设计模式小结&对原型的修改
js设计模式小结 工厂模式/构造函数--减少重复 - 创建对象有new - 自动创建obj,this赋值 - 无return 原型链模式 - 进一步去重 类是函数数据类型,每个函数都有prototyp ...
- js设计模式总结1
js设计模式有很多种,知道不代表会用,更不代表理解,为了更好的理解每个设计模式,对每个设计模式进行总结,以后只要看到总结,就能知道该设计模式的作用,以及模式存在的优缺点,使用范围. 本文主要参考张容铭 ...
- js设计模式-观察者模式
定义: 观察者模式又叫发布订阅模式,它定义了对象间的一种一对多的依赖关系.观察者模式让两个对象松耦合地联系在一起,虽然不太清楚彼此的细节,但这不影响他们之间的互相通信. 思路 定义一个对象,在对象中实 ...
- js设计模式:工厂模式、构造函数模式、原型模式、混合模式
一.js面向对象程序 var o1 = new Object(); o1.name = "宾宾"; o1.sex = "男"; o1.a ...
随机推荐
- js-随机图片
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...
- delphi 窗体自适应屏幕分辨率
delphi 窗体自适应屏幕分辨率 这是个困惑我很长时间的问题,到今天终于得到解决了. 话说Delphi有个很强的窗体设计器,这一点让VC粉丝垂涎三尺而不可得.但是,Delphi里设计的窗体并没有自动 ...
- ReportMachine常见问题
ReportMachine常见问题 2012-06-22 12:26:50| 分类: Delphi|举报|字号 订阅 下载LOFTER我的照片书 | 1.不打印特定的MemoVie ...
- hdu 1.3.4 shǎ崽 OrOrOrOrz
简单的排序,注意输出即可 #include <iostream> #include <algorithm> using namespace std; int main() { ...
- MySQL--REPALCE INTO操作
REPLACE INTO语法是MySQL数据库独特的扩展语法,可以提供“不存在即插入,存在即更新”的操作,MySQL官方文档解析其算法为: 1.尝试进行INSER 操作 2.如果INSERT 失败,则 ...
- 剑指offer编程题Java实现——面试题7用两个栈实现队列
题目:用两个栈实现一个队列.队列的声明如下:请实现他的两个函数appendTail和deleteHead, 分别完成在队列尾部插入节点和在队列头部删除节点的功能. package Solution; ...
- [leetcode.com]算法题目 - Plus One
Given a number represented as an array of digits, plus one to the number. class Solution { public: v ...
- DS-博客作业03--栈和队列
1.本周学习总结 第三章主要介绍栈和队列的基本概念,存储结构,基本运算算法设计和应用实例.从组成元素的逻辑关系来看,栈和队列都属于线性结构.栈和队列与线性表的不同之处就在于他们的相关运算具有一些特殊性 ...
- 【文文殿下】 [SDOI2013]保护出题人 题解
题解 我们把伤害-时间图像画出来.然后维护一下僵尸血量的前缀和.最好情况肯定是有一个僵尸恰好死在戴夫家门口.我们把原点到其他n个点的斜率最大的一个累积到答案. 发现每添加一个点,其他所有点的坐标都变了 ...
- 在centos使用redis几个坑
问题来源 最近公司的平台需要做一些分布式的规划,其中会话我们打算用redis来存储,因为之前也有了解过redis,但都是在windows上使用,为了发挥redis的优势,这次我们打算直接在Linux上 ...