管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

当前流行的JavaScript代码风格指南

　　JavaScript 没有一个权威的编码风格指南，取而代之的是一些流行的编码风格：

　　

复制代码 代码如下:

　　Google的JavaScript风格指南（以下简称Google）

　　http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml

　　NPM编码风格（以下简称NPM）

　　https://npmjs.org/doc/coding-style.html

　　Felix的Node.js风格指南（以下简称Node.js）

　　http://nodeguide.com/style.html

　　惯用（Idiomatic）的JavaScript（以下简称Idiomatic）

　　https://github.com/rwldrn/idiomatic.js/

　　jQuery JavaScript风格指南（以下简称jQuery）

　　http://contribute.jquery.org/style-guide/js/

　　Douglas Crockford的JavaScript风格指南（以下简称Crockford），Douglas Crockford是Web开发领域最知名的技术权威之一，ECMA JavaScript 2.0标准化委员会委员

　　http://javascript.crockford.com/code.html

　　当然，在JavaScript语法检查器 JSLint 和 JSHint 中也有一些默认的设置选择。问题是，什么才是终极的、让大多数开发者可以遵循的JavaScript编码风格呢？下面让我们从这6个风格指南中找出一些有共识的风格来。

　　1. 代码风格比较

　　1.1 缩进

　　两个空格，无需更长的缩进，无需Tab缩进：Google、NPM、Node.js、Idiomatic

　　Tab缩进：jQuery

　　4个空格：Crockford

　　1.2 参数和表达式之间的空格

　　使用紧凑型风格：Google、NPM、Node.js

　　

复制代码 代码如下:
project.MyClass = function(arg1, arg2) {

　　过多地使用空格：Idiomatic, jQuery

　　

复制代码 代码如下:
for ( i = 0; i < length; i++ ) {

　　没有发表意见：Crockford

　　大部分指南中，都提醒开发者不要在语句结尾处有任何的空格。

　　1.3 代码行长度

　　最多80个字符：Google、NPM、Node.js、Crockford（当在代码块中，除了2个空格外的其他缩进允许将函数参数与首个函数参数的位置对齐。另一种选择是当自动换行时使用4个空格缩进，而不是2个。）

　　没有发表意见：jQuery、Idiomatic

　　1.4 分号

　　始终使用分号，不依赖于隐式插入：Google、Node.js、Crockford

　　在某些情况下不要使用expect：NPM

　　没有发表意见：jQuery、Idiomatic

　　1.5 注释

　　遵循JSDoc约定：Google、Idiomatic

　　没有发表意见：NPM、Node.js、jQuery、Crockford

　　1.6 引号

　　推荐单引号：Google、Node.js

　　双引号：jQuery

　　没有发表意见：NPM、Idiomatic、Crockford

　　1.7 变量声明

　　一次声明一个，不使用逗号：Node.js

　　

复制代码 代码如下:

　　var foo = ”;

　　var bar = ”;

　　一次声明多个，在行结束处使用逗号分隔：Idiomatic、jQuery

　　

复制代码 代码如下:

　　var foo = “”,

　　bar = “”,

　　quux;

　　在行开始处使用逗号：NPM

　　没有发表意见：Google、Crockford

　　1.8 大括号

　　在同一行使用左大括号：Google、NPM、Node.js、Idiomatic、 jQuery、Crockford

　　

复制代码 代码如下:
function thisIsBlock(){

　　NPM指南中指出，只在代码块需要包含下一行时使用大括号，否则不使用。

　　1.9 全局变量

　　不要使用全局变量：Google、Crockford（谷歌表示，全局变量命名冲突难以调试，并可能在两个项目进行正整合时出现一些棘手的问题。为了便于共享公用的JavaScript代码，需要制定公约来避免冲突发生。Crockford认为不应该使用隐式全局变量。）

　　没有发表意见：Idiomatic、jQuery、NPM、Node.js

　　2 命名风格

　　2.1 变量命名

　　开始的第一个单词小写，之后的所有单词首字母大写：Google、NPM、Node.js、Idiomatic

　　

复制代码 代码如下:

　　var foo = “”;

　　var fooName = “”;

　　2.2 常量命名

　　使用大写字母：Google、NPM、Node.js

　　

复制代码 代码如下:
var CONS = ‘VALUE';

　　没有发表意见：jQuery、Idiomatic、Crockford

　　2.3 函数命名

　　开始的第一个单词小写，之后的所有单词首字母大写（驼峰式）：Google、NPM、Idiomatic、Node.js（推荐使用长的、具描述性的函数名）

　　

复制代码 代码如下:

　　function veryLongOperationName

　　function short()..

　　关键字形式的函数命名：

　　

复制代码 代码如下:

　　function isReady()

　　function setName()

　　function getName()

　　没有发表意见：jQuery、Crockford

　　2.4 数组命名

　　使用复数形式：Idiomatic

　　

复制代码 代码如下:
var documents = [];

　　没有发表意见：Google、jQuery、NPM、Node.js、Crockford

　　2.5 对象和类命名

　　使用如下形式：Google、NPM、Node.js

　　

复制代码 代码如下:

　　var ThisIsObject = new Date;

　　没有发表意见：jQuery、Idiomatic、Crockford

　　2.6 其他命名

　　针对长文件名和配置键使用all-lower-hyphen-css-case形式：NPM

　　3. 根据上述风格配置 .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 将会运行得更快。

　　4. 在提交 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-verify

　　filenames=($(git diff --cached --name-only HEAD))

　　which jshint &> /dev/null

　　if [ $? -ne 0 ];

　　then

　　echo "error: jshint not found"

　　echo "install with: sudo npm install -g jshint"

　　exit 1

　　fi

　　for i in "${filenames[@]}"

　　do

　　if [[ $i =~ \.js$ ]];

　　then

　　echo jshint $i

　　jshint $i

　　if [ $? -ne 0 ];

　　then

　　exit 1

　　fi

　　fi

　　done

教程首页 更多教程