如何编写高质量的Javascript代码(1)

优秀的Stoyan Stefanov在他的新书中(《Javascript Patterns》)介绍了很多编写高质量代码的技巧,比如避免使用全局变量,使用单一的var关键字,循环式预存长度等等。

这篇文章不仅仅从代码本身来考虑如何优化编码,也从代码的设计阶段来考虑,包括书写API文档,同事的review,使用JSLint。这些习惯都能帮助你编写更加高质量的、更易于理解的、可维护的代码(让你的代码在多年之后仍使你引以为傲)。

编写可维护的代码

软件的BUG修复需要花费大量的精力。尤其当代码已经发布之后,随着时间的增长,维护的成本愈发的高。当你一发现BUG的时候,就立即去修复,这时候你的代码还是热乎的,你也不需要回忆,因为就是刚刚写好的。但是当你做了其他任务,几乎完全忘记了这份代码,这时候就需要:

◆重新学习和理解问题

◆理解代码是如何解决问题的

另外一个问题是,在大项目或者大公司里面,经常是解决BUG的人不是产生BUG的人,而且也不是发现BUG的人。所以减少理解代码的时间就是最重要的问题,无论这个代码是你自己以前写的还是团队中的其他成员写的,因为我们都想去搞搞新的有意思的东西,而不是去维护那些个陈旧的代码。

还有一个开发中的普遍问题就是,往往读代码的时间比写代码的时间还要多。有时候你钻研一个问题,可以花整整一个下午的时间来考虑代码的编写。这个代码当时是可以工作的,但是随着开发的进行,其他东西发生了很大的变化,这时候也就需要你自己来重新审查修改编写代码。比如:

◆还有BUG没有解决

◆添加了新的功能

◆程序需要在新的环境中运行(比如一个新上市的浏览器)

◆代码有问题

◆代码需要重写因为修改了架构甚至要使用另一个语言

因为这些原因,也许你当时一个下午写好的代码,后面需要花费几周的时间来阅读。所以编写可维护的代码对于软件的成功至关重要。

可维护的代码包括:

◆可读性

◆连续性

◆预见性

◆看起来是一个人写的

◆有文档

最少化全局变量

Javascript使用函数来约定作用域。一个在函数内部声明的变量在外部是不可见的。所以,全局变量也就是声明在任何函数之外的或者没有被声明的变量。

Javascript中,在任何函数之外有个可访问的全局对象,每一个你创建的全局变量都是这个对象的一个属性。在浏览器中,为了方便,通常用window来指代这个全局变量。下面的代码就是说明如何创建一个全局变量:


  1. myglobal = "hello"; // antipattern  
  2. console.log(myglobal); // "hello"  
  3. console.log(window.myglobal); // "hello"  
  4. console.log(window["myglobal"]); // "hello"  
  5. console.log(this.myglobal); // "hello 

全局变量的问题

全局变量的问题在于,他在你的所有代码或者一个页面中都共享。他们在同一个命名空间下面,这通常会造成变量名冲突–两个同名的变量,但是确实不同的用处。

通常在一些页面中需要引入一些其他人的代码,比如:

◆第三方的JS库

◆广告伙伴的脚本

◆第三方的用户行为分析或者统计脚本

◆不同的组件、按钮等等

加入其中一个第三方组件定义了一个全局变量:result。然后在你的程序中,也定义了一个全局变量result。最后的这个result会覆盖点之前的result,这样第三方的脚本就会停止工作。

所以,为了对其他的脚本友好,在一个页面中使用越少的全局变量越好。在后面会有一些方法来告诉你如何减少全局变量,比如使用命名空间,或者自执行的匿名函数,但是最好的避免全局变量的方法就是使用var关键字来声明变量。

