JavaScript开发规范需求(规范化代码)

在我的开发工作中，我曾经和没有按照规范开发的同事合作过，和他合作的时候我无法用“开心”来形容。写这篇文章的目的不仅仅是为了和大家分享一点经验，也是为了给以后的合作伙伴提供一些参考。当然，如果我说的有什么不科学的地方，还是希望各界前辈多多指教。以下子项列举了各种规范要求，是针对同事的编码问题提出的，其他很多行业都认同的规范可能就不在赘述了。00-1010对于大型JavaScript项目，项目中包含的所有JavaScript文件通常都会在产品发布时进行压缩。例如，谷歌闭包编译器服务可以用来压缩代码。jQuery的新版本使用了这个工具来压缩代码，这通常会删除开发过程中编写的注释。所有空格和换行符都可以删除，甚至长变量名也可以用短而无意义的变量名替换。这样做的目的是为了加快文件下载速度，同时减少网站访问带来的额外数据流。此外，它在代码保护方面也发挥了一点作用。至少压缩后的代码即使恢复也不容易读取。为了让代码正确地通过压缩，通常要求语句以分号正常结束，大括号也应该严格结束，这取决于压缩工具的要求。所以如果一开始不遵循标准，等压缩错误后再回去找错误，就是浪费时间。

10-1010一般比较完善的开发工具(如Aptana Studio)都有代码“自动格式化”的功能，有助于实现换行、缩进、空格等统一的代码布局。您可以设置自己喜欢的格式标准，例如是否用左大括号开始新的一行。满足这一要求的目的是方便您的开发团队成员获取代码的副本，并使用IDE将其自动格式化为他们喜欢或熟悉的样式以供阅读。同事需要阅读您的代码，可能是因为您编写了通用方法，这些方法也用于其他模块的开发。阅读您的代码可以最深入地了解方法调用和实现的细节，这是简单的API文档无法达到的效果。

1、保证代码压缩后不出错

的要求是最基本的，有利于在方法调用处看到方法的具体引用提示。您还可以使用支持文档工具生成html或其他格式的开发文档，供其他团队成员阅读。可以尝试使用jsdoc-toolkit。如果您自动生成的API来自一个开放平台，就像facebook.com应用程序一样，那么您的文档是为世界上所有开发人员准备的。此外，团队成员通过编写完整的注释来阅读您的代码更方便。通过您的参数描述，团队成员可以很容易地知道您编写的方法转移的实现细节。当然，这也方便了以后的代码维护，这样即使是一个大项目，时间长了，如果你回去修改一些东西，也不会忘记你当时写的代码都是关于什么的。

2、保证代码能通过特定IDE的自动格式化功能

使用标准化且有意义的变量名可以提高代码的可读性。作为大型项目开发的一员，自己编写的代码不仅要让别人容易理解。在大型项目的开发中，其实每个人都可能会编写大量的代码，这些代码都是标准化和命名的。当你将来回顾自己的代码时，它将变得清晰易懂。比如以后系统升级或者增加新功能的时候，修改代码会容易很多。如果你发现你看不懂开头写的代码，那将是一个大笑话。当然，使用有意义的变量名也要尽量使用标准名称，比如这里：var me=这个可能不如var self=这个，因为self在Python中是一个关键字，而在Python中，self就是这个的用法。看下面的例子，加s显然比不加s更科学，所以我们可以知道变量名是复数，可能是数组等。var Li=document . getelementsbytagname(' Li ')var lis=document . getelementsbytagname(' Li ')(9503 . 163.com)。

3、使用标准的文档注释

