javascript 代码可读性
可读性的大部分内容都是和代码缩进相关的,必须保证代码有良好的格式。可读性的另一方面就是注释,一般而言,有如下一些地方需要进行注释
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的方式要快很多。
变量名是自己取的,为了照顾语义和规范,变量名可能稍长,但是注意了,变量名的长度也会影响代码的执行速度。长的变量名声明的执行速度没有短的快。
javascript 代码可读性的更多相关文章
- 推荐15个最好用的 JavaScript 代码压缩工具
JavaScript 代码压缩是指去除源代码里的所有不必要的字符,而不改变其功能的过程.这些不必要的字符通常包括空格字符,换行字符,注释以及块分隔符等用来增加可读性的代码,但并不需要它来执行. 在这篇 ...
- 编写更加稳定/可读的javascript代码
每个人都有自己的编程风格,也无可避免的要去感受别人的编程风格--修改别人的代码."修改别人的代码"对于我们来说的一件很痛苦的事情.因为有些代码并不是那么容易阅读.可维护的,让另一个 ...
- 深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点
深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点 2011-12-28 23:00 by 汤姆大叔, 139489 阅读, 119 评论, 收藏, 编辑 才华横溢的 ...
- 高质量JavaScript代码书写基本要点
翻译-高质量JavaScript代码书写基本要点 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/ ...
- 可进行JavaScript代码测试与调试的12个网站
概述:JavaScript是网站前端开发最为重要的一门编程语言,本文收集了能够在线测试与调试JavaScript代码的12个网站 1.JS Bin JS bin是一个为JavaScript和CSS爱好 ...
- 如何管理你的 Javascript 代码
今天不聊技术的问题,咱们来聊聊在前端开发中如何管理好自己的 Javascript 代码.首先,咱们先来说说一般都有哪些管理方式?我相信 seajs . requirejs 对于前端开发者而言都不陌 ...
- [转] 翻译-高质量JavaScript代码书写基本要点 ---张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1173 原文作者:St ...
- 高质量JavaScript代码书写基本要点学习
高质量JavaScript代码书写基本要点学习 可维护的代码意味着: •可读的 •一致的 •可预测的 •看上去就像是同一个人写的 •已记录 最小全局变量(Minimizing Globals) ...
- 编写高质量JavaScript代码绳之以法(The Essentials of Writing High Quality JavaScript)翻译
原文:The Essentials of Writing High Quality JavaScript 才华横溢的Stoyan Stefanov,在他写的由O'Reilly初版的新书<Java ...
随机推荐
- .net破解一(反编译,反混淆-剥壳)
大家好,前段时间做数据分析,需要解析对方数据,而数据文件是对方公司内部的生成方式,完全不知道它是怎么生成的. 不过还好能拿到客户端(正好是C#开发)所以第一件事就是用Reflector编译,但是没有想 ...
- O2O营销模式(Online To Offline)
什么是O2O营销模式 O2O营销模式又称离线商务模式,是指线上营销线上购买带动线下经营和线下消费.O2O通过打折.提供信息.服务预订等方式,把线下商店的消息推送给互联网用户,从而将他们转换为自己的线下 ...
- matlab如何建立一个空矩阵,然后往里面赋值
x=:; y=[]; :length(x) % y=[y;x(i)];%把每一个x都放到Y里,成为一列 y=[y,x(i)];%把每一个x都放到Y里,成为一行 end
- C++折半插入排序
代码如下: #include <iostream> using namespace std; void insertSort(int a[], int n) { for(int i=1;i ...
- 【BZOJ 2152】聪聪可可 点分治
对于一棵树,fdrt找到重心,然后分治每个子树. 在一棵以重心为根的树上,符合条件的链是: 1.过重心(根) 2.不过重心 对于1我们只需dfs出距离重心(根)的距离然后统计再减去有重叠的边 对于2我 ...
- VS 2013 未找到与约束contractname Microsoft.VisualStudio.Utilities.IContentTypeRegistryService...匹配的导出[vs故障]【转】
未找到与约束 contractname Microsoft.VisualStudio.Utilities.IContentTypeRegistryService RequiredTypeIdentit ...
- NPOI使用手册[转]
NPOI使用手册 目录 1.认识NPOI 2. 使用NPOI生成xls文件 2.1 创建基本内容 2.1.1创建Workbook和Sheet 2.1.2创建DocumentSummaryInforma ...
- Maven-搭建普通maven项目
点击Eclipse菜单栏File->New->Ohter->Maven得到如下图所示对话框: 选中Maven Project并点击Next,到下一个对话框(默认)继续点击Next得到 ...
- 常用免费的WebService列表
天气预报Web服务,数据来源于中国气象局 Endpoint : http://www.webxml.com.cn/WebServices/WeatherWebService.asmx Disc ...
- 做WEB开发的时候,前端与后端我们应该要注意哪些细节,哪些容易出现的漏洞?
写这篇文章的时候,我和团队正在处理项目漏洞问题,发现这些都是细节但又容易在项目实现的过程中忽视的部分,鉴于此,我想总结下来,方便以后出现类似问题能及时得到解决. 1.任意文件上传漏洞. 描述:允许 ...