《编写可维护的javascript》读书笔记(中)——编程实践

时间:2024-01-20 17:27:27

上篇读书笔记系列之:《编写可维护的javascript》读书笔记(上)

上篇说的是编程风格,记录的都是最重要的点,不讲废话,写的比较简洁,而本篇将加入一些实例,因为那样比较容易说明问题。

二、编程实践

1、UI松耦合

  第一、将css从javascript中抽离(要改变dom样式数据,应该去操作dom的class名而非dom的style属性,后续要修改此样式只需到对应的css文件中修改而不用修改js文件);

  第二、将javascript从HTML中抽离,比如下面的写法是不好的

<!-- 不好的写法 -->
<input type="button" onclick="doSomething" />

js应该放在外部文件中,方便维护;

  第三、避免使用css表达式,严重影响页面性能;

  第四、将HTML从javascript中抽离,比如你要动态生成一个N行4列的表格,表头和tbody可以写死在页面里,表体你可能会这样循环生成

    // 不好的写法
var str="";
for (var i = 0; i < data.length; i++) {
str+="<tr><td>"+ data[i].字段一 +"</td><td>"+ data[i].字段二 +
"</td><td>"+ data[i].字段三 +"</td><td>"+ data[i].字段四 +"</td></tr>";
};
$("tbody").html(str);

假如现在要增加一个字段,将表格的列数增加到5列,你要先到html页面修改表头,又要到js里修改js文件……所以,尽量将html从js中分离出去是好的做法,可以在html里面写一个模板,通过js获取模板内容替换变量生成html填充到tbody里面。

2、避免使用全局变量

  命名本身就是一件比较困难的事,如果大量使用全局变量,随着代码量不断增加,命名冲突概率随之增高,程序维护成本也随着增高。

3、事件处理

  规则1:隔离应用逻辑

  什么意思呢?好比电脑要关机,有个关机的程序放在那里,你可以按关机按钮触发关机程序,也可以点开始菜单再选择关机去触发关机程序,这个关机程序是独立出来的。代码也是如此,当点击按钮A或按钮B要做的操作是一样的时候,应该将操作独立写成一个函数,这就是应用逻辑隔离。

  规则2:不要分发事件对象

  先看一段代码

    function handleClick(event){
var popup = document.getElementById("popup");
popup.style.left = event.clientX + "px";
popup.style.top= event.clientY + "px";
popup.className = "reveal";
} document.getElementById("demo").onclick=function(event){
handleClick(event);
};

上面这段代码中,event被无节制地分发,它从事件处理函数中传入handClick(),event对象上包含很多信息,而handClick函数内只用到了其中2个而已,该函数并没有标明哪些数据是必要的,假如此时你也要调用这个方法,你必须创建一个evnet对象并将它作为参数传入,而你依然不知道这个方法使用了哪些信息,我们可以做如下修改

    function handleClick(x,y){
var popup = document.getElementById("popup");
popup.style.left = x + "px";
popup.style.top = y + "px";
popup.className = "reveal";
} document.getElementById("demo").onclick=function(event){
handleClick(event.clientX,event.clientY);
};

4、避免“空比较”

  有时候我们需要检测函数的某个参数是否存在,可能会通过判断这个参数是否等于null来判断出参数是否存在  

var comtroller = {
process:function(items){
if(items!==null){ // 不好的写法
items.sort();
// 执行一些逻辑
}
}
}

这段代码中,process方法显然希望items是一个数组,然后当items的值为1时,不等于null,依然进入if语句内了,执行到items.sort()就报错了

5、检测原始值(string、number、boolean、undefined、null),typeof就够了

6、检测引用值(Object、Array、Date、Error),引用值也称做对象,一般情况下使用instanceof来检测这个对象的构造器是否为对应的值即可,当跨域检测时,用instanceof检测数组将失败,解决方案是将该对象的原型调用toString()方法,判断返回的字符串是否等于[object Array]来得出结论:

    // 判断value是否为数组
function isArray(value){
return Object.prototype.toString.call(value)==="[object Array]";
}

7、检测函数 用typeof即可,可以跨帧使用,返回"function",在IE8和更早版本的IE中,使用typeof检测DOM节点中的函数(如getElementById())都返回“Objeac”而不是“function”

8、检测属性

// 不好的写法
if(object[propertyName]){
// 存在属性propertyName
}
// 不好的写法
if(object[propertyName]!= null){
// 存在属性propertyName
}
// 不好的写法
if(object[propertyName]!= undefined){
// 存在属性propertyName
}

上面这段代码中,假如属性值为假值(false、0、null、undefined)时会出错,判断属性是否存在的最好方法是使用in运算符,in运算符仅仅会简单地判断属性是否存在,而不会去读取属性的值。

var object = {
count: 0
}
// 好的写法
if( "count" in object ){
// 这里的代码会执行
}
// 不好的写法
if( object["count"] ){
// 这里的代码不会执行
}

9、将配置数据从代码中分离出来

什么是配置数据?比如页面中做某个操作失败,需要一个提示语,而不同的操作有不同的提示语,此时整个提示语就是配置数据。应该将配置数据分离出来以参数的形式传进去。

10、抛出自定义错误  throw new Error("错误提示")

在代码执行过程中出错时,如果没有任何提示或是提示比较稀少、隐晦,调试是非常困难的,而抛出自定义错误,就是在有可能出错的地方,加上捕获错误的代码抛出错误,将非常有利于调试。抛出自己的错误可以使用确切的文本供浏览器显示,可以包括出错的行数、函数以及失败原因,有利于快速定位错误原因。

ECMA-262规范指出了7种错误类型

1)Error : 所有错误的基本类型

2)EvalError : 通过eval()函数执行代码出错时抛出

3)RangeError : 一个数字超出了它的边界时抛出,比如试图创建一个长度为-20的数组(new Array(-20))。

4)ReferenceError: 期望的对象不存在时抛出,比如试图在一个null对象引用上调用一个函数

5)SyntaxError: 语法错误

6)TypeError: 变量不是期望的类型时抛出错误

7)URIError: 给encodeURI()、encodeURIComponent()、decodeURI()、decodeURIComponent()等函数传递格式非法的URI字符串时抛出

这7种错误类型需要熟记。

11、不是你的对象不要动

开发过程中,可能会引用一些javascript类库,你个人不是这些类库的作者,应该遵守3条基本原则

1)不覆盖方法

2)不新增方法

3)不删除方法

12、浏览器嗅探

避免浏览器推断

现在有一种比较流行的判断IE浏览器的方法是

if( document.all ){
// IE浏览器
}

这就属于浏览器推断,这个推断断定document.all只存在于IE浏览器,而实际上Opera的一些版本也支持document.all

做特性检测

我们知道IE9及以下的IE浏览器不支持placeholder属性,当我们要给IE9及以下浏览器模拟placeholder效果时,需要先做特性检测,如果浏览器不支持placeholder属性才用js去模拟

if( !("placeholder" in document.createElement("input")) ){
// 不支持placeholder,需要模拟
}

第二部分完。

by:王美建 from:http://www.cnblogs.com/wangmeijian

原创文章,转载请注明出处