让你的JS代码更具可读性
一.合理的添加注释
- 函数和方法——每个函数或方法都应该包含一个注释,描述其目的和用于完成任务所可能使用 的算法。陈述事先的假设也非常重要,如参数代表什么,函数是否有返回值(因为这不能从函 数定义中推断出来)。
- 大段代码——用于完成单个任务的多行代码应该在前面放一个描述任务的注释。
- 复杂的算法——如果使用了一种独特的方式解决某个问题,则要在注释中解释你是如何做的。(这不仅仅可以帮助其他浏览你代码的人,也能在下次你自己查阅代码的时候帮助理解)
二.合理的变量和函数命名
适当给变量和函数起名字对于增加代码可理解性是非常重要的。必须避免出现无法表示所包含的数据类型的无用变量名。有了合适的命名,代码阅读起来就像讲述故事一样,更容易理解。
命名的一般规则如下:
- 变量名应为名词如 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代码更具可读性的更多相关文章
- 教你一招,提升你Python代码的可读性,小技巧
Python的初学者,开发者都应该知道的代码可读性提高技巧,本篇主要介绍了如下内容: PEP 8是什么以及它存在的原因 为什么你应该编写符合PEP 8标准的代码 如何编写符合PEP 8的代码 为什么我 ...
- 最新的JavaScript核心语言标准——ES6,彻底改变你编写JS代码的方式!【转载+整理】
原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructu ...
- 最新的JavaScript核心语言标准——ES6,彻底改变你编写JS代码的方式!
原文地址 迁移到:http://www.bdata-cap.com/newsinfo/1741515.html 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和f ...
- 使用JSLint提高JS代码质量
随着富 Web 前端应用的出现,开发人员不得不重新审视并重视 JavaScript 语言的能力和使用,抛弃过去那种只靠“复制 / 粘贴”常用脚本完成简单前端任务的模式.JavaScript 语言本身是 ...
- 编写高质量JS代码的68个有效方法(十一)
*:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...
- js学习笔记-编写高效、规范的js代码-Tom
编写高效.规范的js代码: 1.变量命名空间问题,尽量使用局部变量,防止命名冲突(污染作用域中的全局变量):全局空间命名的变量可以在对应的文档域任意位置中使用window调用. 2.尽量使用单var定 ...
- JS代码的简单重构与优化
JS代码的简单重构与优化(适合新手) 原文 http://www.cnblogs.com/similar/p/5016424.html Demo . 1 //bad if (age > 20) ...
- js混淆加密,通过混淆Js代码让别人(很难)无法还原
js混淆加密,通过混淆Js代码让别人(很难)无法还原 使用js的混淆加密,其目的是为了保护我们的前端代码逻辑,对应一些搞技术吃饭的公司来说,为了防止被竞争对手抓取或使用自己的代码,就会考虑如何加密 ...
- 编写可维护的js代码
在工作中,制定一套统一的编码风格,可以提高开发效率,维护起来的也要容易很多,也能避免一些不必要的错误出现. 项目中常用的检查编码风格的工具JSLint.JSHint.JSCS.ESLint,,在这呢, ...
随机推荐
- Select的逻辑处理顺序(Transact-SQL)
1. Select 语句基本写法 2. Select的逻辑处理顺序 SQL与其他编程语言不同的明显特征就是代码的处理顺序.在其他编程语言中,常见是按编写代码的先后顺序(从上之下)来处理.但在SQL中, ...
- MD5加密 32位
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; ...
- 剑指offer_数组中的逆序对
题目描述 在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对.输入一个数组,求出这个数组中的逆序对的总数P. 并将P对1000000007取模的结果输出. 即输出P%100 ...
- fopen中的mode(20161115)
mode mode 参数指定了所要求到该流的访问类型.可以是以下: fopen() 中 mode 的可能值列表 mode 说明 'r' 只读方式打开,将文件指针指向文件头. 'r+' 读写方式打开,将 ...
- FormData+Ajax 实现多文件上传 学习使用FormData对象
FormData对象是为序列化表以及创建与表单格式相同的数据(当然是用于XHR传输)提供便利. 今天我们使用dropzone和FormData实现多文件上传功能. var SAMP = null; / ...
- bootstrap常见类的总结
相信大家和我一样,曾经找过bootstrap的类名定义. 无奈没有找到现成的,那我就来总结一下常见类名吧. 基础样式:btn,alert,form,table,input,select.textare ...
- 关于js中两种定时器的设置及清除(转载)
1.JS中的定时器有两种: window.setTimeout([function],[interval]) 设置一个定时器,并且设定了一个等待的时间[interval],当到达时间后,执行对应的方法 ...
- Linux块设备驱动(一) _驱动模型
块设备是Linux三大设备之一,其驱动模型主要针对磁盘,Flash等存储类设备,本文以3.14为蓝本,探讨内核中的块设备驱动模型 框架 下图是Linux中的块设备模型示意图,应用层程序有两种方式访问一 ...
- 开发使用Node.js的一个小技巧
Node.js作为可以在服务器端运行的一门语言,其处理长连接.多请求的优势受到各大编程爱好者的追捧. 但是在开发调试方面却极为不方便,因为每次改动代码后,都需要终止当前进程,重启服务器.supervi ...
- cssLoading效果
http://files.cnblogs.com/files/xdoudou/loaders.css-master.zip