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代码的更多相关文章

  1. 写出更好的 JavaScript 条件语句

    1. 使用 Array.includes 来处理多重条件 // 条件语句 function test(fruit) { if (fruit == 'apple' || fruit == 'strawb ...

  2. 如何写出高质量的JavaScript代码

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

  3. 在用 JavaScript 工作时,我们经常和条件语句打交道,这里有5条让你写出更好/干净的条件语句的建议。

    1.多重判断时使用 Array.includes 2.更少的嵌套,尽早 return 3.使用默认参数和解构 4.倾向于遍历对象而不是 Switch 语句 5.对 所有/部分 判断使用 Array.e ...

  4. 使用 Promises 编写更优雅的 JavaScript 代码

    你可能已经无意中听说过 Promises,很多人都在讨论它,使用它,但你不知道为什么它们如此特别.难道你不能使用回调么?有什么了特别的?在本文中,我们一起来看看 Promises 是什么以及如何使用它 ...

  5. [label][翻译][JavaScript]如何使用JavaScript操纵radio和check boxes

    Radio 和 check boxes是form表单中的一部分,允许用户通过鼠标简单点击就可以选择.当与<textarea>元素的一般JavaScript操纵相比较,这些表单控件(form ...

  6. 翻译连载 | 第 10 章:异步的函数式(下)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

  7. HTTP二、HTTP请求处理过程的七个步骤

      HTTP02 HTTP请求处理过程的七个步骤     1.web服务处理步骤 web服务的处理过程可总结为七个步骤:   1)发起请求:客户端向服务器端发起连接请求,建立”三次握手“: 2)接收请 ...

  8. JavaScript中七种数据类型·中·一

    Standing on Shoulders of Giants; 说到JavaScript里的类型很容易就让人想起 42和"42",分别是string型和number型,但是他们可 ...

  9. JavaScript 基础(七) 箭头函数 generator Date JSON

    ES6 标准新增了一种新的函数: Arrow Function(箭头函数). x => x *x 上面的箭头相当于: function (x){ return x*x; } 箭头函数相当于匿名函 ...

随机推荐

  1. 移动端开发之px,em和rem详解

    px:表示的是绝对的像素值,1px就是1像素大小 em:关于em,网上有资料说是关于父元素的,但是其实个人感觉这种说法是不对的,其实em的大小是根据自身的font-size确定的,而只是正常的情况下子 ...

  2. mysql 查询所有父级名称

    SELECT T2.id, T2.name FROM ( SELECT @r AS _id, ,,@stop) as stop, (SELECT @r := p_id FROM goods_class ...

  3. [Android] 开发第十一天

    MainActivity.java 代码如下: package com.oazzz.test9; import android.support.annotation.Nullable; import ...

  4. java之RestTemplate的访问应用

    一.REST即表述性状态传递(英文:Representational State Transfer,简称REST)是Roy Fielding博士在2000年他的博士论文中提出来的一种软件架构风格.它是 ...

  5. Java 堆栈,内存分配理解

    Java虚拟机的堆.栈.堆栈 https://www.zhihu.com/question/29833675

  6. 迷你MVVM框架 avalonjs 学习教程7、数据缓存

    jQuery的许多功能都可以通过avalon的绑定属性来处理,如click方法对应ms-click,css方法对应ms-css,toggle方法对应ms-visible,它的数据缓存功能avalon也 ...

  7. angular性能优化心得

    原文出处 脏数据检查 != 轮询检查更新 谈起angular的脏检查机制(dirty-checking), 常见的误解就是认为: ng是定时轮询去检查model是否变更.其实,ng只有在指定事件触发后 ...

  8. SpringMVC 中xml 配置多数据源

    1,配置jdbc.properties jdbc.driver_one=... jdbc.url_one=..... jdbc.username_one=... jdbc.password_one=. ...

  9. ArcGIS中各种合并要素(Union、Merge、Append、Dissolve)的异同点分析 转载

    标签: arcgis 杂谈 分类: GISArcGIS中将两个要素类合并成一个要素有Union.Dissolve.Append.Merge等,在Arctoolbox中均有相应工具,但功能上有所不同:U ...

  10. typedef用法和与define的区别

    typedef用来声明一个别名,typedef后面的语法,是一个声明.本来笔者以为这里不会产生什么误解的,但结果却出乎意料,产生误解的人不在少数.罪魁祸首又是那些害人的教材.在这些教材中介绍typed ...