前端篇 -- 开发手册

最新推荐文章于 2021-09-14 10:10:24 发布

小明同学~~

最新推荐文章于 2021-09-14 10:10:24 发布

阅读量406

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/smd2575624555/article/details/79202777

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

前端开发规范

1. 基本原则

基本原则

结构、样式、行为分离

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

缩进

统一两个空格缩进（总之缩进统一即可），不要使用 Tab 或者 Tab、空格混搭。

文件编码

使用不带 BOM 的 UTF-8 编码。

· 在 HTML中指定编码 <meta charset="utf-8"> ；

· 无需使用 @charset 指定样式表的编码，它默认为 UTF-8

一律使用小写字母

省略外链资源 URL 协议部分

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

统一注释

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

HTML 注释

模块注释

<div class="article-list">

...</div>

· 区块注释

· <!--

@name: Drop Down Menu

@description: Style of top bar drop down menu.

@author: Ashu(Aaaaaashu@gmail.com)

-->

CSS 注释

组件块和子组件块以及声明块之间使用一空行分隔，子组件块之间三空行分隔；

JavaScript 注释

· 单行注释

必须独占一行。// 后跟一个空格，缩进与下一行被注释说明的代码一致。

· 多行注释

避免使用 /*...*/ 这样的多行注释。有多行注释内容时，使用多个单行注释。

· 函数/方法注释

· 函数/方法注释必须包含函数说明，有参数和返回值时必须使用注释标识。；

· 参数和返回值注释必须包含类型信息和说明；

· 当函数是内部函数，外部不可访问时，可以使用 @inner 标识；

文件注释

文件注释用于告诉不熟悉这段代码的读者这个文件中包含哪些东西。应该提供文件的大体内容, 它的作者, 依赖关系和兼容性信息。

HTML

通用约定

Class 与 ID

· class 应以功能或内容命名，不以表现形式命名；

· class 与 id 单词字母小写，多个单词组成时，采用中划线-分隔；

· 使用唯一的 id 作为 Javascript hook, 同时避免创建无样式信息的 class；

属性顺序

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

· id

· class

· name

· data-xxx

· src, for, type, href

· title, alt

· aria-xxx, role

引号

属性的定义，统一使用双引号。

嵌套

a 不允许嵌套 div这种约束属于语义嵌套约束，与之区别的约束还有严格嵌套约束，比如a 不允许嵌套 a。

严格嵌套约束在所有的浏览器下都不被允许；而语义嵌套约束，浏览器大多会容错处理，生成的文档树可能相互不太一样。

语义嵌套约束

· <li> 用于 <ul> 或 <ol> 下；

· <dd>, <dt> 用于 <dl> 下；

· <thead>, <tbody>, <tfoot>, <tr>, <td> 用于 <table> 下；

严格嵌套约束

· inline-Level 元素，仅可以包含文本或其它 inline-Level 元素;

· <a>里不可以嵌套交互式元素<a>、<button>、<select>等;

· <p>里不可以嵌套块级元素<div>、<h1>~<h6>、<p>、<ul>/<ol>/<li>、<dl>/<dt>/<dd>、<form>等。

布尔值属性

HTML5 规范中 disabled、checked、selected 等属性不用设置值。

语义化

没有 CSS 的 HTML 是一个语义系统而不是 UI 系统。

HEAD

文档类型

为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的表现。

<!DOCTYPE html>

语言属性

为什么使用 lang="zh-cmn-Hans" 而不是我们通常写的 lang="zh-CN" 呢? 请参考知乎上的讨论: 网页头部的声明应该是用 lang="zh" 还是 lang="zh-cn"？

<html lang="zh-Hans">

<html lang="zh-cmn-Hans">

<html lang="zh-cmn-Hant">

<html lang="en">

字符编码

· 以无 BOM 的 utf-8 编码作为文件格式;

· 指定字符编码的 meta 必须是 head 的第一个直接子元素；

<html>

<head>

......

</head>

<body>

......

</body></html>

IE 兼容模式

优先使用最新版本的IE 和 Chrome 内核

SEO 优化

<head>

<title>Style Guide</title>

favicon

在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。为了保证 favicon 可访问，避免404，必须遵循以下两种方法之一：

· 在 Web Server 根目录放置 favicon.ico 文件；

· 使用 link 指定 favicon；

CSS

3.1 通用约定

通用约定

代码组织

· 以组件为单位组织代码段；

· 制定一致的注释规范；

· 组件块和子组件块以及声明块之间使用一空行分隔，子组件块之间三空行分隔；

