JavaScript模式总结

最近在看《JavaScript Pattern》,做一下读书笔记。

基本技巧

单一var模式

只使用一个var在函数顶部进行变量声明。
优点:

  1. 提供单一的地址以查找到函数所需要的所有局部变量
  2. 防止变量在定义前就被使用的逻辑错误
  3. 帮助牢记要声明变量,以尽可能少地使用全局变量
  4. 更少的编码

声明变量时同时初始化变量,为变量赋初值。这样根据变量的初始值就知道使用这些变量的意图。
提升:JavaScript允许在函数的任意地方声明变量,无论在哪里声明,效果等同于在函数顶部声明。即:只要变量是在同一个范围(同一函数)里,就视为已经声明,哪怕是在变量声明前就使用。

for循环

好的for循环模式是将已经遍历过的数据的长度缓存起来。如以下代码所示:
for (var i = 0, max = myarray.length; i < max; i++) {...}
特别是当myarray不是数据,而是HTML容器对象(HTMLColltion)。每次访问任何容器的长度时,也就是在查询活动的DOM,而通常DOM操作是非常耗时的。

避免使用eval()

如果一定需要使用eval(),那么可以考虑new Function()来替代。
new Function()更多的类似于一个沙盒,无论在哪里执行,都仅仅能看到全局作用域。

字面量和构造函数

使用对象字面量模式

不要使用new Object()构造函数

使用数组字面量模式

判断是否是数组

if (typeof Array.isArray === 'undefined') {` Array.isArray = function (arg) { return Object.prototype.toString.call(arg) ==='[object Array]'; }}
注:Array.isArray是ES5新增的一个方法。

使用正则字面量模式

使用new RegExp()的原因之一至于,某些场景中无法事先确定正则模式,而只能在运行时以字符串方式创建。

使用错误对象字面量模式

throw {
    name:"myErrorType", 
    message:"oops",
    extra:"",
    remdy:genericErrorHandler
}

内置错误构造函数,比如Error()、SyntaxError()、TypeError()等,构造函数创建的错误对象具有下列属性:

a = new Error("test")
Error: test(…)
a.name
"Error"
a.message
"test"

设计模式

单例模式

针对一个“类”仅创建一个对象。

工厂模式

根据字符串指定的类型在运行时创建对象的方法

迭代器模式

提供一个API来遍历或操纵复杂的自定义数据结构

装饰者模式

通过预定义装饰者对象中添加功能,从而在运行时调整对象

策略模式

在选择最佳策略以处理特定任务(上下文)的时候仍然保持相同的接口
代码的客户端可以使用同一接口来工作,但是策略模式根据上下文,从多个算法中选择用于处理特定任务的算法

外观模式

将常用方法包装到一个新方法中,从而提供一个更为便利的API

代理模式

通过包装一个对象以控制对它的访问,其主要方法是将访问聚集为组或仅当真正必要的时候才执行访问,从而避免高昂的操作开销。
在代理设计模式中,一个对象充当另一个对象的接口。它与外观模式的区别之处在于,在外观模式中,提供的是合并了多个方法调用的便利方法。代理则介于对象的客户端和对象本身之间,并且对该对象的访问进行保护。

中介者模式

在中介者模式中,独立的对象之间不直接通信,而是通过mediator对象。当其中的一个colleague对象改变状态以后,它将会通知该mediator,而mediator将会将该变化传达到任意其他应该知道此变化的colleague。

观察者模式

订阅与发布。通过创建“可观察”的对象,当发生一个感兴趣的事件时,可将该事件通告给所有观察者,从而形成松散耦合。

DOM和浏览器

与浏览器相对的特征检测

加速DOM访问和处理:批处理DOM操作、避免在循环中访问DOM、将DOM引用分配给局部变量(如style属性)、documentFragment

事件授权:减少为每个节点附件事件监听器数量

事件处理:尽量使用addEventListener方法体检onXXX,更清晰(一次单击后执行多个函数功能时,逻辑更简单)

async和defer:无依赖关系的时候使用async;defer最接近我们对于应用脚本加载和执行的要求

HTTP块

动态script元素

延迟加载:只在用户交互或者其他条件时才加载

按需加载

预加载

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,402评论 6 499
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,377评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,483评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,165评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,176评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,146评论 1 297
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,032评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,896评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,311评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,536评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,696评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,413评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,008评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,659评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,815评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,698评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,592评论 2 353

推荐阅读更多精彩内容

  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,622评论 18 399
  • 封二上的苏童,长得不难看,笑得也很温暖,甚至还有一点点羞涩,但写出来的小说,呃.....很意外。 五龙是从盛产大米...
    两个栗子阅读 330评论 0 2
  • 明月清疯 自来婆婆家,陪公婆小住,到今天已经七八天了,原来规律的生活几乎全都打破,每天除了吃,睡,心不在焉的,啥也...
    明月清疯阅读 495评论 0 1
  • 很多人认为“商业模式”和自己没有什么关系,因为印象中只有企业才有商业模式,大家普遍认为:企业靠商业模式赚钱;个人靠...
    0edb135f3eb9阅读 581评论 0 5
  • (三)农场风波(下) 苹果嘉儿的农库建好了,他充满信心地邀请我去同他一起刷漆。我也自信满满地开始了我的第二次友...
    友谊精灵阅读 317评论 0 3