因为javascript的两个特性,创建一个全局变量非常的简单。第一,你可以使用一个甚至没有声明的变量,第二,在javascript中,所有未声明的变量都会成为全局对象的一个属性(就像一个声明了的全局变量一样)。看看这个例子:


  1. function sum(x,y){  
  2.      result = x + y;  
  3.      return result;  

在这个代码中,result在没有被声明的情况下就被使用了,这个代码也能很好的工作,但是在调用了这个函数之后,就会多一个名为result的全局变量,这是所有问题的根源了。

解决这个问题的办法就是使用var:


  1. function sum(x,y){  
  2.      var result  = x + y;  
  3.      return result;  

两外一个不好的习惯就是在声明变量的时候使用链式的方法来赋值,这时候,a是局部变量,但是b就成为了全局变量。


  1. function foo(){  
  2.      var a=b=0;  
  3.      ....  

这是因为,b = 0这个表达式先执行,执行的时候b并没有被声明,所以b就成为了全局变量,然后返回这个表达式的值0,给声明了的变量a,换句话说,就好像你输入的是:


  1. var a = (b=0); 

如果你已经声明变量,那么这种链式的赋值没有问题:


  1. function foo(){  
  2.      var a,b;  
  3.      ...  

另外一个避免使用全局变量的原因是考虑到程序的可移植性。如果你想让你的代码在不同的环境中都可以工作,那么使用全局变量就很可能会与新的系统中的全局变量冲突(或许在之前的系统中没有问题)。

忘记var的影响

使用var声明的全局变量和没有使用var生成的全局变量还有一个区别在于删除:

使用var声明创建的全局变量不能被删除

没有使用var声明的全局变量可以被删除

这说明没有使用var声明生成的全局变量不是真正的变量,他们只是全局对象的属性。属性可以通过delete删除,但是变量不行:


  1. // define three globals  
  2. var global_var = 1;  
  3. global_novar = 2; // antipattern  
  4. (function () {  
  5.    global_fromfunc = 3; // antipattern  
  6. }());   
  7.    
  8. // attempt to delete  
  9. delete global_var; // false  
  10. delete global_novar; // true  
  11. delete global_fromfunc; // true   
  12.    
  13. // test the deletion  
  14. typeof global_var; // "number"  
  15. typeof global_novar; // "undefined"  
  16. typeof global_fromfunc; // "undefined" 

在ES5的严格模式下,给一个为声明的变量赋值会报错。

读取全局对象

在浏览器中,你可以通过window变量来读取全局对象(除非你在函数内部重新定义了window对象)。但在有的环境中,可能不叫window,那么你可以使用下面的代码来获取全局对象:


  1. var global = (function(){  
  2.      return this;  
  3. })(); 

这样可以获取到全局对象的原因是在function的内部,this指向全局对象。但是这在ES5的严格模式下会不起作用,你需要适配一些其他模式。当你开发自己的库的时候,你可以把你的代码封装在一个立即函数中,然后将this作为一个参数传进来。

单个var模式

在你的代码的顶部只是用一个var关键字,会有以下的好处:

◆对于所有需要的变量,在一个地方就可以全部看到

◆避免使用一个未定义的变量

◆帮助你记忆声明的变量,减少全局变量

◆更精简的代码

书写很简单:


  1. function func() {  
  2.    var a = 1,  
  3.        b = 2,  
  4.        sum = a + b,  
  5.        myobject = {},  
  6.        i,  
  7.        j;  
  8.    // function body...  

通过一个var和逗号来声明多个变量。在声明的时候给变量赋默认值也是不错的做法,可以避免一些逻辑错误,提高代码的可读性。而后你阅读的代码的时候也可以根据变量的默认值来方便的猜测变量的用途。

你也可以在声明变量的时候做一些实际的工作,比如sum = a + b;另外,在操作DOM元素的时候,你也可以把DOM元素的引用保存在一个变量中:


  1. function updateElement() {  
  2.    var el = document.getElementById("result"),  
  3.        style = el.style;  
  4.    // do something with el and style...  

滥用了的var

JavaScript允许你在函数内部有多个var语句,但是却都表现的如同在函数的顶部声明一样。这个特性在你使用一个变量然后在后面又声明了这个变量时会导致一些奇怪的逻辑问题。对于JavaScript来说,只要变量在同一个作用域,那么就认为是声明了的,就算是在var语句之前使用也一样。看看这个例子:


  1. myname = "global"; // global variable  
  2. function func() {  
  3.     alert(myname); // "undefined"  
  4.     var myname = "local";  
  5.     alert(myname); // "local"  
  6. }  
  7. func(); 

在这个例子中,或许你期望第一次会弹出global,第二次弹出local。因为第一次的时候没有还没有使用var声明myname,这是应该是全局变量的myname,第二次声明了,然后alert之后应该是local的值。而事实上不是这样的,只要你在函数中出现了var myname,那么js就认为你在这个函数中声明了这个变量,但是在读取这个变量的值的时候,因为var语句还没有执行,所以是undefined,很奇怪的逻辑吧。上面的代码相当于:


  1. myname = "global"; // global variable  
  2. function func() {  
  3.    var myname; // same as -> var myname = undefined;  
  4.    alert(myname); // "undefined"  
  5.    myname = "local";  
  6.    alert(myname); // "local"  
  7. }  
  8. func(); 

我们来解释一下这个现象,在代码的解析中,分两个步骤,第一步先处理变量函数的声明,这一步处理整个代码的上下文。第二步就是代码的运行时,创建函数表达式以及未定义的变量。实际上,我们只是假设了这个概念,这并不在ECMAScript的规范中,但是这个行为常常就是这样解释的。

[1] [2] [3]  下一页

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索函数
, 变量
, 变量声明
, 全局变量
, 代码
, var
, result undefined
, 全局
, 全局变量swiftnsarray
, ajaxjavascript全局变量
, 一个
, javascript全局变量
, var声明变量
编写高质量代码
编写高质量javascript、编写高质量代码、编写高质量代码 pdf、编写高质量代码之java、如何编写高质量代码,以便于您获取更多的相关知识。

时间: 2024-08-02 21:17:14

如何编写高质量的Javascript代码(1)的相关文章

如何编写高质量的VB代码(1)

如何编写高质量的VB代码 简介: 本文描述了如何通过一些技术手段来提高VB代码的执行效率.这些手段可以分为两个大的部分:编码技术和编译优化技术.在编码技术中介绍了如何通过使用高效的数据类型.减少外部引用等编程手段来提高代码执行速度,减少代码消耗的系统资源.在编译优化技术中介绍了如何正确地利用VB提供的编译选项对在编译时最后生成的可执行文件进行优化. 前言 什么是一个高效的软件?一个高效的软件不仅应该比实现同样功能的软件运行得更快,还应该消耗更少的系统资源.这篇文章汇集了作者在使用VB进行软件开发

如何编写高质量的VB代码(2)

如何编写高质量的VB代码(2) 12. 销毁对象 无论编写的是什么软件,程序员都需要考虑在用户决定终止软件运行后释放软件占用的内存空间.但遗憾的是很多程序员对这一点好像并不是很在意.正确的做法是在退出程序前需要销毁程序中使用的对象.例如:Dim FSO as New FileSystemObject注释: 执行操作注释: 销毁对象Set FSO = Nothing对于窗体,可以进行卸载:Unload frmMain 或Set frmMain = Nothing 13. 变长和定长字符串 从技术上

如何编写高质量的VB代码

  前言 什么是一个高效的软件?一个高效的软件不仅应该比实现同样功能的软件运行得更快,还应该消耗更少的系统资源.这篇文章汇集了作者在使用VB进行软件开发时积累下来的一些经验,通过一些简单的例子来向你展示如何写出高效的VB代码.其中包含了一些可能对VB程序员非常有帮助的技术.在开始之前,先让我陈清几个概念. 让代码一次成型:在我接触到的程序员中,有很多人喜欢先根据功能需求把代码写出来,然后在此基础上优化代码.最后发现为了达到优化的目的,他们不得不把代码再重新写一遍.所以我建议你在编写代码之前就需要

应该如何编写高质量的Objective-C代码

  点标记语法 属性和幂等方法(多次调用和一次调用返回的结果相同)使用点标记语法访问,其他的情况使用方括号标记语法. 良好的风格: view.backgroundColor = [UIColor orangeColor]; [UIApplication sharedApplication].delegate; 不良的风格: [view setBackgroundColor:[UIColor orangeColor]]; UIApplication.sharedApplication.delega

深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点_javascript技巧

具体一点就是编写高质量JavaScript的一些要素,例如避免全局变量,使用单变量声明,在循环中预缓存length(长度),遵循代码阅读,以及更多. 此摘要也包括一些与代码不太相关的习惯,但对整体代码的创建息息相关,包括撰写API文档.执行同行评审以及运行JSLint.这些习惯和最佳做法可以帮助你写出更好的,更易于理解和维护的代码,这些代码在几个月或是几年之后再回过头看看也是会觉得很自豪的. 书写可维护的代码(Writing Maintainable Code ) 软件bug的修复是昂贵的,并且

编写高质量JavaScript代码的基本要点_javascript技巧

才华横溢的Stoyan Stefanov,在他写的由O'Reilly初版的新书<JavaScript Patterns>(JavaScript模式)中,我想要是为我们的读者贡献其摘要,那会是件很美妙的事情.具体一点就是编写高质量JavaScript的一些要素,例如避免全局变量,使用单变量声明,在循环中预缓存length(长度),遵循代码阅读,以及更多. 此摘要也包括一些与代码不太相关的习惯,但对整体代码的创建息息相关,包括撰写API文档.执行同行评审以及运行JSLint.这些习惯和最佳做法可以

如何编写高质量JS代码(续)_javascript技巧

继续上一篇文章<如何编写高质量JS代码>今次整理一下javascript函数知识点. 2.使用函数 函数给程序员提供了主要的抽象功能,又提供实现机制.函数可以独立实现其他语言中的多个不同的特性,例如,过程.方法.构造函数,甚至类或模块. 2.1 理解函数调用.方法调用以及构造函数调用之间的不同 针对面向对象编程,函数.方法和类的构造函数是三种不同的概念. 使用模式: 1,函数调用 复制代码 代码如下: function hello(username){     return "hel

编写高质量代码改善C#程序的建议:泛型集合、选择集合和集合的安全

前言 软件开发过程中,不可避免会用到集合,C#中的集合表现为数组和若干集合类.不管是数组还是集合类,它们都有各自的优缺点.如何使用好集合是我们在开发过程中必须掌握的技巧.不要小看这些技巧,一旦在开发中使用了错误的集合或针对集合的方法,应用程序将会背离你的预想而运行. 本文已更新至http://www.cnblogs.com/aehyok/p/3624579.html .本文主要学习记录以下内容: 建议20.使用泛型集合来替代非泛型集合 建议21.选择正确的集合 建议22.确保集合的线性安全 建议

《编写高质量代码:改善c程序代码的125个建议》—— 导读

前 言 为什么写作本书 众所周知,C语言是一门既具有高级语言特点,又有汇编语言特点的通用计算机编程语言,无论是操作系统(如Microsoft Windows.Mac OS X.Linux和UNIX等).嵌入式系统与普通应用软件,还是目前流行的移动智能设备开发,随处都可以看见它依然矫健的身影.它能够轻松地应用于各类层次的开发中,从设备驱动程序和操作系统组件到大规模应用程序,它都能够很好地胜任.毋庸置疑,它是二十几年来使用最为广泛.生命力最强的编程语言,它的设计思想也影响了众多后来的编程语言,例如C