7个让JavaScript变得更好的注意事项


Posted in Javascript onJanuary 28, 2015

   随着浏览器性能提高,伴随着新的HTML5的编程接口的稳步采用,网页上的JavaScript的音量在逐渐增加。然而,一个写得不好的程序编码却拥有着打破整个网站,让用户为之沮丧和驱赶潜在客户的潜力。

开发人员必须使用所有供他们任意使用的工具和技术来提升他们的代码的质量,并有信心确认每次的执行都是可以预见的。这是一个在我心灵深处的话题并且我已经工作多年找到一组开发过程中来遵循的步骤以确保只有最高质量的代码可以被发布。

您只要按照这七个步骤操作就会大大提高您的JavaScript项目的质量。使用这个工作流程,错误将会减少并且将很多处理优化,让用户拥有一个愉悦的上网浏览体验。

01.代码

首先在你的函数里调用ECMAScript5的严格模式和一个“严格模式”的声明,并使用该模块的设计模式,在自执行的函数闭包里,通过沙箱独立的代码模块尽量减少全局变量内的使用,通过任何外部依赖关系以保持全局变量模块清晰,简明。只有使用已建立好的,行之有效的,已通过测试并结果良好的第三方的函数库和框架,并保持你的函数处于小值,从你的模组操作和其他视图层代码里分离出任何业务逻辑或数据。

有多个开发人员的较大的项目应该遵循一套既定的编码原则,如谷歌的JavaScript的风格指南,并需要更强的代码管理规则,包括通过一个库,如RequireJS,使用软件包管理使用异步模块定义(AMD)进行严格的依赖关系管理,使用Bower或Jam(客户端库管理工具)的包装管理来参考您的依赖项文件的特定版本,并采用结构设计模式,如观察者模式,以方便您不同的代码模块之间的松耦合通信。这也是一个明智的想法:使用一个代码存储库系统体系,如Git或Subversion,通过一些服务如源代码或魔豆,让您的代码在云端备份,提供恢复到以前的版本的能力,并且,对更为先进的项目创建一个代码分支来执行不同的功能,在完成之前把它们合并到一起。

02.文件

使用结构化的注释区块格式如YUIDoc或JsDoc到文件的功能,因此任何开发人员可以了解其目的,而不需要研究它的代码,这样可以减少误解。用Markdown语法可以有更丰富,长篇的评论和说明。使用关联的命令行工具来自动生成一个文档的网站:基于这些结构性的意见,它和在您的代码所做的任何修改最新状态一致。

03.往绩分析

定期对您的代码运行一个静态代码分析工具,如JSHint或JSLint。这些对已知的编码缺陷和潜在的错误进行的检查,比如忘记使用严格模式或引用未声明的变量,和缺少括号或分号。纠正任何问题的工具控件,以改善你的代码质量。尝试为您的项目团队设置默认选项,以加强编码标准,如由空格的缩进每一行,在哪里放置花括号,并在整个代码文件中使用单引号或双引号的数目。

04.测试

一个单元测试是一小段独立的功能执行的功能之一:执行其中一个来自你特定输入的主代码库的函数以确认它输出一个预期值。为了提高您的信心,代码将像预期的那样,编写使用的框架,如Jasmine或QUnit为每个功能单元测试,使用预期和未预期的输入参数。但是千万不要忘了那些边缘的情况!

在跨多个操作系统多个浏览器上运行这些测试,通过利用这项服务,如BrowserStack或Sauce Labs,让你可以加速需求中的在云端上地虚拟机地测试。这两个服务提供了一个API,允许你的单元测试能够自动在多个浏览器同时运行,一旦它们完成,就会将结果反馈给你。作为红利,如果你的代码存储在GitHub上,你可以采取BrowserSwarm,这是一个当你提交你的代码会自动运行你的单元测试的工具。

05.测量

代码覆盖工具,如Istanbul测量当你的单元测试对你的函数运行时,哪些代码行数被执行,将它作为该代码行总数的百分比进行报告。对你的单元测试运行一个代码覆盖工具,并增加额外的测试,可以增加你的覆盖率得分至100%,给你对你的代码更大的信心。

函数的复杂性可以用霍尔斯特德复杂度量测来测量:计算机科学家莫里斯·霍尔斯特德在20世纪70年代设立的方程式,一个函数的复杂性的是根据循环,分支和它所包含的函数调用来量化的:函数的复杂性可以使用Halstead的复杂性措施进行测量。当这种复杂的分数降低时,我们就越容易理解和保持这个函数,减少了出错的可能性。命令行工具柏拉图措施和JavaScript代码复杂性的生成的数据的可视化,帮助确定可以改进的功能,同时存储以前的结果,允许跟随着时间的推移跟踪质量的进步。

