一.合理的添加注释

  • 函数和方法——每个函数或方法都应该包含一个注释,描述其目的和用于完成任务所可能使用 的算法。陈述事先的假设也非常重要,如参数代表什么,函数是否有返回值(因为这不能从函 数定义中推断出来)。
  • 大段代码——用于完成单个任务的多行代码应该在前面放一个描述任务的注释。
  • 复杂的算法——如果使用了一种独特的方式解决某个问题,则要在注释中解释你是如何做的。(这不仅仅可以帮助其他浏览你代码的人,也能在下次你自己查阅代码的时候帮助理解)

二.合理的变量和函数命名

适当给变量和函数起名字对于增加代码可理解性是非常重要的。必须避免出现无法表示所包含的数据类型的无用变量名。有了合适的命名,代码阅读起来就像讲述故事一样,更容易理解。

命名的一般规则如下:

  • 变量名应为名词如 car 或 person。
  • 函数名应该以动词开始,如 getName()。返回布尔类型值的函数一般以 is 开头,如isEnable()。

  • 变量和函数都应使用合乎逻辑的名字,不要担心长度。长度问题可以通过后处理和压缩来缓解。

三.变量类型透明

  由于在 JavaScript 中变量是松散类型的,很容易就忘记变量所应包含的数据类型。合适的命名方式 可以一定程度上缓解这个问题,但放到所有的情况下看,还不够。有三种表示变量数据类型的方式。 第一种方式是初始化。当定义了一个变量后,它应该被初始化为一个值,来暗示它将来应该如何应 用。例如,将来保存布尔类型值的变量应该初始化为 true 或者 false,将来保存数字的变量就应该初 始化为一个数字,如以下例子所示:

  • //通过初始化指定变量类型
  • var found = false; //布尔型
  • var count = -1; //数字
  • var name = ""; //字符串
  • var person = null; //对象

  初始化为一个特定的数据类型可以很好的指明变量的类型。但缺点是它无法用于函数声明中的函数 参数。

第二种方法是使用匈牙利标记法来指定变量类型。匈牙利标记法在变量名之前加上一个或多个字符 来表示数据类型。这个标记法在脚本语言中很流行,曾经很长时间也是 JavaScript 所推崇的方式。 JavaScript 中最传统的匈牙利标记法是用单个字符表示基本类型:"o"代表对象,"s"代表字符串,"i" 代表整数,"f"代表浮点数,"b"代表布尔型。如下所示:

  • //用于指定数据类型的匈牙利标记法
  • var bFound; //布尔型
  • var iCount; //整数
  • var sName; //字符串
  • var oPerson; //对象 

  JavaScript 中用匈牙利标记法的好处是函数参数一样可以使用。但它的缺点是让代码某种程度上难 以阅读,阻碍了没有用它时代码的直观性和句子式的特质。因此,匈牙利标记法失去了一些开发者的宠爱。

最后一种指定变量类型的方式是使用类型注释。类型注释放在变量名右边,但是在初始化前面。这 种方式是在变量旁边放一段指定类型的注释,如下所示:

//用于指定类型的类型注释

  • var found /*:Boolean*/ = false;

  这三种指定变量数据类型的方法。每种都有各自的优势和劣势,要自己在使用之前进行评估。最重要的是要确定哪种最适合你的项目并一致使用。 

