基于数据驱动的动态Web模板技术设计与实现

Ｆｅ ｂ． ２ ０１ ７
基 于数 据驱 动 的 动 态 Ｗ ｅ ｂ模 板 技 术 设 计 与 实 现
刘 放， 陈 和 平
（ １ ． 武汉 科 技 大 学 计 算 机 科 学 与 技 术 学 院 ， 湖北 武汉 ， ４ ３ ０ ０ ６ ５ ；
２ ．武 汉 科 技 大 学 智 能 信 息 处 理 与实 时 工 业 系 统 湖 北 省 重 点 实 验 室 ， 湖北 武汉 ， ４ ３ ０ ０ ６ ５ ）
从 而导 致浏 览器 的重 排和 重绘 。 （ ３ ） 开 发效 率 问题 ： 由于是 通过 正则 表达 式 匹
开 发人 员将 数据 传人 后端 模板 后拼 接 而成 。随着
Ａ ｊ ａ ｘ技 术 的 日渐 流行 ， 异 步数 据 传输 方 式 的用户
体 验更 佳 ， Ｊ ｓ ｏ ｎ格式 存 储 量 小 且简 洁 易 读 等 优 势 也 日益凸显 Ｌ １ ］ 。前端 开发 人员 普遍 采用 字符 串拼 接的方式， 将 Ａ ｊ ａ ｘ获 取 的数 据 手 动 输 出 到 ＨＴ— ＭＬ。这种 开 发 方 式 效 率 低 下 ， 代 码 逻 辑 与视 图 过 于耦 合 ， 难 以 阅读 和维 护 。随着 各 种 浏 览 器 对
Ｗ３ Ｃ标准 下 的新 特 性 支 持 度 越 来 越 高 ， ＨＴＭＬ ５ 和Ｃ Ｓ Ｓ ３等 新 技 术 不 断 普 及 ］ ， 前 端 模 板 引 擎 也 出现 了百花 齐 放 的局 面 。采 用前 端 模 板 后 ， 使 得 开发 流 程 中前 、 后 端分 离更 加彻 底 ｜ ３ ］ 。
为所需 数 据 的方 式 ， 构 建 出完 整 的 ＨＴ ＭＬ 字 符
串 。由 于 基 于 字 符 串 的 模 板 方 法 依 赖 于 ｉ ｎ —
ｎ ｅ ｒ ＨＴＭＬ的渲染 ， 所 以会带 来 以下 问题 。
实现 方法 ， 以便 于 开发 者分 离业 务逻 辑 、 显示逻 辑 和用 户界 面 ， 使程 序代 码结 构更 清 晰 ， 更 容易被 阅
读、 测试 、 维护、 替换、 扩展 和改 进 。
（ １ ） 安 全 问题 ： 使用 ｉ ｎ ｎ ｅ ｒ ＨＴＭＬ构 建 ＤＯＭ 具有 安全 隐 患 ］ ， 用 于 渲 染 的 动态 数 据 可 能 存 在
安全 漏 洞 ， 如 果没 有经 过特 定 的转 义 处理 ， 就 有可 能造 成 ＸＳ Ｓ攻击 或者 Ｃ Ｓ Ｒ Ｆ攻击 ］ 。
这是一 种基 于字 符 串的模 板 技 术 ， 以 字 符 串 和数 据为输 入 ， 通 过 用 正则 表达 式 将 占位 符 替 换
端 模 板技术 中的实 现思 路 ， 分 析 各 自的优 缺点 ， 提 出基 于数据 驱动 的动 态 Ｗｅ ｂ模 板 技 术 （ ｄ ｙ ｎ ａ ｍｉ ｃ
ｗｅ ｂ ｔ ｅ ｍｐ ｌ ａ ｔ ｅ ｔ ｅ ｃ ｈ ｎ ｏ ｌ ｏ ｇ ｙ ， ＤＷＴ Ｔ） 的设计 思路 和
摘要 ： 随 着 互 联 网产 品 规 模 的不 断扩 大 ， 前 端脚 本代码规模 大、 重 用性低 、 维护 困难 、 扩展性 差等 问题 不断 涌 现 。为 此 ， 本 文 分 析 了 目前 主 流 的 ｗ ｅ ｂ模 板 技 术 及 各 自 的 优 缺 点 ， 并 结合 国内测 览 器的兼 容性 ， 在 Ｌ ｉ ｖ ｉ ｎ ｇ
代后 ， 网页 不再 以简 单 的文字 和 图片展 示 为主 ， 丰 富 多样 的交 互形 式提 升 了 Ｗｅ ｂ应 用 的用 户体 验 ， Ｗｅ ｂ前端技 术 在 互 联 网 产 品 开 发 过 程 中 的使 用
越 来越 广泛 。 本 文 围绕数 据 驱 动 关 键 点 ， 结 合 当前 主 流 前
ｔ ｅ ｍｐ ｌ ａ ｔ ｅ 技 术思想的基础上 ， 提 出一 种 基 于数 据 驱 动 的动 态 Ｗ ｅ ｂ模 板 技 术 方 案 （ Ｄ ＷＴＴ） ， 它 能 有 效提 高 前 端 开发 效 率 和 代 码 复 用性 ， 降低 程 序 扩 展 和 维 护 的 复 杂 度 。 关键词 ： 模板 ； Ｗｅ ｂ应 用 ； 前 端 开发 ； 数据驱动 ； 抽 象语 法 树 中图 分 类 号 ： Ｔ Ｐ ３ １ 文献标志码 ： Ａ 文章编号 ： １ ６ ７ ４ — ３ ６ ４ ４ （ ２ Ｏ １ ７ ） Ｏ １ — ０ ０ ７ ０ — ０ ６
随着 互 联 网技 术 与 应 用 的不 断 发 展 ， 以操 作 Ｄ０Ｍ（ ｄ ｏ ｃ ｕ ｍｅ ｎ ｔ ｏ ｂ ｊ ｅ ｃ ｔ ｍｏ ｄ ｅ １ ） 元 素 为 核 心 的传 统 前端 开发 方式 应对 日益 复杂 的业 务需 求 已显得
越 来越 力不 从 心 。进 入 以人 为 本 的 Ｗｅ ｂ ２ ． ０时
１ 模 板 技 术 相 关 研 究
早期 的浏览 器所 渲 染 的 ＨＴ ＭＬ代 码 由后 端
（ ２ ） 性 能问题 ： 使用 ｉ ｎ ｎ ｅ ｒ ＨＴＭＬ 替 换 ＤＯＭ 效率 较低 ， 即使 仅 替 换 Ｄ ＯＭ 的一 个 属 性 或 文 本 内容 ， 也必须通过 ｉ ｎ ｎ ｅ ｒ ＨＴＭＬ替 换 整 个 ＤＯＭ ，
下 面对 ３种 具 有代 表性 的前 端 模 板 技 术 ， 即
Ｓ ｔ ｒ ｉ ｎ ｇ — ｂ ａ ｓ ｅ ｄ模板 技 术 、 ＤＯＭ－ ｂ ａ ｓ ｅ ｄ模 板 技 术 和
Ｌ ｉ ｖ ｉ ｎ ｇ ｔ ｅ ｍｐ ｌ ａ ｔ ｅ 技术 ， 进 行 比较 与分 析 。
１ ． １ Ｓ ｔ ｒ ｉ ｎ ｇ － ｂ ａ ｓ ｅ ｄ模 板 技 术
第４ ０卷 第 １期
２ ０ １ ７年 ２月
武
汉
科
技
大
学
学ቤተ መጻሕፍቲ ባይዱ
报
Ｖｏ １ ． ４０。 Ｎｏ ．１
Ｊ ｏ ｕ ｒ ｎ ａ ｌ ｏ ｆ Ｗｕ ｈ ａ ｎ Ｕｎ ｉ ｖ ｅ ｒ ｓ ｉ ｔ ｙ ｏ ｆ Ｓ ｃ ｉ ｅ ｎ ｃ ｅ ａ ｎ ｄ Ｔｅ ｃ ｈ ｎ ｏ ｌ ｏ ｇ ｙ