JS代码的简单重构与优化
来源:互联网 发布:恋爱软件哪个好 编辑:程序博客网 时间:2024/05/12 11:13
Demo . 1
//badif (age > 20) { return true;} else { return false;}//goodreturn age > 20;
这种一看就明白吧,没什么说的。
Demo . 2
//badfor (var i = 0; i < arr.length; i++) { //do something...}//goodfor (var i = 0, len = arr.length; i < len; i++) { //do something...}
将数组的长度进行存储,循环时就不用每次去读取一次数组长度,从而提升性能
Demo . 3
//badif (value !== "") { //do something...}//goodif (value) { //do something...}
js中所有 非空字符 作布尔运算时,都会返回 true,反之返回 false。 (空格 属于非空字符)
Demo . 4
//badif (value !== 0) { //do something...}//goodif (value) { //do something...}
js中所有 非零 数字作布尔运算时,都会返回 true, 反之返回 false。
Demo . 5
//badif (user.id === 10) { if (user.name !== "") { if (user.email === "email") { //do something... } }}//goodif(user.id === 10 && user.name !=="" && user.email === "email") { //do something...}//goodif (user.id !== 10) return;if (user.name === "") return;if (user.email !== "email") return;//do something...
多层条件嵌套,进行 转换 或 拆分。
Demo . 6
//badvar a = "aa";var b = "bb";var c = "cc";var d;//goodvar a = "aa", b = "bb", c = "cc", d ;
多个变量的定义,写一个 var 即可,遵循的原则:被赋值的在前面,只是进行声明放后面(d 在最后)
Demo . 7
//badfor (var i = 0; i < 100; i++){ str += str; document.getElementById("box").innerHtml = str;}//goodfor (var i = 0; i < 100; i++) { str += str;}document.getElementById("box").innerHtml = str;
尽可能的减少DOM操作,将DOM操作放在循环体之外,数据处理好后,只执行一次DOM操作即可。
Demo . 8
//bad function test() { var a = b = 1; console.log(a); } //good function test() { var a = 1, b = 1; console.log(a); }
避免使用 连等号 声明赋值变量。js基础好点的同学都知道,这里存在着一个坑: b 会被声明为全局变量,意思就是在 test() 方法之外b也是可以被访问到的。 全局变量是不推荐使用的,容易污染环境。
Demo . 9
//badif (age > 20) { console.log("年龄大于20");}//good(age > 20) && console.log("年龄大于20");
这里的bad并不是说第一种写法不好,其实就可读性来说,第一种比第二种更好。 只是第二种写法更加优雅一点(个人觉得)。 这个句法可能有些同学用的比较少,解释一下:
如果第一个条件为 true ,那么就执行后面的语句,第一个条件为false, 后面的语句便不会执行。后面的语句可以是表达式,方法,或变量,常量都可以。 比如 (age > 20) && test()。用于赋值时的具体说明,如下图
Demo . 10
//badif (age > 20) { value = "similar"; //do something...}//goodif (age > 20 && (value = "similar")) { //do something...}
这个可以说是Demo9的变体,代码可读性还是第一个比较好,当你采用第二种写法时,请配合注释使用。因为有些人可能会认为你这是书写失误,少写了一个 = ,从而他自行给你补上了(value == "similar")。而你实际上是想做赋值操作的。因此你要写上注释说明,你这里不是书写失误,而是要进行赋值。
注: 根据博友留言的帮助,此处应用需小心,当你为value赋值为空串 或 0 或 null 等等(也就是说,value作布尔运算返回值为 false)的时候,整个判断表达式会返回 false, 也就不会执行if花括号里面的代码程序。所以当你不确定 value 会被赋值为什么的时候,建议不要这样用。
Demo . 11
//badif (value === "") { value = "similar";}//goodif(!value) { value = "similar";}//goodvalue = value || "similar";
这个和Demo9的 && 号运算正好相反,当第一个条件为 false 时,执行后面的语句。因为空字符串作布尔运算是返回 false的,所以可以这样用。
Demo . 12
//badi = i + 1;i = i - 1;//goodi++;i--;
这个没什么好说的。
Demo . 13
//bad if (typeof str === "String") { }//good if (typeof str === "string") { }
这里只是帮大家填个坑,不存在好坏。typeof 运算是用来检查数据类型的(常用来检查js中的基础类型),它返回的是一个字符串(并且始终为小写),所以第一个始终为false。 检查js中的引用类型要用 instanceof 运算, 如: var arr = []; if(arr instanceof Array){}, 但 Function 类型比较特别,也可以用 typeof 来进行判断。
Demo . 14
//(bad) 格式化字符串 fontSize => font-sizefunction stringFormat(str) { var strArr = str.split(''), len = strArr.length, i = 0; for (; i < len; i++) { if(/^[A-Z]$/.test(strArr[i])) { strArr[i] = "-" + strArr[i].toLowerCase(); } } return strArr.join('');}//(good) 格式化字符串 fontSize => font-sizefunction stringFormat(str) { return (str.replace(/([a-z])(A-Z)/g, "$1-$2")).toLowerCase();}
两个方法实现同样的功能,但第二个优雅得多,性能上也比第一个要好。当对字符串进行循环操作,如:查找、替换。 首先考虑的应该是使用 正则,不应该是循环遍历。
Demo . 15
//badfunction regist(userName, userPwd, userEmail, userPhone) { //do something...}//goodfunction regist(user) { //do something}
当一个方法接收的参数过多的时候,可以考虑将其封装成一个json对象, 这样简单得多。
Demo . 16
var a = 1, b = "1";//(bad) 输出 a等于bif (a == b) { console.log("a等于b"); }//(good) 输出 a不等于bif (a === b) { console.log("a等于b"); } else { console.log("a不等于b");}
推荐使用 全等 判断,这样更准确。 字符串和数字并不是全等的。关于比较的一点说明:
Demo . 17
//badif (age > 20) { value = "aa";} else { value = "bb";}//goodvalue = age > 20 ? "aa" : "bb";
- JS代码的简单重构与优化
- S代码的简单重构与优化(适合新手)
- 代码重构与优化
- 代码优化与重构
- 代码重构与优化
- js重构与优化(一)
- css代码重构与优化
- 函数的重构、代码优化例子
- 对于Ext.data.Store 介紹 与总结,以及对以前代码的重构与优化
- js代码重构
- CSS代码重构与优化之路
- CSS代码重构与优化之路
- CSS代码重构与优化之路
- CSS代码重构与优化之路
- CSS代码重构与优化之路
- CSS代码重构与优化之路
- CSS代码重构与优化之路【转载】
- CSS代码重构与优化之路
- 设计模式-创建模式
- 多线程的解释
- JavaWeb开发之五:HttpServletResponse对象
- 第四周项目4-程序分析(4)
- ubuntu 64位系统运行32位应用
- JS代码的简单重构与优化
- 戴文渊
- 三十分钟理解博弈论“纳什均衡” -- Nash Equilibrium
- Servlet基础总结
- Volley的使用(一)
- 文章标题
- 小波变换理论讲解
- 第三次上机实践项目-项目1-最大公约数
- 解决double和float精度不准的问题