· 果使用了多个 CSS 文件，将其按照组件而非页面的形式分拆，因为页面会被重组，而组件只会被移动；

良好的注释是非常重要的。请留出时间来描述组件（component）的工作方式、局限性和构建它们的方法。不要让你的团队其它成员来猜测一段不通用或不明显的代码的目的。

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

Class 和 ID

· 使用语义化、通用的命名方式；

· 使用连字符 - 作为 ID、Class 名称界定符，不要驼峰命名法和下划线；

· 避免选择器嵌套层级过多，尽量少于 3 级；

· 避免选择器和 Class、ID 叠加使用；

声明块格式

· 选择器分组时，保持独立的选择器占用一行；

· 声明块的左括号 { 前添加一个空格；

· 声明块的右括号 } 应单独成行；

· 声明语句中的 : 后应添加一个空格；

· 声明语句应以分号 ; 结尾；

· 一般以逗号分隔的属性值，每个逗号后应添加一个空格；

· rgb()、rgba()、hsl()、hsla() 或 rect() 括号内的值，逗号分隔，但逗号后不添加一个空格；

· 对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替-0.5px）；

· 十六进制值应该全部小写和尽量简写，例如，#fff 代替 #ffffff；

· 避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;；

JavaScript

通用约定

注释

原则

· As short as possible（如无必要，勿增注释）：尽量提高代码本身的清晰性、可读性。

· As long as necessary（如有必要，尽量详尽）：合理的注释、空行排版等，可以让代码更易阅读、更具美感。

单行注释

必须独占一行。// 后跟一个空格，缩进与下一行被注释说明的代码一致。

多行注释

避免使用 /*...*/ 这样的多行注释。有多行注释内容时，使用多个单行注释。

函数/方法注释

1. 函数/方法注释必须包含函数说明，有参数和返回值时必须使用注释标识。；

2. 参数和返回值注释必须包含类型信息和说明；

3. 当函数是内部函数，外部不可访问时，可以使用 @inner 标识；

文件注释

文件注释用于告诉不熟悉这段代码的读者这个文件中包含哪些东西。应该提供文件的大体内容, 它的作者, 依赖关系和兼容性信息。

命名

变量, 使用 Camel 命名法。

常量, 使用全部字母大写，单词间下划线分隔的命名方式。

var HTML_ENTITY = {};

1. 函数, 使用 Camel 命名法。

2. 函数的参数, 使用 Camel 命名法。

1. 类, 使用 Pascal 命名法

2. 类的 方法 / 属性, 使用 Camel 命名法

1. 枚举变量 使用 Pascal 命名法。

2. 枚举的属性，使用全部字母大写，单词间下划线分隔的命名方式。

3. 由多个单词组成的 缩写词，在命名中，根据当前命名法和出现的位置，所有字母的大小写与首字母的大小写保持一致。

接口命名规范

1. 可读性强，见名晓义；

2. 尽量不与 jQuery 社区已有的习惯冲突；

3. 尽量写全。不用缩写，除非是下面列表中约定的；（变量以表达清楚为目标，uglify 会完成压缩体积工作）

常用词	说明
options	表示选项，与 jQuery 社区保持一致，不要用 config, opts 等
active	表示当前，不要用 current 等
index	表示索引，不要用 idx 等
trigger	触点元素
triggerType	触发类型、方式
context	表示传入的 this 对象
object	推荐写全，不推荐简写为 o, obj 等
element	推荐写全，不推荐简写为 el, elem 等
length	不要写成 len, l
prev	previous 的缩写
next	next 下一个
constructor	不能写成 ctor
easing	示动画平滑函数
min	minimize 的缩写
max	maximize 的缩写
DOM	不要写成 dom, Dom
.hbs	使用 hbs 后缀表示模版
btn	button 的缩写
link	超链接
title	主要文本
img	图片路径（img标签src属性）
dataset	html5 data-xxx 数据接口
theme	主题
className	类名
classNameSpace	class 命名空间

小明同学~~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端篇 -- 开发手册

前端开发规范1. 基本原则基本原则结构、样式、行为分离尽量确保文档和模板只包含HTML结构，样式都放到样式表里，行为都放到脚本里。缩进统一两个空格缩进（总之缩进统一即可），不要使用Tab或者Tab、空格混搭。文件编码使用不带BOM的 UTF-8 编码。·在 HTML中指定编码&lt;meta charset="utf-8"&gt;；·无...
复制链接

扫一扫