可读性的大部分内容都是和代码缩进相关的,必须保证代码有良好的格式。可读性的另一方面就是注释,一般而言,有如下一些地方需要进行注释

1.1.1 函数和方法

每个函数或方法都应该包含一个注释,描述其目的和用于完成任务所可能使用的算法,陈述事先的假设也非常重要,如参数代表什么,函数是否有返回值等等

1.1.2 大段代码

用于完成单个任务的多行代码应该在前面放一个描述任务的注释

1.1.3 复杂的算法

如果使用了一个独特的方式解决某个问题,则要在注释中解释你是如何做的,这不仅仅可以帮助其它浏览你代码的人,也能在下次你自己查阅代码的时候帮助理解

1.1.4 Hack

因为存在浏览器差异,JavaScript代码一般会包含一些Hack,不要假设其他人在看代码的时候能够理解Hack所要应付的浏览器问题,如果因为某种浏览器无法使用普通的方法,所以你需要用一些不同的方法,那么请将这些信息放在注释中。

1.1.5 代码排版

1.1.5.1 行长度

每行代码应小于 80 个字符。如果代码较长,应尽量选择换行,下一行代码应缩进4 个空格。这样可以使代码排版整齐,减轻阅读代码的疲劳感,以增强代码的可阅读性

1.1.5.2 行结束

JavaScript 语句应该以分号结束。但大多数浏览器允许不写分号,只要在本应是分号的地方有一个换行符就行。但是如果代码行较长需要换行的时候,有哪些注意事项呢?换行应选择在操作符和标点符号之后,最好是在逗号','之后,而不要在变量名、字符串、数字、或')' ']' '++' '--'等符号之后换行。这样可以有效的防止拷贝、粘贴而引起的错误,并可有效地增强代码的可阅读性。

例如:var valueB = valueA ///bad
+1;

可以替换为:var valueC = valueB + ///good
valueA;

1.1.5.3注释

我们会强调代码中注释数量的多少,而轻视了对注释质量的提高。编码是及时添加注释,会给后续代码的维护人员带来很大的便利。但是如果注释不注意更新,或者由于拷贝、粘贴引起的错误的注释,则会误导阅读人员,反而给阅读带来障碍,除了注释要及时更新外,我们还应对注释的内容要特别关注。注释要尽量简单、清晰明了,避免使用含混晦涩的语言,同时着重注释的意义,对不太直观的部分进行注解。

例如:

//following section is used to initialize golbal variables (good)
var valueA = 0; //initialize valueA to be sero (bad)
var valueB = 1;
...
//call f1 function after waiting for 50 seconds. (good)
setTimeout (f1,50000); //set timeout to be 20s (copy error)

大功能块的功能描述:

/*
*@desc:功能描述
*@param:参数描述
*@return:返回值
*/

1.1.5.4缩进

建议使用4个空格来进行缩进

1.1.5.5空白符

适当的空白行可以大大提高代码的可阅读性,可以使代码逻辑更清晰易懂。同时,在表达式中适当的留空白,也会给代码的阅读带来方便,关键字的后面如有括号,则最好在关键字和左括号'('之间留空白,如 for, if, while 等。而函数名和括号之间则不宜留空白,但若是匿名函数,则必须在function 和左括号'('之间留空白,否则,编辑器会误认为函数名为function。在表达式中,二元运算符( 除左括号'(',左方括号'[',作用域点'.')和两个操作数之间最好留空白。一元运算符(若不是词typeof 等)和其操作数之间不宜留空白。逗号','的后面需要留空白,以显示明确的参数间隔,变量间隔等。分号';'之后通常表明表达语句的结束,而应空行。for 的条件语句中,分号之后则应该留空白

总结一句就是缩进和注释可以带来更可读的代码,还有就是用空行来将逻辑相关的代码块分割开可以提高程序的可读性,增加程序的可读性只为了在未来代码更容易维护。

1.2变量和函数命名

JavaScript是严格区分大小写的,名称的也遵循以下规则:

  • 第一个字符必须是字母、下划线、或一个美元符号$
  • 其它字符可以是字母、下划线、美元符号或数字
  • 变量、参数、成员变量、函数等名称均以小写字母开头,构造器的名称以大写字母开头
  • 下划线'_'开头的变量一般习惯于标识私有/局部成员
  • 美元符号'$'开头的变量习惯于标识系统相关,比如系统进程等。应避免用下划线'_'或美元符号'$'来命名标识符。尽可能地降低代码的阅读负担

