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

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

ajaxSubmit(object)-JQuery API clearForm()-JQuery API clearInputs()-JQuery API fieldSerialize(true)-JQuery API fieldValue(successful)-JQuery API formSerialize(true)-JQuery API formToArray(true)-JQuery API resetForm()-JQuery API $.recallDroppables()-JQuery API $.SortSerialize()-JQuery API Draggable(hash)-JQuery API DraggableDestroy()-JQuery API Droppable(options)-JQuery API DroppableDestroy()-JQuery API Sortable(options)-JQuery API SortableAddItem(elem)-JQuery API $.meta.setType(type, name)-JQuery API data()-JQuery API disableTab(position)-JQuery API enableTab(position)-JQuery API tabs(initial, settings)-JQuery API triggerTab(position)-JQuery API triggerTab(position)-JQuery API Tooltip(settings)-JQuery API PHP简介-PHP初学入门教程1 选择PHP的理由 -PHP初学入门教程2 从一个简单的程序来了解PHP -PHP初学入门教程3 PHP语法基础 -PHP初学入门教程4 建设一个简单的交互网站(一) -PHP初学入门教程5 建设一个简单交互的网站(二) -PHP初学入门教程6 建设一个简单交互的网站(三)密码验证 -PHP初学入门教程7 为亚洲雪耻,为中国队加油!! 紧急求助:在那儿可以找到关于字体文件的文件格式!!! 测试adoconnection是否已关闭 请教各位大侠! 关于表设了密码的问题 开始了吗?开始了吗?北京的高程考试报名开始了吗? 如何自定义数据类型? 图片显示不了了 java 线程,对当前线程(非主线程)调用sleep,为什么主线程(窗口)也没反应了 各位大虾帮忙呀,哪位把下面的文字翻译成准确的英文,200分相赠!!!决不食言!!! 请教:PHP下的事件处理方法 如何通过ASCII码区分全角与半角字符?急! 触发器???:(拜托各位大哥大姐,大叔大伯! 字符串替换函数是什么? 送分 那位大虾帮我翻译一下 急 分不够可以加 为了忘却的纪念! 急急急急急!!!!!!!!!!,Band里的内容过长,如何让它自动的分页??? oicq的窗口title怎么为空了?如何得到句柄? session问题! 用dbgrideh控件,如何实现汇总结果的打印 有关ATL的最基础问题 怎样监控icmp包?用自编的程序 急急急急急!!!!!!!!!!,Band里的内容过长,如何让它自动的分页??? 使对话框最小化渐变到托盘区。 各位高手!!我用的是win2000工作组模式,为什么我能访问别人,而别人不能访问我呢??? 有关文件的读写问题。 大家讨论一下内存分配、释放的问题 关于在jsp中运用sqlserver的小问题!!! 怎么样可以将session的存活期限设置成“永远不死”?? 送分题,如何取得一个表的所有字段名? 那里可以下载Wrox系列书的英文版? 无法启动sqlserver的问题. DELPHI中dbgird的语句问题 关于控制动态产生Checkbox,并进行动态控问题 BCB中使用MSComm控件,无法定义动态数组变量,该怎么办?--急啊!在线等待 战神----巴蒂 两个问题! 用ADO访问DBASE数据库 百分求救:关于COM方法的reference参数不返回值的问题 请教各位高手 如何将程序中不同的查询结果写入报表? 怎样自编程序监控icmp包,应该截获什么消息,还是用别的方法? java本地化的问题(各位帮帮我!) 一个关于类型转换的菜鸟问题!! 招聘 Jpeg中FFd9可以有几个? ?????不同窗口中多个参数传递的问题,在线等待中........ 关于 EmbeddedWb 的Mshtml_tlb, SHDocVw_tlb 问题! 各位大虾 帮我翻译一下 急 悲... DBGrid为什么没有数据集记录失去焦点事件? 差压变送器校验的最大允许误差怎么计算 环氧树脂会对三元乙丙橡胶产生腐蚀吗环氧树脂的玻化温度大概是多少?当它在这个温度段时与三元乙丙橡胶或者其他橡胶接触,会发生什么样的情况? 在被微波炉转过的一杯水里加一勺咖啡,水会沸腾 一个考上苏高中的说会但是我自己在家里试了一下,没什么反应啊!怎么回事 频率表示声源振动的( ),声源( )振动的次数叫做频率. 测量液体压力的变送器安装位置是否要高于取源点 音的高低是由于物体在一定时间内折振动次数(频率)而决定的.振动次数多,音则高 反应釜厂家想在郑州找一家质量好服务好有很大的做反应釜的公司! 华扬太阳能副水箱经常不能上水,每次都要跑到屋顶敲打上水管,才能上水,有没有办法解决?我怀疑副水箱有问题,哪位可告诉什么地方有副水箱卖不? 高镍合金运用哪位知道中国哪些领域需要用到高镍合金?镍合金在汽车领域有哪些运用? 请问廊坊哪里有做反应釜的厂家?不好意思 我最近刚找到一家廊坊地区的叫万富容器的厂家 沥青漆耐氯腐蚀吗 一个气球放在微波炉中加热它会爆炸还是融化.第一个可用答案立即会被采纳 进口反应釜厂家,进口反应釜哪里卖 耐氨水油漆保护铁质容器不被氨水腐蚀,并且在氨、乙醇、水的混合蒸汽中没有溶解其他物质. 求激光冷水机的工作原理,包括散热冷却和压缩式制冷冷却的,该如何挑选? 取暖费用是按建筑面积还是实用面积缴纳 测量炉膛压力为何用差压变送器测量单压力用压力变送器就可以了,为何要用差压变送器? 钛镍合金怎么剪今天在实验室用大钳子剪钛镍合金,合金是钛镍二元的,原子比1比1,结果钳子口都断了.想问一下实验室里有什么方法能比较好的剪断钛镍的 写出一个你感兴趣的名人的名字并写出相关的作品 耐震压力表 耐震压力表厂家哪家质量好? 有钛镍合金这种合金存在吗? 有关伟人的文章(三篇)只要有题目就行 关于高中物理能量转化与守恒问题,好奇怪 关于重力势能,弹性势能和动能的转化中,有些式子是:EP重=EP弹+EK.有些又是:EP弹=EP重+EK.什么情况下列什么式子啊?请详细举例说明, 生为何来?死为何去?拜托各位大神 要测量管道的压力差,是选用差压变送器还是选择两个压力变送器测量两端压力后再求差值?那个精度高? 我想去死怎么办呀~~~~~~~~~~~~~~~~~~~······ 做等.死等!. 磁力搅拌器注意哪些?VELP磁力搅拌器在使用时呢? 如何让你去死? 多大压力条件下才能使水的沸点升高到270度1mpa压力下水的沸点是多少度?要形成250度液态水需要多大压力?怎么不对啊?我怎么算不出来呢?我怎么算的压强升高温度降低了呢/ 磁力搅拌器在使用时有什么要注意的么?购买了一个78-1磁力搅拌器,不知道该怎么使用,有没有什么要注意的? 能量的转化和守恒在学这章时 课本上有内能,机械能,光能,电能和化学能的转化,热能和磁能属于什么能? 这个化学式谁会握(化学式WO)钯(化学式Pd)逝(IS)三种物质生成化学式:Wo Pd IS礼(LEE)他们化合是…… 建筑面积74.45平方米供热费超高部分怎样计费 怎样去死 水的沸点需要达到130℃,请问需要多大压力? 根据此图材料绘制一个水箱自动与手动上水水泵电路控制图,要求低水位启动,水箱满停止. 秋千会越摆越低,掉在底墒的弹性小球会跳起,但是越跳越低秋千和小球在运动中能量的转化为什么它们的高度会逐渐降低?是否丢失了能量?你认为减少的机械能到哪里去了?下列关于“ w的化学式怎么求 根据表中示例,写出对应物质的化学式及物质的名称. 咋样才能死 这个化学式可以有吗 差压变送器压力波动有时从18点多,突然变成2点多或其他值,然后再变成18点多,波动也比较频繁 纸杯可以进微波炉加热吗?需要科学的解释哟. 特灵离心式水冷冷水机工作原理是什么?制冷剂在蒸发器中蒸发,吸收热量,使冷冻水温度降低,而制冷剂有压缩机压缩成液体时产生的热量有冷却水带走,降低制冷剂的温度.冷却水的热量有冷却 写出有关物质的化学式A____________ B__________ C___________ E___________ H_________ 初中电路计算方式用电器到底是功率大的电阻大,还是功率大的电阻小啊?功率与电阻成反比还是正比? 物理学把声音的高低称为()由声源的()决定 240柴油机主轴瓦内径椭圆怎样测量才能准确算出瓦与曲轴的间隙? 写出各物质化学式在灰黑色粉末A和白色粉末B组成的化合物中加入水先看到溶液呈蓝色,经过一段时间溶液变成浅绿色并析出红色沉淀C 将沉淀滤出加入浓硫酸共热有气体放出反应后将溶液浓 一次性纸杯能进微波炉加热吗? 咏柳这首诗的意思是什么 差压变送器测压力两端分别为什么压力 物体振动时发出的声音叫什么,反之叫什么,声音的高低叫什么? 我要查“咏柳”这首诗的意思 压力于差压变送器的是如何选型的? 镍合金牌号B50TF15代表什么意思? 经常被爆菊会怎么样?经常爆菊的话,菊花会不会比一般人松?虽然是有弹性的.但是弹性会不会比一般人小?拉的便便啊要粗很多么?会不会憋不住便便啊? 英语翻译大学体育(一)大学英语(一)计算机基础(一)思想道德修养形势与政策(一)中国近代史纲微积分1(经济类一)大学体育(二)大学英语(二)计算机基础(二)军训毛泽东思 常用工程塑料的热变形温度是多少?有人知道吗?
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