《编写可维护的Javascript》学习总结
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了《编写可维护的Javascript》学习总结相关的知识，希望对你有一定的参考价值。
第一部分
一、基本规范
1.缩进：一般以四个空格为一个缩进。
2.语句结尾：最好加上分号，因为虽然“自动分号插入（ASI）”机制在没有分号的位置会插入分号，但是ASI规则复杂而且会有特殊情况发生
// 源代码
function aaa() {
return
{
title: ‘aaaa‘,
id: ‘2222‘
}
}
// ASI解析
function aaa() {
return;
{
title: ‘aaaa‘,
id: ‘2222‘
}
}
此时return换行会返回undefined
3.行的长度：不应超过80个字符
4.换行：一般在运算符（比如逗号）后换行，然后增加两个层级（一个层级为四个空格的话，增加的就是八个空格）。
当给变量赋值时，第二行位置应当和赋值运算符位置保持对齐
var result = aaaa + bbbb + ccccc + dddd + eeee + fffffffff + gggggg + hhhh
5.空行：适当空行增加代码可读性
- 在方法之间
- 在方法中的局部变量和第一条语句之间
- 在多行或单行注释前
- 逻辑片段间
6.命名方法：驼峰式
变量：应用名词进行命名 var name = "skq"
函数：应以动词为函数名前缀 function doSomething(){}
常量：使用大写字母和下划线命名 var MAX_COUNT = 10;
7. 注释
- 单行注释后要有一个空格 // 注释
- 多行注释，要与前一段代码前有一个空行
// 这是一个数组 var aaa = [1,2,3,4];
/* * 这是一个函数 * 有一个变量为aaa */
function aaa() {
var aaa = [1,2,3,4];
}
二、语句和表达式
1.switch - default
default可省略
2.for - break&&continue
break: 终止本次循环
continue: 跳出本次循环
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> var arr = [1, 2, 3, 4]; var len = 2; function aaa(data) { console.log(data); } for (var i = 0; i < arr.length; i++) { if (i === len) { break; } aaa(arr[i]); // 1,2 } for (var i = 0; i < arr.length; i++) { if (i === len) { continue; } aaa(arr[i]); // 1,2,4 } </script> </head> <body> </body> </html>
避免使用continue，尽量使用if语句
3.for-in
在使用for-in时，它不仅遍历对象的实例属性，同样还遍历从原型集成来的属性。当遍历自定义对象属性时，往往会因为意外的结果终止。所以用hasOwnProperty()在来for-in循环过滤出实例属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var obj = {
name: ‘aaa‘,
age: 11
}
for (attr in obj) {
if (obj.hasOwnProperty(attr)) {
console.log(obj[attr]);
}
}
</script>
</head>
<body>
</body>
</html>
三、变量、函数和运算符
1. var的使用
建议var合并成一条语句
var aaa = 10,
bbb = aaa + 10,
ccc,
ddd;
2.具有强制类型转换机制： 等号（==）
推荐使用 === 和！==，不会涉及强制类型转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
alert(false == 0); // true
alert(true == 1); // true
alert(true == 2); // false
</script>
</head>
<body>
</body>
</html>
3. eval(), setIterval(), setTimeout(), 和 Funtion中传入字符串时，都可当做代码来执行，避免传入字符串
var myfunc = new Function("alert(‘Hi‘)");
四、编程实践
1. 将css从JavaScript中抽离
用className替代style（除了定位的情况）
五、事件处理
1.隔离应用逻辑
把应用逻辑单拎出来，这样就可复用于很多地方了
2.不要分发事件对象（event）
最佳办法是让事件处理程序使用event对象来处理事件，然后拿到所有需要的数据传给应用逻辑
六、避免空比较
1、检测原始值
检测类型：Boolean、Number、String、null、undefined
方法：typeof
注意： null不应用于检测语句，如果要对比的确实为null，用 === 或者==!来精确判断
2、检测引用值（object）
内置引用类型：Object、Array、Date、Error
方法：instanceof (不仅检测对象的构造器，还检测原型链)
* instanceof不使用函数和数组
3、检测函数
方法：typeof
* typeof 可以跨帧（frame），但是IE8及更早版本有问题（返回Object）
/**
* underscore源码
*/
if (typeof /./ != ‘function‘ && typeof Int8Array != ‘object‘) { _.isFunction = function(obj) { return typeof obj == ‘function‘ || false; }; }
4、检测数组
/**
* underscore给出的方案
*/
var nativeIsArray = Array.isArray;
_.isArray = nativeIsArray || function(obj) { return toString.call(obj) === ‘[object Array]‘; };
// 书中给出方案
function isArray(value) { if (typeof Array.isArray === “function”) { return Array.isArray(value); } else { return Object.prototype.toString.call(value) === "[object Array]" } }
四、将配置数据从代码中分离
1、配置数据类型
- 写死在代码里的值
- URL：比如API的url
- 展现给用户的字符串：比如报错提示
- 重复的值
- 任何可能变化的值
2、抽离配置文件
3、把配置数据放在一个独立的文件里
以上是关于《编写可维护的Javascript》学习总结的主要内容，如果未能解决你的问题，请参考以下文章
0003.深入理解JavaScript系列学习：编写高质量JavaScript代码的基本要点