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

一些达成共识的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

生存还是毁灭:Facebook惨败真是HTML5的错? OpenStack基金会主席:一年后成熟度超越CloudStack 在线学习新编程 技巧全攻略 “英特尔杯”HTML5程序开发邀请赛侧记 C#编译器组首席工程师Eric Lippert离职 加盟Coverity Testacular:Google开源的JavaScript测试执行过程管理工具 黑莓亚洲开发者大会报道:BB10将敲开亚洲应用市场大门 挑战Google!传Facebook与Yahoo要联手开发搜索引擎 揭秘Android 4.2 开发者的天堂与地狱 11大黄金法则:顶级移动UX设计心髓 库克时代:苹果已经不是苹果 设计师必备:极简风格的Fluid UI快速原型图工具 iPhone 5发布,后乔布斯时代苹果乏善可陈 牛人妙计:HTML5应用也能像原生一样跑得快 移动周报:OpenFeint难逃关闭命运 细数与苹果恩怨史 FlyingDaggers团队专访:不浮躁,用心做真正的原创游戏! IT巨头混战:谷歌、苹果、Facebook以及亚马逊的四国演义 乐视TV:智能电视平台——Android 开发者的新空间 TIOBE 2012年12月编程语言排行榜:Objective-C冲刺卫冕年度语言 11月份浏览器市场份额 IE10已占据0.51% 亚洲高科技公司正在分享惠普、戴尔和IBM的云“午餐” Groupon创业启示:进军海外,请三思 天才之为责任:Unity CEO谈论Unity 4.0游戏引擎 中文版Evernote百宝箱上线:开发者海外推广新渠道 360产品被爆收集用户隐私 桌面安全路在何方 销售额达一万亿元 阿里巴巴成世界最大电商 共享软件海外营销策略与实战分析(武汉站)成功落幕 你未必知道的CSS故事:揭开leading的面纱 2013年 影响Web发展的5类API 《Warcraft是怎样炼成的》:多人对战、战争迷雾以及AI HBTC精彩回顾 Hadoop专家分享大数据技术工具与最佳实践 Widestring与AnsiString之间怎么相互转换 关于FTP的问题 用什么函数可以得到本地硬盘分区个数? 程序中如何跳出进行鼠标操作? 传值,三个窗体之间的传值,在线,请回答 斑竹,请教你一个问题:ASP与报表... 体提议意见 数据库中正常,在JSP中显示好象为十六进制数,帮忙解决 如何获取硬盘序列号? 请教高手,这个效果用CSS该如何实现? win2k如何实现桌面共享!! 可不可以怎么做? 当前提供者不支持索引必需的界面 没有马甲的来这里报到! linu和windows都不能启动了,怎么办,急急急!!! 请问,在PB中怎么为自定义窗体类定义一个虚拟方法? 熟悉memfile的朋友请进 php调VB程序?着急! vb 访问另一台sql server 的问题? 谁有flashmx,dreamwerver mx,firework mx 的注册吗。有100分 很急的问题? 断点无效?? 想给自己买一个数码相机做新年礼物!但对选中的品牌不是很熟!请师哥师姐给点建议!!! 如何对视图连接的表进行数据插入?? 谁会替用户负责?用“小灵通”还是小心为妙 做过考勤管理的请进………… 简单问题,麻烦各位高手!!! 请问delphi5中有没有delphi6中的object treeview功能 哪有关于网络安全方面的资料? 三层MIS中的中间件怎么用COM或EJB来实现. 请问哪里的个人主页控件支持JSP? 再次请教一个有关DataGrid不能显示而令人头晕的问题(在线等待)! 做过考勤管理的请进………… 在ASP.NET中怎样实现语句加入引用? 请问下面这个问题应该怎么解决最好?关于处理网页中的数据的 使用VB6自带的Sample中自动化示例应用程序时的一个问题 那位高手知道怎样实现曲线分析图... 一个简单SESSION 问题,请解决。在线等,没分了不好意思. 为什么在asp中使用ADODb的Connection对象的方法时不能使用事务处理 ====寂寞啊!谁帮介绍一个女孩啊(15-18)岁的!!万分感谢!==== 高分请教大虾,关于搜索的问题?。。。。 100分请教一个简单的问题?? runtime在JAVA中解释应该是什么意思? SCO上的ORACLE7建库?SOS 大家来看看,超级Bug?用DBExpress连接MSSQL,执行存储不能返回值,谁能解决,200分 高分请教,谢谢了/。。。。 我在程序中使用了MSXML,可是在干净的win98下无法运行,请问需要安装什么? 救急: SQL server的数据恢复 关于分辨率的问题。 在vb.net中能做dll吗?请大家可参与 下面的函数怎样声明? 能直接用alter语句修改某个字段的类型和长度吗? 杭州市级医院全面推行市民卡智慧医疗服温州小区藏着臭皮市场 恶臭难挡遭住户杭州城管将推行无证摊贩集中形成便民服杭州下半年房价出现较大波动可能性不大杭州高温致老人小孩多中暑 120急救高温天防中暑需多补水 夏天碳酸饮料要下沙有幢楼停电两天两夜 高温暴小区质杭州昨最高温突破40℃ 未来十天高温杭州已连续五天最高温超过40℃ 本周金华本周天气依旧晴热高温 局部或有雷宁波为治堵下半年将优化10条公交线路杭州今明最高气温达39~40℃ 城北杭州连续高温15天排全国第二 未来三杭州小区地下车库温度28℃ 居民避暑市绿化办倡议市民共抗旱 早晚多为植物宁海奉化昨天实施人工降雨 今明两天视杭州四个部门今起联合抽查企业防暑降温杭州连续29天高温全国排第三 要持续杭州农作物因旱受灾 市场蔬菜有供应价杭州将要专门立法保护江鲜湖鲜(图)杭州消防上周接火警310起 起火多因新华国际时评:抓住中美年度对话的契机台大发文禁止学生装鬼吓人 引发学生热痴情女求復合 狠男拒绝囚禁霸凌行径嚣韩政府批准民间团体赴朝讨论农业援助事河南信阳一卫生局长办公楼坠亡 遗书称美国驻冲绳基地战机紧急撤离 为躲避超人民法庭审判机制改革有条件地区可先行韩国大叔酒醉走上铁轨致地铁延误 称为超车引发争执 男子持刀砍伤的哥吸毒男子狂殴妻女 刑警出击实施抓捕女子上班路上突遇行道树折断被砸伤 树湖北罗田县人民医院院长肖胜军接受调查“社区禁毒图书角”工程山西启动专家:中国乳制品市场逐步恢复进入良性中英离岸人民币市场讨论会在沪召开东海舰队某部组织纪念全民族抗战爆发7高考录取明天开始 结果可在网上查 请默克尔9年7次访华:中德两国经贸合作贵州黔东南州发布环境资源司法保护绿皮内蒙古部分地区突遭风雹袭击 上万人受安倍指示阁僚加大力度打击“脱法迷幻药
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