前端开发规范

最新推荐文章于 2023-01-05 13:01:12 发布

红99

最新推荐文章于 2023-01-05 13:01:12 发布

阅读量313

点赞数 1

分类专栏： study

本文链接：https://blog.csdn.net/weixin_39579517/article/details/89229808

版权

study 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

规范目的：为了提高工作效率，便于后台人员添加功能及前端后期优化维护，输出高质量的文档，在网站建设中，使结构更加清晰，代码简明有序，有一个更好的前端架构。
规范基本准则：符合web标准，使用具有语义的标签，使结构、表现、行为分离，兼容性优良。页面性能优化，代码简洁、明了、有序，尽可能的减少服务器的负载，保证最快的解析速度。

一、基本原则篇

- 结构、样式、行为分离

尽量确保文档和模板只包含 HTML 结构，样式都放到样式表里，行为都放到脚本里。

- 缩进

统一Tab缩进

- 文件编码

使用不带 BOM 的 UTF-8 编码。
在 HTML中指定编码；
无需使用 @charset 指定样式表的编码，它默认为 UTF-8 （参考 @charset）；

- 省略外链资源 URL 协议部分

省略外链资源（图片及其它媒体资源）URL 中的 http / https 协议，使 URL 成为相对地址，避免Mixed Content 问题，减小文件字节数。
其它协议（ftp 等）的 URL 不省略

<script src="/account/20190327/js/account.js?s=1" need="true"></script>

- 统一注释

通过配置编辑器，可以提供快捷键来输出一致认可的注释模式。

二、HTML篇

- 标签

自闭合（self-closing）标签，无需闭合 ( 例如： img input br hr 等 )；
可选的闭合标签（closing tag），需闭合 ( 例如：
或 )；
尽量减少标签数量；

- 属性顺序
HTML 属性应该按照特定的顺序出现以保证易读性。

id
class
name
data-xxx
src, for, type, href
title, alt
aria-xxx, role

- Class 与 ID

class：相应模块或部件的内容或功能、小写加中横线，如：box-item（react采用驼峰命名）
id：必须确保唯一性和驼峰命名，如：boxItem

- 属性

必须使用小写字母
属性值必须使用双引号包围
<script src="esl.js"></script>

- 嵌套
嵌套原则，p标签不要嵌套p标签

- 布尔值属性

布尔类型建议不添加属性值
<input type="text" disabled> <input type="checkbox" value="1" checked>

- 语义化
我们一直都在说语义化编程，语义化编程，但是在代码中很少有人完全使用正确的元素。使用语义化标签也是有理由SEO的。
语义化是指：根据元素其被创造出来时的初始意义来使用它。意思就是用正确的标签干正确的事，而不是只有div和span。

- 标签

标签要合理运用
标签要合理运用，H5的标签要合理运用。我们不要整个页面只有div、span标签
例如：
p 标签一般用来嵌套大段文本
i 便签一般用来做背景图
span 小段文本
div 一般用来当大盒子容器
section 定义文档中的一个章节
article 定义可以独立于内容其余部分的完整独立内容块
nav 定义只包含导航链接的章节
header 定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录
footer 定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。
特殊标签的使用
像script和link标签注意使用位置。
1、link标签放置在之间( 在页面渲染的过程中，新的CSS可能导致元素的样式重新计算和绘制，页面闪烁)
2、script标签没有特殊情况放到页面底部之前.(防止阻塞dom渲染和资源加载)
3、一定要杜绝link出现在html里面，script出现也html内容部分
4、引入css时必须指明rel=“stylesheet”
5、引入css和js时无须指明type属性
6、样式放置于外部css中，功能放置于外部js中
7、不使用超过一到两张样式表
8、不在元素上使用 style 属性（<hr style="border-top: 5px solid black">）
9、不使用行内脚本（<script>alert('no good')</script>）
10、不使用表象元素（i.e. <b>, <u>, <center>, <font>, <b>）
11、不使用表象 class 名（i.e. red, left, center）
DOCTYPE
使用 HTML5 的 doctype 来启用标准模式，建议使用大写的 DOCTYPE。

<!DOCTYPE html>

建议在html标签上设置正确的lang属性

<html lang="zh-CN">

