@H_403_0@书写出高质量的JS代码不仅让程序员看着舒服,更加能够提高程序的运行速度,以下就是编程之家的小编整理方法:
@H_
403_0@
一、如何书写可维护性的代码
@H_
403_0@当出现bug的时候如果你能立马修复它是最好的,此时
解决问题的四路在你脑中还是很清晰的。否则,你转移到其他任务或者bug是经过一定的时间才出现的,你忘了那个特定的
代码,一段时间后再去查看这些
代码就 需要:
@H_
403_0@1.花时间学习和理解这个问题 2.化时间是了解应该
解决的问题
代码
@H_
403_0@还有个问题,特别对于大的项目或是公司,修复bug的这位伙计不是写
代码的那个人(且发现bug和修复bug的不是同一个人)。因此,必须降低理解代 码花费的时间,无论是一段时间前你自己写的
代码还是团队中的其他成员写的
代码。这关系到底线(营业收入)和开发人员的幸福,因为我们更应该去开发新的激动 人心的事物而不是花几小时几天的时间去维护遗留
代码。所以创建可维护性
代码是至关重要的,一般可维护性的
代码有以下几个原则:
@H_
403_0@可读性
@H_
403_0@一致性
@H_
403_0@可预测性
@H_
403_0@看上去就像同一个人写的
@H_
403_0@已记录
@H_
403_0@
@H_
403_0@
全局变量的问题在于,你的JavaScript应用程序和web
页面上的所有
代码都共享了这些
全局变量,他们住在同一个全局命名空间,所以当程序的两个不同部分定义同名但不同作用的
全局变量的时候,命名冲突在所难免。web
页面包含不是该
页面开发者所写的
代码也是比较常见的,例如:
@H_
403_0@第三方的JavaScript库
@H_
403_0@广告方的脚本
代码
@H_
403_0@第三方
用户跟踪和分析脚本
代码
@H_
403_0@不同类型的小组件,标志和按钮
@H_
403_0@例如说,该第三方脚本定义了一个
全局变量,叫做A;接着,在你的
函数中也定义一个名为A的
全局变量。其结果就是后面的变量覆盖前面的,第三方脚本就一下子失效啦!而且很难debug出来。
@H_
403_0@因此:尽可能少的使用
全局变量是很重要的,例如命名空间模式或是
函数立即
自动执行,但是要想让
全局变量少最重要的还是始终使用var来声明变量。
@H_
403_0@
三、忘记var作用的副作用
@H_
403_0@隐式
全局变量和明确定义的
全局变量间有些小的差异,就是通过delete操作符让变量未定义的能力。具体如下:
@H_
403_0@通过var创建的
全局变量(任何
函数之外的程序中创建)是不能被
删除的。
@H_
403_0@没有通过var创建的隐式
全局变量(无视是否在
函数中创建)是能被
删除的。
@H_
403_0@所以隐式
全局变量并不是真正的
全局变量,但它们是全局对象的
属性。
属性是可以通过delete操作符
删除的,而变量是不能的,具体
代码我就不写了。
@H_
403_0@
四、访问全局对象
@H_
403_0@在浏览器中,全局对象可以通过window
属性在
代码的任何位置访问(除非你做了些比较出格的事情,像是声明了一个名为window的局部变量)。但是在其他环境下,这个方便的
属性可能被叫做其他什么东西(甚至在程序中不可用)。如果你需要在没有硬编码的window标识符下访问全局对象,你可以在任何层级的
函数作用域中做如下操作:
@H_
403_0@
五、for循环
@H_
403_0@在for循环中,你可以循环取得数组或是数组类似对象的值,譬如arguments和HTMLCollection对象。通常的循环形式如下:
@H_
403_0@// 次佳的循环 for (var i = 0; i < myarray.length; i++) { // 使用myarray[i]做点什么 }
@H_
403_0@这种形式的循环的不足在于每次循环的时候数组的长度都要去
获取下。这回降低你的
代码,尤其当myarray不是数组,而是一个HTMLCollection对象的时候。
@H_
403_0@
六、不扩展内置原型
@H_
403_0@扩增构造
函数的prototype
属性是个很强大的
增加功能的
方法,但有时候它太强大了。
增加内置的构造
函数原型(如Object(),Array(),或Function())挺诱人的,但是这严重降低了可维护性,因为它让你的
代码变得难以预测。使用你
代码的其他开发人员很可能更期望使用内置的 JavaScript
方法来持续不断地工作,而不是你另加的
方法。另外,
属性添加到原型中,可能会导致不使用hasOwnProperty
属性时在循环中
显示出来,这会造成混乱。
@H_
403_0@
七、避免隐式类型转换
@H_
403_0@JavaScript的变量在比较的时候会隐式类型转换。这就是为什么一些诸如:false == 0 或 “” == 0 返回的结果是true。为避免引起混乱的隐含类型转换,在你比较值和表达式类型的时候始终使用===和!==操作符。
@H_
403_0@var zero = 0; if (zero === false) { // 不执行,因为zero为0,而不是false } // 反面示例 if (zero == false) { // 执行了... }
@H_
403_0@
八、避免eval()
@H_
403_0@如果你现在的
代码中使用了eval(),记住该咒语“eval()是魔鬼”。此
方法接受任意的字符串,并当作JavaScript
代码来处理。当有 问题的
代码是事先知道的(不是运行时确定的),没有理由使用eval()。如果
代码是在运行时动态
生成,有一个更好的方式不使用eval而达到同样的目 标。例如,用方括号表示法来访问动态
属性会更好更简单:
@H_
403_0@// 反面示例 var property = "name"; alert(eval("obj." + property)); // 更好的 var property = "name"; alert(obj[property]);
@H_
403_0@使用eval()也带来了安全隐患,因为被执行的
代码(例如从网络来)可能已被篡改。这是个很常见的反面教材,当处理Ajax请求得到的JSON 相应的时候。在这些情况下,最好使用JavaScript内置
方法来解析JSON相应,以确保安全和有效。若浏览器
不支持JSON.parse(),你可 以使用来自JSON.org的库。
@H_
403_0@同样重要的是要记住,给setInterval(),setTimeout()和Function()构造
函数传递字符串,大部分情况下,与使用eval()是类似的,因此要避免。在幕后,JavaScript仍需要评估和执行你给程序传递的字符串:
@H_
403_0@// 反面示例 setTimeout("myFunc()",1000); setTimeout("myFunc(1,2,3)",1000); // 更好的 setTimeout(myFunc,1000); setTimeout(function () { myFunc(1,3); },1000);
@H_
403_0@使用新的Function()构造就类似于eval(),应小心接近。这可能是一个强大的构造,但往往被误用。如果你绝对必须使用eval(),你 可以考虑使用new Function()代替。有一个小的潜在好处,因为在新Function()中作
代码评估是在局部
函数作用域中运行,所以
代码中任何被评估的通过var 定义的变量都不会
自动变成
全局变量。另一种
方法来阻止
自动全局变量是封装eval()
调用到一个即时
函数中。
@H_
403_0@考虑下面这个例子,这里仅un作为
全局变量污染了命名空间。
@H_
403_0@另一间eval()和Function构造不同的是eval()可以干扰作用域链,而Function()更安分守己些。不管你在哪里执行 Function(),它只看到全局作用域。所以其能很好的避免本地变量污染。在下面这个例子中,eval()可以访问和
修改它外部作用域中的变量,这是 Function做不来的(注意到使用Function和new Function是相同的)。
@H_
403_0@
九、编码规范
@H_
403_0@建立和遵循编码规范是很重要的,这让你的
代码保持一致性,可预测,更易于阅读和理解。一个新的开发者加入这个团队可以通读规范,理解其它团队成员书写的
代码,更快上手干活。
@H_
403_0@
十、缩进
@H_
403_0@
代码没有缩进基本上就不能读了。唯一糟糕的事情就是不一致的缩进,因为它看上去像是遵循了规范,但是可能一路上伴随着混乱和惊奇。重要的是规范地使用缩进。
@H_
403_0@
十一、注释
@H_
403_0@你必须注释你的
代码,即使不会有其他人向你一样接触它。通常,当你深入研究一个问题,你会很清楚的知道这个
代码是干嘛用的,但是,当你一周之后再回来看的时候,想必也要耗掉不少脑细胞去搞明白到底怎么工作的。
@H_
403_0@很显然,注释不能走极端:每个单独变量或是单独一行。但是,你通常应该记录所有的
函数,它们的参数和返回值,或是任何不寻常的技术和
方法。要想到注 释可以给你
代码未来的阅读者以诸多
提示;阅读者需要的是(不要读太多的东西)仅注释和
函数属性名来理解你的
代码。例如,当你有五六行程序执行特定的任务, 如果你提供了一行
代码目的以及为什么在这里的描述的话,阅读者就可以直接跳过这段细节。没有硬性规定注释
代码比,
代码的某些部分(如正则表达式)可能注释 要比
代码多。
@H_
403_0@
十二、花括号{}
@H_
403_0@花括号(亦称大括号,下同)应总被使用,即使在它们为可选的时候。技术上将,在in或是for中如果语句仅一条,花括号是不需要的,但是你还是应该总是使用它们,这会让
代码更有持续性和易于更新。