JS代码的简单重构与优化(适合新手)

//bad
if (age > 20) {
return true;
} else {
return false;
} //good
return age > 20;

这种一看就明白吧,没什么说的。

Demo . 2

//bad
for (var i = 0; i < arr.length; i++) {
//do something...
} //good
for (var i = 0, len = arr.length; i < len; i++) {
//do something...
}

将数组的长度进行存储,循环时就不用每次去读取一次数组长度,从而提升性能

Demo . 3

//bad
if (value !== "") {
//do something...
} //good
if (value) {
//do something...
}

js中所有 非空字符 作布尔运算时,都会返回 true,反之返回 false。 (空格 属于非空字符)

Demo . 4

//bad
if (value !== 0) {
//do something...
} //good
if (value) {
//do something...
}

js中所有 非零 数字作布尔运算时,都会返回 true, 反之返回 false。

Demo . 5

//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...

多层条件嵌套,进行 转换 或 拆分。

Demo . 6

//bad
var a = "aa";
var b = "bb";
var c = "cc";
var d; //good
var a = "aa",
b = "bb",
c = "cc",
d ;

多个变量的定义,写一个 var 即可,遵循的原则:被赋值的在前面,只是进行声明放后面(d 在最后)

Demo . 7

//bad
for (var i = 0; i < 100; i++){
str += str;
document.getElementById("box").innerHtml = str;
} //good
for (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

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

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

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

Demo . 10

//bad
if (age > 20) {
value = "similar";
//do something...
} //good
if (age > 20 && value = "similar") {
//do something...
}

这个可以说是Demo9的变体,代码可读性还是第一个比较好,当你采用第二种写法时,请配合注释使用。因为有些人可能会认为你这是书写失误,少写了一个 = ,从而他自行给你补上了(value == "similar")。而你实际上是想做赋值操作的。因为你要写上注释说明,你这里不是书写失误,而是要进行赋值。

Demo . 11

//bad
if (value === "") {
value = "similar";
} //good
if(!value) {
value = "similar";
} //good
value = value || "similar";

这个和Demo9的 && 号运算正好相反,当第一个条件为 false 时,执行后面的语句。因为空字符串作布尔运算是返回 false的,所以可以这样用。

Demo . 12

//bad
i = i + 1;
i = i - 1; //good
i++;
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-size
function 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-size
function stringFormat(str) {
return (str.replace(/([a-z])(A-Z)/g, "$1-$2")).toLowerCase();
}

两个方法实现同样的功能,但第二个优雅得多,性能上也比第一个要好。当对字符串进行循环操作,如:查找、替换。 首先考虑的应该是使用 正则,不应该是循环遍历。

Demo . 15

//bad
function regist(userName, userPwd, userEmail, userPhone) {
//do something...
} //good
function regist(user) {
//do something
}

当一个方法接收的参数过多的时候,可以考虑将其封装成一个json对象, 这样简单得多。

Demo . 16

var a = 1,
b = "1"; //(bad) 输出 a等于b
if (a == b) {
console.log("a等于b");
} //(good) 输出 a不等于b
if (a === b) {
console.log("a等于b");
} else {
console.log("a不等于b");
}

推荐使用 全等 判断,这样更准确。 字符串和数字并不是全等的。关于比较的一点说明:

目前只想到这么多,麻烦大家进行补充,感谢!

JS代码的简单重构与优化的更多相关文章

  1. JS代码的简单重构与优化(适合新手)

    Demo . 1 //bad if (age > 20) { return true; } else { return false; } //good return age > 20; 这 ...

  2. CSS代码重构与优化之路(转)

    CSS代码重构与优化之路   阅读目录 CSS代码重构的目的 CSS代码重构的基本方法 CSS方法论 我自己总结的方法 写CSS的同学们往往会体会到,随着项目规模的增加,项目中的CSS代码也会越来越多 ...

  3. JavaScript进阶之路——认识和使用Promise,重构你的Js代码

    一转眼,这2015年上半年就过去了,差不多一个月没有写博客了,"罪过罪过"啊~~.进入了七月份,也就意味着我们上半年苦逼的单身生活结束了,从此刻起,我们要打起十二分的精神,开始下半 ...

  4. [JQuery]用InsertAfter实现图片走马灯展示效果2——js代码重构

    写在前面 前面写过一篇文章<[JQuery]用InsertAfter实现图片走马灯展示效果>,自从写过那样的也算是使用面向对象的写法吧,代码实在丑陋,自从写过那样的代码,就是自己的一块心病 ...

  5. 最新的JavaScript核心语言标准——ES6,彻底改变你编写JS代码的方式!【转载+整理】

    原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructu ...

  6. 最新的JavaScript核心语言标准——ES6,彻底改变你编写JS代码的方式!

    原文地址 迁移到:http://www.bdata-cap.com/newsinfo/1741515.html 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和f ...

  7. JS一般般的网页重构可以使用Node.js做些什么(转)

    一.非计算机背景前端如何快速了解Node.js? 做前端的应该都听过Node.js,偏开发背景的童鞋应该都玩过. 对于一些没有计算机背景的,工作内容以静态页面呈现为主的前端,可能并未把玩过Node.j ...

  8. JS 代码调试经验总结(菜鸟必读)

    前言:不知不觉写了很多,希望你能耐心看完这篇文章 任何一个编程者都少不了要去调试代码,不管你是高手还是菜鸟,调试程序都是一项必不可少的工作.一般来说调试程序是在编写代码之后或测试期修改Bug 时进行的 ...

  9. 原始的js代码和jquery对比

    Even a task as simple as this can be complicated without jQuery at our disposal. In plain JavaScript ...

随机推荐

  1. Ubuntu 13.10 中文字体设置

    据我查到的资料,在默认设置下,Ubuntu 13.10 中文使用的是文泉驿正黑.我总觉得它的效果有些发虚,模糊,不满意. (貌似是Ubuntu从13.04开始取消了默认的微米黑,回退为之前的正黑.这我 ...

  2. Highcharts axja 获取json对象动态生成报表生成

    最近做个项目,项目经理想做一个统计报表,在网上查看些资料就选用Highchars 这里和大家分享下使用心得. 重点说明此代码是针对一个报表显示多个项对比显示. 直接贴代码:web端 <scrip ...

  3. 用SQLData读写数据库自定义类型

    如何读写自定义类型?SQLData是个很直观的解决办法 在oracle使用手册上找到了很好的资料 点击打开链接 http://docs.oracle.com/cd/B10501_01/java.920 ...

  4. Getting Started with Mongoose and Node.js – A Sample Comments System | Dev Notes

    In this post, we’re going to be creating a sample comments system using Node, Express and Mongoose.  ...

  5. 笔记三、apache搭建gitweb【转】

    参考文章:     http://www.latelee.org/using-gnu-linux/ubuntu-apache-gitweb.html     http://blog.csdn.net/ ...

  6. Flex通过Blazeds利用Remoteservice与后台java消息推送

    http://www.cnblogs.com/xia520pi/archive/2012/05/26/2519343.html http://computerdragon.blog.51cto.com ...

  7. YTU 2611: A代码完善--向量的运算

    2611: A代码完善--向量的运算 时间限制: 1 Sec  内存限制: 128 MB 提交: 256  解决: 168 题目描述 注:本题只需要提交填写部分的代码,请按照C++方式提交. 对于二维 ...

  8. dataguru试听课程

    http://www.dataguru.cn/article-5447-1.html#userconsent#

  9. GitPython git python 的开发库

    工程地址: https://pypi.python.org/pypi/GitPython/需要安装先安装: gitdb https://pypi.python.org/pypi/gitdb GitPy ...

  10. [Golang]实习最后一天小纪念+并发爬虫小练习

    今天是我在公司实习的最后一天,一个月的时间真的是太短暂了,我非常享受在公司工作的这一个月,在这里Leader和同事们对我的帮助极大地促进了我技术水平的进步和自信心的提升,我发自内心地感谢白山云科技给我 ...