JavaScript 1 : JavaScript 教程 2 : JavaScript 简介 3 : JavaScript 用法 4 : JavaScript 输出 5 : JavaScript 语法 6 : JavaScript 语句 7 : JavaScript 注释 8 : JavaScript 变量 9 : JavaScript 数据类型 10 : JavaScript 对象 11 : JavaScript 函数 12 : JavaScript 作用域 13 : JavaScript 事件 14 : JavaScript 字符串 15 : JavaScript 运算符 16 : JavaScript 比较和逻辑运算符 17 : JavaScript If…Else 语句 18 : JavaScript switch 语句 19 : JavaScript for 循环 20 : JavaScript while 循环 21 : JavaScript Break 和 Continue 语句 22 : JavaScript typeof 23 : JavaScript 类型转换 24 : JavaScript 正则表达式 25 : JavaScript 错误 – Throw、Try 和 Catch 26 : JavaScript 调试 27 : JavaScript 变量提升 28 : JavaScript 严格模式 29 : JavaScript 使用误区 30 : JavaScript 表单验证 31 : JavaScript 保留关键字 32 : JavaScript JSON 33 : JavaScript void 34 : JavaScript 代码规范 35 : JavaScript 函数定义 36 : JavaScript 函数参数 37 : JavaScript 函数调用 38 : JavaScript 闭包 39 : JavaScript HTML DOM 40 : JavaScript HTML DOM 改变 HTML 内容 41 : JavaScript HTML DOM 改变 CSS 42 : JavaScript HTML DOM 事件 43 : DOM EventListener 44 : JavaScript HTML DOM 元素 45 : JavaScript 对象 46 : JavaScript Number 对象 47 : JavaScript 字符串(String)对象 48 : JavaScript Date(日期)对象 49 : JavaScript Array(数组)对象 50 : JavaScript Boolean(布尔)对象 51 : JavaScript Math(算数)对象 52 : JavaScript RegExp 对象 53 : JavaScript Window 54 : JavaScript Window Screen 55 : JavaScript Window Location 56 : JavaScript Window History 57 : JavaScript Window Navigator 58 : JavaScript 弹窗 59 : JavaScript 计时事件 60 : JavaScript Cookies 61 : JavaScript 库 62 : JavaScript 测试 jQuery 63 : JavaScript 测试 Prototype 64 : JavaScript 实例 65 : JavaScript 对象实例 66 : JavaScript 浏览器对象实例 67 : JavaScript HTML DOM 实例 68 : JavaScript 总结 69 : JavaScript 对象 70 : HTML DOM 对象

JavaScript 代码规范


所有的 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);  
}

Note不推荐使用 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 个字符,建议在 运算符或者逗号后换行。

实例:

document.getElementById(  "demo").innerHTML =  
     "Hello Runoob.";




命名规则

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

  • 变量和函数为驼峰法( camelCase

  • 全局变量为大写 (UPPERCASE )

  • 常量 (如 PI) 为大写 (UPPERCASE )

变量命名你是否使用这几种规则: hyp-hens, camelCase, 或 under_scores ?

HTML 和 CSS 的横杆(-)字符:

HTML5 属性可以以 data- (如:data-quantity, data-price) 作为前缀。

CSS 使用 - 来连接属性名 (font-size)。

Note- 通常在 JavaScript 中被认为是减法,所以不允许使用。

下划线:

很多程序员比较喜欢使用下划线(如:date_of_birth), 特别是在 SQL 数据库中。

PHP 语言通常都使用下划线。

帕斯卡拼写法(PascalCase):

帕斯卡拼写法(PascalCase) 在 C 语言中语言较多。

驼峰法:

JavaScript 中通常推荐使用驼峰法,jQuery 及其他 JavaScript 库都使用驼峰法。

Note变量名不要以 $ 作为开始标记,会与很多 JavaScript 库冲突。

HTML 载入外部 JavaScript 文件

使用简洁的格式载入 JavaScript 文件 ( type 属性不是必须的):

<  script  src=  "myscript.js"  >


使用 JavaScript 访问 HTML 元素

一个糟糕的 HTML 格式可能会导致 JavaScript 执行错误。

以下两个 JavaScript 语句会输出不同结果:

实例

var obj = getElementById("Demo")  
 
var obj = getElementById("demo")


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

访问 HTML(5) 代码规范


文件扩展名

HTML 文件后缀可以是 .html (或r .htm)。

CSS 文件后缀是 .css

JavaScript 文件后缀是 .js


使用小写文件名

大多 Web 服务器 (Apache, Unix) 对大小写敏感: london.jpg 不能通过 London.jpg 访问。

其他 Web 服务器 (Microsoft, IIS) 对大小写不敏感: london.jpg 可以通过 London.jpg 或 london.jpg 访问。

你必须保持统一的风格,我们建议统一使用小写的文件名。

关注极客云图了解更多内容