web前端：14条最佳JS代码编写技巧

作者:paranimage.com 更新于： 2020-12-10 14:21:53

　　代码就是程序员用开发工具所支持的语言写出来的源文件，是一组由字符、符号或信号码元以离散形式表示信息的明确的规则体系。代码设计的原则包括唯一确定性、标准化和通用性、可扩充性与稳定性、便于识别与记忆、力求短小与格式统一以及容易修改等。源代码是代码的分支，某种意义上来说，源代码相当于代码。

　　摘要：写任何编程代码，不同的开发者都会有不同的见解。但参考一下总是好的，下面是来自JavascriptToolbox发布的14条最佳JS代码编写技巧。

　　写任何编程代码，不同的开发者都会有不同的见解。但参考一下总是好的，下面是来自JavascriptToolbox发布的14条最佳JS代码编写技巧。

　　1.总是使用var

　　在Javascript中，变量不是全局范围的就是函数范围的，使用var关键词将是保持变量简洁明了的关键。当声明一个或者是全局或者是函数级（function-level）的变量，需总是前置var关键词，下面的例子将强调不这样做潜在的问题。

　　不使用Var造成的问题

　　vari=0;//Thisisgood-createsaglobalvariable

　　functiontest(){

　　for(i=0;i10;i++){

　　alert("HelloWorld!");

　　}

　　}

　　test();

　　alert(i);//Theglobalvariableiisnow10!

　　因为变量函数中变量i并没有使用var使其成为函数级的变量，在这个例子中它引用了全局变量。总是使用var来声明全局变量是一个很多的做法，但至关重要的一点是使用var定义一个函数范围的变量。下面这两个方法在功能上是相同的：

　　正确的函数

　　functiontest(){

　　vari=0;

　　for(i=0;i10;i++){

　　alert("HelloWorld!");

　　}

　　}

　　正确的函数

　　functiontest(){

　　for(vari=0;i10;i++){

　　alert("HelloWorld!");

　　}

　　}

　　2.特性检测而非浏览器检测

　　一些代码是写来发现浏览器版本并基于用户正使用的客户端的对其执行不同行为。这个，总的来说，是一个非常糟的实践。更好的方法是使用特性检测，在使用一个老浏览器可能不支持的高级的特性之前，首先检测（浏览器的）是否有这个功能或特性，然后使用它。这单独检测浏览器版本来得更好，即使你知道它的性能。你可以在这里找到一个深入讨论这个问题的文章。

　　例子：

　　if(document.getElementById){

　　varelement=document.getElementById('MyId');

　　}

　　else{

　　alert('Yourbrowserlacksthecapabilitiesrequiredtorunthisscript!');

　　}

　　3.使用方括号记法

　　当访问由执行时决定或者包括要不能用.号访问的对象属性，使用方括号记法。如果你不是一个经验丰富的Javascript程序员，总是使用方括号是一个不错的做法。

　　对象的属性由两种固定的方法来访问：.记法和[]方括号记法：

　　.号记法

　　MyObject.property

　　[]方括号记法

　　MyObject["property"]

　　使用.号，属性名是硬代码，不能在执行时改变。使用[]方括号，属性名是一个通过计算属性名而来的字符串。字符串要以是硬代码，也可能是变量，甚至可以是一个调回一个字母串值的函数。如果一个属性名在执行产生，方括号是必须，如果你有value1″,value2″,和value3″这样的属性，并且想利用变量i=2来访问

　　这个可以运行：

　　MyObject["value"+i]

　　这个不可以：

　　MyObject.value+i

　　并且在某些服务器端环境（php、Struts等）下，Form表单被附加了[]号来表示Form表单在服务器端必须被当作数组来对待。如此，用.号来引用一个包含[]号的字段将不会执行，因为[]是引用一个Javascript数组的语法。所以，[]号记法是必须的：

　　这个可以运行：

　　formref.elements["name[]"]

　　这个不可以：

　　formref.elements.name[]

　　推荐使用[]方括号记法是说当其需要时（明显地）总是使用它。当不是严格需要使用它的时候，它是一个私人的偏好和习惯。一个好的经验原则是，使用.号记法访问标准的对象属性，使用[]方括号记法访问由页面定义的对象属性。这样，document["getElementById"]()是一个完美可行的[]方括号记法用法，但document.getElementById()在语法上是首选，因为getElementById是一个DOM规范中定义的一个标准文档对象属性。混合使用这两个记法使哪个是标准对象属性，哪个属性名是由上下文所定义的，在代码中显得清晰明了：

　　document.forms["myformname"].elements["myinput"].value

　　这里，forms是document的一个标准属性，而表单名myformname则是由页面所定义的。同时，elements和value属性都是由规范所定义的标准属性。而myinput则是由页面所定义的。这页是句法让人非常容易理解（代码的内容），是一个推荐遵循的习惯用法，但不是严格原则。

　　4.避免eval

　　在Javascript中，eval()功能是一个在执行期中执行任意代码的方法。在几乎所有的情况下，eval都不应该被使用。如果它出现在你的页面中，则表明你所做的有更好的方法。举一个例子，eval通常被不知道要使用方括号记法的程序员所使用。

