「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」。

引言

1.规范的目的

为了团队代码风格统一，增加代码的可读性和观赏性

2.适用范围

适用于技术栈为Vue，Jquery

html规范

1. space4，代码前面保留4个空格
2. 标签必须合法且闭合、嵌套正确，标签名需小写
3. 标签语义化，尽量避免整个页面都是div来布局，不便于理解和维护
4. 除非有特定要求，禁止随意使用id来定义元素样式
5. 使用a标签时加上title属性
6. 使用img标签时加上alt属性

css规范

1. class、id 都需要小写，id不可重复
2. 命名使用英文，禁止使用特殊字符
3. 名称间隔使用-符号
4. 涉及数据、交互等部分，禁止通过id选择器定义样式
5. 类名命名也要语义化。
6. 大括号前面有空格，属性值冒号:后面留空格。

.wrap {}       //外层容器
.mod-box {}    //模块容器
.btn-more {}   //更多
.side-nav {}   //侧栏导航
.box {
   font-size: 12px;
}

js规范

驼峰式命名法介绍：
驼峰式命名法由小(大)写字母开始，后续每个单词首字母都大写。
按照第一个字母是否大写，分为：

1. Pascal Case 大驼峰式命名法：首字母大写。eg：StudentInfo、UserInfo\
2. Camel Case 小驼峰式命名法：首字母小写。eg：studentInfo、userInfo

1、 变量

命名方法：小驼峰式命名法。
命名规范：前缀应当是名词。(函数的名字前缀为动词，以此区分变量和函数)
命名建议：尽量在变量名字中体现所属类型，如:length、count等表示数字类型；而包含name、title表示为字符串类型。

let name = '字节跳动';

2、 函数

命名方法：小驼峰式命名法。
命名规范：前缀应当为动词，括号后面留个空格。
命名建议：可使用常见动词约定

动词	含义	返回值
can	判断是否可执行某个动作(权限)	函数返回一个布尔值。true：可执行；false：不可执行
has	判断是否含有某个值	函数返回一个布尔值。true：含有此值；false：不含有此值
is	判断是否为某个值	函数返回一个布尔值。true：为某个值；false：不为某个值
get	获取某个值	函数返回一个非布尔值
set	设置某个值	无返回值、返回是否设置成功或者返回链式对象
load	加载某些数据	无返回值或者返回是否加载完成的结果

3、 常量

命名方法：名称全部大写。
命名规范：使用大写字母和下划线来组合命名，下划线用以分割单词。

const WEB_URL = 'http://www.baidu.com';

4、 构造函数

介绍：在JS中，构造函数也属于函数的一种，只不过采用new 运算符创建对象。
命名方法：大驼峰式命名法，首字母大写。
命名规范：前缀为名称。

function Student(name) {
   this.name = name;
}
const st = new Student('girl');

5、 类的成员

类的成员包含：

1. 公共属性和方法：跟变量和函数的命名一样。
2. 私有属性和方法：前缀为_(下划线)，后面跟公共属性和方法一样的命名方式。

function Student(name) {
    let _name = name;  // 私有成员
    // 公共方法
    this.getName = function () {
       return _name;
    }
    // 公共方法
    this.setName = function (value) {
       _name = value;
    }
}
const st = new Student('girl');
st.setName('ZJTD');
console.log(st.getName()); // 控制台打印：ZJTD，输出_named的私有成员变量