最佳实践
编写可维护的代码
方便他人维护自己写的代码
读源码即可理解
适应数据变化而不必完全重写
考虑到未来可能的扩展
便于调试
代码约定
缩进等代码格式化
注释
每个函数或方法都应该包含一个注释
描述目的及可能用到的算法、参数及返回值
大段代码，注释以描述任务
复杂的算法
Hack
给变量和函数合理命名
规则
变量名
名词
函数名
动词开始
返回布尔类型值
is-Non
不必担心名称的长度
变量类型透明
初始化一个值，暗示未来的变量类型
匈牙利标记法
变量名前多加一或多个字符表数据类型
类型注释
const name /:string/ = “Kevin”;
松散耦合
某个部分过分依赖另一部分，代码就是耦合过紧，难以维护，需要经常重写
HTML与JavaScript
事件绑定
innerHTML=””
JavaScript与CSS
使用js更改样式
推荐：动态更改样式类，而非更改特定样式
解耦应用逻辑/事件处理程序
从事件对象event中提取相关信息
只传event对象中的相关数据
将信息传送给处理应用逻辑的方法中
在应用层面的动作都不依赖于事件处理程序的执行
事件处理程序响应事件，获取并传递数据
应用逻辑负责接收入参，处理结果
编程实践
尊重对象所有权
不要修改不属于你的对象
不要为实例或原型添加属性/方法
不要重定义已存在的方法
创建新功能
创建包含所需功能的新对象，并用它与相关对象进行交互
创建自定义类型，继承需要进行修改的类型，添加额外功能
避免全局量
最多创建一个全局变量，让其他对象和函数存在其中
命名空间
避免与null比较
使用常量
值类型
多处用到的值应抽取为常量
任何用于显示的字符串应被抽取出来方便国际化
公共地方存放URLs
性能
避免全局查找
访问全局变量总要比访问局部变量慢，需要遍历作用域链
将在一个函数中会用到多次的全局对象存储为局部变量
document是全局的，优化：本地变量const doc = document;
避免with语句
with语句会创建自己的作用域，增加执行代码的作用域链长度
避免不必要的属性查找
算法复杂度
常数
O(1)
常数值查找
数组查找
对数
O(log n)
线性
O(n)
对象属性查找
一旦多次用到对象属性，应将其存储在局部变量中
将属性查找替换为值查找
平方
O(n2)
使用正确的算法、方法、数据结构
优化循环
减值迭代
从最大值开始，在循环中不断减值的迭代器更加高效
简化终止条件
避免属性查找或其他O(n)操作
简化循环体
使用后测试循环
for循环、while循环都是前测试循环
do…while为后测试循环
可以避免最初终止条件的计算
展开循环
确定次数的循环
消除建立循环和处理终止条件的额外循环
Duff装置
适用于处理大数据集
避免双重解释
避免使用eval, new Function, setTimeout解释字符串参数
最小化语句数
多个变量声明整合到一句
插入迭代值
自增操作符是后缀操作符，在最后才会执行
使用数组和对象字面量
[] & {}
不使用new Array() 和 new Object()
优化DOM
最小化现场更新
访问已显示的页面的一部分，浏览器要重新计算无数尺寸以进行更新
文档片段
DocumentFragment
document.createDocumentFragment()
减少现场更新及页面闪烁的问题
文档片段用作一个临时的占位符，添加的是片段中的子节点，本身不会被添加
创建dom节点
createElement()或appendChild()
innerHTML
小dom无优势，大dom有很大优势
后台使用html解析器而非js的dom调用，内部方法是编译好的，而非解释执行的，速度会快很多
尽可能做到一次性调用innerHTML，控制次数，最小化现场更新
事件代理
事件处理程序的数量和页面响应用户交互的速度之间负相关
依托于事件冒泡，将事件设置在更高层的节点上
HTMLCollection
最小化访问次数
可以一次文档查询后存储在变量中
什么情况会返回HTMLCollection对象
getElementsByTagName()
childNodes
attributes
document.forms || document.images
其他
原生方法较快
Math对象
Switch语句比复杂的if-else语句更快，调整case语句，按可能性排序
位运算符较快
部署
减少js文件数量，减少http请求次数，请求是web性能瓶颈之一
若有收获，就点个赞吧
0 人点赞
