转型实践｜2022前端代码规范（大部分适用）

面试时你写的代码杂乱无章，被技术挑剔而压工资时。别人早就用整洁的代码进入了大厂，越是好的公司对于代码规范也更为严格。再此把前端代码代码规范做了一下整理。话不多说看看吧。

HTML规范

1.起止标签

所有具有开始标签和结束标签的元素都要写上起止标签，某些允许省略开始标签和结束标签的元素也都要写上（即使大多数浏览器在没有结束标签也会正常显示）

// 推荐<div>

    <h1>我是h1标题</h1>

    <p>我是一段文字，我有始有终，浏览器能正确解析</p></div></br>

// 不推荐<div>

    <h1>我是h1标题</h1>

    <p>我是一段文字，我有始有终，浏览器能正确解析<p></div><br>

2.标签大小写

HTML标签名、及其中包括类名在内的各种属性统一采用小写(即使有些浏览器肯能会转为小写)

// 推荐<div class="demo"></div>

// 不推荐<DIV CLASS="DEMO"><DIV>

3.类型属性

不需要为 CSS、JS 指定类型属性，HTML5 中默认已包含

// 推荐<link rel="stylesheet" href="" ><script src=""></script>

// 不推荐<link rel="stylesheet" type="text/css" href="" ><script type="text/javascript" src="" ></script>

4.特殊字符引用

// 推荐<a href="#">more</a>

// 不推荐<a href="#">more>></a>

5.代码嵌套

块级元素独立一行，内联元素根据实际情况确定，内联元素不能嵌套块级元素

// 推荐<div>

    <h1></h1>

    <p></p></div>    <p><span></span><span></span></p><div><span></span></div>

// 不推荐<div>

    <h1></h1><p></p></div>    <p> 

    <span></span>

    <span></span></p><span><div></div></span>

6.注释规范

单行注释要位于注释代码的上面，单独占一行；模块注释，一般在模块开始和结束的位置，且以S开始，E结束

// 推荐<!-- Comment Text --><div>...</div>

// 不推荐<div>...</div><!-- Comment Text --><div><!-- Comment Text -->

    ...</div>

// 推荐<!-- S Comment Text A --><div class="mod_a">

    ...</div><!-- E Comment Text A -->

// 不推荐<!-- Comment Text A --><div class="mod_a">

    ...</div><!-- Comment Text A -->

二、CSS规范

1.样式必须采用展开的格式来书写

/* 推荐 */.demo {

   color: aqua;

   font-size: 28px;

}/* 不推荐 */.demo {

   color: aqua;font-size: 28px;

}

2.代码大小写

样式选择器，属性名，属性值关键字全部使用小写字母

/* 推荐 */.demo {

    color: red

}/* 不推荐 */.DEMO {

    COLOR: RED;

}

3.选择器规范

尽量少使用通用选择器;不使用ID选择器（特殊情况除外）;不使用无具体语义的标签选择器

/* 不推荐 */

*{}#skkj {}div {}

4.为0的属性值要指明单位

/* 推荐 */.demo {

    margin: 0px 20px;

}/* 不推荐 */.demo {

    margin: 0 20px;

}

5.属性书写顺序

布局定位属性：display/position/float/clear/visibility/overflow;
自身属性：width/height/margin/padding/border/background;
文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word;
其他属性：content/cursor/border-radius/box-shadow/text-shadow……

/* 推荐 */.demo {

    display: block;

    position: relative;

    float: left;

    width: 100px;

    height: 100px;

    margin: 0 10px;

    padding: 20px 0;

    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;

    color: #333;

    background: rgba(0,0,0,.5);

    border-radius: 10px;

}

6.代码易读性

左括号与类名之间一个空格，冒号与属性值之间一个空格

/* 推荐 */.skkj {

    width: 100px;

    margin: 0px 20px;

}/* 不推荐 */.skkj{

    width：100px;

    margin：0px 20px;

}

三、命名规范

1.目录命名

基本项目
项目文件夹：projectname
样式文件夹：css
脚本文件夹：js
样式类图片文件夹：img
以上为基本项目目录结构，当次级文件夹下的文件数多于10，需要适时的根据项目具体情况按照功能模块或者页面布局进行进一步的文件夹归类划分，一般项目文件夹不应超过三级

Vue项目
这里只针对src文件夹下的目录划分进行指导
接口文件夹：apis
静态资源文件夹：assets
公共组件文件夹：components
路由文件夹：router
状态管理文件夹：store
样式文件夹：styles
公共工具文件夹：utils
路由组件文件夹：views

上述接口文件夹、静态资源文件夹、公共组件文件夹及路由组件文件夹如果其内部文件过多则必须按照功能模块建立次级文件夹

 

名称规范
基本项目和Vue项目中的文件夹及样式文件、工具文件的名称一律采用驼峰规则进行命名，单个单词的除外，组件的命名一律采用首字母大写的驼峰规则进行命名

2.图片命名