　　原则上，Evalisevil（Eval是魔鬼）。别使用它，除非你是一个经验丰富的开发者并且知道你的情况是个例外。

　　5.正确地引用表单和表单元素

　　所有的html表单都应该有一个name属性。对于XHTML文档来说，name属性是不被要求的，但Form标签中应有相应有id属性，并必须用document.getElementById()来引用。使用像document.forms[0]这样的索引方法来引用表单，在几乎所有情况下，是一个糟糕的做法。有些浏览器把文档中使用form来命名的元素当作一个可用的form属性。这样并不可靠，不应该使用。

　　下面这个例子用使用方括号和正确的对象引用方法来展示如何防止错误地引用一个表单的input：

　　正确引用表单Input：

　　document.forms["formname"].elements["inputname"]

　　糟糕的做法:

　　document.formname.inputname

　　如果你要引用一个函数里的两个表单元素，较好的做法是先引用这个form对象，并将其储存在变量中。这样避免了重复查询以解决表单的引用：

　　varformElements=document.forms["mainForm"].elements;

　　formElements["input1"].value="a";

　　formElements["input2"].value="b";

　　当你使用onChange或者其他类似的事件处理方法，一个好的做法是总是通过一个引来把input元素本身引用到函数中来。所有input元素都带有一个对包含其在内的Form表单有一个引用：

　　inputtype="text"name="address"onChange="validate(this)"

　　functionvalidate(input_obj){

　　//引用包含这个元素的form

　　vartheform=input_obj.form;

　　//现在你可以不需要使用硬代码来引用表单自身

　　if(theform.elements["city"].value==""){

　　alert("Error");

　　}

　　}

　　通过对表单元素的引用来访问表单的属性，你可以写一个不包含硬代码的函数来引用这个页面中任何一个有特定名的表单。这是一个非常好的做法，因为函数变得可重用。

　　避免with

　　Javascript中的with声明在一个作用域的前端插入一个对象，所以任何属性/变量的引用将会倚着对象被首先解决。这通常被用作一个避免重复引用的快捷方法：

　　使用with的例子：

　　with(document.forms["mainForm"].elements){

　　input1.value="junk";

　　input2.value="junk";

　　}

　　但问题在于程序员并没有方法来验证input1或input2实际上已经被当作Form元素数组的属性来解决。它首先以为这些名来检测属性，如果找不到，它将会继续（向下）检测这个作用域。最后，它在全局对象中尝试把input1和input2作为一个全局对象来对待，而这以一个错误作为结尾。

　　变通的方法是：创建一个引用来减少引用的对象，并使用它来解决这些引用。

　　使用一个引用：

　　varelements=document.forms["mainForm"].elements;

　　elements.input1.value="junk";

　　elements.input2.value="junk";

　　7.在锚点中使用onclick替代javascript:Pseudo-Protocol

　　如果你想在a标签中触发Javascript代码，选择onclick而非JavaScript:pseudo-protocol；使用onclick来运行的Javascript代码必须返回ture或者false（oranexpressionthanevaluestotrueorfalse[这句要怎么翻译呢?我是这样理解的：一个优先性高于true或false的表达式]）来返回标签本身：如果返回true，则锚点的href将被当作一个一般的链接；如果返回false，则href会被忽略。这就是为什么returnfalse;经常被包含在onclick所处理代码的尾部。

　　正确句法：

　　ahref="javascript_required.html"go/a

　　在这个实例中，doSomething()函数(定义于页面的某个角落)将在被点击时调用。href将永远不会被启用了Javascript的浏览器访问。在你可以提醒Javascript是必须的、而用户未启用之的浏览器中，文档javascript_required.html才会被加载。通常，当你确保用户将会开启Javascript支持，为尽量简化，链接将只包含href=#。而这个做法是不被鼓励的。通常有一个不错的做法是：可以提供没用启用javascript一个返回本地的页面。

　　有时，众多想要分情况来访问一个链接。例如，当一个用户要离开你的一个表单页面，而想先验证来确保没有东西被改变。在这个情况下，你的onclick将会访问一个返回询问链接是否应该被遵循的函数：

　　有条件的链接访问:

　　ahref="http://www.kokojia.com/"Home/a

　　functionvalidate(){

　　returnprompt("Areyousureyouwanttoexitthispage?");

　　}

　　在这个实例中，validate()函数必须只返回ture或false。ture的时候用户将被允许问题home页面，或false的时候链接不被访问。这个例子提示确认（其行为），以访问ture或false，这完全由用户点击确实或者取消决定。

　　下面是一些不应该的例子。如果你在自己的页面中看到下面这样的代码，这是不正确的，需要被修改：

　　什么是不应该做的：

　　ahref="javascript:doSomething()"link/a

　　ahref="#"link/a

　　ahref="#"link/a

　　ahref="#"link/a

　　8.使用一元+号运算符使类型转向Number

