阿里前端开发中的规范要求

在阿里前端开发中，遵守规范是非常重要的。本文将会详细讲解阿里前端开发中的规范要求，并提供一些示例说明。

HTML 规范

标签书写规范

• 标签名字要小写，不能出现大写或者混合的形式；
• 标签必须闭合，不要搞自闭合标签的花式。

示例：

<!-- 不好的书写方式 -->
<div>
    <IMG src="test.png">
    <Br>
</div>

<!-- 好的书写方式 -->
<div>
    <img src="test.png">
    <br>
</div>

标签属性顺序

• 必须遵守HTML规范的属性书写顺序；
• 同样属性写在一块，例如class和id。

示例：

<!-- 不好的书写方式 -->
<div class="classA" id="idA">
    <p id="title" class="classB">这是一个标题</p>
    <p class="classC" id="description">这是一个描述</p>
</div>

<!-- 好的书写方式 -->
<div id="idA" class="classA">
    <p class="classB" id="title">这是一个标题</p>
    <p id="description" class="classC">这是一个描述</p>
</div>

CSS 规范

代码缩进

• 用2个空格代表缩进，不要用制表符；
• 每一层的代码缩进必须严格按照规范。

示例：

/* 不好的书写方式 */
.classA {
    color:#333;
    margin:0; 
}

/* 好的书写方式 */
.classA {
  color: #333;
  margin: 0; 
}

注释规范

• 使用CSS注释符，注释内容前后加空格；
• 块注释使用/ /，行注释使用//。

示例：

/* 不好的书写方式 */
/*这个样式专门给按钮用的*/
.button { 
    background-color: #f00; 
}

/* 好的书写方式 */
/* 这个样式专门给按钮用的 */
.button { 
  background-color: #f00; 
}

JavaScript 规范

命名规范

• 函数和变量采用小驼峰式命名规范；
• 类名采用大驼峰式命名规范。

示例：

// 不好的命名方式
const a_b_c = 10;
function funcA(x_y_z) {}

class Animal{} // 大括号的位置可以不同，但尽量选择统一的风格

// 好的命名方式
const abc = 10;
function funcA(xyz) {}

class MyAnimal{}

代码风格

• 不要使用全局变量，使用const和let代替var；
• 使用四个空格的缩进；
• 语句结尾必须加分号；
• 对象和数组使用字面量表示。

示例：

// 不好的代码风格
var globalA = 10;

const a = {
  name: 'Tom'
};

function sum() {
  const x = 1;
  const y = 2
  return x + y
}

// 好的代码风格
const globalA = 10;

const a = {
  name: 'Tom',
};

function sum() {
  const x = 1;
  const y = 2;
  return x + y;
}

以上就是阿里前端开发中的规范要求，希望这些规范能够帮助你避免一些低级错误和代码写作上的不规范。