28 JavaScript学习： 代码规范

代码规范通常包括以下几个方面:

• 变量和函数的命名规则
• 空格，缩进，注释的使用规则。
• 其他常用规范......
  

变量名

在编写JavaScript代码时，遵守良好的变量命名规范是非常重要的，这可以增加代码的可读性和可维护性。以下是一些常见的变量命名规范：

1. 使用有意义且描述性的名称：变量名应该能清楚地表达出变量所代表的含义。

2. 遵循驼峰命名法：驼峰命名法分为小驼峰和大驼峰两种形式。小驼峰形式（也称为小写驼峰）首字母小写，后续每个单词首字母大写，例如：myVariableName。大驼峰形式（也称为帕斯卡命名法）每个单词的首字母都大写，例如：MyVariableName。

3. 避免使用单个字符或者简写：使用具有描述性的名称，可以使你的代码更加容易理解和维护。

4. 使用有意义的名词作为变量名：变量名应该能够清晰地表示变量所存储的数据类型或意图。

5. 避免使用保留字：JavaScript有一些保留字，不能用作变量名，如if、for等。

6. 使用恰当的命名约定：如果你正在编写团队项目，最好与团队成员共同制定并遵守一致的命名约定。

7. 使用英文：尽量使用英文命名变量，这样可以增加代码的读写友好性，方便团队合作和代码的全球化。

选择一个有意义的、能够清楚表达变量含义的名称，并遵循一致的命名规范，将有助于提高你的代码的质量和可维护性。

空格与运算符

在JavaScript中，空格与运算符的使用是良好编码实践的一部分。以下是一些常见的规范：

1. 在运算符周围添加空格：在二元运算符（如加号、减号、乘号、除号等）前后添加空格，以增加代码的可读性。例如：a + b。

2. 在逗号后添加空格：在逗号分隔的参数列表中，逗号后添加空格，以增加代码的清晰度。例如：func(a, b, c)。

3. 在冒号后添加空格：在对象字面量中的键值对中，冒号后添加空格，以增加代码的清晰度。例如：{ key: value }。

4. 函数声明时的空格：在函数声明时，在函数名和参数列表之间添加一个空格，以增加代码的可读性。例如：function foo() { }。

5. 在关键字前后添加空格：在关键字（如if、for、while等）前后添加空格，以增加代码的清晰度。例如：if (condition) { }。

6. 不要在行尾添加空格：避免在行尾添加多余的空格，以保持代码的整洁性。

代码缩进

在JavaScript中，代码缩进是一种良好的编码习惯和规范，它有助于增加代码的可读性和可维护性。以下是一些常见的代码缩进规范：

1. 使用空格进行缩进：通常，每个缩进级别使用两个空格来进行缩进。这种缩进风格在JavaScript社区中很常见。

2. 缩进控制流语句和代码块：例如if语句、for循环、函数定义等，应在其后另起一行，并缩进一个层级。

if (condition) {
  // code here
}

for (let i = 0; i < 10; i++) {
  // code here
}

function foo() {
  // code here
}

3. 对象字面量的缩进：在对象字面量中的每一对键值对应该缩进一个层级。

const obj = {
  key1: value1,
  key2: value2,
  key3: value3
};

4. 缩进函数内部的代码：在函数内部的代码应该在函数体开始大括号的下一行进行缩进。

function myFunction() {
  // code here
  if (condition) {
    // code here
  }
}

5. 不要混合使用空格和制表符（tab）：为了保持一致性，在整个代码库中应该选择一种缩进方式，并确保所有人都使用相同的设置。

良好的代码缩进可以提高代码的可读性，同时也方便团队合作、代码维护和排错。选择一种缩进风格并严格遵守它，这将使你的代码更加整洁和易于理解。

语句规则

在JavaScript中，语句规则指的是代码中的语句（statements）的书写规范和使用方式。以下是一些常见的语句规则：

1. 分号结束语句：在大多数情况下，每个语句都应该以分号（;）结束。这有助于明确代码的结尾，并防止出现意外的行为。

const variable = 1;
console.log(variable);

2. 使用大括号定义代码块：当使用条件语句（如if、for等）或函数定义时，应该使用大括号（{}）来定义代码块，即使只有一条语句也应如此。这样可以避免潜在的错误和提高代码的可读性。

if (condition) {
  // code here
}

for (let i = 0; i < 10; i++) {
  // code here
}

function myFunction() {
  // code here
}

3. 尽量避免使用隐式分号：JavaScript中存在自动插入分号的机制，但依赖于该机制可能导致一些不确定的行为。为了避免这种不确定性，最好在每个语句的结尾显式添加分号。

4. 注意缩进：良好的缩进可以增加代码的可读性。通常建议使用2个空格或4个空格作为一个缩进级别，并在每个代码块内进行适当的缩进。

5. 关键字和标识符的使用：关键字（如if、for、while等）在使用时应该与标识符（变量名、函数名等）有区分度。避免将标识符命名为关键字，以免引起冲突或混淆。

6. 注释你的代码：在复杂的逻辑或不易理解的代码段上方添加注释是一种良好的实践，可以帮助他人理解你的代码。

对象规则

在JavaScript中，对象是一种复合数据类型，用于存储多个值（属性）的集合。以下是一些关于对象的常见规则：

