Web前端工程化解决方案研究.doc

Web前端工程化解决方案研究 导读：信息疼术文章编号=1009 -2552 (2018)08 -0044 -04 DOI：10. 13274/j. cnki. hdzj. 2018. 08. 010W eb前 端 工 程 化 解 决 方 案 研 究2 0 1 8 年第8 期周伟郑世珏2 ( 1 . 华中师范大学信息化办公室，武 汉 430079; 2 . 西安培训网络工程师信息疼术文章编号=1009 -2552 (2018)08 -0044 -04 DOI：10. 13274/j. cnki. hdzj. 2018. 08. 010W eb前 端 工 程 化 解 决 方 案 研 究2 0 1 8 年第8 期周伟郑世珏2 ( 1 . 华中师范大学信息化办公室，武 汉 430079; 2 . 华中师范大学计算机学院，武 汉 430079)摘 要 ：随着互联网的快速发展，W e b 业务日益复杂化，W e b 前端开发在软件产品开发环节中 的作用变得越来越重要。 目前W e b 前端的开发效率低、开发质量差是亟待解决的问题。用软件 工程的思想来研究和解决W e b 前端工程问题，结合已有的W e b 前端框架和技术，设计出一套行 之 有 效 的 W e b 前端工程化解决方案。经过实际项目的实践，解决方案 合理 可行 ，实现了高效、 高质量的W e b 前端开发。 关键词：W e b 前 端 ；软件工程； 自动化；vue.js 中图分类号：TP393.09 文献标识码：AResearch on Web front-end engineering solutionsZHOU Wei1， ZHENG Shi-jue2(1. Information Office，Central China Normal University，Wuhan 430079，China； 2. Computer School，Central China Normal University，Wuhan 430079，China)Abstract：With the rapid development ol the Internet and increasingly complicated Web services, therole ol Web Iront-end development in software product development is becoming more and more important. The low efficiency and poor quality ol Web front-end development are now an urgent problem to be solved. This paper uses software engineering methods to do research and solve the Web front-end engineering problems. It combines with the existing Web front-end engineering frameworks and technologies to achieve an effective Web front-end engineering solution. After the actual project practice， the solution proved it is reasonable and feasible，which can achieve efficient，high-quality Web front-end development.Key words：Web front-end; software engineering；automation；vue.js0 引百随着互联网的高速发展,W e b 前端开发在产品 开 发 环节中的作用变得越来越重要。W e b 前端开 发 的 发 展 经 历 了 刀 耕 火 种 时 期 、手 工 工 场 时 期 和 工 业革命时期。在刀 耕 火 种 时 期 ，前 端 的 概 念 还 未 完 全 明 确 。 此 时 的 典 型 特 征 就 是 页 面 主 要 依 赖 服 务 端 语 言 ，如 JSP、A S P 、P H P 等模版引擎来进渲染，配合上少量的 简 单 的 C S S 和 JavaScript代码,来实现简单的页面展 示 1。因 为 页 面 主 要 依 赖 后 端 模 版 引 擎 来 实 现 ，所以 主 要 代 码 依 旧 存 放 在 后 端 的 代 码 库 中 ，整 个 项 目 也 都是以后端开发为主导的。此时的前后端分工并不 44 明 确 ，前 端 的 工 作 直 接 交 由 后 端 工 程 师 完 成 。前后 端 职 责 划 分 不 清 ，模 版 引 擎 语 言 和 前 端 语 言 的 杂 乱 糅 合 ，导致项目的阅读性很差,可维护性大大降低。2005年 Ajax技术的出现,使得前端开发进人了 手工工场时期。通 过 Ajax技 术 ，实现了视觉上局部 刷 新 ，不会存在刷新的白屏等待时间，同时对也减少 了 前 后 端 传 递 的 数 据 量 ，大 大 提 高 了 性 能 2。但此 时的前端开发，仍旧处于简单网页开发模式，大量工 程 师 依 旧 推 崇 小 而 美 的 开 发 模 式 ，基 本 没 有 工 程 化收稿日期： 2018 -0 2 -05 基金项目：国家支撑计划（2015BAK33B00) 作者简介：周伟（1980 - ) , 男 ，博士，工程师,研究方向为网络安全管理、系统开发。的概念。 随 着 Web 2 . 0 时代的到来，交互功能需求的大大 提 升 ，以 往 的 前 端 框 架 性 能 开 始 无 法 满 足 飞 速 增 长的需求。W e b 前端开发的工业革命开始，优秀的 JavaScript 框架（Backbone，Vue，React，Angular)纷纷涌现出来。 各 类 JavaScript框架的出现代表着W e b 前端开发 不 再 满 足 于 构 建 一 个 简 简 单 单 的 页 面 ，而 更 加 趋 向于开发一个类似于传统软件的W e b 型 应 用 。这 些 优 秀 的 JavaScript框架极大的提高了前端渲染的 性 能 ，同时也使开发变的更加敏捷、统 一 ，使 W e b 型 应用逐渐变成了可能。但 是 如 果 仅 仅 使 用 这 些 框 架 ，却 没 有 使 用 工 程 化的开发方法，开 发 的 效 率 和 质 量 还 是 难 以 保 障 。 本文用软件工程的思想来研究和解决W e b 前端工 程 问 题 ，结 合 已 有 的 W e b 前端框架 和 技 术 ，取长补 短 ，总结实现出一套较为全面且行之有效的W e b 前端工程化解决方案。该解决方案包括设计和代码模 块 化 、组件化设计、规范化和自动化。1 模块化模 块 化 是 以 功 能 块 为 单 位 进 行 程 序 设 计 ，实现 一 个 独 立 功 能 的 模 块 单 元 3。简 而 言 之 就 是 将 一 个 大 文 件 拆 分 给 多 个 小 文 件 ，然 后 再 统 一 进 行 拼 装 和 加 载 ，是 一 种 分 而 治 之 的 思 想 。如 今 的 W e b 前端开发中，一个复杂页面所引用 的 JavaScript、C S S 的 代 码 有 几 千 行 乃 至 上 万 行 之 多 。这时候，就 需 要 将 JavaScript，C S S 中的大文件进 行 模 块 化 划 分 ，划 分 为 一 个 个 具 备 独 立 功 能 的 一 百行代码左右的模块文件。最后再根据业务功能需 要 ，对这些模块文件进行组装调用即可。 1.1 JavaScript 模块化JavaScript由 于 构 建 语 言 之 初 ，创 始 人 Brendan Eich只 是 将 其 当 作 一 门 简 单 的 脚 本 语 言 ，且 仅 用 了 七天时间完成，所 以 ，一 开 始 JavaScript在标准上并 没有模块系统，直 到 2015年 E S 6 标准的提出。这也对 前 端 工 程 化 的 发 展 ，造 成 了 巨 大 的 阻 碍 4。 在这之前有许多社区制定了自己的一套模块化加载方案，如 A M D 、M D D 等 ，但是在实施上并没有统 一 ，有些系统并存着几套模块化加载方案。因为 每 套 模 块 化 加 载 方 案 的 写 法 并 不 一 致 ，这 样 就 导 致了 无 法 进 行 合 理 的 统 一 化 开 发 ，很 多 冗 余 的 代 码 也 一 直 存 在 系 统 中 ，根 本 无 法 剔 除 。所 幸 ，E S 6 的 标 准 已 经 相 当 完 善 ，本 方 案根据 E S 6 的标准，结 合 Webpack这一模块化自动打包工 具 和 Babel( 将 E S 6 代 码 转 换 成 ES5 代 码 ，使其在大多 数 浏 览 器 上 均 可 运 行 ，解 决 兼 容 性 问 题 的 插 件 ）5，对 JavaScript进行模块化的分割。 1.2 C S S 模块化C S S 在模块化上虽然本身语言支持性比JavaS cript 要好 ，本身就可以通过 import 引用机制 ，来进 行 模 块 化 开 发 ，但 是 仍 然 存 在 一 个 核 心 的 问 题 ，就是 如何解决全局污染问题。C S S 的选择器无法进行私有化判定，导人一个 新 的 模 块 后 ，原 有 模 块 的 样 式 很 有 可 能 会 被 全 局 样 式所覆盖。虽然从本身 语 言 上 而 言 ，C S S 的样式重 写机制是它的一个优势，但是从工程化的角度分析， 这个优势却变成了劣势，因为它不利于多人协作的 模块化开发。为了解决这一问题，本方案主要采用了 B E M 风 格的命名 规 约 ，从 规 范 上 去 限 制 C S S 命 名 风 格 ，从 而规避全局选择器的问题。但是这仅仅只是一个弱 约 束 ，假如有人没有遵守这套命名规约，依旧会导致 问题。所 以 ，另一方面从工具的角度上去消灭这种问 题 ，在 良 好 命 名 规 约 的 基 础 上 ，利用自动化工具对 C S S 进 行 data加 签 ，利 用 随 机 生 成 的 data标签选择 器 ，对每个模块进行选择定义，这样就能保证每个模 块经过工具加签后都是私有化的标签选择。保证了 一个模块的更改，不会影响其他模块的正常运作。2 组件化组 件 化 就 是 从 设 计 层 面 上 ，对 用 户 界 面 进 行 拆