小哥哥小姐姐们这里有一份前端开发规范，求求看一遍吧
Posted 编程小哥
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小哥哥小姐姐们这里有一份前端开发规范，求求看一遍吧相关的知识，希望对你有一定的参考价值。
html
一， HTML5 doctype
为每个 HTML 页面的第一行添加标准模式的声明，这样能够确保在每个浏览器中拥有一致的展现
<!DOCTYPE html>
二， 头部声明
1，语言
在 html 标签中通过 lang 属性进行明确的语言声明，将会有助于翻译，简体中文和繁体中文网页所属性值如下：
<html lang="zh-Hans"> --- 简体中文<html lang="zh-Hant"> --- 繁体中文
但是，目前这一类的兼容性不好，虽然大陆地区用的都是简体中文。因此推荐使用下边这一种：
<html lang="zh-CN"> --- 包括各种大方言、小方言、繁体、简体等等都可以被匹配到
如果以后兼容性没有问题，基本上中国大陆地区使用的就是 zh-Hans
2，编码
在 head 中第一行统一使用 utf-8 编码声明，兼容性最好:
<meta charset="utf-8">
3，Viewport
设置 viewport 的宽度为设备宽度，默认缩放比为 1（允许用户缩放），设置 viewport-fit=cover 以兼容 iPhone X 全面屏 “刘海” 的显示
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
4，DNS 预读取
DNS 预读取是一项使浏览器主动去执行域名解析的功能，其范围包括当前文档内的所有链接，这能够减少用户点击链接时的延迟
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//img.alicdn.com">
5，渲染偏好
对于国内各种双核浏览器，通过设置 renderer 要求它们使用 webkit 内核，提升性能，减少兼容问题
对于 IE 浏览器，通过设置 IE=edge 要求它使用最新的版本，提升性能，减少兼容问题
对于百度搜索强制转码的流氓做法，通过 no-transform 禁止其自动转码，不然会被嵌入广告
<meta name="renderer" content="webkit"> <!-- 用在360中 --><meta name="force-rendering" content="webkit"> <!-- 其他拥有 webkit 内核的浏览器，比如 QQ --><meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 针对 IE 浏览器 --><meta http-equiv="Cache-Control" content="no-transform"> <!-- 针对百度搜索 --><meta name="format-detection" content="telephone=no,email=no,adress=no"> <!-- 针对移动端 -->
6，文档信息
HTML 文档的一些元数据，主要包括：作者、描述、关键词，用来被机器识别，提高 SEO 效率
<meta name="author" content="chaos"><meta name="description" content="chaos，为内容创业者提供技术支持，一分钟搭建自己的知识变现平台。服务自媒体、传统媒体、出版社、在线教育机构、线下培训机构以及知识盈余的个人。"><meta name="keywords" content="chaos,自媒体,新媒体,媒体,微信,微信公众平台,公众号,订阅号,服务号,粉丝,社群,用户画像,大数据,小程序,内容付费,知识服务,内容变现,知识变现,社群经济,粉丝经济,网红经济,流量变现,小鹅,chaos工具,KOL,大V,知识电商">
三，属性顺序
属性应该按照特定的顺序出现以保证易读性：
class
id
name
data-*
src, for, type, href, value , max-length, max, min, pattern
placeholder, title, alt
required, readonly, disabled
class 是为高可复用组件设计的，所以应处在第一位
id 更加具体且应该尽量少使用（留给 JS 做“钩子”，或者在 vue/react 中用数据驱动，根本不必使用 id），所以将它放在第二位
举例：
<a class="..." id="..." data-modal="toggle" href="#">Example link</a><img class="..." id="..." src="" placeholder="" alt=""><button class="..." id="..." name="button" type="button"></button>
四，引入 CSS 和 javascript 文件
根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性，因为 text/css 和 text/javascript 分别是它们的默认值
<link type="text/css" rel="stylesheet" href="style.css"><script type="text/javascript" src="shuzai.js"></script><!-- 不需要 type 属性，直接写成： --><link rel="stylesheet" href="style.css"><script src="shuzai.js"></script>
基于 CSS 样式覆盖的考虑，公用样式应该在最前边，越特定的放越后面
<link rel="stylesheet" href="normalize.css"> --- 公用，消除浏览器表现不一致的问题<link rel="stylesheet" href="base.css"> --- 公用，属于自定义的样式文件<link rel="stylesheet" href="style.css"> --- 该页面自己特定的样式文件
基于网页加载速度和性能的考虑，script 标签都放到 body 元素的最后边。因为 script 中 JS 文件的加载会阻塞 DOM 和 CSSOM
<body> <header> ........ </header> <main> ........ </main> <footer> ........ </footer> <script src="shuzai.js"></script></body>
五，标签中的布尔型属性
布尔型属性可以在声明时不赋值。XHTML 规范要求为其赋值，但是 HTML5 规范不需要
<input type="text" disabled><input type="checkbox" value="1" checked><select> <option value="1" selected>1</option></select>上边的 disabled checked selected 直接在标签中写上就行，不必写成 selected = "true"
CSS
1，空格
为了代码的易读性，应该：
在每个声明块的左花括号前添加一个空格
声明块的右花括号应当单独成行
每条声明语句的冒号 : 后应该插入一个空格
所有声明语句都应当以分号结尾（最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，代码可能更易出错）
对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格（例如，box-shadow）
2，空行与分号
为了获得更准确的错误报告，每条声明都应该独占一行
为了代码的易读性，声明块之间应空一行
空格与空行举例：
/* Bad CSS */.selector, .selector-secondary, .selector[type=text]{ padding:15px; margin:0px 0px 15px; background-color:rgba(0, 0, 0, 0.5); box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF}.input { width:100px; height:100px;}/* Good CSS */.selector, /* - 每条声明都应该独占一行 */.selector-secondary,.selector[type="text"] { /* - 在每个声明块的左花括号前添加一个空格 */ padding: 15px; /* - 每条声明语句的冒号 : 后应该插入一个空格 */ margin-bottom: 15px; background-color: rgba(0, 0, 0, .5); box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff; /* - 每个逗号后面都应该插入一个空格，所有声明语句都应当以分号结尾 */} /* - 声明块的右花括号应当单独成行 *//* - 声明块之间应空一行 */.input { width: 100px; height: 100px;}
3，十六进制与 0
十六进制值应该全部小写，例如，#fff。在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分
尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff
避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;
4，声明顺序
定位（文档流）
盒模型
字体排版，背景，边框
显示/隐藏
由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置
其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面
举例：
.declaration-order { /* 定位 */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; /* 盒模型 */ display: block; float: right; width: 100px; height: 100px; /* 字体排版，背景，边框 */ font: normal 13px "Helvetica Neue", sans-serif; line-height: 1.5; color: #333; text-align: center; background-color: #f5f5f5; border: 1px solid #e5e5e5; border-radius: 3px; /* 显示/隐藏 */ opacity: 1;}
5，命名规范
采用长命名方式
例如：
<ul class="list"> <li class="list-item"></li> <li class="list-item"></li> <li class="list-item"></li></ul>
但是一味地用长命名会导致层级过多，例如：container-wrapper-box-ul-li-p-span-em
一般会把层级限制在 4 层以内，为了保证达到这一点，需要结合语义化来命名，这样既易于阅读，又能避免层级过多
【布局】
文档 doc 头部 header(hd) 主体 body 尾部 footer(ft) 主栏 main 侧栏 side 容器 box/container
【通用部件】
列表 list 列表项 item 表格 table 表单 form 链接 link 标题 caption/heading/title 菜单 menu 集合 group 条 bar 内容 content 结果 result
【组件】
按钮 button(btn) 字体 icon 下拉菜单 dropdown 工具栏 toolbar 分页 page 缩略图 thumbnail 警告框 alert 进度条 progress 导航条 navbar 导航 nav 子导航 subnav 面包屑 breadcrumb(crumb) 标签 label 标签页 tab 提示框 tooltip 弹出框 popover 轮播图 carousel 手风琴 collapse
【语义化小部件】
品牌 brand 标志 logo 额外部件 addon 版权 copyright 注册 regist(reg) 登录 login 搜索 search 热点 hot 帮助 help 信息 info 提示 tips 开关 toggle 新闻 news 广告 advertise(ad) 排行 top 下载 download
【功能部件】
左浮动 fl 右浮动 fr 清浮动 clear
【状态】
前一个 previous(pre) 后一个 next 当前的 current 显示的 show 隐藏的 hide 打开的 open 关闭的 close 选中的 selected 有效的 active 默认的 default 反转的 toggle 禁用的 disabled 危险的 danger 主要的 primary 成功的 success 提醒的 info 警告的 warning 出错的 error 大型的 lg 小型的 sm 超小的 xs
es-lint
一，尽量使用 ES6 规范代码
变量的声明不再使用 var ，而是使用 let ，如果定义的是常量（不变的数据），那么应该使用 const
比如:
小程序中经常使用的 instance , 应该写成 const instance = this
for 循环中使用 let ，可以生成块级作用域
for (var x = 0; x < len; x++) {
xxxxx
}
以上 for 循环应该把 var 改为 let
尽量使用箭头函数，且对函数进行简写
使用箭头函数的时候，可以不用书写 const that = this 来绑定 this 指向，因为箭头函数默认绑定 this
onReachBottom: function () {
xxxxxxxx
}
上边的函数可以简写为：
onReachBottom () {
xxxxxxxx
}
其余 ES6 规范同理，推荐通读 ES6 标准入门，网址： http://es6.ruanyifeng.com/
二，空格和引号
编辑器空格统一设置为 2 个空格
引号基本使用单引号，除非需要两层引号，外层才会使用双引号
数据初始化声明时冒号右边一定有一个空格，单行注释的右边一定有一个空格，如果前边有数据的，则注释的前边也有一个空格,逗号的右边也要有空格，比如：
data: { can_clock: 0, // 0-不在打卡有效时限,1-在打卡有效时间 has_clock: 0, // 0-没有打过卡 1-打过卡 need_refresh: false, // 用于回复评论后刷新页面的标记},
代码块之间有空格，比如：
if () { xxx} else if () { xxx}
条件判断，赋值等，左右都有空格，比如：
let shuZai = 10086if (shuZai === 10086) { xx}let wanSha = shuzai === 10086 ? 0 : 1
三，驼峰书写法与下划线
参数和变量使用驼峰书写，比如：
share (shuZai, wanSha) {}let shuZai = 10086
初始值两者均可，但因为后台返回的数据规范是下划线，所以此处使用下划线较多，比如：
data: { can_clock: 0, // 0-不在打卡有效时限,1-在打卡有效时间 has_clock: 0, // 0-没有打过卡 1-打过卡 need_refresh: false, // 用于回复评论后刷新页面的标记}
HTML 中的属性值除了 data-* 这类自定义属性不能使用驼峰书写之外，其余二者均可
四，分号与大括号
在 ES5 中，分号是推荐必写的，但在 eslint 中，分号可以省略，并且它推荐省略，因为按照它的规范来写的话，并不会出现 JS 引擎无法识别断句的问题。在小程序中并没有引用 es-lint，所以还是要写分号
大括号必须写，不能省略，比如：
if () xxxelse if () xxx<!-- 不能这么书写，必须加上 {} ，要写成： -->if () { xxx} else if () { xxx}
最后放一张封面图：
以上是关于小哥哥小姐姐们这里有一份前端开发规范，求求看一遍吧的主要内容，如果未能解决你的问题，请参考以下文章