JavaScript作为一种动态脚本语言，在灵活性上有利有弊。众所周知，不同级别的动态语言开发人员为了实现相同的功能而编写的代码，无论是在规范上还是在语法上，都有很大的不同。无论如何，标准编码没那么搞笑，不会把简单的问题复杂化，也不违反代码可读性的原则。例如，此语句：type of(b)=' string '警报(b)应更改为：if(type of(b)=' string ')警报(b)。与前面的用法一样，使用了运算符解析机制：如果前面的语句返回false，则不会检测到后面的语句。在代码优化方面，也提到要先判断最有可能的情况，像这样写。另一个例子：函数(a){ var p=a；}('a ')应改为：(函数(a){ var p=a；})('a ')，其实function前面的数字和包含function的()括号有着相同的作用，两者都起着操作优先的作用。后者是一种常见且易于理解的防止可变污染的方法。例如，许多流行的JavaScript框架采用后一种方法。我们来讲一个降低代码可读性的例子，比如：函数getpositiontxt(type){ return type==2？Wild' : (type==3？Mall' : (type==4？copy ' : null))；}应改为：function getpostinxt(type){ vartypedata={ ' 2 ' : ' field '，' 3':' shopping mall '，' 4 ' : ' copy ' }；if (typeData[type])返回TYPe DATa[type]；否则返回null}。如果type是一个从0开始的不间断整数，那么直接使用数组会更简单，结果看起来会更清晰。看到前面多层三元表达式的嵌套不晕吗？中文不应该出现在00-1010的语句中。我想大多数人都知道，虽然这不会影响程序的运行，但行业标准的背后显然是有要求的。当然，我们不是用“简单语言”来发展。我不想谈这个问题，但我确实遇到了这样做的人。不知道是不是因为他的英语太差了。至少他会用拼音。此外，向翻译工具寻求帮助也是一个不错的选择。我举一个例子如下，但在教学中出现时可以这样理解：this.user[' name']='张三'或this.user. name='张三'

4、使用规范有意义的变量名

。在参数数量固定的函数中，参数不用于获取参数，因为这样，如果您定义的方法包含更多的脚本，您就无法一目了然地看到该方法接受哪些参数以及它有多少参数。如下所示：var $=function(){ return document . getelementbyid(参数[0])；}应更改为：var $=function(elemid){ return document . getelementbyid(elemid)；}

5、不使用生偏语法

虽然我知道事件是可以动态绑定的，比如使用addEventListener或者jQuery的bind方法，而且动态事件绑定可以让XHTML变得更干净，但是总的来说，我还是建议直接在DOM节点上编写事件，这样可以让代码更容易维护，因为这样做的话，我们在查看源代码的时候就可以很容易知道什么Element绑定到什么方法上了，总之，点击按钮或者链接的时候就更容易知道调了什么。

00-1010不要太依赖DOM的一些内容特性去调用不同的脚本代码，而是定义不同函数的方法，然后在DOM上调用，这样不管DOM是按钮还是链接，方法调用都是一样的。例如，下面的实现显然会有问题：函数myBtnClick(obj){ if (/OK/)。测试innerhtml))警报(。Else if (/cancel/)。test (obj.innerhtml))警报(“取消”)；else警报(“其他”)；} a herf=' javascript:'onclick=' mybtnclick(this)' ok/aaherf=' JavaScript 3360；'onclick=' mybtnclick(this)' cancel/a上面的例子实际上是在一个函数中处理两件事，应该分为两个函数。如上所述，如果把链接改成一个按钮，比如把它改成这样：输入类型=' button ' onclick=' myBtnClick(this)' value=' ok '/，那么在myBtnClick函数中obj.innerHTML就会出错，因为obj.value应该在这个时候使用，而如果把按钮名称从中文改成英文，也会出错，所以这样的问题太多了。

6、不在语句非赋值地方出生中文

，因为JavaScrip是弱类型的，所以有些人在编写函数的时候，似乎会随便对待返回类型。我认为它应该像强类型语言一样返回。看下面两个例子：函数get username(userid){ if(data[userid])返回data[userid]；elsereturn false}应改为：函数get username(userid){ if(data[userid])返回data[userid]；elsereturn“”；}如果这个方法是在C#中定义的，我们知道它要返回的数据类型应该是字符串，所以如果没有找到这个数据，我们应该返回一个空字符串，而不是布尔值或者其他不合适的类型。这并不影响函数以后的调用，因为返回的空字符串在逻辑判断上可以看作是“not”，和false是一样的，除非我们用“===”或者typeof来判断。

7、明确定义函数固定数量的参数

使用标准绝对是有益的，那么为什么有些人还是不使用标准呢？我觉得可能是懒，也可能是习惯。可能有人会告诉我，少写引号可以减少文件大小，我觉得有道理，但不是重点。对于服务器返回的JSON数据，可以使用Firefox浏览器的JSONView插件(像查看XML一样显示在树中)轻松查看标准结构。另外，如果使用jQuery进行开发，最新版本的jQuery1.4对JSON格式的要求更高，可以自行参考jQuery的更新文档。例如，{name:'Tom'}或{'name':'Tom'}应改为{'name':'Tom'}。

