1.将数组的长度进行存储,循环时就不用每次去读取一次数组长度,从而提升性能
例如:
  for (var i = 0, len = arr.length; i < len; i++) {
      //do something...
}
2.js中所有 非空字符 ,非零,作布尔运算时,都会返回 true,反之返回 false。 (空格 属于非空字符)
例如:
if (value) {
//do something...
}
 
3.多层条件嵌套,进行 转换 或 拆分

//bad
if (user.id === 10) {
if (user.name !== "") {
if (user.email === "email") {
//do something...
}
}
} //good
if(user.id === 10 && user.name !=="" && user.email === "email") {
//do something...
} //good
if (user.id !== 10) return;
if (user.name === "") return;
if (user.email !== "email") return;
//do something...

4. 尽可能的减少DOM操作,将DOM操作放在循环体之外,数据处理好后,只执行一次DOM操作即可。

5.避免使用 连等号 声明赋值变量。js基础好点的同学都知道,这里存在着一个坑: b 会被声明为全局变量,意思就是在 test() 方法之外b也是可以被访问到的。  全局变量是不推荐使用的,容易污染环境。

6.

//bad
if (age > 20) {
console.log("年龄大于20");
}

//good
(age > 20) && console.log("年龄大于20");

这里的bad并不是说第一种写法不好,其实就可读性来说,第一种比第二种更好。 只是第二种写法更加优雅一点(个人觉得)。 这个句法可能有些同学用的比较少,解释一下:

如果第一个条件为 true ,那么就执行后面的语句,第一个条件为false, 后面的语句便不会执行。后面的语句可以是表达式,方法,或变量,常量都可以。 比如 (age > 20) && test()。

https://www.cnblogs.com/similar/p/5016424.html

 

  

javascript代码重构需要考虑的问题(一)的更多相关文章

  1. js基石之---易读、易复用、易重构的 JavaScript 代码规范

    易读.易复用.易重构的 JavaScript 代码规范 1.变量命名规范有意义 Bad: const yyyymmdstr = moment().format("YYYY/MM/DD&quo ...

  2. Web前端开发最佳实践(2):前端代码重构

    前言 代码重构是业内经常讨论的一个热门话题,重构指的是在不改变代码外部行为的情况下进行源代码修改,所以重构之前需要考虑的是重构后如何才能保证外部行为不改变.对于后端代码来说,可以通过大量的自动化测试来 ...

  3. 如何让你的JavaScript代码更加语义化

    语义化这个词在 HTML 中用的比较多,即根据内容的结构化选择合适的标签.其作用不容小觑: 赋予标签含义,让代码结构更加清晰,虽然我们可以在标签上添加 class 来标识,但这种通过属性来表示本体的形 ...

  4. ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(十二) 代码重构使用反射工厂解耦(一)缓存切换

    前言 上一篇中,我们用了反射工厂来解除BLL和UI层耦合的问题.当然那是最简单的解决方法,再复杂一点的程序可能思路相同,但是在编程细节中需要考虑的就更多了,比如今天我在重构过程中遇到的问题.也是接下来 ...

  5. 编写更加稳定/可读的javascript代码

    每个人都有自己的编程风格,也无可避免的要去感受别人的编程风格--修改别人的代码."修改别人的代码"对于我们来说的一件很痛苦的事情.因为有些代码并不是那么容易阅读.可维护的,让另一个 ...

  6. 深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点

    深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点 2011-12-28 23:00 by 汤姆大叔, 139489 阅读, 119 评论, 收藏, 编辑 才华横溢的 ...

  7. 高质量JavaScript代码书写基本要点

    翻译-高质量JavaScript代码书写基本要点 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/ ...

  8. 推荐五款优秀的PHP代码重构工具

    在软件工程学里,重构代码一词通常是指在不改变代码的外部行为情况下而修改源代码.软件重构需要借助工具完成,而重构工具能够修改代码同时修改所有引用该代码的地方.本文收集了五款出色的PHP代码重构工具,以帮 ...

  9. [转] 翻译-高质量JavaScript代码书写基本要点 ---张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1173 原文作者:St ...

随机推荐

  1. Jenkins+Jmeter+Ant   生成测试报告

    <?xml version="1.0" encoding="UTF-8"?> <project name="wms_test&quo ...

  2. 图论--2-SAT--POJ 3905 Perfect Election

    Perfect Election Time Limit: 5000MS         Memory Limit: 65536K Total Submissions: 964         Acce ...

  3. python requests 接口测试

    1.get方法请求接口 url:显而易见,就是接口的地址url啦 headers:请求头,例如:content-type = application/x-www-form-urlencoded par ...

  4. RF(用例执行方法)

    一.执行 RF 脚本方法 1.执行整个项目下的所有用例 dos 窗口下输入 robot + 项目绝对路径 2.执行单个 Suite 中的所有用例 dos 窗口下输入 robot + 用例套件绝对路径 ...

  5. RF(三层封装设计)

    一.用例分层思想 元素层:需要导入 Selenium2Library 库 包含所有的元素定位 流程层:需要导入 元素层.txt 资源 封装用例流程 案例层:需要导入 流程层.txt 资源 输出用例,传 ...

  6. Scrapy爬虫快速入门

    安装Scrapy Scrapy是一个高级的Python爬虫框架,它不仅包含了爬虫的特性,还可以方便的将爬虫数据保存到csv.json等文件中. 首先我们安装Scrapy. pip install sc ...

  7. basicRF双向灯光控制

    题目: 实现基于BasicRF无线点对点通信的双向灯光控制,具体要求如下: 1> 节点A 和节点B 的PANID设置为0x1234,通道号设置为17,节点地址自定义.<2> 按下节点 ...

  8. hue搭建

    1.安装依赖: sudo yum -y install gcc-c++ asciidoc cyrus-sasl-devel cyrus-sasl-gssapi krb5-devel libxml2-d ...

  9. ASP.NET Core on K8S学习之旅(12)Ingress

    本篇已加入<.NET Core on K8S学习实践系列文章索引>,可以点击查看更多容器化技术相关系列文章. 一.关于Ingress Kubernetes对外暴露Service主要有三种方 ...

  10. AndroidStudio3.6升级后的坑-apk打包

    前段时间尝试了最新版的AndroidStudio3.6,整体来说gradle调试和自带的虚拟机相比较历史版本有了更香的体验. 刚好有个新项目,就直接使用最新版了,这次新版的升级除了保持原有的界面风格, ...