JavaScript编码习惯

你所有的JavaScript项目总是使用相同的编码习惯

JavaScript编码习惯

编码约定是编程的样式指南。他们通常包括:

变量和函数的命名和声明规则.
使用空白、缩进和注释的规则
编程实践与原则

编码协议安全质量:

提高了代码的可读性
使代码维护更容易

编码规则可以被记录为团队遵循的规则，或者只是你的个人编码实践

变量名

在编程字典，我们使用驼峰命名标识符（变量和函数）

所有名字以字母开头.

在这个页面的底部，你会发现关于命名规则的更广泛的讨论.

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语句不适合在一行上，换行的地方最好，是一个操作符或一个逗号之后

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

让我试试

命名规范

始终为所有代码使用相同的命名约定。例如:

变量和函数的名字写成camelCase
全局变量用大写字母
常数（如PI）大写

你应该使用中划线 hyp-hens, 驼峰命名camelCase, 或者下划线under_scores命名变量?

这是程序员经常讨论的问题。答案取决于你问谁:

在HTML和CSS中使用中划线:

HTML5 属性可以使用 data- 打头 (data-quantity, data-price).

CSS 属性使用中划线 property-names (font-size).

中划线可以被误认为是减法。JavaScript中使用中划线是不允许.

下划线:

许多程序员喜欢使用下划线 (date_of_birth), 尤其是在SQL数据库中.

下划线经常使用在PHP文件中.

PascalCase命名法:

PascalCase通常是C程序员的首选.

camelCase:

JavaScript通常使用camelCase命名法, 像jQuery,和其他JavaScript库.

不要用$符号开始名称。它会使你和很多JavaScript库名称冲突.

在HTML加载JavaScript

使用简单的语法加载外部脚本 (type属性不是必需的):

<script src="myscript.js"></script>

访问HTML元素

使用"不规范的"HTML样式, 可能导致JavaScript错误.

这两个JavaScript语句会产生不同的结果:

var obj = getElementById("Demo")

var obj = getElementById("demo")

如果可能的话，使用相同的命名约定.

文件扩展名

HTML文件有一个.html 扩展名 (而不是 .htm).

CSS 文件有一个 .css 扩展名.

JavaScript 文件有一个 .js 扩展.

使用小写文件名

大多数Web服务器（Apache，UNIX）是关于文件名小写写敏感:

london.jpg 不能被作为 London.jpg 使用.

其他Web服务器（微软的IIS）是不区分大小写:

london.jpg 能作为 London.jpg 或者 london.jpg访问.

如果你使用大小写混合的情况下，你必须非常一致.

如果您从不敏感的情况下移动到一个区分大小写的服务器，即使是小错误也可能破坏您的网站。.

为了避免这些问题，总是使用小写文件名（如果可能的话）.

性能

计算机不使用编码约定。大多数规则对程序执行的影响很小。.

在小脚本中缩进和额外空格不重要.

对于开发中的代码，可读性应该优先考虑。较大的生产脚本应该被压缩.