一.合理的添加注释

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

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

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

命名的一般规则如下:

  • 变量名应为名词如 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. oracle查看用户所占用的表空间

    select * from (select owner || '.' || tablespace_name name, sum(b) g from (select owner, t.segment_n ...

  2. 1644: [Usaco2007 Oct]Obstacle Course 障碍训练课

    1644: [Usaco2007 Oct]Obstacle Course 障碍训练课 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 383  Solved ...

  3. Weexpack 使用教程

    简介 weexpack 是 weex 新一代的工程开发套件,是基于weex快速搭建应用原型的利器.它能够帮助开发者通过命令行创建weex工程,添加相应平台的weex app模版,并基于模版从本地.Gi ...

  4. SqlServer转换为Mysql

    昨天顺利把MySQL成功安装后,正准备着手把原来项目中的SQL SERVER数据库改为MYSQL数据库,可大量的表结构和表数据如要手动写,那就...... 接下来就是各种百度.谷歌.问先驱等,可得到的 ...

  5. cuda编程学习4——Julia

    书上的例子编译会有错误,修改一下行即可. __device__ cuComplex(float a,float b):r(a),i(b){} /* ========================== ...

  6. Spring Boot 整合 Mybatis 实现 Druid 多数据源详解

    摘要: 原创出处:www.bysocket.com 泥瓦匠BYSocket 希望转载,保留摘要,谢谢! “清醒时做事,糊涂时跑步,大怒时睡觉,独处时思考” 本文提纲一.多数据源的应用场景二.运行 sp ...

  7. TIME_WAIT 另一种解决方式 SO_LINGER

         被TIME_WAIT问题烦得不行,又发现了另一种解决方式,SO_LINGER.      对SO_LINGER解释最通用的自然是<UNP>,现摘录如下      SO_LINGE ...

  8. css3特效

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...

  9. ZooKeeper集群-搭建指南

    第一步: 上传安装程序到Linux 这一步很简单就不在这过多说明了! 第二步: 在Linux上使用命令行安装 第三步: 修改配置文件 1.修改zoo.cfg文件 2.修改集群中各台主机的名称 1).如 ...

  10. 模块“XXX.dll”加载失败

    具体问题:模块“XXX.dll”加载失败 请确保该二进制存储在指定的路径中,或者调试它以检查该二进制或相关的.DLL文件是否有问题  找不到指定的模块. 1.在安装C++软件的时候,有时候安装失败提示 ...