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元素

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

按需加载

预加载

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

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