编写JavaScript实践

最新推荐文章于 2023-02-23 10:45:00 发布

原创最新推荐文章于 2023-02-23 10:45:00 发布 · 241 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#代码规范 #性能 #持续发布

前端专栏收录该内容

15 篇文章

订阅专栏

本文探讨了JavaScript的编写最佳实践，包括代码可维护性、约定、注释规范以及变量命名。强调了解耦合，避免全局变量，使用常量以及性能优化策略，如避免全局查找、减少DOM交互和优化循环。同时提到了JavaScript代码部署过程中的压缩和验证方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最佳实践

编写可维护代码(直观性/可理解性/可适应性/可扩展性/可调试性)

代码约定
1. 注释(增加可读性)
2. 有意义的函数名/变量名
  - 变量名应为名词
  - 函数名应该以动词开头如get… ,返回值为布尔 is…
  - 避免无用变量名
3. 变量类型透明(初始化指定变量类型)
松散耦合
1. html/JavaScript 解耦(通过外部引入)
2. css/JavaScript 解耦(通过修改类名来操作样式)
3. 应用逻辑/事件处理程序解耦(将应用逻辑抽离成方法)
编程实践
- 避免全局变量
- 使用常量
  - 重复值
  - 用户界面字符串
  - urls
  - 任何可能会更改的值

性能

避免全局查找(使用全局变量和函数肯定比局部开销更大,因为要去作用域链上进行查找)
避免使用with(with会创建自己的作用域,主要用于消除额外字符串,可以使用局部变量达到效果)
最小化语句数量
优化Dom交互
- innerHTML
- 事件代理

选择正确的方法

避免双重解释代码
switch语句比if-else 快
位运算符比较快
原生方法比较快

避免不必要的属性查找

一旦多次用到对象属性,应该将其存储在局部变量中, 第一次访问该值会是O(n), 后续访问都会是O(1)

//有6次属性查找
var query = window.location.href.substring(window.location.href.indexOf("?"))
//有4次属性查找 节省了33%
var url = window.location.href
var query = url.substring(url.indexOf("?"))

循环优化
- 减值迭代
- 简化终止条件(避免属性查找或其他O(n)的操作)
- 简化循环体
- 后测试循环(减少一次判断)

展开循环(Duff装置)

针对大数据集使用,提升处理速度
通过计算迭代次数是否为8的倍数将一个循环展开为一系列语句

var iterations = Math.floor(vlaues.length / 8)
var leftover = values % 8
var i = 0
if(leftover > 0){
  do{
    process(values[i++])
  }while(--leftover > 0)
}
do {
  process(values[i++]);
  process(values[i++]);
  process(values[i++]);
  process(values[i++]);
  process(values[i++]);
  process(values[i++]);
  process(values[i++]);
  process(values[i++]);
} while (--iterations > 0);

JavaScript常见算法类型

标记	名称	描述
O(1)	常数	不管有多少值,执行事件都是恒定的,一般表示简单值和存储在变量中的值
O(log n)	对数	总的执行事件和值的数量相关,但是要完成算法不一定要获取每个值. 如二分查找
O(n)	线性	总执行时间和值的数量直接相关
O(n²)	平方	总执行时间和值的数量有关,每个值至少获取n次例如冒泡排序