Javascript编程风格
Douglas Crockford是Javascript权威,Json格式就是他的发明。
去年11月他有一个演讲(Youtube),谈到了好的Javascript编程风格是什么。我非常推荐这个演讲,它不仅有助于学习Javascript,而且能让你心情舒畅,因为Crockford讲得很幽默,时不时让听众会心一笑。下面,我根据这个演讲和Crockford编写的代码规范,总结一下"Javascript编程风格"。
所谓"编程风格"(programming style),指的是编写代码的样式规则。不同的程序员,往往有不同的编程风格。
有人说,编译器的规范叫做"语法规则"(grammar),这是程序员必须遵守的;而编译器忽略的部分,就叫"编程风格"(programming style),这是程序员可以自由选择的。这种说法不完全正确,程序员固然可以自由选择编程风格,但是好的编程风格有助于写出质量更高、错误更少、更易于维护的程序。
所以,有一点应该明确,"编程风格"的选择不应该基于个人爱好、熟悉程度、打字工作量等因素,而要考虑如何尽量使代码清晰易读、减少出错。你选择的,不是你喜欢的风格,而是一种能够清晰表达你的意图的风格。这一点,对于Javascript这种语法自由度很高、设计不完全成熟的语言尤其重要。
一、大括号的位置
绝大多数的编程语言,都用大括号({})表示区块(block)。起首的大括号的位置,有许多不同的写法。
最流行的有两种。一种是起首的大括号另起一行:
block
{
...
}
另一种是起首的大括号跟在关键字的后面:
block {
...
}
一般来说,这两种写法都可以接受。但是,Javascript要使用后一种,因为Javascript会自动添加句末的分号,导致一些难以察觉的错误。
return
{
key:value;
};
上面的代码的原意,是要返回一个对象,但实际上返回的是undefined,因为Javascript自动在return语句后面添加了分号。为了避免这一类错误,需要写成下面这样:
return {
key : value;
};
因此,
规则1:表示区块起首的大括号,不要另起一行。
二、 圆括号
圆括号(parentheses)在Javascript中有两种作用,一种表示调用函数,另一种表示不同的值的组合(grouping)。我们可以用空格,区分这两种不同的括号。
规则2:调用函数的时候,函数名与左括号之间没有空格。
规则3:函数名与参数序列之间,没有空格。
规则4:所有其他语法元素与左括号之间,都有一个空格。
按照上面的规则,下面的写法都是不规范的:
foo (bar)
return(a+b);
if(a === 0) {...}
function foo (b) {...}
function(x) {...}
三、分号
分号表示语句的结束。大多数情况下,如果你省略了句尾的分号,Javascript会自动添加。
var a = 1
等同于
var a = 1;
因此,有人提倡省略句尾的分号。但麻烦的是,如果下一行的第一个字元(token)是下面这五个字符之一,Javascript将不对上一行句尾添加分号:"("、"["、"/"、"+"和"-"。
x = y
(function (){
...
})();
上面的代码等同于
x = y(function (){...})();
因此,
规则5:不要省略句末的分号。
四、with语句
with可以减少代码的书写,但是会造成混淆。
with (o) {
foo = bar;
}
上面的代码,可以有四种运行结果:
o.foo = bar;
o.foo = o.bar;
foo = bar;
foo = o.bar;
这四种结果都可能发生,取决于不同的变量是否有定义。因此,
规则6:不要使用with语句。
五、相等和严格相等
Javascript有两个表示"相等"的运算符:"相等"(==)和"严格相等"(===)。
因为"相等"运算符会自动转换变量类型,造成很多意想不到的情况:
0 == ''// true
1 == true // true
2 == true // false
0 == '0' // true
false == 'false' // false
false == '0' // true
" trn " == 0 // true
因此,
规则7:不要使用"相等"(==)运算符,只使用"严格相等"(===)运算符。
六、语句的合并
有些程序员追求简洁,喜欢合并不同目的的语句。比如,原来的语句是
a = b;
if (a) {...}
他喜欢写成下面这样:
if (a = b) {...}
虽然语句少了一行,但是可读性大打折扣,而且会造成误读,让别人误以为这行代码的意思是:
if (a === b){...}
另外一种情况是,有些程序员喜欢在同一行中赋值多个变量:
var a = b = 0;
他以为,这行代码等同于
var a = 0, b = 0;
实际上不是,它的真正效果是下面这样:
b = 0;
var a = b;
因此,
规则8:不要将不同目的的语句,合并成一行。
七、变量声明
Javascript会自动将变量声明"提升"(hoist)到代码块(block)的头部。
if (!o) {
var o = {};
}
等同于
var o;
if (!o) {
o = {};
}
为了避免可能出现的问题,不如把变量声明都放在代码块的头部。
for (var i ...) {...}
最好写成:
var i;
for (i ...) {...,}
因此,
规则9:所有变量声明都放在函数的头部。
规则10:所有函数都在使用之前定义。
八、全局变量
Javascript最大的语法缺点,可能就是全局变量对于任何一个代码块,都是可读可写。这对代码的模块化和重复使用,非常不利。
规则11:避免使用全局变量;如果不得不使用,用大写字母表示变量名,比如UPPER_CASE。
九、new命令
Javascript使用new命令,从建构函数生成一个新对象。
var o = new myObject();
这种做法的问题是,一旦你忘了加上new,myObject()内部的this关键字就会指向全局对象,导致所有绑定在this上面的变量,都变成全部变量。
规则12:不要使用new命令,改用Object.create()命令。
如果不得不使用new,为了防止出错,最好在视觉上把建构函数与其他函数区分开来。
规则13:建构函数的函数名,采用首字母大写(InitialCap);其他函数名,一律首字母小写。
十、自增和自减运算符
自增(++)和自减(--)运算符,放在变量的前面或后面,返回的值不一样,很容易发生错误。
事实上,所有的++运算符都可以用"+= 1"代替。
++x
等同于
x += 1;
代码变得更清晰了。有一个很可笑的例子,某个Javascript函数库的源代码中出现了下面的片段:
++x;
++x;
这个程序员忘了,还有更简单、更合理的写法:
x += 2;
因此,
规则14:不要使用自增(++)和自减(--)运算符,用+=和-=代替。
十一、区块
如果循环和判断的代码体只有一行,Javascript允许该区块(block)省略大括号。
下面的代码
if (a) b(); c();
原意可能是
if (a) { b(); c();}
但是,实际效果是
if (a) { b();} c();
因此,
规则15:总是使用大括号表示区块。
Javascript编程风格的更多相关文章
- 浅谈前端JavaScript编程风格
前言 多家公司和组织已经公开了它们的风格规范,详细可參阅jscs.info,以下的内容主要參考了Airbnb的JavaScript风格规范.当然还有google的编程建议等编程风格 本章探讨怎样使用E ...
- javascript编程风格(粗略笔记)
1.空格 紧凑型: project.MyClass = function(arg1, arg2){ 松散型: for( i = 0; i < length; i++ ){ 2.代码行长度 最多8 ...
- JavaScript编程风格--基本的格式化
缩进层级 推荐4个空格字符作为一个缩进层级. 语句结尾 推荐不要省略分号. 行的长度 最好一行不超过80个字符. 换行 在运算符后换行,下一行增加两个层级的缩进. ...
- javascript 编程风格 部分精要
1 换行保持两个缩进(通常是一行太长) 运算符前后加一个空格,包括赋值运算符和逻辑运算符 括号运算符,左括号之后,右括号之前不应该有空格 段代码无关,添加空行 命名驼峰式,一般首字母小写,其他单词首字 ...
- 学习Javascript的编程风格
Javascript编程风格 Douglas Crockford是Javascript权威,Json格式就是他的发明. 去年11月他有一个演讲(Youtube),谈到了好的Javascript编程 ...
- 【荐】JavaScript编码风格
作者:阮一峰 Douglas Crockford是 JavaScript 权威,Json 格式就是他的发明. 去年 11 月他有一个演讲(Youtube),谈到了好的 JavaScript 编程风格是 ...
- Dojo Javascript 编程规范(转)
前言 相当不错的 Javascript 编程风格规范,建议大家采用此规范编写 Javascript.原文链接: http://dojotoolkit.org/developer/StyleGuide ...
- JavaScript八张思维导图—编程风格
JS基本概念 JS操作符 JS基本语句 JS数组用法 Date用法 JS字符串用法 JS编程风格 JS编程实践 不知不觉做前端已经五年多了,无论是从最初的jQuery还是现在火热的Angular,Vu ...
- 编写可维护的JavaScript之编程风格
在团队中只有每个人的编程风格一致,大家才能方便的互相看懂和维护对方的代码. 1. 层级缩进 对于层级缩进目前有两种主张:1)使用制表符这种方法有两种好处,第一,制表符和缩进层级之间是一一对应关系,符合 ...
随机推荐
- 网易云信,发送验证码短信C#版代码
网易云信发送短信代码(C# 版)....需要注意SHA1 String有转换小写!!!! using System; using System.Collections.Generic; using S ...
- 【转】一个lucene的官网例子
创建索引: import java.io.BufferedReader; import java.io.File; import java.io.FileInputStream; import jav ...
- Java多线程5:synchronized锁方法块
synchronized同步代码块 用关键字synchronized声明方法在某些情况下是有弊端的,比如A线程调用同步方法执行一个较长时间的任务,那么B线程必须等待比较长的时间.这种情况下可以尝试使用 ...
- Dojo动画原理解析
dojo中动画部分分为两部分:dojo/_base/fx, dojo/fx.dojo/_base/fx部分是dojo动画的基石,里面有两个底层API:animateProperty.anim和两个常用 ...
- ECMAScript 6 简介
ECMAScript 6 是JavaScript的下一个标准,正处在快速开发之中,大部分已经完成了,预计将在2014年正式发布.Mozilla将在这个标准的基础上,推出JavaScript 2.0. ...
- silverlighter下MVVM模式中利用Behavior和TargetedTriggerAction实现文本框的一些特效
在silverlight一般开发模式中,给文本框添加一些事件是轻而易举的,然而MVVM开发模式中,想要给文本框添加一些事件并非那么容易,因为MVVM模式中,只有ICommand接口,而且也只有Butt ...
- Unity3D热更新全书-下载 唯一的一篇
下载在这个时代实在是太平常了,每个人都深刻的理解着下载到底是什么. 这一篇文字只是把下载的代码分享并介绍,而已. 首先,下载系统担负着几个使命. 第一.是保持客户端版本库的最新. 第二.是下载要能够比 ...
- C#Light Everywhere
C#语法嵌入式脚本,0.1Beta版本咯,可用于各种环境,欢迎测试. 可以解决各种热更新问题 比如Unity在AOT环境下,比如各种不能采用动态加载DLL的场合. 如果遇到bug,请给我留言,我会从速 ...
- tomcat项目无法发布异常,Could not copy all resources to .........(转)
[plain] <span style="font-size:18px;">Deployment failure on Tomcat 6.x. Could not c ...
- Laravel5.0学习--02 实例进阶
本文以laravel5.0.22为例. 本节以新建一个简单的博客作为实例. 准备工作 数据库配置 .env文件(也可以直接修改config/database.php) DB_HOST=localhos ...