橘子味的心
标题: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访问.

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

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

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


性能

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

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

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


目录

分类