说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

一些达成共识的JavaScript编码风格约定

HTML文档下载 WORD文档下载 PDF文档下载
如果项目中有多名开发者,一个有共识的编码风格约定就显得非常有必要了。目前JavaScript还没有一个权威的、统一的编码风格指南,取而代之的是一些大公司和项目的风格约定。本文就来探讨这些约定中哪些已经达成共识。

如果你的代码易于阅读,那么代码中bug也将会很少,因为一些bug可以很容被调试,并且,其他开发者参与你项目时的门槛也会比较低。因此,如果项目中有多人参与,采取一个有共识的编码风格约定非常有必要。与其他一些语言相比(比如Python示例),JavaScript没有一个权威的编码风格指南,取而代之的是一些流行的编码风格:

  • Google的JavaScript风格指南(以下简称Google)
  • NPM编码风格(以下简称NPM)
  • Felix的Node.js风格指南(以下简称Node.js)
  • 惯用(Idiomatic)的JavaScript(以下简称Idiomatic)
  • jQuery JavaScript风格指南(以下简称jQuery)
  • Douglas Crockford的JavaScript风格指南(以下简称Crockford),Douglas Crockford是Web开发领域最知名的技术权威之一,ECMA JavaScript 2.0标准化委员会委员

当然,在JavaScript语法检查器JSLint和JSHint中也有一些默认的设置选择。问题是,什么才是终极的、让大多数开发者可以遵循的JavaScript编码风格呢?下面让我们从这6个风格指南中找出一些有共识的风格来。

代码风格

缩进

  • 两个空格,无需更长的缩进,无需Tab缩进:Google、NPM、Node.js、Idiomatic
  • Tab缩进:jQuery
  • 4个空格:Crockford

参数和表达式之间的空格

  • 使用紧凑型风格:Google、NPM、Node.js

