上一节:
下一节:

  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"];

  • 代码缩进

    始终使用2个空格来缩进代码块： 
    function toCelsius(fahrenheit) {
  return (5 / 9) * (fahrenheit - 32);
}
    不要使用制表符（制表符）进行缩进。不同的编辑以不同方式解释标签

  • 运算符周围的空格

    始终在运算符周围放置空格（= + - * /），并在逗号后面放置空格： 
    var x = y + z;
var values = ["Volvo", "Saab", "Fiat"];

  • 声明规则

    简单陈述的一般规则：
    • 总是用分号结束一个简单的语句。
    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-price，data-num）。
    CSS在属性名称（font-size）中使用连字符。
    连字符可能被误认为是减法尝试。JavaScript名称中不允许使用连字符。
    下划线：
    许多程序员喜欢使用下划线（date_of_birth），尤其是在SQL数据库中。
    下划线通常用于PHP文档中。
    大写字母开头驼峰法：
    驼峰法通常是C程序员的首选。
    小写字母开头驼峰法：
    小写字母开头驼峰法由JavaScript原生代码，jQuery和其他JavaScript库使用。
    不要使用$符号开始名称。它会让你与许多JavaScript库名称冲突。

  • 在HTML中加载JavaScript

    使用“不整洁”HTML样式的结果可能会导致JavaScript错误。这两个JavaScript语句将产生不同的结果： 
    <script src="myscript.js"></script>

  • 访问HTML元素

    使用简单语法加载外部脚本（不需要type属性）： 
    var obj = getElementById("Demo")

var obj = getElementById("demo")
    如果可能，请在HTML中使用相同的命名约定（如JavaScript）。

  • 文件扩展名

    HTML文件应具有.html扩展名（不是.htm）。CSS文件应具有.css扩展名。JavaScript文件应具有.js扩展名。

  • 使用小写文件名

    多数Web服务器（Apache，Unix）对文件名都区分大小写：london.jpg不能像London.jpg那样访问。其他Web服务器（Microsoft，IIS）不区分大小写：london.jpg可以用London.jpg或london.jpg访问。如果你使用大小写混合，你必须非常一致。如果从不区分大小写的移动到区分大小写的服务器，即使很小的错误也可能会破坏您的网站。要避免这些问题，请始终使用小写文件名（如果可能）。

  • 性能

    计算机不使用编码约定。大多数规则对程序的执行几乎没有影响。缩小和额外空间在小脚本中并不重要。对于开发中的代码，应该首选可读性。应缩小生产较大脚本。
上一节:
下一节: