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

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

Twitter联合创始人推社交搜索应用Jelly 马云“食言”进军手游分成比例8:2,开发者可拿7成 CodeCombat游戏全面开源:玩游戏也能学编程 Netflix首席云架构师Adrian Cockcroft加盟Battery Ventures Android 4.3附体:RIBX发布FB/Ti 互联网手表 IE11界面布局的秘密武器:Quero Toolbar 【开源专访】Node-Webkit作者王文睿:桌面应用的全新开发方式 CentOS归属红帽:企业级Linux领域社区与商业的融合 印度初创公司Little Eye Labs证实已被Facebook收购 雅虎收购Aviate:重在提升用户体验 SDN领域硝烟再起,Oracle将Corente收入囊中 Hadoop科普文——常见的45个问题解答 CES 2014:奥迪下一代汽车将采用NVIDIA的芯片! Cocos 3.0 Beta发布:更易用、更友好 开拓新兴市场?诺基亚或推Android手机,UI界面遭泄露 预测2014大数据值得关注的8个发展方向 霸主地位再临挑战?Salesforce CEO,我们不只有Oracle LBS应用新星、“司机好助手”微车借力移动互联网,志在打造车主的个人移动门户 新一代IDE Light Table开源:让编程工作更简单 图片应用也能高大上,看Cooliris如何玩转无人机 拥抱Spark,机遇无限——Spark Summit 2013精彩回顾 1月10日:改变世界的iPhone七岁了,你是传奇! 同洲电子推出首款手机操作系统960OS 免费授权使用 如何在Windows 8.1的IE11中打开同步选项卡? 25年老对手评价微软:换CEO可行,但是太迟了 【PPT集萃】十位一线专家分享Spark现状与未来(三) 万元奖品等你拿!2014创客118新年大Party! Firefox OS的2013回顾和2014展望 Strom8 CEO:搞好手游开发,合伙人很重要 2013年Q4全球PC出货量同比下滑6.9% 已连续下滑七个季度 一周消息树:2013年十大产品、图书、公司盘点 急,高手帮忙。 getchar小问题,为什么程序不能中断? 我想学游戏编程,谁能指点一下?100分! 医疗管理系统 请帮忙看看这段流操作的代码错在哪里? javabean高手请进!请赐教!!! 请各位高手指点一下,什么软件开发java比较方便,效率较高? 谁能告诉我,怎样将邮箱中的信件复制到本地硬盘.谢了 需要什么权限才能在active directory里添加用户??(实际上是想添加email帐号),谢谢各位 test 请问在winXP里该如何实现如下功能呢? 再问一次,怎么在mandrake下设显示器的刷新率!怎么想给分都送不出去! 当用c++编程时,能不能不用回收内存?100分 用VC处理XML文档时遇到的一些细微而重要的问题 大家能不能给我给我点 我有一个关于注册表的问题? delphi中要想定义一个整个工程文件中可以访问的变量怎样做才好?(说者有分) 本人泡MM精华之作,大家快看!! 25分散尽! 如何使用paradox.net? 类的定义与实现细节是否要放在不同文件 各位:我想当斑竹,位兄弟是否同意?:) 关于shell和key事件 为什么我的问题总是无人回答?给高分100!VC和VB下好用的控件在delphi下不好用!是不是dll的问题? pascal 为什么没有介绍在pIIII下汇编的书? paradox数据库的操作问题 text字段如何转换成image字段?? 东日论坛新开张 关于异常的问题,请各位大哥帮帮忙!(50分) 我有很多数字,如何以固定的间隔和行宽在打印机完整地上输出? 学过C++,想学java,难吗?多久能上手? 如何设置系统的日期,时间? 我的网卡的驱动一直装不上? 在下请问,在游戏中实现人物的移动有哪几种方法? 关于地址栏的显示问题 老大们来看看! 今天高兴,散分,先进者自有大大的好处 对不起网管我没看清楚发错了地方请您帮忙转到java区里吧谢谢你了! my oracle8.1.7 on redhat7.2进不去,请高手指教 关于打印机不能够正常打印问题 关于XP的时间问题? 哪位知道在VC下通过敲击键盘模拟钢琴键发音——通过声卡在音箱中实时发出声音 本人泡MM精华之作,大家快看!! 互联网上控件的安全性问题 SDK的疑惑? gluLookAt()函数的用法 什么是类如何来理解应用它!!!看书看了不是很理解 第一次来csdn 高兴,散分,第一个进入者得! 怎样从ACCESS数据库中读出jpeg,gif,bmp...图片? web的验证如何与数据仓库验证一致?请高手看看 硝酸钾加热会爆炸吗? 抗坏血酸溶液配制后是否可以长期存放,为什么 谁知道甲酸与乙酸(冰醋酸)的区别及怎样鉴别乙酸可以食用,甲酸可以代替乙酸食用吗? 分别用金属钠,镁,铝,铁与足量盐酸反应,都得到3.36L氢气(标准状况下).求:(1)钠,镁,铝,铁的物质的量分别为多少?(2)钠,镁,铝,铁的质量分别为多少?(3)由此可得出什么结论? 0.001 mol/L抗坏血酸溶液怎么配制 开水有不烫手的吗!为什么! 高锰酸钾氧化三价铬的实验,加热时为什么会出现沉淀? 抗坏血酸溶于水配置成溶液带桔黄色怎么办做总磷用的,以前配的都没有颜色,现在配的都是这个颜色,做实验不准怎么办? 开水烫手怎么办 玻璃杯好还是塑料杯好,有的人说塑料杯有毒,买一个六十元左右的塑料杯行么? 抗坏血酸溶液能用维生素c原料配制吗 为什么开水会很烫手? 高一化学铝和硅的知识整理如题、、橙. 为什么偏铝酸根和铵根离子的双水解是彻底的,而碳酸根离子和铵根离子的双水解就不彻底了? 在高山上"开水"不烫手的原因 硅的方程式绿的方程式 为什么铝离子与碳酸根完全双水解而偏铝酸根与碳酸根则双水解不完全 这是物理题:你相信不烫手的开水吗—--- 理由是----- 在100ml0.5mol/L的ALCL3溶液中,加入2mol/l的Naoh溶液,得到1.56g沉淀. 铝离子+碳酸根离子+水的水解反应是? 把5.1g镁铝合金的粉末放入过量的NaOH的溶液反应,得到3.36L氢气 1.铝的质量分数 2.镁和铝的物质的量之比 抗坏血酸是什么? 碳酸根和铝离子能否共存?为啥?他们不能双水解吗? 将铝放入烧碱溶液中,若反应过程中有1/3molAl消耗掉,则生成氢气的物质的量是a 1.5 B 3 C 0.5 D 6 反物质的威力有多大啊(我看电影的反物质能毁一个地球)是真的吗? 求亚硝酸钠和盐酸反应方程式.产生的是什么气体?为什么答案说是遇空气变为红棕色的为亚硝酸钠? 中国氢弹有多大威力 抗坏血酸1+ 什么意思 醋酸洋红 成分醋酸洋红里面有些什么元素 现在的氢弹威力到底有多大?摧毁东京要几颗? 抗坏血酸什么意思 亚硝酸钠与稀盐酸的反应方程式及其现象 玻璃杯和瓷杯能不能在微波炉里加热? 抗坏血酸 0,60 白醋中的醋酸挥发后剩余的成分是什么,有什么危害,还能食用吗 中国氢弹的威力有多大 银离子分别于氯离子,硫酸根,碳酸根反应的化学方程式 亚硝酸钠和稀盐酸的反应方程式 氢弹有多大危害 瓶盖太紧了如何才能轻松地拧开? 冰醋酸挥发的气体成分是什么冰醋酸易挥发大家都知道 有刺激性气味产生 但是挥发出的气体成分是什么呢 将足量的铝粉投入到100ml 1.0mol/L的氢氧化钠溶液中,充分反应后能得到标准状况下的氢气多少升?.因为讲新课的时候我请假了..=..请不要只给答案..写出计算过程..不然我看不懂哇... 这个瓶盖怎么拧开? 食用醋酸是什么 除去镁粉中混有的少量铝粉,可选用什么试剂 怎么才能轻松拧开瓶盖?总是拧不开饮料瓶和罐头还有果酱,有没有什么窍门 1% 抗坏血酸溶液怎么配 兆吨级氢弹有多大威力? 核武器按其装料和主要杀伤因素分为原子弹 氢弹 和()?A核导弹 B中子弹 C核火箭 D反物质弹 先将对氨基苯磺酸与盐酸混合,再滴加亚硝酸钠溶液进行重氮化反应,为什么? 除去镁粉中的少量铝粉,用哪种试剂A盐酸B氢氧化钠C硝酸D食盐水 下列氯化物中,既能由金属和氯气直接反应制得,又可由金属和盐酸反应制得的是CuCl2FeCl2FeCl3AlCl3 怎样拧开很紧的瓶盖? 冰乙酸和冰醋酸是一种东西么? 可用来鉴别甲酸和乙酸的方法? 氢弹,原子弹,中子弹,三相弹,反物质弹等等与核反应有关系的杀伤武器哪种威力更大 什么是抗坏血酸3+ 怎么用化学方法鉴别甲酸,乙酸,丙二酸 美国人研究出来了以反物质起爆的微型氢弹了吗?利用正反物质湮灭时候释放的巨大能量为核聚变点火,使氢弹变得真正干净,而且可以做到小型化,弹体在100kg左右,威力为1000吨~10万吨当量不等, 尿常规检查中一项
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