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

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

2015移动游戏行业方向标:创业者必须关注的几个领域 基于Python的行为驱动开发实战 面向WP和Android!微软车库发布多款免费应用 GRPC:谷歌发布的首款基于HTTP/2和protobuf的RPC框架 革命,就是现在!——CES 2015行纪 HTML5游戏引擎排行榜 Construct 2最受欢迎 2015手游营销新趋势:电视广告,及其投放逻辑 详解下一代开源混合应用框架Reapp 应用内一键交易!Google公布Android Pay项目 Timehop为什么要放弃Rails,转向Go? 无线充电技术走入客厅 宜家推出“Home Smart”系列 发布仅一年,虚幻引擎4宣布完全免费! HTML5初学者福利!11个在线学习网站推荐 Qualcomm发布Snapdragon 820与超声波指纹识别技术 App Store应用僵尸化:没品质没资本的必然走向 Unity 5正式发布:支持21种平台、个人版免费! 创新高性能移动UI框架——Canvas UI 框架 取精华、去糟粕!适合iOS开发者的15大网站推荐 Swift如何优化性能? 【程序员电子刊精选】明道CEO任向晖:企业也需要养成好习惯 你信吗?重构软件并不会改善代码质量 融合VR与AR:uSens推出虚拟现实手机头盔 4月17-18日,OpenStack、Spark、Container齐聚OpenCloud 2015 第四代CSS选择器,那些让你激动的新特性 联通WO+开放平台“App计费 ” 保障手机应用付费安全 Valve推Lighthouse技术,欲解决VR设备眩晕感 全球移动开发者报告:Swift崛起,物联网大火! 不圈地自萌!10个UX设计经验分享网站推荐 苹果继续改改改!Swift语言何时能稳定? 封闭还是开放?Android Wear离iOS究竟有多远 TIOBE 2015年3月编程语言排行榜:CoffeeScript首次进入TOP 100 关于文件上传问题,大家都使用htmlcontrols.htminputfile控件吗? 各位大虾,关于扫描仪的错误2800:0000是指什么错误?急!!! 请问如何在载入页面前,跳出一个询问用户名和密码的窗口,然后验证用户身份? MSsqlserver 意外终止服务 www服务器过一段时间就停止服务? resin 中jsp文件无法显示图片,怎么回事? 请教思归!!asp.net中弹出对话框的问题 debug命令f怎么用呀? 笔记本电池,能外挂吗?~~~~ 工具欄的顯示應算較專業的問題 寻求共同创业的伙伴! COM+组件远程调用问题 如何才能把计算稿保存下来? 急。chr 与ord的运用! 为什么当我在dreamweaver里把表格的单元格宽度设定为像素了,可当我的字符串超过它的宽度,它不换行?而是拉长我的单元格 使用delphi第三方控件出现的问题 用什么函数把int转成nvarchar 关于上网的问题 关于图片的循环移动问题 寻求共同创业的伙伴! 关于Keil C51的编译问题 谁有《 Inside The C++ Object Model》英文版电子版 请教《深入浅出MFC》中有关“动态创建”的一个问题。 图像缩放和居中显示的问题 请教如何用DDraw实现屏幕随鼠标移动而滚动,就象星际中的地图比屏幕大,但可以滚动显示。 一点问题,劳驾各位高手啦。。谢谢!!! 一个双向链表得问提求救啊 截获、修改本地程序通过socket发出的包的问题 请教DDraw资源网? 可不可以把这两个合并成一句查询语句呀 问一下IDirect3DDevice8::SetTransform第一个参数的问题 如何把一个窗体放进动态链接库中? 集合Set 和 数组Array 的问题 论坛出现乱码怎么办?急!急!急!!! 如何使用JList添加记录项???? 谁遇到过VB printer对象在少数机器上乱码的问题,有的机器又是好的。 不能使用make menuconfig?请指教 DBGRID中要点两下才能进行编辑状态,如何只一下就能进入编辑状? 郁闷啦,5。1加班到11点,放分 急需FlashFXP的注册码(当天就给分) 小问题 谁告诉我一个exchange server 的下载地址啊? 为什么我装的 XP在桌面上没有“我的电脑”“Internet Explorer”“网上邻居”“我的文挡”,只有一个回收站??? 论坛开发策划书怎么写? 请教JBUILDER8编译时的问题 ADSL 的问题 关于合并分区的问题,急! 在编译msdn中的vc例子程序时找不到mfc42u.lib文件 想把握住一份不可能的爱情,今天才知道我失败了,极度郁闷,散分 请问哪里有ASP+MSSQL的教程,多谢! 请教在BCB6中怎么打开Class Explorer? 已经掌握了虫洞技术,能轻易穿越数百万光年的外星人打得过美军航母么? 《出师表》中作者分析先汉兴隆后汉倾颓原因的句子 请问有谁知道水族箱中的有害物质怎么化验.比如氯,氨.硝酸盐 大学里如何当好一名优秀的班长 出师表 咆哮体 如何测凸透镜的焦点 什么是“存在即合理” 出师表中揭示后汉灭亡的句子是什么阿、峩着急 +2价钙离子的什么化合物能和氯化铁溶液反应 存在真的即合理吗 《出师表》中作者揭示后汉灭亡原因的句子是? 空的那题 重心一定在物体上吗 出师表里的“先汉”“后汉”的解释老师说是西汉东汉的意思但这样解释就成了“西汉兴隆,东汉衰败”的意思我觉得不对,哪个朝代不是有兴有衰我觉得应该翻译成“东汉前期”“东汉后期 怎么测量凸透镜的焦点 -7被3除等于多少余几,是等于2余-1还是等于-2余1,还是其他的答案?为什么? 做自由落体运动的物体第100s内的位移与第1s内位移之比是几,还有通过第100m的时间与通过第1m时间比是几本人刚学.实在听不懂. 办理澳大利亚短期商务签证456,被拒签了.澳大利亚大使馆说我有可能停留那边工作,我该怎么反驳?(原文)The likelihood of you overstaying, seeking to remain in Australia or applying for another visa after your arrival i 几除几等于7余8 请你用硫酸溶液加碳酸氢氨反应完后还可以继续加碳氨反应吗?如果可以能加几次啊? 出国当对外汉语教师好吗? ()除去()等于12余7 物体所受重力的方向与缩手万有引力的方向相同吗? 斜面上有一个物体,那么当这个物体静止、匀速下滑、匀加速下滑时,斜面对地面的压力该怎么求? 圆 > :AD是△ABC的高,AE是△ABC的外接圆的直径,试说明弧BE=弧CF.九年级数学《圆》一章的练习题 :AD是△ABC的高,AE是△ABC的外接圆的直径,试说明弧BE=弧CF. 关于重力与万有引力的关系?判断下面几种说法的正确与否1、万有引力分解为两个分量,重力和向心力.绕地球匀速率圆周运动的人造卫星,所受的合外力只有引力,故引力完全提供向心力.此时引 一个物体从夹角为α的斜面上以a加速滑下,斜面对地面的压力改变如何?据说是减小了mgsinα,原因是什么呢? 物体只有受到方向时刻变化的力的作用才作曲线运动 判断 亚硫酸氢氨和过氧化氢怎么反应 属蛇的养什么动物好 支持力是画在物体的重心上是吧 完全竞争厂商的要素使用原则是什么? 空着的那题 龟鹤同笼,共有51个头,172只脚,请问龟、鹤各有多少只?今晚就要用,鸡鸡鸡,请顺便把过程写下来, 平面上的一个物体,受到水平方向的一个力F而作匀速直线运动.如果根据牛顿第三定侓:(两个物体之间的作用力和反作用力,总是同时在同一条直线上,大小相等,方向相反.)压力和支持力相等 盐酸能与过氧化纳反应吗反应的化学方程式是什么? 相对论不是比牛顿力学更精确吗,后者是数学上的一种近似.场方程为何要用到牛顿的万有引力常数? 下列关于重心的说法中正确的是:A.物体所受重力的作用点叫做重心.B.物体的重心才受重力作用.C.质量分布均匀的圆柱体的重心在其轴线的中点.D..球体的重心总在球心. 过氧化纳和盐酸反应的化学方程式 外星人有可能是未来人类穿越虫洞来到地球吗? 关于重心,下列说法正确的是A.重心就是物体的中心 B.重心就是重力在物体上的作用点 C.重心一定在物体上 D.重心一定不在物体上.急T^T 铝与盐酸、氢氧化纳反应需掌握的知识点有哪些?化学计量数与反应有什么联系? 我的世界pe 苏联核弹发射井(最大) 我是因为高中语文教师,我想去做个对外汉语教师,请问我该准备什么 怎么利用EAN-128码来传递信息 外星人可能是从未来穿越虫洞来到地球的吗?如果理论成立,他们在美国的切割牛的事件会不会是未来的牛没了他们需要牛的基因来克隆牛?如果不是穿越虫洞也可能是超光速吗? 物体的重心并不一定在物体的几何中心上 ,为什么错 关于原朝、宋朝、清朝、明朝、唐朝、春秋、三国古诗各10首.注明作者,朝代 中国有多少核弹发射井 成为高中语文教师需要的准备这些表面的证书不是问题, 4、把一张正方形的纸连续对折4次,折后的每一小块占这张正方形纸的( ). 圆环与同心圆的区别请问,圆环的具体意义,到底是同心圆,还是不规则的环形?希望给予准确答案, 高中语文教师招聘面试我们该准备些什么? 为什么氨盐的检验不能直接加热,再用湿润红色的石蕊试纸在试管处检验?为什么一定是加入强碱加热,再用湿润红色试纸在试管口检验? 判断:组成圆环的两个圆一定是同心圆.() △ABC为O的内接等边三角形ABC,D为弧BC上任一点,AD与BC交于F,证明:(1)BD+DC=ADAB方=AB·BF+AF·DC GBZ/T 160.29-2004氨的纳氏试剂分光光度法,方法验证的数据 马航失事客机是否可能穿越了虫洞或被UFO劫持?似乎扑朔迷离 关于重力的大小和方向,下列说法正确的是 ( )A.在地球上方的物体都要受到重力作用,所受重力与他的运动状态无关,也不管是否存在其他力的作用.B.在地球各处的重力方向都是相同的C.向上 急需唐诗、宋朝的诗,明朝的诗,清朝地诗,各五首.这是家作啊! 媒体称比尔·盖茨西雅图豪宅的新邻居多《斯大林格勒》曾欲邀周润发,片酬过高美国被爆在驻华使领馆搞监听 北京上海王毅与福田康夫会谈引关注 日媒称或成意邮轮沉没事故发生时船长与情人在船上中国将继续积极支持和参与联合国维和行土耳其否决“采购中国红旗导弹”的早前新媒:记者陈永洲被批准逮捕 舆情急转日媒:“西进战略”对中国崛起产生重大混装的货车收费站附近爆炸 幸未造成人货车上高速大灯出故障 司机打着手电开借给朋友的豪车撞车后烧成空壳 司机居一脚油门跨过四级台阶 轿车冲进武林路女司机高速追尾车毁人伤 罪魁就是脚上美媒:美国“重返亚洲”战略让中国从中英媒:长期天然气短缺加剧中国空气污染日本解密文件称美曾让其修宪员工工资企业不能再一口价 杭州拟正式义乌集装箱数10年增70多倍 义乌成杭州市公述民评进入第三场 市民拷问地杭州孩儿巷取消52个泊位后道路通行明图解:李克强访非第七日活动TPP首席谈判代表会议在越南开幕 关新华网评李克强非洲行:好日子要和非洲9种艺术形式宣传廉政 成都廉洁文艺巡外媒:中国将致力于维护非洲和平安宁学者:李克强访非彰显君子之义汪舟:连接历史记忆 增进国族认同李克强访问肯尼亚:双方拟建合资航空公中国铁路助力非洲梦想科比小胡子冲突细节:德帅强制飞侠改变社区“管家”与居民研讨 解决小区“疑新区推民生教育项目:教师提前一年到位天津航标处官微上线:助航信息用户一查开发区牵手谷歌进军跨境电子商务 推动滨海新区多条公交线路调整走向动漫园版权交易中心将运营 为企业搭建天津开展拉网式风险排查 保障进出口食中心商务区参展津洽会 力争吸引50家新区打击非法行医:取缔57户黑诊所 “正观·味象”文人精神16家:体味、山东威海:政府“孵化”22个公益组织
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