Js-w3school(2020.2.6)【js样式与代码约定】

二十六、js样式与代码约定

1.代码约定(Coding conventions)指的是编程的样式指导方针。这些原则大体上包括:
·变量和函数的命名和声明规则
·使用空格、缩进和注释的规则
·编程习惯和准则
2. 代码约定确保质量:
·改善代码可读性
·提升代码可维护性
3.变量名:在 W3School,我们对标识符名称(变量和函数)使用了驼峰式大小写。所有名称以字母开头。
4. 运算符周围的空格:请始终在运算符( = + - * / )周围以及逗号之后添加空格
5. 代码缩进:请始终使用对代码块缩进使用 4 个空格
6. 语句规则:请始终以分号结束单条语句
针对复杂语句(compound)的通用规则:
• 请在第一行的结尾处写开括号
• 请在开括号前使用一个空格
• 请在新行上写闭括号,不带前导空格
• 请不要以分号来结束复杂语句
7. 对象规则
针对对象定义的通用规则:
• 把开括号与对象名放在同一行
• 在每个属性与其值之间使用冒号加一个空格
• 不要在最后一个属性值对后面写逗号
• 请在新行上写闭括号,不带前导空格
• 请始终以分号结束对象定义
可以对短对象在一行中进行压缩,只在属性之间使用逗号,就像这样:

var person = {firstName:"Bill", lastName:"Gates", age:50, eyeColor:"blue"};

8.行长度小于 80
为了提高可读性,请避免每行的长度超过 80 个字符。如果 JavaScript 语句超过一行的长度,换行的最佳位置是运算符或逗号之后。
9. 使用简单的语法来加载外部脚本(type 属性不是必需的):

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

10.访问 HTML 元素
使用“不整洁的” HTML 样式的后果,也许是导致 JavaScript 错误。请在 HTML 中使用相同的命名约定(就像 JavaScript 那样)
11. 请使用正确的文档类型
请始终在文档的首行声明文档类型:

<!DOCTYPE html>

如果您一贯坚持小写标签,那么可以使用:

<!doctype html>

12.请使用小写元素名
HTML5 允许在元素名中使用混合大小写字母。
我们推荐使用小写元素名:
• 混合大小写名称并不好
• 开发者习惯使用小写名(比如在 XHTML 中)
• 小写更起来更纯净
• 小写更易书写

<section> 
  <p>This is a paragraph.</p>
</section>

13.关闭所有 HTML 元素
在 HTML5 中,您不必关闭所有元素(例如

元素)。
我们建议关闭所有 HTML 元素:

<section>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
</section>

14.关闭所有 HTML 元素
在 HTML5 中,关闭空元素是可选的。

<meta charset="utf-8" />

斜杠(/)在 XHTML 和 XML 中是必需的。
如果您期望 XML 软件来访问您的页面,保持这个习惯是个好主意。
15. 使用小写属性名
HTML5 允许大小写混合的属性名。
我们建议使用小写属性名:
• 混合属性名并不好
• 开发者习惯于使用小写属性名(比如在 XHTML 中)
• 小写属性名看情况更纯净
• 小写属性名更易书写
16. 属性值加引号
HTML5 允许不加引号的属性值。
我们推荐属性值加引号:
• 如果属性值包含值,则必须使用引号
• 混合样式绝对不好
• 加引号的值更易阅读
17. 必需的属性
请始终对图像使用 alt 属性。当图像无法显示时该属性很重要。
请始终定义图像尺寸。这样做会减少闪烁,因为浏览器会在图像加载之前为图像预留空间。

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

18.我们不推荐省略 和 标签。
19. <title> 元素在 HTML5 中是必需的。请尽可能制作有意义的标题。为了确保恰当的解释,以及正确的搜索引擎索引,在文档中对语言和字符编码的定义越早越好:

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Syntax and Coding Style</title>
</head>

20.HTML 注释
短注释应该在单行中书写,并在 <!-- 之后增加一个空格,在 <!-- 之前增加一个空格:

<!-- This is a comment -->

长注释,跨越多行,应该通过 <!----> 在独立的行中书写:

<!-- 
  This is a long comment example. This is a long comment example. This is a long comment example.
  This is a long comment example. This is a long comment example. This is a long comment example.
-->

长注释更易观察,如果它们被缩进两个空格的话。
21. 样式表
请使用简单的语法来链接样式表(type 属性不是必需的):

<link rel="stylesheet" href="styles.css">

短规则可以压缩为一行,就像这样:

p.into {font-family:"Verdana"; font-size:16em;}

长规则应该分为多行:

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}

• 开括号与选择器位于同一行
• 在开括号之前用一个空格
• 使用两个字符的缩进
• 在每个属性与其值之间使用冒号加一个空格
• 在每个逗号或分号之后使用空格
• 在每个属性值对(包括最后一个)之后使用分号
• 只在值包含空格时使用引号来包围值
• 把闭括号放在新的一行,之前不用空格
• 避免每行超过 80 个字符
22. 使用小写文件名
大多数 web 服务器(Apache、Unix)对文件名的大小写敏感:
不能以 london.jpg 访问 London.jpg。
其他 web 服务器(微软,IIS)对大小写不敏感:
能够以 london.jpg 或 London.jpg 访问 London.jpg。
如果使用混合大小写,那么您必须保持高度的一致性。
如果您从对大小写不敏感的服务器转到一台对大小写敏感的服务器上,这些小错误将破坏您的网站。
为了避免这些问题,请始终使用小写文件名(如果可以的话)
23. 文件扩展名
HTML 文件名应该使用扩展名 .html(而不是 .htm)。
CSS 文件应该使用扩展名 .css。
JavaScript 文件应该使用扩展名 .js。

发布了41 篇原创文章 · 获赞 4 · 访问量 1637

猜你喜欢

转载自blog.csdn.net/mus123/article/details/104199987