每一行最多只包含一条语句,必须将分号放在简单语句的结尾外,虽然分号在JavaScript是可有可无了,但是为了压缩后不容易报错,强制性的必须每条js代码都得以分号结束

1.2.1 变量名应为名词

如car或person,如果是私有变量,则在名称前加_下划线

1.2.2 函数名应该为动词开始

如getName(),返回布尔类型值的函数一般以is开始,如isEnable(),如果是普通函数,则第一个字母小写,如果是构造函数,则第一个字母大写。函数名与((左括号)之间不应该有空格。)(右括号)与 开始程序体的{(左大括号)之间应插入一个空格,}(右大括号)应该与函数名在同一行而不应该另起一行

1.2.3 变量和函数都应使用合乎逻辑的名字

不要担心长度,长度问题可以通过处理和压缩

1.2.4 所有变量声明都需要放到函数最顶部声明或者说是作用域开始部位声明

1.3 变量类型透明

因为JavaScript是弱类型(也叫松散类型)语言,很容易忘记变量所应包含的数据类型。使用匈牙利标记法来指定变量类型,匈牙利标记法就是在变量名之前加上一个或多个字符来表示数据类型。JavaScript中最传统的匈牙利标记法是用单个字符表示基本类型:“O”代码对象,“S”代表字符串,“I”代表整数,“F”代表浮点数,“B”代表布尔型。如下所示

var bFound; //布尔型

var iCount; //整数

var sName; //字符串

var oPerson; //对象

javascript变量声明的一点感想

相对于C/C++来说,ECMAScript里的for循环并不能创建一个局部的上下文。

for (var k in {a: 1, b: 2}) {alert(k);
}
alert(k); // 尽管循环已经结束但变量k依然在当前作用域

任何时候,变量只能通过使用var关键字才能声明。

上面的赋值语句:

a = 10;

