最近在看《JavaScript Pattern》，做一下读书笔记。
基本技巧
单一var模式
只使用一个var在函数顶部进行变量声明。
优点：
- 提供单一的地址以查找到函数所需要的所有局部变量
- 防止变量在定义前就被使用的逻辑错误
- 帮助牢记要声明变量，以尽可能少地使用全局变量
- 更少的编码
声明变量时同时初始化变量，为变量赋初值。这样根据变量的初始值就知道使用这些变量的意图。
提升：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元素
延迟加载：只在用户交互或者其他条件时才加载
按需加载
预加载
网友评论