project.MyClass = function(arg1, arg2) {

  • 过多地使用空格:Idiomatic, jQuery

for ( i = 0; i < length; i++ ) {

没有发表意见:Crockford

大部分指南中,都提醒开发者不要在语句结尾处有任何的空格。

代码行长度

  • 最多80个字符:Google、NPM、Node.js、Crockford(当在代码块中,除了2个空格外的其他缩进允许将函数参数与首个函数参数的位置对齐。另一种选择是当自动换行时使用4个空格缩进,而不是2个。)
  • 没有发表意见:jQuery、Idiomatic

分号

  • 始终使用分号,不依赖于隐式插入:Google、Node.js、Crockford
  • 在某些情况下不要使用expect:NPM
  • 没有发表意见:jQuery、Idiomatic

注释

  • 遵循JSDoc约定:Google、Idiomatic
  • 没有发表意见:NPM、Node.js、jQuery、Crockford

引号

  • 推荐单引号:Google、Node.js
  • 双引号:jQuery
  • 没有发表意见:NPM、Idiomatic、Crockford

变量声明

  • 一次声明一个,不使用逗号:Node.js

var foo = '';var bar = '';

  • 一次声明多个,在行结束处使用逗号分隔:Idiomatic、jQuery

var foo = "",  bar = "",  quux;

  • 在行开始处使用逗号:NPM
  • 没有发表意见:Google、Crockford

大括号

  • 在同一行使用左大括号:Google、NPM、Node.js、Idiomatic、 jQuery、Crockford

function thisIsBlock(){

NPM指南中指出,只在代码块需要包含下一行时使用大括号,否则不使用。

全局变量

  • 不要使用全局变量:Google、Crockford(谷歌表示,全局变量命名冲突难以调试,并可能在两个项目进行正整合时出现一些棘手的问题。为了便于共享公用的JavaScript代码,需要制定公约来避免冲突发生。Crockford认为不应该使用隐式全局变量。)
  • 没有发表意见:Idiomatic、jQuery、NPM、Node.js

命名风格

变量命名

  • 开始的第一个单词小写,之后的所有单词首字母大写:Google、NPM、Node.js、Idiomatic

var foo = "";var fooName = "";

常量命名

  • 使用大写字母:Google、NPM、Node.js

var CONS = 'VALUE';

  • 没有发表意见:jQuery、Idiomatic、Crockford

函数命名

  • 开始的第一个单词小写,之后的所有单词首字母大写(驼峰式):Google、NPM、Idiomatic、Node.js(推荐使用长的、具描述性的函数名)

function veryLongOperationNamefunction short()..

     关键字形式的函数命名:

function isReady()function setName()function getName()

  • 没有发表意见:jQuery、Crockford

阵列命名

  • 使用复数形式:Idiomatic 

var documents = [];

  • 没有发表意见:Google、jQuery、NPM、Node.js、Crockford

对象和类命名

  • 使用如下形式:Google、NPM、Node.js

var ThisIsObject = new Date;

  • 没有发表意见:jQuery、Idiomatic、Crockford

其他命名

  • 针对长文件名和配置键使用all-lower-hyphen-css-case形式:NPM

根据上述风格来配置.jshintrc文件

JSHint(http://www.jshint.com/)是一个JavaScript语法和风格检查工具,你可以用它来提醒代码风格相关的问题。它可以很好地被集成到许多常用的编辑器中,是统一团队编码风格的一个很好的工具。

你可以通过JSHint文档查看可用的选项:http://www.jshint.com/docs/#options

下面根据本文上面每个分类下的第一种风格来创建一个.jshintrc文件。你可以将它放到项目中根目录中,JSHint-avare代码编辑器将会按照它来统一项目中的所有代码风格。

{  "camelcase" : true,  "indent": 2,  "undef": true,  "quotmark": single,  "maxlen": 80,  "trailing": true,  "curly": true}

此外,你应该将下面的头添加到你的JavaScript文件中。

/* jshint browser:true, jquery:true */

在Node.js文件中你应该添加:

/*jshint node:true */

还可以在各种JavaScript文件中添加下面的声明:

'use strict';

这将影响JSHint和你的JavaScript引擎,可能不那么兼容,但是JavaScript将会运行得更快。

在提交Git之前自动执行JSHint

如果你想确保所有的JS代码与.jshintrc中定义的风格保持一致,你可以将下面的内容添加到你的.git/hooks/pre-commit文件中,当你试图提交任何新修改的文件到项目时会自动执行风格检查。

#!/bin/bash# Pre-commit Git hook to run JSHint on JavaScript files.## If you absolutely must commit without testing,# use: git commit --no-verifyfilenames=($(git diff --cached --name-only HEAD))which jshint &> /dev/nullif [ $? -ne 0 ];then  echo "error: jshint not found"  echo "install with: sudo npm install -g jshint"  exit 1fifor i in "${filenames[@]}"do	if [[ $i =~ \.js$ ]];	then		echo jshint $i		jshint $i		if [ $? -ne 0 ];		then			exit 1		fi	fidone

最后祝大家编码愉快!

英文原文:JavaScript, the winning style

VMware发布Horizon Suite 三款应用打包折扣低 TOP30+应用排行榜:二月份国内外综合榜单 开源是否意味着不需要负任何责任? 微软年度科技展 酷炫技术知多少 图解Hadoop生态系统 HTML5并不给力 微软IE10又默认启用Flash Oracle出新提案:Java正逼近iOS? TIOBE 2013年3月编程语言排行榜:厚积薄发 Ruby反超Perl 清华大学开源镜像站将被关闭 发表公开信 前Google资深研究员赵勇回国创业 专注计算机视觉/模式识别 开发者福音,微软开源Kinect源代码 日本很积极:富士通和NEC确认将推Tizen设备 10大支持移动“触摸操作”的JavaScript框架推荐 数据科学家的争夺及美分析学专业研究生院的建立 从开放走向封闭 Netflix宣布停止发布API key 《植物大战僵尸》神秘续作:可能是一款横版游戏 高性价比:GlassUp宣布支持Windows Phone系统 未挖掘到足够信息:非收集数据少,是利用率只有1% 下一个帝国:谷歌收购初创公司DNNresearch 苹果更新Apple Store应用,可查看零售店库存 开源软硬件:福特汽车的OpenXC计划 Temple Run:Oz稳坐付费榜头把交椅,迪士尼名利双收 Facebook开放图谱示好开发者 新增书籍电影等九项操作 源代码管理的六大视觉模式 最新算法面世 可提高云数据库性能 分析称平板电脑应用将占全球应用经济的35% 三大运营商对微信等OTT业务摊牌 Runscope联合创始人John Sheehan:API已死,API永存! IBM在京发布大数据白皮书 提出五项关键建议 Twitter开源Parquet 将支持Impala加速实时查询 使用Go代替Ruby,将服务器数量从30降到2 ADOCE怎样访问excel数据表格? 请 ccmoon(IzuaL) 和 cloudchen(陈系上) 进来领分, 我该怎么做? 关于将输入字母转换为大写的问题! 谁给我解释这个sql语句! 怎么将sql server 6.x 的备份文件,恢复到sql server 7上 请教pb中有没有模式窗口和非模式窗口的概念?? 设备内容句柄在Delphi中有这个类吗?如何表示? hxzhappy(冰雨)快来接分 请问在contexMenu控件中show方法如何写 请问用VC,如何在WIN2000下连接一个SQL数据源? 入参与出参 关于国外发布的软件,可以使注册用户在线或取注册码! win2000下怎样建立代理服务器 有关DBGrid的问题。 在其他版看到一个很有意思的贴子“如果是你招聘人,你会不会招和自己技术,资历差不多的,甚至超过自己水平的?”欢迎大家讨论。 急!关于innerhtml的错误? hxzhappy(冰雨)快来接分 在线求助,急 请教各位,我的sybase的数据库的log设备(即syslogs表)最近增长很快,每天增长40多兆,如何解决??? 想做一个网络代理上网 c语言中三维数组的问题??? 求助:word文件加密后忘记密码如何打开原文件? 请教 : photoshop 中--highlight shadow midtone 提问,非高手勿入,打印的问题,100分,不够另加 关于oracle预留字作字段名的问题。 ● 求助,2000 Professional一登录就自动注销,怎么解决? 一个很棘手的问题? 谁给我解释这个JS函数 請高手幫改寫一段datagrid程序. (100分相送) (2)菜鸟问题!!容易拿分呀!! 如何在SQL SERVER上实现ORACLE中的package的功能 对windows编程,如何控制鼠标箭头阿 在2000下,希望不同的账号登陆,文件的可见属性不一样,能做到吗? 页面元素隐藏的问题 急 读文本出现乱码??? 高分求演示制作软件一个,以前知道lotus123可以做,可是找不到下载!!! 如何使窗口最大化? 请问:怎样使jar包里的类能读取同在此jar包中的一个xml文件 关于table 如何远程执行ORACLE上的存储过程? 有关toolbutton的用法 公布我公司的MS 2000技术支持客户号,呵呵! 关于使用组件是出现“没有注册类别” 高分求数据库操作类(查询、更新、事务等),共同提高。分不够可载开贴! error C2065: 'CMyPointDoc' : undeclared identifier 请帮解决! open_cusors问题,超过了open_cusors的最大值!! win2000 professional and win2000 advance server 如何判断某一个TEDIT获得了焦点???? 怎么不能重复的启动、停止钩子 该考研了,帮忙看看以下几个方向在职场上哪个有“钱途”些? 《信者得爱》粤语的歌词《信者得爱》粤语版的歌词 函数y=cos(2x+π/3)图象的一条对称轴是?请你们说的详细一点,最好说出为什么到这一步 周长是15.7厘米的圆,画这个圆是圆规两脚间的距离是()CM第二题一本150页的书看了80页,求还剩下百分之几没有看?正确列式是()A150÷90 B80÷150 C(150-80)÷150 D(150-80)÷80第三题一项工作,甲5 广东话讲牙烟、普通话表示乜也意思?危险 粤语中,一拳打出眼火,对面梯见牙烟. 中分子化验磷细包癌是什么意思?请好心朋友告诉谢谢 化学中到底有没有千摩,毫摩这种单位? 5W的家用灯泡,用万用表测试两端电阻为400欧,根据P=U^2/R公式算出来功率有120多W,不知道是什么原因 有收购木炭的地方吗? 什么是植物的有性世代和无性世代 我是真的爱你 粤语怎么写 郝柏村:抗日战争的胜利属于整个中华民马尼拉市长拟为人质事件筹集2000万第九届两岸经贸文化论坛今举行 为交流明星进入考题屡见不鲜 “杨幂题”引争赵本山亮相春晚节目一审 冯小刚今答网伦敦股市《金融时报》100种股票平均土耳其与伊拉克外长表示将加强两国关系31省区市9月CPI涨幅出炉 物价“西共体轮值主席呼吁国际社会支持西共体德国法兰克福股市DAX指数25日上涨白俄罗斯总统提议格鲁吉亚重返独联体遭长江常熟段一船舶沉没 1名落水人员已北京今年将淘汰300家污染企业 鼓励中国首台无人遥控器“海马号”深潜45泰国驻昆总领事夫人秀厨艺 冀滇泰加强湖南嘉禾回应“栽赃”无头案:其他案件河北省平泉县被定为首批国家农业良种繁上海普陀侨联石泉分会爱心家长陈瑞珠湖南郴州市永兴县侨联组织港胞开展助学宁波一商户为了猪肉卖相好 抹色素再销广岛市民核爆馆前集会 称安倍修宪手续3D打印等高新技术产品亮相中国昆山“
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