[label][翻译][JavaScript-Translation]七个步骤让你写出更好的JavaScript代码

2022-12-19,,,,

7 steps to better JavaScript

原文链接: http://www.creativebloq.com/netmag/7-steps-better-javascript-51411781
七个步骤让你写出更好的JavaScript代码

随着浏览器的性能提升,新的HTML5 APIS也在不断地被应用,JavaScript在web使用中不断增长。
然而,一行糟糕的代码就有可能会影响到整个网站,产生糟糕的用户体验和造成潜在客户的流失。

开发者必须使用他所能使用的工具和技巧来提高代码的质量,以保证代码每次都可以可靠、准确地执行。
这是一个我一直都在关注的问题,为了保证在开发期间只有高质量的代码才会被发布,我努力了许多年就是为了要找到一个解决办法。

通过这七个步骤不断地去修改完善你的JavaScript项目质量,在这个工作步骤中,甚少的错误将会出现,但将会很容易就被修复,让用户可以顺畅的浏览。

01 代码

在你的函数中通过一个严格的使用声明来调用ECMSScript 5's strict mode,同时使用模块设计模式(module design pattern),在自动执行函数闭包中通过沙箱分离代码模块,从而减少全局变量的使用,通过传递任何外部相关的来让模块代码保持清晰和简洁。另外,你必须通过使用已发布和容易测试的第三方库与框架,使你的函数更加简单,从你的DOM操控和其他的视图层代码中分离出所有的业务逻辑代码。

多人的大项目必须要遵循一套编码规范,例如:Google's JavaScript Style Guide,并需要有强大的代码处理规则,包括通过RequireJS库来调用的异步模块定义的严格依赖包管理,使用Bower或Jam这些包管理来指定你的依赖文件版本,使用具有结构的设计模式,例如:观察者模式,帮助实现你不同的代码模块之间松散通讯。
使用如Git或Subversion這樣子代碼存取倉庫系統是一個好的辦法,通過例如GitHub或者Beanstalk這些服務可以將代碼備份到雲服務器,使得具有恢復先前代碼版本的能力,而且對於更加大型的項目來講,在項目完成合併之前,可以根據各種需求來創建多個分支。

02 文檔

使用与YUIDoc(http://yui.github.io/yuidoc/)或JSDoc(http://usejsdoc.org/)这样风格的结构化注释块格式来注明代码的用途,这样子任何的开发人员可以不通过阅读代码就了解代码的作用,减少误解。
如果需要编辑丰富的、长格式的注释和描述,那么可以使用Markdown语法。使用相关的代码行工具来实现那些结构化注释根据你的代码修改及时更新来自动生成一个文档网站。

03 分析

运行一个静态代码分析工具,如: JSHint(http://jshint.com/) , JSLint(http://jslint.com/)。
这些检查工具可以检查出代码的缺陷和潜在的错误,如:忘记使用"strict mode"或引用未声明的变量,还有检查出漏掉大括号或分号,修正所有工具所提示的问题会提高代码的质量。
对项目团队设置一定的代码强制规范和标准,例如:每一行代码缩进的空格数,怎么放置花括号(curly brace),以及在所有的代码文件中单引号和双引号的使用。

04 测试

一个单元测试是一个独立功能,它通过特定的输入来确认你主要代码中的函数输出的是一个预期值。当代码如期执行时,那么你的自信心就会提高,可以通过Jasmine (http://jasmine.github.io/)或QUnit(http://qunitjs.com/)框架来为了你的每一个函数写单元测试,通过正确的输入参数和非法的输入参数来进行检测,此外,千万别忘记了那些边界情况(edge case)。
善于使用如 BrowserStack(https://www.browserstack.com)或 Sauce Labs(http://saucelabs.com/)服务来进行对在多种操作系统下的多种浏览器的测试,他们允许根据你的测试需求来进行对云端的虚拟机进行调整。这两个服务都提供一个API允许你的单元测试在多个浏览器中同时地自动执行,当他们执行结束之后将会给你返回结果。如果你的代码是保存在 GitHub 中,你就可以使用 BrowserSwarm,这个工具可以在你提交的代码时进行自动的单元测试。

05 测量

代码覆盖工具,如: Istanbul(http://gotwarlost.github.io/istanbul/),可以在对你的函数进行单元测试时检测到你的具体那一行代码在被执行,将这个作为总代码行数的百分比来报告。
对你的单元测试使用一个代码覆盖工具,并添加额外的测试来提高的覆盖率以达到100%,而这个最终将会使你对自己的代码具有更多的自信。

函数复杂度可以使用 Halstead complexity measures(http://en.wikipedia.org/wiki/Halstead_complexity_measures) :
计算机科学家 Maurice Halstead 在1970年代设计了方程式来量化一个函数的复杂度,以函数内的循环、分支和内部中调用的数量来作为根据。
当这个复杂度分数降低,那么函数就会变得更加容易理解和维护,减少错误的可能性。 Plato(https://github.com/es-analysis/plato)这个命令行工具可以评测和生成关于JavaScript code复杂度的可视化表示,帮助确认可优化的函数。在保存前面的测试结果时,可以允许监测进程被一直跟踪、调试。

06 自动化

使用如: Grunt(http://gruntjs.com/) 这样的任务运行器来自动执行文档,分析,测试,代码覆盖和复杂报告生成这些步骤,可以节省你自己的时间和精力,并且提高了发现任何会发生的质量问题。
文中高亮显示的大部分工具和测试框架可以使用 Grunt 任务管理来帮助你提高你的工作流程和你的代码质量,而不需要你抬起你的手指就可以了。

07 处理异常

总之,在某些情况下,你的代码将会在执行中抛出一个错误。 你可以使用 try...catch statement(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch) 来优雅地处理实时的错误,并减少对站点逻辑行为的影响,还可以使用一个网络服务来记录所抛出的运行错误,根据这些报错信息来添加新的单元测试来修改完善你的代码,以及一个接着一个地消除那些错误。

[label][翻译][JavaScript-Translation]七个步骤让你写出更好的JavaScript代码的相关教程结束。

《[label][翻译][JavaScript-Translation]七个步骤让你写出更好的JavaScript代码.doc》

下载本文的Word格式文档,以方便收藏与打印。