　　在Javascript中，+号运算符同时充当数学加号和连接符。这会在form表单的域值相加时出现问题，例如，因为Javascript是一个弱类型语言，form域的值将会被当作数组来处理，而你把它们+一起的时候，+将被当成连接符，而非数学加号。

　　有问题的例子:

　　formname="myform"action="[url]"

　　inputtype="text"name="val1"value="1"

　　inputtype="text"name="val2"value="2"

　　/form

　　functiontotal(){

　　vartheform=document.forms["myform"];

　　vartotal=theform.elements["val1"].value+theform.elements["val2"].value;

　　alert(total);//这个将会弹出"12",但你想要的是3!

　　}

　　解决这个问题，Javascript需要一个提示来让它把这些值当做数字来处理。你可以使用+号来把数组转换成数字。给变量或者表达式前置一个+号将会强制其当作一个数字来处理，而这也将使得数学+得以成功应用。

　　修改好的代码：

　　functiontotal(){

　　vartheform=document.forms["myform"];

　　vartotal=(+theform.elements["val1"].value)+(+theform.elements["val2"].value);

　　alert(total);//Thiswillalert3

　　}

　　9.避免document.all

　　document.all是由Microsoft的IE所引进的，并不是一个标准的JavascriptDOM特性。尽管大多数新的浏览器支持它以支持依赖于它的糟糕代码，（而）还有很多浏览器是不支持的。

　　并没有理由其他方法都不适用，而一个老的IE浏览器（5.0）需要支持，而在Javascript中使用document.all作为一个折衷方法。你并不需要使用document.all来检测其是不是IE浏览器，因为其他浏览器现在一般都支持。

　　只把document.all当做最后的选择：

　　if(document.getElementById){

　　varobj=document.getElementById("myId");

　　}

　　elseif(document.all){

　　varobj=document.all("myId");

　　}

　　一些使用document.all的原则：

　　同尝试其他方法

　　当其作为最后的选择

　　当需要支持5.0版本以下的IE浏览器

　　总是使用if(document.all){}来查看是否支持.

　　10.不要在脚本代码块中使用HTML注释

　　在Javascript的旧日子（1995）里，诸如Netscape1.0的一些浏览器并不支持或认识script标签。所以，当Javascript第一次被发布，需要有一个技术来让实些代码不被当做文本显示于旧版浏览器上。有一个hack是在代码中使用HTML注释来隐藏这些代码。

　　使HTML注释并不好：

　　scriptlanguage="javascript"

　　!--

　　//codehere

　　//--

　　/script

　　在今天，没有任何一个常用的浏览器会忽略掉script标签。因此，再没必要隐藏Javascript源代码。事实上，它还可以因为下面的理由，被认为是无益的：

　　在XHTML文档中，源代码将向所有浏览器隐藏并被渲染成无用的（内容）；

　　–在HTML注释并不允许，这个会让任何递减操作将失效。

　　11.避免乱用全局命名空间

　　一般很少需要全部变量和函数。全局使用将可能导致Javascript源文件文档冲突，和代码中止。因此，一个好的做法是在一个全局命名空间内采用函数性的封装。有多个方法可以完成这个任务，有此相对比较复杂。最简单的方法是创建一个全局对象，并把属性和方法指派给这个对象：

　　创建一个命名空间：

　　varMyLib={};//globalObjectcointainer

　　MyLib.value=1;

　　MyLib.increment=function(){MyLib.value++;}

　　MyLib.show=function(){alert(MyLib.value);}

　　MyLib.value=6;

　　MyLib.increment();

　　MyLib.show();//alerts7

　　命名空间也可以使用Closures（闭包?）来创建，并且PrivateMemberVariables（私有变量?）也可以伪装于Javascript中。

　　12.避免同步的ajax调用

　　当使用Ajax请求时，你要么选择异步模式，要么使用同步模式。当浏览器行为可以继续执行，异步模式将请求放在后台执行，同步模式则会等待请求完成后才继续。

　　应该避免同步模式做出的请求。这些请求将会对用户禁用浏览器，直至请求返回。一旦服务器忙，并需要一段时间来完成请求，用户的浏览器（或者OS）将不能做任何其他的事，直至请求超时。

　　如果你觉得自己的情况需要同步模式，最大的可能是你需要时间来重新想一下你的设计。很少（如果有的话）实际上需要同步模式的Ajax请求。

　　13.使用JSON

　　当需要将数据结构存储成纯文本，或者通过Ajax发送/取回数据结构，尽可能使用JSON代替XML。JSON(JavaScriptObjectNotation)是一个更简洁有效的数据存储格式，并且不依赖任何语言（andisalanguage-neutral）。

　　14.使用正确的script标签

　　不造成在script中的使用LANGUAGE属性。一个合适的方式是创建如下的Javascript代码块：

　　//codehere

　　现代程序语言中，源代码可以书籍或磁带形式出现，但最为常用格式是文本文件，这种典型格式的目的是为了编译出计算机程序。计算机源代码最终目的是将人类可读文本翻译成为计算机可执行的二进制指令，这种过程叫编译，它由通过编译器完成。