1.嵌入规则

Javascript程序应该尽量放在.js的文件中,需要调用的时候在页面中以<script src="filename.js">的形式包含进来。Javascript代码若不是该页面专用的,则应尽量避免在页面中直接编写Javascript代码。

2.对齐缩进与换行

a) 缩进

在同一系统中应采用同一种缩进标准,本文提倡缩进大小为4个空格。各编译器对Tab键所代替的空白大小定义不同。建议在设置开发环境时,将编辑器里的Tab快捷键重新设置成4个空格。多数编译器提供了此功能。否则建议按4次空格来进行缩进。

b) 换行

在以下位置必须换行:

每个独立语句结束后;

if、else、catch、finally、while等关键字前;

运算符处换行时,运算符必须在新行的行首。

对于因为单行长度超过限制时产生的换行,参考行长度中的策略进行分隔。

1).字符串过长截断

每行代码应小于80个字符。若代码较长应尽量换行,换行应选择在操作符和标点符号之后,最好是在分号“;”或逗号“,”之后。下一行代码相对上一行缩进4个空格。这样可以有效防止复制粘贴引起的代码缺失等错误并增强可读性。

按一定长度截断字符串,并使用+运算符进行连接。分隔字符串尽量按语义进行,如不要在一个完整的名词中间断开。特别的,对于HTML片段的拼接,通过缩进,保持和HTML相同的结构:

也可使用数组来进行拼接,相对+运算更容易调整缩进:

2).三元运算符过长

三元运算符由3部分组成,因此其换行应当根据每个部分的长度不同,形成3种不同的情况:

不得出现以下情况:

3).过长的逻辑条件组合

当因为较复杂的逻辑条件组合导致80个字符无法满足需求时,应当将每个条件独立一行,逻辑运算符放置在行首进行分隔,或将部分逻辑按逻辑组合进行分隔。最终将右括号)与左大括号{放在独立一行,保证与if内语句块能容易视觉辨识。如:

4).过长的JSON和数组

如果对象属性较多导致每个属性一行占用空间过大,可以按语义或逻辑进行分组的组织,如:

通过5个一组的分组,将每一行控制在合理的范围内,并且按逻辑进行了切分。 对于项目较多的数组,也可以采用相同的方法,如:

5).return语句

return如果用表达式的执行作为返回值,请把表达式和 return 放在同一行中,以免换行符被误解析为语句的结束而引起返回错误。return 关键字后若没有返回表达式,则返回 undefined。构造器的默认返回值为 this。

示例:

3.命名

命名的方法通常有以下几类:

a).命名法说明

1).camel命名法,形如thisIsAnApple

2).pascal命名法,形如ThisIsAnApple

3).下划线命名法,形如this_is_an_apple ·

4).中划线命名法,形如this-is-an-apple

根据不同类型的内容,必须严格采用如下的命名法:

b).变量名:必须使用camel命名法

c).参数名:必须使用camel命名法

d).函数名:必须使用camel命名法

e).方法/属性:必须使用camel命名法

f).私有(保护)成员:必须以下划线_开头

g).常量名:必须使用全部大写的下划线命名法,如IS_DEBUG_ENABLED

h).类名:必须使用pascal命名法

i).枚举名:必须使用pascal命名法

j).枚举的属性:必须使用全部大写的下划线命名法

k).命名空间:必须使用camel命名法

l).语义:命名同时还需要关注语义,如:

变量名应当使用名词;

boolean类型的应当使用is、has等起头,表示其类型;·

函数名应当用动宾短语;

类名应当用名词。

4.注释

注释要尽量简单,清晰明了。着重注释的意思,对不太直观的部分进行注解:

(当然这种直接定义一堆全局变量的做法不推荐)

此外,JavaScript 的注释有两种"//" 和"/* .... */",建议"//"用作代码行注释,"/* .... */"形式用作对整个代码段的注销,或较正式的声明中,如函数参数、功能、文件功能等的描述中:

另:复制粘贴应注意注释是否与代码对应。

5.声明

1).变量的声明

尽管 JavaScript 语言并不要求在变量使用前先对变量进行声明。但我们还是应该养成这个好习惯。这样可以比较容易的检测出那些未经声明的变量,避免其变为隐藏的全局变量,造成隐患。

在函数的开始应先用 var 关键字声明函数中要使用的局部变量,注释变量的功能及代表的含义,且应以字母顺序排序。每个变量单独占一行,以便添加注释。这是因为 JavaScript 中只有函数的 {} 表明作用域,用 var 关键字声明的局部变量只在函数内有效,而未经 var 声明的变量则被视为全局变量。示例:

用 var 声明过的变量 valueA 和没有声明的变量 valueB 是有区别的。特别需要注意的是,在函数内部用 var 声明的变量为局部变量,这样可以有效地避免因局部变量和全局变量同名而产生的错误。

2).函数的声明

函数也应在调用前进行声明,内部函数应在 var 声明内部变量的语句之后声明,可以清晰地表明内部变量和内部函数的作用域。

此外,函数名紧接左括号'('之间,而右括号')'和后面的'{'之间要有个空格,以清楚地显示函数名以其参数部分,和函数体的开始。若函数为匿名 / 无名函数,则 function 关键字和左括号'('之间要留空格,否则可能误认为该函数的函数名为 function。

内部函数声明示例:

