JavaScript 代码规范
所有的 JavaScript 项目适用同一种规范。
JavaScript 代码规范
代码规范通常包括以下几个方面:
- 变量和函数的命名规则
- 空格,缩进,注释的使用规则。
- 其他常用规范……
规范的代码可以更易于阅读与维护。
代码规范一般在开发前规定,可以跟你的团队成员来协商设置。
变量名
变量名推荐使用驼峰法来命名(camelCase):
firstName = "John";
lastName = "Doe";
price = 19.90;
tax = 0.20;
fullPrice = price + (price * tax);
在JavaScript中定义变量名时,还应该注意以下事项:
- 变量名应该区分大小写,允许包含字母、数字、美元符号($)和下划线,但第一个字符不允许是数字,不允许包含空格和其他标点符号;
- 变量命名长度应该尽可能的短,并抓住要点,尽量在变量名中体现出值的类型;
- 变量名的命名应该是有意义的;
- 变量名不能为JavaScript中的关键词、保留字全名;
- 变量名命名方法常见的有匈牙利命名法、驼峰命名法和帕斯卡命名法。
空格与运算符
通常运算符 ( = + - * / ) 前后需要添加空格:
实例:
var x = y + z;
var values = ["Volvo", "Saab", "Fiat"];
代码缩进
通常使用 4 个空格符号来缩进代码块:
函数:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
注意:不推荐使用 TAB 键来缩进,因为不同编辑器 TAB 键的解析不一样。
语句规则
简单语句的通用规则:
- 一条语句通常以分号作为结束符。
实例:
var values = ["Volvo", "Saab", "Fiat"];
var person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
复杂语句的通用规则:
- 将左花括号放在第一行的结尾。
- 左花括号前添加一空格。
- 将右花括号独立放在一行。
- 不要以分号结束一个复杂的声明。
函数:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
循环:
for (i = 0; i < 5; i++) {
x += i;
}
条件语句:
if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
对象规则
对象定义的规则:
- 将左花括号与类名放在同一行。
- 冒号与属性值间有个空格。
- 字符串使用双引号,数字不需要。
- 最后一个属性-值对后面不要添加逗号。
- 将右花括号独立放在一行,并以分号作为结束符号。
实例:
var person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
短的对象代码可以直接写成一行:
实例:
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
每行代码字符小于 80
为了便于阅读每行字符建议小于数 80 个。
如果一个 JavaScript 语句超过了 80 个字符,建议在 运算符或者逗号后换行。
实例:
注意:在函数声明、函数表达式、函数调用、对象创建、数组创建、for 语句等场景中,不允许在 , 或 ; 前换行。
命名规则
一般很多代码语言的命名规则都是类似的,例如:
- 变量和函数为驼峰法( camelCase)
- 全局变量为大写 (UPPERCASE )
- 常量 (如 PI) 为大写 (UPPERCASE )
变量命名你是否使用这几种规则: hyp-hens, camelCase, 或under_scores ?
HTML 和 CSS 的横杠(-)字符:
HTML5 属性可以以 data- (如:data-quantity, data-price) 作为前缀。
CSS 使用 - 来连接属性名 (font-size)。
注意:- 通常在 JavaScript 中被认为是减法,所以不允许使用。
下划线:
很多程序员比较喜欢使用下划线(如:date_of_birth), 特别是在 SQL 数据库中。
PHP 语言通常都使用下划线。
帕斯卡拼写法(PascalCase):
帕斯卡拼写法(PascalCase) 在 C 语言中语言较多。
驼峰法:
JavaScript 中通常推荐使用驼峰法,jQuery 及其他 JavaScript 库都使用驼峰法。
注意:变量名不要以 $ 作为开始标记,会与很多 JavaScript 库冲突。
HTML 载入外部 JavaScript 文件
使用简洁的格式载入 JavaScript 文件 ( type 属性不是必须的):
使用 JavaScript 访问 HTML 元素
一个糟糕的 HTML 格式可能会导致 JavaScript 执行错误。
以下两个 JavaScript 语句会输出不同结果:
HTML 与 JavaScript 尽量使用相同的命名规则。
文件扩展名
HTML 文件后缀可以是 .html (或r .htm)。
CSS 文件后缀是 .css 。
JavaScript 文件后缀是 .js 。
使用小写文件名
大多 Web 服务器 (Apache, Unix) 对大小写敏感: london.jpg 不能通过 London.jpg 访问。
其他 Web 服务器 (Microsoft, IIS) 对大小写不敏感: london.jpg 可以通过 London.jpg 或 london.jpg 访问。
你必须保持统一的风格,我们建议统一使用小写的文件名。
JavaScript 代码规范的更多相关文章
- 5 JSON&与JavaScript转换&JavaScript:void(0)&JavaScript代码规范
JSON:JavaScript Object Notation JS对象简谱 一种轻量级的数据交换格式,用于存储和传输数据的格式,通常用于服务端向网页传递数据 是独立的语言,易于理解 JSON语法 ...
- js基石之---易读、易复用、易重构的 JavaScript 代码规范
易读.易复用.易重构的 JavaScript 代码规范 1.变量命名规范有意义 Bad: const yyyymmdstr = moment().format("YYYY/MM/DD&quo ...
- JavaScript代码规范和性能整理
性能 Js在性能方面有多要注意的地方: 避免全局查找 Js性能优化最重要的就是注意全局查找,因为作用域的查找是先找局部作用域在没有找到之后在去上一级作用域查找直到全局作用域,所以全局作用域查找的性能消 ...
- 最流行的JavaScript代码规范
什么是最佳的JavaScript代码编程规范?这可能是一个众口难调的问题.那么,不妨换个问题,什么代码规范最流行? sideeffect.kr通过分析GitHub上托管的开源代码,得出了一些有趣的结果 ...
- javascript代码规范 [转]
原文:http://www.css88.com/archives/5366 全局命名空间污染与 IIFE 总是将代码包裹成一个 IIFE(Immediately-Invoked Function Ex ...
- Airbnb JavaScript代码规范(完整)
类型Types 基本数据类型 string number boolean null undefined symbol const foo = 1; let bar = foo; bar = 9; co ...
- JavaScript代码规范
变量名:驼峰命名法(首单词小写,后面每个单词首字母大写) firstName = "John"; lastName = "Doe"; price = 19.90 ...
- Airbnb Javascript 代码规范重要点总结es6
中文原地址 1.对所有的引用使用 const 而非 var.这能确保你无法对引用重复赋值. 当需要变动引用时,使用let. const和let都是块级作用域. 2.创建对象的方式: const ite ...
- javascript,jquery代码规范
jquery代码规范 Coding Standards & Best Practices 中文翻译版:jquery编程的标准写法和最佳实践 javascript代码规范 JavaScript编 ...
随机推荐
- Linux中的重启命令
1.系统重启: shutdowm 该命令安全地将系统关机. 有些用户会使用直接断掉电源的方式来关闭linux,这是十分危险的.因为linux与windows不同,其后台运行着许多进程,所以强制关 ...
- python常见异常
- socket编程实例
TCP/IP层次模型 当然这里我们只讨论重要的四层 01,应用层(Application):应用层是个很广泛的概念,有一些基本相同的系统级TCP/IP应用以及应用协议,也有许多的企业应用和互联网应用. ...
- JavaScript树(一) 简介
树的相关术语 一个树结构包含一系列存在父子关系的节点. 每个节点都有一个父节点 (除了顶部的第一个节点)以及零个或多个子节点: 位于树顶部的节点叫作根节点(11) .它没有父节点.树中的每个元素都叫作 ...
- java中的接口概念
接口的特点: 接口中只有抽象方法和全局常量 public interface className{} 范例:简单的代码模型 interface A{ public static final Strin ...
- 页面中引入mui 地址选择,点击页面中其他input时页面回到顶部
问题:在页面中引入mui地址选择时,点击页面中的input页面会滚到顶部(谷歌浏览器中出现的bug),在手机上点击input会出现跳动.开始的时候是想修改mui.min.js里的滚动事件,但是后来找到 ...
- BZOJ 3817 Sum
Description 给定正整数N,R.求 Input 第一行一个数 T,表示有 T 组测试数据. 接下来 T 行,每行两个正整数 n,r. Output 输出 T 行,每行一个整数表示答案. Sa ...
- [ZJOI2008]瞭望塔
题目描述 致力于建设全国示范和谐小村庄的H村村长dadzhi,决定在村中建立一个瞭望塔,以此加强村中的治安. 我们将H村抽象为一维的轮廓.如下图所示 我们可以用一条山的上方轮廓折线(x1, y1), ...
- bzoj 3214: [Zjoi2013]丽洁体
Description 平时的练习和考试中,我们经常会碰上这样的题:命题人给出一个例句,要我们类比着写句子.这种往往被称为仿 写的题,不单单出现在小学生的考试中,也有时会出现在中考中.许多同学都喜欢做 ...
- PKUWC 2018 滚粗记
day0 上午居然考了一场考试,大爆炸,攒了一波RP,下午也没有心思去落实题目,而是一心去搞颓废,到了晚上看时间还早,于是就看了一波上午考试的Solution,懵逼.jpg day1 上午考数学,前一 ...