前端编程规范（适用团队开发，教学，个人提升）

最新推荐文章于 2024-04-10 19:34:09 发布

KinHKin(五年前端)

最新推荐文章于 2024-04-10 19:34:09 发布

阅读量574

点赞数 10

分类专栏：前端开发规范文章标签：团队开发 javascript visual studio

本文链接：https://blog.csdn.net/weixin_42974827/article/details/126292574

版权

前端开发规范专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言

提高团队协作效率
提示开发效率和后期优化维护
方便新进成员快速上手
输出高质量的代码
适用所有pcweb类项目，移动端由于设备可以宽限

准则

符合web标准，语义化的html，结构表现行为分离，兼容性优良
代码简洁明了，减少服务器负载，保证最快的速度运行
老项目的维护可以有所宽限
尽量不使用汉语拼音

命名规范

HTML

多个单词组成时候，采用连字符连接方式，例如：error-page.html、success-report.jsp

CSS（LESS，CSS，SCSS）

多个单词组成时，采用连字符的形式，例如：report-detail.css、report-main.scss、report-main.less

JAVASCRIPT

所有的JS文件名，多个单词组成时，采用连字符连接方式，例如：account-user.js

项目名称

项目名称采用小写字母，不包括汉字，空格和特殊字符，以连接分隔符并以字母开头。例如：project-name。URL的分隔符，是资源分割名称的最好选择。

目录文件命名和上述类似，有复数结构时，采用data-models

图片名称原则

图片命名分为头尾两个部分，用连字符分割，语义话命名。例如：banner logo button menu pic title。

文件存放位置

没有强制要求，结合实际框架存放

HTML书写规范

带doctype使每个浏览器尽量一直都展示，属性使用ie兼容，编码使用UTF-8，a标签的空链接使用javascript:void(null)代替原来的#标记。引入css和js时，省去type属性，因为默认有。属性的顺序按照特定的顺序保证易读性，id->class->name->data-*->src,for,type,href->title,alt->aria-*,role。

标签和符号

标签闭合
js生成标签
引号，属性使用双引号，不要使用单引号
减少标签数量，尽量避免使用多余的父节点，使用迭代和重构使得html变得更少
减少复杂度，减少标签数量

排版

html代码格式规则，块元素和表格元素独占一行，每个子元素相对父元素进行缩进
缩进使用四个空格soft tabs，保证代码显示一致
语义化，注释规范

CSS书写规范

预编译器：scss，less，stylus
文件编码和样式引用：使用无bom的UTF-8编码。更广泛的试用性。
代码缩进，使用4个空格
选择器的{，子选择器的+ > ?要增加空格
颜色rgba逗号之间必须包括空格
行长度，不超过120字符，URL超长使用逻辑分组
id和class命名使用连字符
嵌套层级不应大于三级
属性可以使用缩写：padding，margin，font
css继承属性有：font系列，文本系列text-align line-height text-indent word-spacing color，元素可见属性：visible，光标cursor，
属性书写顺序：布局属性 > 自身属性 > 文本属性 > 其他属性
值和单位，长度为0可以省去单位，颜色可以缩写，#fff，不允许使用blue
字体编码：使用英文字体，有空格需要放在引号内
行高：line-height:1.5使用数值
兼容性：浏览器属性前缀，hack
注释规范：顶部注释，模块注释，单行和多行注释，特殊注释（todo，bugFix）

javascript书写规范

.js文件存储js程序，js代码不应该嵌入到html中，除非那些代码是一个单独会话的特有。js文件放置在html越靠后的位置越好。

缩进，四个空格
行宽，一行代码不超过80字符，一条语句不能单独写完时候，有必要拆分它。
变量声明：提前声明，js没有块作用域，变量声名放在前面，let foo=1,bar=2,baz;
方法声明：js的hoist机制，可以使用方法变量在声明之后，大部分应该提前声明。
命名原则：应该由26个大小写字母，10个数字，和下划线_组成，必须语义化
下划线命名开头表示私有变量，但是不提供私有性，仅用于区分
小驼峰命名
构造器首字母大写
全局变量全部大写，下划线_分割
语句必须添加分分号（；）复合语句，if和条件语句都应该大括号包围，return语句不应该使用圆括号（），应该是一个单独的语句
for语句，对于数组，对象，对象使用for( obj in objS){ if(Object.hasOwnProperty(1){ } ) }是合理的。while语句，while(condition) { statements } , do { statements; }while(condition){ stattements }，switch(expression) { case expression: statements ;default: statements; } try语句：try {} catch(){}finally { }
不要使用continue和with语句
一元操作符：a++
二元操作符：let a = 1 + 2;
使用{}代替new Object()，使用[] 代替new Array()