简单来说，页面重构就是：将设计稿转换成 WEB 页面。在多人协同完成一个大型工程时，必要的原则与规范不仅能加快开发效率，更能使工程有着更好的体系结构，方便维护…

1. 什么是页面重构？

简单来说，页面重构就是：将设计稿转换成 WEB 页面。

那我们重构时该注意哪些东西呢？

2. 基本原则和规范

在多人协同完成一个大型工程时，必要的原则与规范不仅能加快开发效率，更能使工程有着更好的体系结构，方便维护。

2.1 常用规范

与使用其他语言开发工程一样，我们需要有着统一的规范，最常见就是 编码风格，比如：

  1. 空格

    • 等号前后空格、运算符前后使用空格分隔
    • 在逗号和冒号后添加空格

  2. 空行

    • 为每个逻辑功能块添加空行，这样更易于阅读
    • 将左花括号与选择器放在同一行
    • 将右花括号独立放在一行，并以分号作为结束符号

  3. 缩进

    • 缩进使用两个空格(不要使用制表符)

其次是 命名，我们建议对 HTML 元素名称，属性，属性值，CSS 选择器，属性和属性值（字符串除外）使用小写字母命名，并且使用 - 进行分隔，举个例子：

1
2
3
4
<!-- 不推荐 -->
<A HREF="/">Home</A>
<!-- 推荐 -->
<a href="/" id="href-index">Home</a>

1
2
3
4
/* 不推荐 */  
color: #E5E5E5;  
/* 推荐 */
color: #e5e5e5;

另外还有书写顺序，比较常见的 CSS 样式书写顺序如下：

  1. 位置属性(position, top, right, z-index, display, float 等)
  2. 大小(width, height, padding, margin)
  3. 文字系列( font, line-height, letter-spacing, color, text-align 等)
  4. 背景(background, border 等)
  5. 其他(animation, transition 等)

以上仅列举了部分规范，更多请参考 ESLint

2.2 语义化 && SEO

2.2.1 什么是语义化

语义化是指使用恰当语义的 HTML 标签、class 类名等内容，让页面具有良好的结构与含义，从而让人和机器都能快速理解网页内容。

2.2.2 为什么要让页面语义化

语义化的好处 ：

  • 为了在没有 CSS 的情况下，页面也能呈现出很好地内容结构、代码结构
  • 有利于 SEO ( Search Engine Optimization——搜索引擎优化)：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重
  • 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以特殊的方式来渲染网页
  • 便于团队开发和维护，可以减少很多差异化，减少成员间沟通成本，方便开发和后期维护，利于实现模块化开发

2.2.3 HTML 语义化

假设我们要开发一个页面，在 HTML5 出现之前，页面架构很有可能是下面这样的：

这样的架构缺点比较明显：

  • 需要用到很多 div 标签,但实际上 div 标签并没有语义，这不利于爬虫对页面内容进行抓取
  • 文档结构不明确。也许你认为有 id 就足够了，但是后面会发现在一大堆 <div> 中找出这些 id 并不高效

于是，在 HTML5 中，页面架构变成了这样的：

这样的结构看起来就清晰多了，我们可以直接从标签名称得知它的作用。

当然，我们也不是说将所有的 div 全部替换为对应的语义化标签(比如考虑到网页兼容问题)，具体情况应具体分析。

根据应用场景，一些常用的标签元素有：

主要语义 元素名称
本身无语义，组合其他 HTML 元素，常用于页面布局 div
设置文本，填充段落 h1~h6, p, span, strong, em…
表现列表 ul, li, ol, dl, dt, dd
表单相关 form,input,select,button
表格相关 table,thead,tbody,tfoot,th,tr,td
图像显示 img, canvas
打开链接，发送邮件，段落跳转 a

2.2.4 CSS 命名语义化

CSS 命名的语义就是 class 和 id 命名的语义。
class 属性作为 HTML 与 CSS 衔接的纽带，其本意是用来描述元素内容的。指用易于理解的名称对 HTML 标签附加的 class 或 id 命名。如果说 HTML 语义化标签是给机器看的，那么 CSS 命名的语义化就是给人看的。良好的 CSS 命名方式减少沟通调试成本，易于理解。

CSS 命名首先要满足 W3C 的命名规范和团队的命名规范。其次是高效和可重用性。

就好像 .main / .sidebar 会比 .left_content / .right_content 的 class 命名灵活性更好。

1
2
3
4
5
6
7
8
9
<!-- 以表现为中心 -->
<div class="lr margin10">
    <span>nickName:seg</span>
<div>
<!-- 以信息为中心 -->
<p class="user-info">
    <em>nickName:seg</em>
<p>

2.3 样式抽离 && 组件复用

在后端开发中，我们常常将一些公共的字符串、函数等抽离出来，在需要的地方便可方便的调用。前端页面重构的时候，我们同样要注意组件的复用、组合性。

前端页面重构的时候，我们同样要注意组件的复用、组合性。

在 前端模块化 的历史演变中，曾有一段时期我们会这样构造组件：

  • base 提供最底层的、功能和粒度最小的的通用类样式，可以被所有页面引用
  • common 出现频率高，功能相对独立的组件，如 Button、Dialog、Tooltip 等
  • page 各页面独有的样式，实际中可划分为 page-index.css 、page-dashboard.css 等

但是随着工程的逐渐壮大，使用及维护起来还是比较困难。我们期望 组件/样式 有着 “按需引入，即插即用” 的特性。比如：

1
2
3
4
require("./style.css");
require("./style.less");
require("./template.jade");
require("./image.png");

为了实现这样的引入方式，我们需要使用 Loader 。

Loader 可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过 require 来加载任何类型的模块或文件。

如果我们要在 index.html 引入一个 CSS 文件 style.css，首页将 style.css 也看成是一个模块，然后用 css-loader 来读取它，再用 style-loader 把它插入到页面中。

1
2
/* style.css */
body { background: yellow; }

1
2
// entry.js
require("!style-loader!css-loader!./style.css") // 载入 style.css
1
2
3
4
5
6
7
8
9
<!-- index.html -->
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <script src="entry.js"></script>
</body>
</html>

安装 loader :

1
npm install css-loader style-loader

在 Vue.js 中，我们可以将 HTML、CSS、JavaScript 都写于一个 .vue 格式的文件中，一个文件便对应一个组件，并且可以在其他组件中很方便的引入。

3. 总结

当然，除了以上几点，我们需要遵循的原则和规范还很多。总的来说，页面重构时，在规范编码的基础上我们首先考虑的因素便是语义化：HTML 标签语义化、CSS 命名语义化等等。语义化的最终目的就是使得人与机器对页面识别度更高。其次，为了方便协作与后期维护，我们应该考虑组件复用、样式抽离，或者说模块化等。原则和规范并不总是一成不变的，随着前端技术的快速发展，高效、便于协作与维护的方式便是最佳原则与规范。