06.自动化

使用Task runner例如Grunt来自动操作文件编制,分析,测试,覆盖范围和复杂性报告生成的过程,这样就节省了您的时间和精力,并增加解决出现的任何质量问题的机会。大多数的这篇文章中所强调的工具和测试框架都和Grunt有关联,这可以帮助您提高您的工作流程和代码质量并且不必动一根手指。

07.处理异常

不约而同的是,在某些时候,你的代码将在它运行时出现一个错误。使用“try… Catch”语句来适当地处理运行时间的错误和限制您网站上的行为的影响。使用网络服务记录运行时出现的错误。并使用此信息来添加新的单元测试,从而改进你的代码并一个一个地消灭这些错误。

通向成功的步骤

这七个步骤,帮我创作 一些在我到目前为止的职业生涯里我最自豪的代码。它们也是未来的一个很好的基础。在您自己的项目里,承诺使用这些步骤,生产出高品质的JavaScript代码,让我们携手共进,改善网络,一步一步通向成功。

Javascript 相关文章推荐
javascript实现的使用方向键控制光标在table单元格中切换
Nov 17 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
Jan 15 Javascript
jQuery使用andSelf()来包含之前的选择集
May 19 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
Sep 11 Javascript
jQuery遮罩层效果实例分析
Jan 14 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
Sep 19 Javascript
Bootstrap源码解读按钮(5)
Dec 23 Javascript
js 动态生成html 触发事件传参字符转义的实例
Feb 14 Javascript
VsCode新建VueJs项目的详细步骤
Sep 23 Javascript
Vue.js的动态组件模板的实现
Nov 26 Javascript
layer扩展打开/关闭动画的方法
Sep 23 Javascript
使用Vue 自定义文件选择器组件的实例代码
Mar 04 Javascript
简单谈谈javascript代码复用模式
Jan 28 #Javascript
JS动态添加Table的TR,TD实现方法
Jan 28 #Javascript
扒一扒JavaScript 预解释
Jan 28 #Javascript
javascript弹出页面回传值的方法
Jan 28 #Javascript
JS获得选取checkbox整行数据的方法
Jan 28 #Javascript
js获取checkbox值的方法
Jan 28 #Javascript
js树插件zTree获取所有选中节点数据的方法
Jan 28 #Javascript
You might like
一些PHP Coding Tips(php小技巧)[2011/04/02最后更新]
2011/05/02 PHP
WHOOPS PHP调试库的使用
2017/09/29 PHP
js技巧--转义符"\"的妙用
2007/01/09 Javascript
javascript 自定义事件初探
2009/08/21 Javascript
5款Javascript颜色选择器
2009/10/25 Javascript
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
2010/03/17 Javascript
Javascript继承(上)——对象构建介绍
2012/11/08 Javascript
jQuery中nextUntil()方法用法实例
2015/01/07 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
2015/09/18 Javascript
js获取客户端操作系统类型的方法【测试可用】
2016/05/27 Javascript
全面介绍javascript实用技巧及单竖杠
2016/07/18 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
2017/06/09 jQuery
深入理解Vue 的条件渲染和列表渲染
2017/09/01 Javascript
Angular4学习教程之HTML属性绑定的方法
2018/01/04 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
2018/12/13 Javascript
Nodejs监控事件循环异常示例详解
2019/09/22 NodeJs
基于Vue el-autocomplete 实现类似百度搜索框功能
2019/10/25 Javascript
js实现简单的秒表
2020/01/16 Javascript
用Python编写一个简单的Lisp解释器的教程
2015/04/03 Python
深入解析Python中的WSGI接口
2015/05/11 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
python3 对list中每个元素进行处理的方法
2018/06/29 Python
在Python中使用turtle绘制多个同心圆示例
2019/11/23 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
Python如何实现后端自定义认证并实现多条件登陆
2020/06/22 Python
python3.7调试的实例方法
2020/07/21 Python
服装机修工岗位职责
2013/12/26 职场文书
书法比赛获奖感言
2014/02/10 职场文书
写自荐信的注意事项
2014/03/09 职场文书
师范生自荐信模板
2014/05/28 职场文书
高中生毕业评语
2014/12/30 职场文书
新郎新娘致辞
2015/07/31 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
《分一些蚊子进来》读后感3篇
2020/01/09 职场文书
MySQL中日期型单行函数代码详解
2021/06/21 MySQL