让你的JS代码更具可读性的更多相关文章

  1. 教你一招,提升你Python代码的可读性,小技巧

    Python的初学者,开发者都应该知道的代码可读性提高技巧,本篇主要介绍了如下内容: PEP 8是什么以及它存在的原因 为什么你应该编写符合PEP 8标准的代码 如何编写符合PEP 8的代码 为什么我 ...

  2. 最新的JavaScript核心语言标准——ES6,彻底改变你编写JS代码的方式!【转载+整理】

    原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructu ...

  3. 最新的JavaScript核心语言标准——ES6,彻底改变你编写JS代码的方式!

    原文地址 迁移到:http://www.bdata-cap.com/newsinfo/1741515.html 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和f ...

  4. 使用JSLint提高JS代码质量

    随着富 Web 前端应用的出现,开发人员不得不重新审视并重视 JavaScript 语言的能力和使用,抛弃过去那种只靠“复制 / 粘贴”常用脚本完成简单前端任务的模式.JavaScript 语言本身是 ...

  5. 编写高质量JS代码的68个有效方法(十一)

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  6. js学习笔记-编写高效、规范的js代码-Tom

    编写高效.规范的js代码: 1.变量命名空间问题,尽量使用局部变量,防止命名冲突(污染作用域中的全局变量):全局空间命名的变量可以在对应的文档域任意位置中使用window调用. 2.尽量使用单var定 ...

  7. JS代码的简单重构与优化

    JS代码的简单重构与优化(适合新手) 原文  http://www.cnblogs.com/similar/p/5016424.html Demo . 1 //bad if (age > 20) ...

  8. js混淆加密,通过混淆Js代码让别人(很难)无法还原

    js混淆加密,通过混淆Js代码让别人(很难)无法还原   使用js的混淆加密,其目的是为了保护我们的前端代码逻辑,对应一些搞技术吃饭的公司来说,为了防止被竞争对手抓取或使用自己的代码,就会考虑如何加密 ...

  9. 编写可维护的js代码

    在工作中,制定一套统一的编码风格,可以提高开发效率,维护起来的也要容易很多,也能避免一些不必要的错误出现. 项目中常用的检查编码风格的工具JSLint.JSHint.JSCS.ESLint,,在这呢, ...

随机推荐

  1. 阿里宣布Atlas正式开源:带你重返App开发的田园时代

    继Weex之后,阿里在移动技术领域又有开源大动作. 3月13日,手机淘宝安卓客户端容器化框架Atlas正式宣布开源(https://github.com/alibaba/atlas ).Atlas由阿 ...

  2. Spring注解问题,[action中注入service失败

    pring-mvc.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=" ...

  3. mysql命令[转]

    来自:http://www.cnblogs.com/zhangzhu/archive/2013/07/04/3172486.html 1.连接到本机上的MYSQL.首先打开DOS窗口,然后进入目录my ...

  4. 读书笔记 effective c++ Item 34 区分接口继承和实现继承

    看上去最为简单的(public)继承的概念由两个单独部分组成:函数接口的继承和函数模板继承.这两种继承之间的区别同本书介绍部分讨论的函数声明和函数定义之间的区别完全对应. 1. 类函数的三种实现 作为 ...

  5. android使用TextView实现跑马灯的效果(1)

    android使用TextView实现跑马灯的效果 1.activity_main.xml <?xml version="1.0" encoding="utf-8& ...

  6. [笔记]LR和SVM的相同和不同

    之前一篇博客中介绍了Logistics Regression的理论原理:http://www.cnblogs.com/bentuwuying/p/6616680.html. 在大大小小的面试过程中,经 ...

  7. Unity 3D Framework Designing(2)——使用中介者模式解耦ViewModel之间通信

    当你开发一个客户端应用程序的时候,往往一个单页会包含很多子模块,在不同的平台下,这些子模块又被叫成子View(视图),或者子Component(组件).越是复杂的页面,被切割出来的子模块就越多,子模块 ...

  8. Linux下安装Java(JDK8)

    一.文件准备 1.1 文件名称 jdk-8u121-linux-x64.tar.gz 1.2 下载地址 http://www.oracle.com/technetwork/java/javase/do ...

  9. Java EE基础之JSP(三)

         原来准备简单点,用一篇文章介绍完JSP的,没想到细节很多.这是第三篇也是最后一篇,这三篇文章介绍了基本的JSP知识,很多名词概念和用法,一定要在实践项目中使用之后才会有更加亲切的体会.第三篇 ...

  10. iphone与安卓的兼容性问题汇总

    1.日期问题 当使用yyyy-mm-dd格式时,iphone不认,安卓没问题 解决办法:new Date(res.data[i].inventoryDate.replace(/-/g, "/ ...