图片业务(可选）+ 图片功能类别(必选) + 图片模块名称(可选）+ 图片状态（可选）+ 图片精度（可选）
图片业务（项目名称或所在平台的缩写）

myt_:明优堂

wx_:微信小程序

dd_:钉钉小程序

zt_:渣土一件事

uucs_:统一用户中心

orderp_:工单管理中心

...

图片功能类别

mod_:公共的

icon:模块类固化的图标

logo：LOGO类

btn:按钮

bg:背景图片

....

图片模块分类
此种分类不固定，主要根据项目类型和项目结构进行命名，在Vue等框架内可以根据路由和功能进行划分，在Vse的框架内可以根据页面布局进行划分，有较强的语义话即可

menuList:导航列表

useravatar:用户头像

banner:页面横幅

footer:页面底部

....

图片状态
状态设定主要针对那些需要根据具体业务场景改变的图标，多以icon为主

on:选中

off:未选中

left:向左

top:向上

right：向右

bottom：向下

......

3.ClassName命名

ClassName的命名应该尽量精短，明确，必须以字母开头命名，且全部字母小写，单词之间统一使用-符号链接。
命名的基本规则就是继承，对于较长的模块名，可以采用简写；名称的单词数一般不超过四个。

<div class="modulename">

    <div class="modulename-cover"></div>

    <div class="modulename-info">

        <div class="modulename-info-user">

            <div class="modulename-info-user-img">

                <img src="" alt="">

                <!-- 这个时候 miui 为 modulename-info-user-img 首字母缩写-->

                <div class="miui-tit"></div>

                <div class="miui-txt"></div>

                ...

            </div>

ClassName	含义	备注
about	关于
account	账户
arrow	箭头图标
article	文章
aside	边栏
audio	音频
avatar	头像
bg、background	背景
bar	栏（工具栏）
branding	品牌化
btn、button	按钮
crumb、breadcrumbs	面包屑
caption	说明
category	分类
chart	图表
clearfix	清除浮动
close	关闭
col、column	列
comment	评论
community	社区
container	容器（内部）
content	内容
copyright	版权
current	当前态、选中态
default	默认
description	描述
details	细节
disabled	不可用、禁用
entry	入口
error	错误
even	偶数	常用于多行列表或表格中
fail	失败
feature	特征、专题
fewer	收起
field	区域、领域
figure	图形、符号	用于较小的图形区域
filter	筛选
first	第一个
footer	页脚
forum	论坛
gallery	走廊
group	群组
header	页头
help	帮助
hide	隐藏
highlight	高亮
home	主页
icon	图标
info	信息
last	最后一个
links	链接
login	登录
logout	退出
logo	标志
main	主体
menu	菜单
more	更多

        </div>

        <div class="modulename-info-list"></div>

    </div></div>

常用命名推荐（一般为对应的英文翻译）

四、JavaScript规范

1.命名规范

JavaScript中的命名规范主要针对常见的变量、常量及函数进行规范，使开发者能够容易的分辨该名称所属类型
ECMAScript 规范中已经使用的关键词或者有特殊意义的单词，在命名时都不应该存在

break、else、new、var、case、finally、return、void、catch、for、switch、while、continue、function、this、with、default、if、throw、delete、in、try、do、instranceof、typeof....

变量
变量一律采用驼峰命名规则，且需为名词的集合体，尽量不要出现动词；在具体的场景下可以将变量名充分语义化，例如：length、count等表示数字类型；name、title等表示字符串类型

// 推荐let maxCount = 10;let tableTitle = 'UserTable';// 不推荐let setCount = 10;let getTitle = 'UserTable';

常量
常量全部采用大写，使用下划线来分割单词

// 推荐const URL = 'https://mingyoutang.cn'const MAX_COUNT = 99// 不推荐const url = 'https://mingyoutang.cn'const maxCount = 99

函数
函数一律采用小驼峰规则命名，与变量不同的是，函数名必须以动词为前缀
常用动词推荐：

动词	含义	返回值
can	判断是否可执行某个动作（权限）	布尔值
has	判断是否含有某个值	布尔值
is	判断是否为某个值	布尔值
get	获取某个值	非布尔值
set	设置某个值	非布尔值
load	加载某些数据	无返回值或者返回是否加载完成的结果
update	更新某个值	返回更新结果或者更新后的值
delete	删除某个值	无返回值或返回删除的结果
add	添加某个值	无返回值或返回添加结果
upload	上传	无返回值或返回上传结果
change	改变	返回改变后值

function isMobile(){

    return true

}

function getUserList(){

    return list

}

2.字符串

书写规范
普通字符串一律采用单引号书写

let userName = 'xiaoming'

转义字符
字符串中一些符号或效果能够使用转义字符来实现

符号	含义
\’	单引号
\”	双引号
\ \	反斜杠
\n	换行
\r	回车
\t	tab制表符
\b	退格符
\f	换页符

字符串拼接

// 纯字符串拼接let province = '浙江省'let city = '杭州市'let address = province + cityconsole.log(address) // '浙江省杭州市'

// 含有变量的字符串拼接均采用模板字符串的形式let year = new Date().getFullYear()let currentYear = `${year}年`

明优堂大爱平台（明察事物本质、优化流程技术、堂聚大爱人才），汇聚分享数字化实战经验，众智赋能数字化转型。来明优堂一起探讨能力提升、转型升级、业务拓展、资源变现。这里总有人解答你百度不到的问题。

BE（BlocksEmpower），to BE，or not to BE，that is the question。VBOS大爱积木赋能，让人类世界更美好。

课程视频

https://pan.youlishu.com/minio/bigdata-platform/vse/examples/live.html?url=https://pan.youlishu.com/minio/trainingcamp/courses/web-regular/qianduan-xixin-0.m3u8