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

一些达成共识的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主导通用主板+SoC ARM与Intel同台对抗 假如像招聘程序员那样租车…… CrowdStar:Windows Phone 8是开发者的下一片蓝海 腾讯云总经理陈磊透露流量变现计划 将比亚马逊AWS更专注 代码之美——Doom3源代码赏析 英特尔公布2012财年财报 Q4净利润同比下滑27% 谷歌CEO佩奇:创新重于竞争 关注非增量改进 再尝败绩 微软杀软AV-TEST反病毒认证失败 财富:2013最佳雇主 谷歌第一微软75苹果未入榜 移动应用注册表单必死! 数据:2012年的全球互联网知多少 访中粮我买陈伟伟:高并发大压力挑战架构师极限 左路Deep Learning+右路Knowledge Graph,谷歌引爆大数据 数据库排行榜:关系型居首,NoSQL整体人气最高 联通:要做PaaS,存储最低为TB 百度资深交互设计师谈微信4.5版本 TalkingData推出移动游戏数据分析平台 一周消息树:著名计算机黑客Aaron Swartz自杀身亡 使用Windows 8模拟器及Visual Studio 2012调试IE 10触控及响应式Web设计 Azure、AWS要来了 IDC抱团取暖还是各找出路 C#使用ICDBurn实现CD刻录 验证码识别基础方法及C#/.NET源码 傲逆软件CEO周鲁:核心游戏精神,在移动游戏创作中传承 Kim Dotcom推出新文件存储服务平台Mega 用户数一天达百万 美FCC:希望全美在2015年部署千兆以太网 iOS和Android双平台:帷千动媒SDK 3.0发布 移动周报:2013年移动App设计13大精髓 构建高可扩Web架构和分布式系统实战(下) API设计的十大最差和五大最佳实践 Hadoop:为什么RAID-0不行? 一个难题!非常着急,希望大家帮我解决! 为什么该父类无法调用其子类. 请教CDateTimeCtrl控件问题! 高分求救!哪位哥哥能否帮我解决一下几道C编程的题目,我讲感激不尽!!!谢谢 我找到一个DELPHI的技术站点,还可以,请大家来LOOK 动态显示图片!!!!!! 本人是beginner for vc++,希望以后多交流。现请求一个vc++作的画图程序 大侠执教:投稿程序员杂志要多少时间才有回音? 有办法在控制台程序启动时,隐藏它的DOS窗口吗? 关于MFC中的Project Settings问题 两个编程的初级问题 谁能给我一个关于二叉树的完整的程序。 认识的进来聊天 , 我是东宝 (yeti_lee) 我是一名学生,学计算机(一个普通大学)。请教大家几个问题 大连成绩如何查??有人查到了吗?请聊聊 分是个累赘,我放完它~!来的就有,讲些凄惨的事情和遭遇,大家比谁惨,越惨的给分越多,兄弟我此举是为了找平衡。 怎样得到当前系统打印机的各项信息?????特别是打印纸张方向!!! 高分求救——我有几道C程序的编程题目,望各位高手帮忙解决!谢谢 哪位告诉我select语法,我忘了group by 的使用方法,谢谢! 请问哪儿有电子版的《COM编程精彩实例》,谢谢! 请问:要想学习vb和数据库的知识,哪些书比较好?请各位朋友帮忙推荐几本好书?谢了~! 请问有谁知道PB8编译后打包,PARADOX数据库驱动程序需那些啊????急!!!!!! 在oracle存储过程中怎么使用cursor作为返回值? [TIPS]Win9x和WinNT/2000下面都可以去掉OICQ广告的方法! 触发器问题 关于bdgrid的问题,高手请来,一定高分相送!!!!急 怎么建立WIN2000的域信任关系 用data控件连接DBf数据库时为什么出现“找不到可插入的ISAM”错误? 大家等会儿再吃饭!先看一看这里的送分大餐...... 他们怎么想的?居然没有bcb? 高手指教:如何在vc中控制刻录机和磁带机进行数据备份和恢复? 请问各位高手,怎样才能学好c语言。有没有什么好一点的网站和源码提供,多谢。 如何解决在向量位图背景下的窗口移动是的刷新置后问题?? 问一个问题!爱好or 程序员? 用VB如何设计好的报表,欢迎讨论! messagedlg能不能显示中文?例如显示“确定”,而不是“ok” 各位高手!!请教一个有关在oracle8i中建立表与表之间的关系? 请问哪里有无时间期限的Setup Factory 下载? 笨呆呆,拿分。 请问到那里可以下载uml工具,如果再有推荐的话是一定可以得分的 再次有请: playyuer 吴文智、袁飞、Jneu、Amoon、ttyp、icevi、progame、Jinesc 等各路高手 偶是初学者,问一个问题 SOS,很严重windows的问题,高手快进 复制Access数据库时出现的问题 如何动态添加TQuery的字段??? 编译一问 SOS,很严重windows的问题,高手快进 !!! 有人开发过基于winpcap的网络抓包程序么? SOS,很严重windows的问题,高手快进 ! 通过双网卡上网怎么设置? 一名初学者的问题? “出人头地”成语接龙,首尾要一样的,最少8个,错字我能看出来,别想蒙混过关不是啊,例如:机不可失→失不再来→来者不拒→拒之门外... 浓硫酸与二氧化锰、氯化钠制氯气,为什么生成硫酸氢钠,而不是硫酸钠. 成语对对子:流芳百世()精雕细刻()守株待兔()望梅止渴()旗开得胜()瓜熟蒂落() 为什么H2O是分子,而NaCl不是?如果说什么NaCl是由离子构成,而H2O不是,那为什么不可以说H2O是H+和O2-构成?还有NaCl叫NaCl什么?就像H2O叫H2O分子一样.还有就是由分子构成的和由离子构成的区别是? 如何用氯化钠二氧化锰浓硫酸制氯气我将氯化钠二氧化锰和浓硫酸倒在一起时没有想这个视频一样的效果,这是为何?好像都没反应.而且这个视频人家一倒浓硫酸进去就反应了.视频地址:http:/ 成语对对子:流芳百世 高中物理必修一43页第3题 二氧化锰,浓硫酸,氯化钠制取氯气哪个是还原剂,哪个是氧化剂. 科代表怎样安排高中历史复习我们高二了,我是历史课代表,我们要复习必修1(人教版),每周早上有20分钟复习,怎么安排全班复习计划, CaCO3和H2O反应吗 用氯化钠和浓硫酸与二氧化锰共热制取氯气的方程式用什么方法配平 成语对对子(反义词) 例如:粗茶淡饭(山珍海味)守株待兔( ) 狗仗人势( )望梅止渴( )水落石出( ) 水落石出(成语接龙) 刻舟求剑,守株待兔,指鹿为马,凿壁偷光,纸上谈兵,囊萤映雪,的主角是谁? 成语反义词对对子固若金汤( )指鹿为马( )伶牙俐齿( ) caco3能和nacl反应吗 跟寓言故事中的任务对话、 刻舟求剑——() 郑人买履——()守株待兔——()拔苗助长——()填跟寓言故事中的人物对话、不好意思啊、打错字了、列、讳疾忌医——蔡桓公大王、您有 融化和熔化的区别? 9、在同一高度将质量不相等的两个小球A、B以大小相等的初速度分别竖直上抛和竖直下抛,下列说法中正确的是:A.在运动过程中,A、B的加速度相同B.A、B落地时的位移相同C.A、B落地时的 守株待兔和刻舟求剑这两则寓言都讽刺了那种人 融化和熔化有什么区别? 成语接龙:摇()怜()玉()事()为()仁()德()功()满()花()语()长()日()言()一()水() 刻舟求剑和守株待兔的意思要把故事简要概括(最好三四句话)在说蕴意! 融化、溶化、熔化的区别,并各造一句话 2010年黄冈物理中考第30第一题的详细解析 已知实验室制氯气的化学方程式为:MnO2+4Hcl(浓)=MnCl2+Cl2+2H2O.现用足量浓盐酸在加热条件下跟17.4克二氧化锰反应制氯气.(1)产生的氯气在标况下的体积.(2)把反应后的溶液稀释到100ml,从中 融化,熔化的区别是什么 水落石出开始成语接龙,结束在安居乐业吗?有个题把我难住了!请各位大侠帮帮忙!大家记好是成语!出入平安不是成语!没有规定词的数量!帮帮忙好吗! ﹝﹞凿壁偷光 ﹝﹞闻鸡起舞 ﹝﹞指鹿为马 ﹝﹞纸上谈兵 高中历史总复习提纲 最好能接的长点,最少4个...速度,请教大家.从“水落石出”开始成语接龙,结束在“安居乐业”.谢谢! 纸上谈兵,四面楚歌,指鹿为马,口蜜腹剑,闻鸡起舞,江郎才尽,乐不思蜀,凿壁偷光这些成语的主人公是谁? 熔化状态和熔融状态有什么区别?(化学方面)RT,看到一本书上写离子反应在溶液或熔融状态下反应,另一本说溶液或熔化…… 成语接龙:水落石出→真相大白 凿壁偷光,精忠报国,指鹿为马,纸上谈兵,闻鸡起舞,破釜沉舟,程门立雪,写出 熔化 溶化 融化 都有什么不同?熔化是一样的吗?溶化是一样的吗?融化 融解是一样的吗? 反应原理:Cl2+2NaOH=Cl2+2NaOH==NaCl+NaClO+H2O.若用NaOH溶液的质量分数为百分之10,计算,吸收14.2千克CL2,理论上至少需要消耗百分之十的氢氧化钠溶液多少千克?相对原子质量:H:1 ,O:16 ,NA:23 ,CL35.5 凿壁偷光 指鹿为马 纸上谈兵 精忠报国 闻鸡起舞 入木三分 鞠躬尽瘁 破釜沉舟 高山流水 黄袍加身 的主人公 材料一 天下多男人,尽是兄弟之辈;天下多女子,尽是姐妹之群,何得存此僵彼界之私,何可起尔吞我并之念.——洪秀全《原道醒世训》,1843年材料二 逆贼洪秀全杨秀清称乱以来,於今五年矣.荼 实验室制取有毒氯气时,常用氢氧化钠溶液来吸收多余的氯气,其反应的化学方程式为Cl2+2NaOH=X+NaClO+H2O,则X的化学式为( ),该判断依据是( ) 指出在中国实现民族独立后,共产党为实现民主政治所做的努力 谁有下面这个高中历史第一轮复习的文件? 绳锯木断下一句是什么 各位!溶化,融化,熔化这三个词怎么区别? 熔融 熔化 溶解区别是什么? 绳锯木断,下一句 “融化”,“溶化”,“熔化”,三词的区别如题 溶解和熔化有什么区别嬷?从化学角度咯,最好举例子嘞~ 生活中的圆周运动 F合=mgtanα≈mgsinα=mgL/h为什么是≈呢? 绳锯木断的下一句是什么要完整的,我急. "溶化"和"熔化"这两个词有什么区别? 高中物理必修二中最重要的公式 "绳锯木断"下一句是什么? 溶化,熔化,融化的区别是什么? 有关功率的的公式 【黄冈中考题一道】某科技开发公司研制出一种新型的产品,每件产品的成本为2400元,销售单价定为3000元,在该产品的试销期间,为了促销,鼓励商家购买该新型产品,公司决定商家一次购买这种 流芳百世,良药苦口,水落石出,雪中送炭,精雕细琢,守株待兔,卸磨杀驴,伶牙俐齿的反义词. 成语接龙:出人头地 地动山摇. 用氯化钠和浓硫酸和二氧化锰制取氯气,如果是因为硫酸先与氯化钠反应生成了氯化氢,再与二氧化锰反应生成氯气 那么产物就应有氯化锰啊,可为什么是硫酸锰呢?如果是氯化锰和硫酸反应生 成语对对子 流芳百世( ) 井然有序( ) 精雕细刻( ) 固若金汤( )(注意对仗要工整,意思要相对)
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn