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

　  随着浏览器性能提高，伴随着新的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代码，让我们携手共进，改善网络，一步一步通向成功。

赞 (0)

相关推荐

  • JavaScript初学者应注意的七个细节详细介绍

    种种语言都有它特别的地方,对于JavaScript来说,使用var就可以声明任意类型的变量,这门脚本语言看起来很简单,然而想要写出优雅的代码却是需要不断积累经验的.本文利列举了JavaScript初学者应该注意的七个细节,与大家分享. (1)简化代码 -------------------------------------------------------------------------------- JavaScript定义对象和数组非常简单,我们想要创建一个对象,一般是这样写的: 复

  • javascipt基础内容--需要注意的细节

    javascipt-基础---细节需要注意的地方: 1.特殊数值:NaN.Infinity.isNaN().isFinite() NaN: 复制代码 代码如下: var a=parseInt('a123');window.alert(a); //输出NaN Infinity: 复制代码 代码如下: window.alert(6/0);//输出Infinity 无穷大(最好不要这样写) isNaN():判断是不是数,不是数返回true,是数返回false 复制代码 代码如下: var a="dd&

  • Javascript 一些需要注意的细节(必看篇)

    1.使用 === 代替 == JavaScript 使用2种不同的等值运算符:===|!== 和 ==|!=,在比较操作中使用前者是最佳实践. "如果两边的操作数具有相同的类型和值,===返回true,!==返回false."--JavaScript:语言精粹 然而,当使用==和!=时,你可能会遇到类型不同的情况,这种情况下,操作数的类型会被强制转换成一样的再做比较,这可能不是你想要的结果. 2.Eval == 邪恶 起初不太熟悉时,"eval"让我们能够访问Jav

  • javascript中的一些注意事项 更新中

    一.prototype原型对象,需要注意的原则是: (1). 使用原型可以大量减少每个对象对内存的需求量,因为对象可以继承许多属性. (2). 即使属性在对象被创建之后才被添加至原型中,对象也能够继承这些属性. 示例代码: 复制代码 代码如下: <script type="text/javascript"> function print(msg) { document.write(msg,'<br/>'); } function printhr() { docu

  • 45个JavaScript编程注意事项、技巧大全

    JavaScript是一个绝冠全球的编程语言,可用于Web开发.移动应用开发(PhoneGap.Appcelerator).服务器端开发(Node.js和Wakanda)等等.JavaScript还是很多新手踏入编程世界的第一个语言.既可以用来显示浏览器中的简单提示框,也可以通过nodebot或nodruino来控制机器人.能够编写结构清晰.性能高效的JavaScript代码的开发人员,现如今已成了招聘市场最受追捧的人. 在这篇文章里,我将分享一些JavaScript的技巧.秘诀和最佳实践,除了

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

      随着浏览器性能提高,伴随着新的HTML5的编程接口的稳步采用,网页上的JavaScript的音量在逐渐增加.然而,一个写得不好的程序编码却拥有着打破整个网站,让用户为之沮丧和驱赶潜在客户的潜力. 开发人员必须使用所有供他们任意使用的工具和技术来提升他们的代码的质量,并有信心确认每次的执行都是可以预见的.这是一个在我心灵深处的话题并且我已经工作多年找到一组开发过程中来遵循的步骤以确保只有最高质量的代码可以被发布. 您只要按照这七个步骤操作就会大大提高您的JavaScript项目的质量.使用这个

  • 分享8个JavaScript库可更好地处理本地存储

    分享8个JavaScript库可更好地处理本地存储

    我为当前项目测试了一些本地存储库.想知道他们有什么很棒的功能吗?继续阅读. Local Storage Bridge https://github.com/krasimir/lsbridge 如果你必须在同一个浏览器中从一个标签页发送消息到另一个标签页,你不必用艰难的方式.Local storage bridge在这里让任务变得更简单. 基本使用: // 发送 lsbridge.send('app.message.error', { error: 'Out of memory' }); // 监

  • Smartour 让网页导览变得更简单(推荐)

    本文介绍了Smartour 让网页导览变得更简单,分享给大家,具体如下: 在遇到网页内容有着较大调整的时候,往往需要一个导览功能去告诉用户,某某功能已经调整到另外一个位置.比较常规的办法是添加一个蒙层,高亮显示被调整的区域,然后通过文字介绍去完成引导.我们把这个功能称为"导览",而 Smartour 则把这个导览的功能抽离出来,提供了一个开箱即用的解决方案. 项目地址:https://github.com/jrainlau/smartour 官方示例:https://jrainlau.

  • 让文件路径提取变得更简单的Python Path库

    让文件路径提取变得更简单的Python Path库

    一.Path 是什么? 该模块提供表示文件系统路径的类,其语义适用于不同的操作系统.路径类被分为提供纯计算操作而没有 I/O 的 纯路径,以及从纯路径继承而来但提供 I/O 操作的 具体路径. 在一些用例中纯路径很有用,例如: 如果你想要在 Unix 设备上操作 Windows 路径(或者相反).你不应在 Unix 上实例化一个 WindowsPath,但是你可以实例化 PureWindowsPath. 你只想操作路径但不想实际访问操作系统.在这种情况下,实例化一个纯路径是有用的,因为它们没有任

  • 5种方法告诉你如何使JavaScript 代码库更干净

    目录 1.使用默认参数代替短路或条件 2.处理多个条件 3.用动态键值对替换开关(即对象文字) 4.避免过多的函数参数 5.使用Object.assign设置默认对象 1.使用默认参数代替短路或条件 默认参数通常比短路更干净. function SomeMethod(paramThatCanBeUndefined) { const localValue = paramThatCanBeUndefined || "Default Value"; console.log(localValu

  • VSCode使React Vue代码调试变得更爽

    VSCode使React Vue代码调试变得更爽

    目录 引言 用 VSCode 调试 React 代码 用 VSCode 调试 Vue 代码 总结 引言 作为前端开发,基本每天都要调试 Vue/React 代码,不知道大家都是怎么调试的,但我猜大概有这么几种: 不调试,直接看代码找问题 console.log 打印日志 用 Chrome Devtools 的 debugger 来调试 用 VSCode 的 debugger 来调试 不同的调试方式效率和体验是不一样的,我现在基本都是用 VSCode debugger 来调试,效率又高.体验又爽.

  • javascript function(函数类型)使用与注意事项小结

    本文实例讲述了javascript function(函数类型)使用与注意事项.分享给大家供大家参考,具体如下: 在ECMAScript中,Function(函数)类型实际上是对象.每个函数都是Function类型的实例,而且都与其他引用类型一样具有属性和方法.由于函数是对象,因此函数名实际上也是一个指向函数对象的指针. 学习要点: 1.函数的声明方式 2.作为值的函数 3.函数的内部属性 4.函数属性和方法 一．函数的声明方式 1.普通的函数声明 function box(num1, num2

  • 理解JavaScript变量作用域更轻松

    JavaScript本身作为一门简单的语言,就其变量作用域问题一样令不少人头晕,这主要是因为JavaScript闭包的存在.本文不打算深入讲解JavaScript变量作用域问题(其实本人也没有能力能把这一话题讲的深入些),也不讲"闭包"话题,本文只讨论最实用的JavaScript作用域知识点. 一.JavaScript作用域分类 JavaScript就两种作用域:全局(window).函数级(function).函数级(function)不要理解为"块级(大括号{}级)&qu

  • 让代码变得更易维护的7个Python库

    随着软件项目进入"维护模式",对可读性和编码标准的要求很容易落空(甚至从一开始就没有建立过那些标准).然而,在代码库中保持一致的代码风格和测试标准能够显著减轻维护的压力,也能确保新的开发者能够快速了解项目的情况,同时能更好地全程保持应用程序的质量. 使用外部库来检查代码的质量不失为保护项目未来可维护性的一个好方法.以下会推荐一些我们最喜爱的 检查代码 (包括检查 PEP 8 和其它代码风格错误)的库,用它们来强制保持代码风格一致,并确保在项目成熟时有一个可接受的测试覆盖率. 检查你的代

  • 使弱类型的语言JavaScript变强势

    弱类型的Javascript不会按照程序员的愿望从实际的变量类型到所需要的数据类型转换,例如一个非常常见的错误,在浏览器脚本中,从表单控件中获取用户将要输入的一个数值类型的变量与另一个数值变量的和.因为变量类型在表单控件中是字符串类型(计时字符串序列包含一个数字)这种尝试将会添加那个字符串到变量,即使这些值碰巧是一些数字,结果在第二个变量将会被转换为字符串类型,在最后只会把从表单控件中得到的变量添加到第一个字符串末尾. 所以强制类型转换还是比较重要的,下面看一下它的几个强制转换的函数: 1. B

随机推荐