1. 对象字面量的使用: 可以使用对象字面量的方式创建对象，对象字面量是由花括号（{}）包围的零个或多个"键值对"组成，键值对之间使用逗号分隔。

const person = {
  name: 'Alice',
  age: 30,
  city: 'New York'
};

2. 键名的要求: 对象的键名必须是字符串或符号（Symbol），如果不是字符串，则会自动转换为字符串。键名不符合标识符命名规则时，必须加引号。

const myObj = {
  "key1": 'value1',
  "key-with-dashes": 'value2',
  '123': 'value3'
};

3. 访问对象属性: 使用点号（.）或方括号（[]）来访问对象的属性。

console.log(person.name); // 输出 'Alice'
console.log(person['age']); // 输出 30

4. 对象属性的增删改查:
   • 增加属性：直接为对象添加新的属性。
   • 删除属性：使用 delete 关键字删除对象的属性。
   • 修改属性：直接对属性进行赋值操作。

person.gender = 'female'; // 增加属性
delete person.city; // 删除属性
person.age = 31; // 修改属性

5. 对象属性的遍历: 可以使用 for...in 循环或 Object.keys()、Object.values()、Object.entries() 方法来遍历对象的属性。

for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

Object.keys(person).forEach(key => {
  console.log(`${key}: ${person[key]}`);
});

6. 使用封装和继承: 在面向对象编程中，可以使用构造函数、类、原型等机制来实现对象的封装和继承，从而更好地管理和组织代码。

每行代码字符小于 80

明白，遵守这个规则可以使代码易于阅读和维护。在保持代码可读性的前提下，你可以使用以下几种方法来确保每行代码字符小于80：

1. 换行：将较长的行分成多行，保持每行的长度不超过80个字符，可以使用 \ 符号或者空行来换行。

const longString = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquet tortor vel magna semper feugiat. Donec interdum dolor nec lectus rutrum, sed luctus eros bibendum. Cras pellentesque consequat risus at bibendum.';
// 换行示例
const anotherLongString =
  'Suspendisse eleifend dictum dolor sed auctor. Vestibulum tristique vestibulum elit non ultrices. Sed pretium mi ut libero laoreet, vitae porttitor purus euismod. Suspendisse sed porta enim, vel ornare lorem.';

2. 合并变量和字符串：在需要拼接字符串时，将字符串和变量拼接为一行，可以使代码更加简洁。

const name = 'Alice';
// 合并变量和字符串示例
console.log(`Hello, ${name}!`);

3. 减少函数参数：减少函数需要的参数数量，可以在代码中减少较长的代码行，优化代码结构。

// 减少函数参数示例
function calculateArea(length, width) {
  return length * width;
}
calculateArea(10, 20);

HTML 载入外部 JavaScript 文件

当然，以下是一个简单的示例，演示如何使用 JavaScript 访问 HTML 元素：

假设你有一个 HTML 文件 index.html 和一个 JavaScript 文件 script.js。在 index.html 中，你有一个 <p> 元素和一个按钮，点击按钮时会触发 JavaScript 函数来修改 <p> 元素的内容。在 script.js 中，你将编写 JavaScript 代码来实现这一功能。

index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Demo</title>
  </head>
  <body>
    <h1>Welcome to my JavaScript Demo</h1>
    <p id="demo">This is a paragraph.</p>
    <button onclick="changeText()">Change Text</button>

    <!-- 载入外部 JavaScript 文件 -->
    <script src="script.js"></script>
  </body>
</html>

script.js:

function changeText() {
  // 使用 document.getElementById() 获取到 <p> 元素
  var paragraph = document.getElementById("demo");

  // 修改 <p> 元素的文本内容
  paragraph.innerHTML = "Text changed!";
}

在这个示例中，当用户点击按钮时，changeText() 函数被调用。这个函数首先使用 document.getElementById() 方法获取到 id 为 "demo" 的 <p> 元素，然后通过修改其 innerHTML 属性来改变文本内容。

确保 script.js 文件与 index.html 文件在同一目录下，并在 HTML 文件中正确地指定了 JavaScript 文件的路径。

使用 JavaScript 访问 HTML 元素

使用 JavaScript 访问 HTML 元素是一种常见的操作，可以通过多种方式实现。在你提供的示例中，使用了 document.getElementById() 方法来获取 <p> 元素，并修改了其内容。

除了 document.getElementById() 方法外，还有其他一些方法可以获取 HTML 元素，比如 document.querySelector() 方法可以根据 CSS 选择器获取元素，而 document.getElementsByClassName() 方法可以根据类名获取元素。根据具体的需求和情况选择合适的方法。

另外，修改 HTML 元素的属性和内容时，可以通过修改元素的属性值或者内部HTML内容来实现。像你的示例中一样，可以直接修改 innerHTML 属性来改变元素的内容，也可以通过修改 innerText 或者 textContent 属性来改变元素的文本内容。

要确保 JavaScript 文件正确地与 HTML 文件链接，并且在需要的时候被正确加载。可以通过在 HTML 文件中使用 <script> 标签引入 JavaScript 文件，也可以通过外部链接的方式引入外部 JavaScript 文件。

文件扩展名

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

• CSS 文件后缀是 .css 。

• JavaScript 文件后缀是 .js 。

大小写敏感

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

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

建议统一小写。

关注我，不迷路，共学习，同进步

关注我，不迷路，共学习，同进步