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代码的更多相关文章
-
写出更好的 JavaScript 条件语句
1. 使用 Array.includes 来处理多重条件 // 条件语句 function test(fruit) { if (fruit == 'apple' || fruit == 'strawb ...
-
如何写出高质量的JavaScript代码
优秀的Stoyan Stefanov在他的新书中(<Javascript Patterns>)介绍了很多编写高质量代码的技巧,比如避免使用全局变量,使用单一的var关键字,循环式预存长度等 ...
-
在用 JavaScript 工作时,我们经常和条件语句打交道,这里有5条让你写出更好/干净的条件语句的建议。
1.多重判断时使用 Array.includes 2.更少的嵌套,尽早 return 3.使用默认参数和解构 4.倾向于遍历对象而不是 Switch 语句 5.对 所有/部分 判断使用 Array.e ...
-
使用 Promises 编写更优雅的 JavaScript 代码
你可能已经无意中听说过 Promises,很多人都在讨论它,使用它,但你不知道为什么它们如此特别.难道你不能使用回调么?有什么了特别的?在本文中,我们一起来看看 Promises 是什么以及如何使用它 ...
-
[label][翻译][JavaScript]如何使用JavaScript操纵radio和check boxes
Radio 和 check boxes是form表单中的一部分,允许用户通过鼠标简单点击就可以选择.当与<textarea>元素的一般JavaScript操纵相比较,这些表单控件(form ...
-
翻译连载 | 第 10 章:异步的函数式(下)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
-
HTTP二、HTTP请求处理过程的七个步骤
HTTP02 HTTP请求处理过程的七个步骤 1.web服务处理步骤 web服务的处理过程可总结为七个步骤: 1)发起请求:客户端向服务器端发起连接请求,建立”三次握手“: 2)接收请 ...
-
JavaScript中七种数据类型&#183;中&#183;一
Standing on Shoulders of Giants; 说到JavaScript里的类型很容易就让人想起 42和"42",分别是string型和number型,但是他们可 ...
-
JavaScript 基础(七) 箭头函数 generator Date JSON
ES6 标准新增了一种新的函数: Arrow Function(箭头函数). x => x *x 上面的箭头相当于: function (x){ return x*x; } 箭头函数相当于匿名函 ...
随机推荐
-
LeetCode 389. Find the Difference
Given two strings s and t which consist of only lowercase letters. String t is generated by random s ...
-
jquery 获取 scrollHeight
著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:匿名用户链接:http://www.zhihu.com/question/20985674/answer/16807177来源 ...
-
PHP 开启报错机制
屏蔽PHP错误提示 方法一:在有可能出错的函数前加@,然后or die("") 如: @mysql_connect(...) or die("Database Conne ...
-
BAT笔试试题常见试题总结含答案(持续更新。。。)
(1)试题例如以下: class A { int a; short b; int c; char d; }; class B { double a; short b; int c; char d; } ...
-
Android锁定屏幕或关闭状态-screen,高速按两次音量向下键来实现拍摄功能(1.1Framework在实现的形式层广播)
思想的实现: WindowManagerService循环读取下面的关键信息和分发形式.在PhoneWindowManager.interceptKeyBeforeQueueing方法中进行消 ...
-
配置Log4J(转载)
Log4J的配置文件(Configuration File)就是用来设置记录器的级别.存放器和布局的,它可接key=value格式的设置或xml格式的设置信息.通过配置,可以创建出Log4J的运行环境 ...
-
Hadoop集群的hbase介绍、搭建、环境、安装
1.hbase的介绍(自行百度hbase,比我总结的全面具体) HBase – Hadoop Database,是一个高可靠性.高性能.面向列.可伸缩的分布式存储系统,利用HBase技术可在廉价PC ...
-
CrawlSpiders
1.用 scrapy 新建一个 tencent 项目 2.在 items.py 中确定要爬去的内容 # -*- coding: utf-8 -*- # Define here the models f ...
-
在mysql配置文件修改sql_mode或sql-mode 怎么办?
很多在安装程序配置数据库这一步中会出现: 请在mysql配置文件修改sql_mode或sql-mode 这个问题处理很简单: mysql中修改my.cnf,找到sql_mode,修改值为: NO_AU ...
-
【css】css规范
说法一: 属性的书写顺序, 举个例子: .hotel-content { /* 定位 */ display: block; position: absolute; left: 0; top: 0; / ...