00-1010代码调整或重构后，应及时删除以前编写的不再使用的代码。如果你认为这些代码有一定的使用价值，可以把它们剪切到临时文件中。留在项目中不仅会增加文件大小，还会干扰团队的其他成员甚至他们自己。我怕以后回头看代码，不明白这是什么方法，有没有用过。当然，您可以使用文档注释标记@deprecated将此方法标记为不推荐使用。00-1010对于大型项目，一些开发成员一般会实现一些常用的方法，而另一些开发成员则会熟悉这些常用的方法，然后在自己的模块满足调用需求时直接调用，而不是像一些喜欢“单干”、完全看不懂这些常用方法文档的开发人员，用自己的代码重新编写，这样不仅会产生多余的代码，还会影响团队开发的效率。没有团队精神。比如在公共类文件Common.js中有一个函数$(elemid){ returndocument . getelementbyid(elemid)}的定义，所以这个函数的重复定义不应该在Mail.js中再次出现，尤其是对于一些复杂的方法。00-1010当有几种方法可以实现同类功能时，要根据场景选择最适合的方法。以下是jQuery框架的两个AJAX方法。如果确定服务器返回的数据是JSON，应该直接使用$。getJSON而不是使用$。获取数据，然后使用eval函数将其转换为JSON对象。如果在此请求中要传输大量数据，则需要$。不应使用post，还应采用指定返回的datatype(设置dataType参数)的方法。如果美元。使用了getJSON，我们在代码中一眼就能看出JSON是请求服务器返回的。提示：在jQuery1.4之后，如果数据输出的ContentType由服务器设置，例如，ASP.NET c#设置响应。内容类型=' application/JSON '，然后是$。get将与$.getJSON. 10-10没有什么不同，发现有人在页面下载后使用DIV保存JSON数据以备后用，就像这样：DIV id=' JSON ' { name ' : ' Tom ' }/DIV。显然，这个div不用于界面显示。如果我们必须这样做，我们可以使用HTML文件来缓存数据，至少使用隐藏字段来存储这些数据更合理。例如：输入类型='隐藏'值=' {'name' :' Tom'}'/。实际上，我们也可以使用窗口对象来保存一些数据。和上面的例子一样，我们可以直接在AJAX请求页面中包含这样的脚本块：script window . user data={ ' name ' : ' Tom ' }；/script，当$('#MyDiv ')时。html(数据)是在AJAX请求回调函数中执行的，这个变量在窗口上立即可用。eval(document . getelementbyid(' user data ')。innerhtml)是不可避免的。如果窗口对象中存储了大量的数据，在不使用时应该及时手动清理，只有在浏览器刷新或重启后才会消失，这样会增加内存开销。00-1010代码优化是每个程序员应该努力实现的目标，也应该是程序员永恒的追求。写代码的时候，不要急着实现功能。如果你想思考如何写代码，代码的执行效率会更好。例如，如果在$(elemyid){ return document }中有一个快捷方法functoin。getElementById (elemyid)}定义getElementById，那么有人可能会编写这样的代码$ ('mydiv ')。parentnode。remove child($(“my div”))。实际上，getElementById DOM搜索在这里执行了两次，如果改成这样就更好了：var myDiv=$(' myDiv ')；my div . parent node . remove child(my div).好在getElementById的DOM搜索速度比较快，如果换成getElementsByTagName，应该更注重优化。jQuery开发团队也提醒大家注意这个问题。当然，代码优化技能需要个人积累。有个朋友曾经跟我说，他写网站后台代码从来不用考虑优化，因为他们的网站用的是至强四核服务器，我觉得很可笑。

10-1010的能力对于每个程序员来说都是非常重要的，也是决定一个程序员水平的重要因素。它可以细化需求，抽象出不同的类，然后有条不紊地编写代码，这样代码结构清晰，可读性高，代码容易维护，又不会太程序化，没有章法，可以算是一个优秀的程序员。作者：网络快讯来源：http://webflash.cnblogs.com。