这仅仅是给全局对象创建了一个新属性(但它不是变量)。“不是变量”并不是说它不能被改变,而是指它不符合ECMAScript规范中的变量概念,所以它“不是变量”(它之所以能成为全局对象的属性,完全是因为javascript中存在一个global对象,这样的操作不是声明一个变量而是给global对象增加一个a属性。

下面看一个简单的例题来说明问题

if (!("a" in window)) {var a = 1;
}
alert(a);

首先,所有的全局变量都是window的属性,语句 var a = 1;等价于window.a = 1;

你可以用如下方式来检测全局变量是否声明

"变量名称" in window

第二,所有的变量声明都在范围作用域的顶部,看一下相似的例子:

alert("a" in window);
var a;

此时,尽管声明是在alert之后,alert弹出的依然是true,这是因为JavaScript引擎首先会扫墓所有的变量声明,然后将这些变量声明移动到顶部,最终的代码效果是这样的:

var a;
alert("a" in window);

第三,你需要理解该题目的意思是,变量声明被提前了,但变量赋值没有,因为这行代码包括了变量声明和变量赋值。

你可以将语句拆分为如下代码:

var a;    //声明
a = 1;    //初始化赋值

所以总结起来就是当变量声明和赋值在一起用的时候,JavaScript引擎会自动将它分为两部以便将变量声明提前,不将赋值的步骤提前是因为他有可能影响代码执行出不可预期的结果。

题目中的代码相当于:

var a;
if (!("a" in window)) {a = 1;
}
alert(a);

根据上述例题的分析,声明变量时如果是声明的局部变量前面一定要加var,如果声明的是全局变量可以不加var(最好限制全局变量的个数,尽量使用局部变量)

下面讲述一个使用var的几个特性

使用var语句多次声明一个变量不仅是合法的,而且也不会造成任何错误。
如果重复使用的一个声明有一个初始值,那么它担当的不过是一个赋值语句的角色。
如果重复使用的一个声明没有一个初始值,那么它不会对原来存在的变量有任何的影响。

没有var声明的变量,是作为全局变量存在的;有var声明的变量,属于局部变量,尤其是在函数内部。并且,经过测试,带var声明比不带var速度要快。函数内尽量多设局部变量,这样即安全又快速,变量操作也更加合理,不会因为函数内胡乱操作全局变量而导致逻辑错误。

声明对象时最好使用对象自面量的方式,这样的速度相对new的方式要快很多。

变量名是自己取的,为了照顾语义和规范,变量名可能稍长,但是注意了,变量名的长度也会影响代码的执行速度。长的变量名声明的执行速度没有短的快。

转载于:https://www.cnblogs.com/liyunhua/p/4491889.html

javascript 代码可读性相关推荐

  1. javascript 代码_如何使您JavaScript代码保持简单并提高其可读性

    javascript 代码 by Leonardo Lima 莱昂纳多·利马(Leonardo Lima) 如何使您JavaScript代码保持简单并提高其可读性 (How to keep your ...

  2. php 怎么写个定时自理器,教你编写更加稳定、可读性强的JavaScript代码的示例

    每个人都有自己的编程风格,也无可避免的要去感受别人的编程风格--修改别人的代码."修改别人的代码"对于我们来说的一件很痛苦的事情.因为有些代码并不是那么容易阅读.可维护的,让另一个 ...

  3. 编写更加稳定、可读性强的JavaScript代码

    每个人都有自己的编程风格,也无可避免的要去感受别人的编程风格--修改别人的代码."修改别人的代码"对于我们来说的一件很痛苦的事情.因为有些代码并不是那么容易阅读.可维护的,让另一个 ...

  4. 翻译-高质量JavaScript代码书写基本要点(转载)

    by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1173 原文作者:S ...

  5. 优化javaScript代码,提高执行效率

    今天看完书,总结了一下可以如何优化 JavaScript . 1.合并js文件 为优化性能,可以把多个js文件(css文件也可以)合并成极少数大文件.跟十个5k的js文件相比,合并成一个50k的文件更 ...

  6. easyui treegrid 获取新添加行inserted_18行JavaScript代码构建一个倒数计时器

    有时候,你会需要构建一个JavaScript倒计时时钟.你可能会有一个活动.一个销售.一个促销或一个游戏.你可以用原生的JavaScript构建一个时钟,而不是去找一个插件.尽管有很多很棒的时钟插件, ...

  7. 如何优雅的编写 JavaScript 代码

    几乎每个大一点公司都有一个"运行时间长,维护的工程师换了一批又一批"的项目,如果参与到这样的项目中来,大部分人只有一个感觉--"climb the shit mounta ...

  8. JavaScript: 代码简洁之道

    一.变量 1.用有意义且常用的单词命名变量 Bad: const yyyymmdstr = moment().format('YYYY/MM/DD'); Good: const currentDate ...

  9. 深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点

    才华横溢的Stoyan Stefanov,在他写的由O'Reilly初版的新书<JavaScript Patterns>(JavaScript模式)中,我想要是为我们的读者贡献其摘要,那会 ...

最新文章

  1. 小程序输入框导致界面上移,在输入的时候固定住页面的解决代码
  2. se(3)-TrackNet: 数据驱动的动态6D物体姿态跟踪, 基于合成域的图片残差校准
  3. 中美德工业互联网路径比较
  4. 微信小程序 wx:for
  5. Go的sync.Cond(四)
  6. https下不加www的强制跳转 - Nginx
  7. WMS学习笔记:1.尝试加载WMS
  8. sift算法_单应性Homograph估计:从传统算法到深度学习
  9. 【ElasticSearch】ElasticSearch immense term错误
  10. Linux的用户和组群管理
  11. 新型基础测绘与实景三维中国建设技术文件【2】基础地理实体分类、粒度及精度基本要求
  12. GeoNet: Deep Geodesic Networks for Point Cloud Analysis
  13. 程序员的工资到底花到哪里去了?
  14. html文档标记语言,html是超文本标记语言标签有
  15. RK988键盘切换蓝牙模式
  16. 如何使用KMS激活win10和office
  17. 视频格式转换器哪个好?怎样使用?
  18. 什么是MapReduce?MapReduce的运行机制是什么?MapReduce的实现过程
  19. el-select动态清除value、el-input回车上传数据
  20. JSF seam 中使用UEditor

热门文章

  1. 点云上的卷积神经网络及其部分应用
  2. 机器学习(六)支持向量机svm初级篇
  3. 余姚中考能用计算机吗,2018年余姚中考政策有大变化,2020年取消奖励加分项目...
  4. python文件备份_基于 Python 的文件备份
  5. python 单一继承定义_Python学习之单继承与多继承
  6. activity 点击后传递数据给fragment_【磨叽教程】Android进阶之Fragment的管理以及事务执行...
  7. siesta在Linux运行,siesta-3.0-b
  8. Kali Linux 从入门到精通(三)-入侵系统定制
  9. 查看oracle小补丁号,oracle 补丁号查询
  10. 前端异步编程之Promise和async的用法