HEAD
1、页面必须包含title标签声明标题
title必须作为head的直接子元素，并紧随charset声明之后
2、保证favicon可访问
在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。为了保证favicon可访问，避免404，必须遵循以下两种方法之一：
a、在 Web Server 根目录放置 favicon.ico 文件。
b、使用 link 指定 favicon。
3、 viewport
若页面需要在移动设备上使用，需设置viewport

<head>
    <meta charset="UTF-8">
    <meta content="telephone=no" name="format-detection">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,viewport-fit=cover">
    <title>titlt</title>
    <link rel="shortcut icon" href="path/to/favicon.ico">
    <link rel="stylesheet" href="/css/baidu.css" need="true">
    <script type="text/javascript" src="/js/baidu.js"></script>
</head>

图片
1、禁止img的src取值为空，延迟加载的图片也要增加默认的src
斜体样式 src 取值为空，会导致部分浏览器重新加载一次当前页面
2、避免为img添加不必要的title属性
多余的title影响看图体验，并且增加了页面尺寸
3、为重要图片添加alt属性。
可以提高图片加载失败时的用户体验
4、添加width和height属性，以避免页面抖动
有下载需求的图片采用 img 标签实现，无下载需求的图片采用CSS 雪碧图实现。
表单
有文本标题的控件必须使用label标签将其与其标题相关联。
有两种方式：
1、将控件置于 label 内。
2、label 的 for 属性指向控件的 id。
推荐使用第一种，减少不必要的 id。如果 DOM 结构不允许直接嵌套，则应使用第二种。

<label><input type="checkbox" name="confirm" value="on"> 我已确认上述条款</label>
<label for="username">用户名：</label> <input type="textbox" name="username" id="username">

按钮
使用button元素时必须指明type属性值
button 元素的默认 type 为 submit，如果被置于 form 元素中，点击后将导致表单提交。为显示区分其作用方便理解，必须给出 type 属性。

<button type="submit">提交</button>
<button type="button">取消</button>

尽量不要使用按钮类元素的name属性
由于浏览器兼容性问题，使用按钮的name属性会带来许多难以发现的问题，具体情况可参照 http://w3help.org/zh-cn/causes/CM2001

多媒体
当在现代浏览器中使用 audio以及 video 标签来播放音频、视频时，应当注意格式。
音频应尽可能覆盖到如下格式：
MP3
WAV
Ogg
视频应尽可能覆盖到如下格式：
MP4
WebM
Ogg
在支持 HTML5 的浏览器中优先使用 audio 和 video 标签来定义音视频元素。
只在必要的时候开启音视频的自动播放。

- 页面初始化loading

 <div class="wrap" id="wrap">
       <div class="loading" style="z-index: 400;">
         
       </div>
   </div>

三、CSS篇

- Class 和 ID

使用语义化、通用的命名方式，但命名不能过长；
避免选择器嵌套层级过多，尽量少于 3 级；
避免选择器和 Class、ID 叠加使用；

- 样式编写顺序

定位属性：position display float left top right bottom overflow clear z-index
自身属性：width height padding border margin background
文字样式：font-family font-size font-style font-weight font-varient color
文本属性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow
css3中新增属性：content box-shadow border-radius transform……
注意：具体原理，可以查看样式编写顺序原理剖析

- 引号使用

url() 、属性选择符、属性值使用双引号。

@import "init.scss";
.box{
  background: url("../i/page-back.png") no-repeat;
}
.select[type="text"]{
}

- 媒体查询（Media query）的位置

将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了，将来只会被大家遗忘。

- 不要使用 @import
与相比，@import 要慢很多，不光增加额外的请求数，还会导致不可预料的问题。
替代办法：

使用多个元素；
通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件；
其他 CSS 文件合并工具；

- 注释

单行：//内容（部分浏览器不兼容）
多行：/* div{color:red}; */

- 页面元素层级定义（z-index）

1px边框默认:200
页面中fix的小icon:300
页面fix的按钮：350
页面弹窗：450；弹窗蒙层：400
页面toast：550；弹窗蒙层：500

四、js篇

红99

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端开发规范

基本原则篇- 结构、样式、行为分离尽量确保文档和模板只包含 HTML 结构，样式都放到样式表里，行为都放到脚本里。- 缩进统一Tab缩进- 文件编码使用不带 BOM 的 UTF-8 编码。在 HTML中指定编码；无需使用 @charset 指定样式表的编码，它默认为 UTF-8 （参考 @charset）；- 省略外链资源 URL 协议部分省略外链资源（图片及其它媒体...
复制链接

扫一扫