手册

JavaScript 教程 JavaScript 简介 JavaScript 用法 JavaScript 输出 JavaScript 语法 JavaScript 语句 JavaScript 注释 JavaScript 变量 JavaScript 数据类型 JavaScript 对象 JavaScript 函数 JavaScript 作用域 JavaScript 事件 JavaScript 字符串 JavaScript 运算符 JavaScript 比较 JavaScript 条件语句 JavaScript switch 语句 JavaScript for 循环 JavaScript while 循环 JavaScript Break 和 Continue 语句 JavaScript typeof JavaScript 类型转换 JavaScript 正则表达式 JavaScript 错误 JavaScript 调试 JavaScript 变量提升 JavaScript 严格模式 JavaScript 使用误区 JavaScript 表单验证 JavaScript 保留关键字 JavaScript JSON javascript:void(0) 含义 JavaScript 代码规范

JS 函数

JavaScript 函数定义 JavaScript 函数参数 JavaScript 函数调用 JavaScript 闭包

JS HTML DOM

DOM 简介 DOM HTML DOM CSS DOM 事件 DOM EventListener DOM 元素

JS 高级教程

JavaScript 对象 JavaScript Number 对象 JavaScript String JavaScript Date（日期） JavaScript Array（数组） JavaScript Boolean（布尔） JavaScript Math（算数） JavaScript RegExp 对象

JS 浏览器BOM

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript 弹窗 JavaScript 计时事件 JavaScript Cookies

JS 库

JavaScript 库 JavaScript - 测试 jQuery JavaScript - 测试 Prototype

JS 实例

JavaScript 实例 JavaScript 对象实例 JavaScript Browser 对象实例 JavaScript HTML DOM实例 JavaScript总结

JS 参考手册

JavaScript对象 HTML DOM 对象

首页大前端 JavaScript JavaScript中文参考手册

JavaScript 代码规范

阅读92885

更新时间2022-04-15

javascript:void(0) 含义

所有的 JavaScript 项目适用同一种规范。

JavaScript 代码规范

代码规范通常包括以下几个方面:

变量和函数的命名规则
空格，缩进，注释的使用规则。
其他常用规范……

规范的代码可以更易于阅读与维护。

代码规范一般在开发前规定，可以跟你的团队成员来协商设置。

变量名

变量名推荐使用驼峰法来命名(camelCase):

firstName = "John";
lastName = "Doe";

price = 19.90;
tax = 0.20;

fullPrice = price + (price * tax);

空格与运算符

通常运算符 ( = + - * / ) 前后需要添加空格:

实例:

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 个字符，建议在运算符或者逗号后换行。

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<h1>我的 Web 页面</h1>
<p>
建议在运算符或者逗号后换行。
</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
    "Hello php.";
</script>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

命名规则

一般很多代码语言的命名规则都是类似的，例如:

变量和函数为驼峰法（ 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 语句会输出不同结果:

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="Demo">段落 1。</p>
<p id="demo">段落 2。</p>
<script>
// 只有段落 2 会被替换
document.getElementById("demo").innerHTML = "HELLO.";
</script>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

HTML 与 JavaScript 尽量使用相同的命名规则。

访问 HTML(5) 代码规范。