从上例的输出可以看出,inF() 函数仅在 outF() 函数的内部生效,局部变量 innerA 对内部函数的作用域生效。这样的编码方式使得变量和函数的作用域变得清晰。

最全的Javascript编码规范(推荐)的更多相关文章

  1. JavaScript编码规范[百度]

    JavaScript编码规范 1 前言   2 代码风格   2.1 文件   2.2 结构   2.2.1 缩进   2.2.2 空格   2.2.3 换行   2.2.4 语句   2.3 命名 ...

  2. 最全面的 Android 编码规范指南

    最全面的 Android 编码规范指南 本文word文档下载地址:http://pan.baidu.com/s/1bXT75O 1. 前言 这份文档参考了 Google Java 编程风格规范和 Go ...

  3. 学习一份百度的JavaScript编码规范

    JavaScript编码规范 1 前言 2 代码风格 2.1 文件 2.2 结构 2.2.1 缩进 2.2.2 空格 2.2.3 换行 2.2.4 语句 2.3 命名 2.4 注释 2.4.1 单行注 ...

  4. JavaScript编码规范指南

    前言 本文摘自Google JavaScript编码规范指南,截取了其中比较容易理解与遵循的点作为团队的JavaScript编码规范. JavaScript 语言规范 变量 声明变量必须加上 var  ...

  5. 【转发】网易邮箱前端技术分享之javascript编码规范

    网易邮箱前端技术分享之javascript编码规范 发布日期:2013-11-26 10:06 来源:网易邮箱前端技术中心 作者:网易邮箱 点击:533 网易邮箱是国内最早使用ajax技术的邮箱.早在 ...

  6. 网易前端JavaScript编码规范

    在多年开发邮箱webmail过程中,网易邮箱前端团队积累了不少心得体会,我们开发了很多基础js库,实现了大量前端效果组件,开发了成熟的opoa框架以及api组件,在此向大家做一些分享.今天想先和大家聊 ...

  7. 网易邮箱前端Javascript编码规范:基础规范

    在多年开发邮箱webmail过程中,网易邮箱前端团队积累了不少心得体会,我们开发了很多基础js库,实现了大量前端效果组件,开发了成熟的opoa框架以及api组件,在此向大家做一些分享.今天想先和大家聊 ...

  8. JavaScript 编码规范(中文/Airbnb公司版)

    Airbnb 是一家位于美国旧金山的公司,本文是其内部的 JavaScript编码规范,写得比较全面,在 Github 上有 16,686 + Star,3,080 + fork,前端开发人员可参考. ...

  9. 《编写可维护的JavaScript》——JavaScript编码规范(一)

    缩进层级 代码如何缩进通常有两种主张: 使用制表符缩进 每一个缩进层级都用单独的制表符表示.这种方法的主要缺点是:系统对制表符的解释不一致.这些差异会导致不同的开发者对同一段代码有不同的看法的,这正是 ...

随机推荐

  1. 智能指针 auto_ptr、scoped_ptr、shared_ptr、weak_ptr

    什么是RAII? RAII是Resource Acquisition Is Initialization的简称,是C++语言的一种管理资源.避免泄漏的惯用法. RAII又叫做资源分配即初始化,即:定义 ...

  2. Mac & Xcode 技巧

    1.Xcode 删除过期的Provisioning Profile文件 解决:Xcode 中所有的Provisioning Profile文件路径,都在 ~/Library/MobileDevice/ ...

  3. secureCRT7.3.4的破解与安装

    1-9为 SecureCRT 7.3.4 安装图解:10-13是 SecureCRT 7.3.4 破解图解,心急的朋友可以直接向下拉. 以下是百度百科对 SecureCRT 的介绍: SecureCR ...

  4. React菜鸟食谱

    JSX 用小括号包裹代码防止分号自动插入的bug,用大括号包裹里面的表达式 切记你使用了大括号包裹的 JavaScript 表达式时就不要再到外面套引号了.JSX 会将引号当中的内容识别为字符串而不是 ...

  5. LeetCode第[48]题(Java):Rotate Image

    题目:矩阵旋转 难度:Medium 题目内容: You are given an n x n 2D matrix representing an image. Rotate the image by ...

  6. Entity Framework 6:专家版本

    随着 Entity Framework 最新主版本 EF6 的推出,Microsoft 对象关系映射 (ORM) 工具达到了新的专业高度,与久负盛名的 .NET ORM 工具相比已不再是门外汉. EF ...

  7. python 图像库PIL详解

    PIL详细文档 The most important class in the Python Imaging Library is the Image class, defined in the mo ...

  8. 《The Cg Tutorial》阅读笔记——动画 Animation

    这段时间阅读了英文版的NVidia官方的<The Cg Tutorial>,借此来学习基本的图形学知识和着色器编程. 在此做一个阅读笔记. 本文为大便一箩筐的原创内容,转载请注明出处,谢谢 ...

  9. CC国内厂商现状

    (1)阿里云的产品 CC攻击 攻击者攻击服务器的认证页面.登录页面.游戏论坛等.还是用饭馆的例子,CC攻击相当于,坏人霸占收银台结账.霸占服务员点菜,导致正常的客人无法享受到服务. 游戏盾如何防御CC ...

  10. 【Hive】执行脚本

    1.linux下执行hive sql脚本 (1)hive -e “sql语句” (2)hive -e “sql语句” >> xxx 将sql查出来的语句重定向到xxx文件中,会显示Ok和数 ...