《前端培训》PPT课件

前 端 工 程 化 历 程现 代 前 端 框 架 思 想 前 端 工 程 化1. 前 端 代 码 结 构 以 及 模 块 化2. 渲 染 方 式 以 及 模 板3. 组 件4. 前 端 路 由 与 前 端 应 用5. CSS解 决 方 案6. 异 步 流 程 处 理7. 构 建 工 具 前 端 代 码 结 构 与 模 块 化第 一 阶 段html js css代 码 分 离 ， js css分 层 切 割 在 不 同 文 件中 ， 统 一 在 html引 入 ， 以 闭 包 和 命 名 空 间 划 分 彼 此 。第 二 阶 段动 态 创 建 标 签 引 入 js， 实 现 模 块 化 加 载 ， 例 如 ：requireJS。 这 段 时 期 提 出 了 AMD,CMD等 加 载 方 式 的 概念 。 前 端 代 码 结 构 与 模 块 化第 三 阶 段引 入 node用 于 编 译 代 码 ， 基 于 commonjs标 准 ， 像 写node一 样 写 浏 览 器 端 代 码 ， 例 如 ： browserify。第 四 阶 段一 切 资 源 皆 是 模 块 ， 支 持 es6模 块 ， node， 按 需 加载 ， 代 码 分 割 ， 环 境 变 量 ， 版 本 号 等 等 。 。 。 例 如 ：webpack。 渲 染 方 式第 一 阶 段命 令 式 ， 直 接 操 作 DOM， 例 如 ： jQuery第 二 阶 段声 明 式 ， 仅 描 述 数 据 与 UI的 映 射 关 系 ， DOM操 作交 给 库 框 架 ， 例 如 ： Vue， react 模 板第 一 阶 段字 符 串 模 板 ， 字 符 串 拼 接 ， 输 出 html第 二 阶 段模 板 引 擎 ， 例 如 ： Handlebars第 三 阶 段模 板 + 虚 拟 DOM + Diff（ 数 据 DOM） 组 件第 一 阶 段DOM组 件 ， 将 DOM操 作 集 成 在 组 件 对 象 中 。 例 如 ： jQuery ui，bootstrap javascript组 件第 二 阶 段controller + 模 板 ， 将 数 据 与 视 图 绑 定 。 例 如 ： Backbone第 三 阶 段组 件 可 以 表 示 为 函 数 ， 组 件 可 以 由 其 他 组 件 组 装 而 成 ， 结 合变 化 侦 测 ， 虚 拟 DOM， Diff， 提 升 效 率 。 例 如 ： React， Vue 前 端 路 由 与 前 端 应 用组 件 可 以 表 示 为 一 个 函 数一 个 大 型 组 件 可 以 由 很 多 小 组 件 拼 装 而 成多 个 大 型 组 件 可 以 构 成 应 用路 由 表 示 一 个 前 端 应 用 那 么 路 由 也 可 以 表 示 为 一 个 函 数 CSS解 决 方 案第 一 阶 段按 照 约 定 的 规 则 ， 写 CSS代 码 ， 例 如 ： BEM第 二 阶 段结 合 构 建 工 具 进 行 预 处 理 ， 例 如 ： Less， Sass， Post CSS第 三 阶 段契 合 组 件 ， 样 式 与 组 件 绑 定 ， 例 如 ： css in js， CSS modules 异 步 流 程 处 理第 一 阶 段基 于 回 调 函 数第 二 阶 段基 于 Promise对 象第 三 阶 段基 于 生 成 器 ， async await， rxjs 构 建 工 具第 一 阶 段以 文 件 处 理 为 主 ， 例 如 ： Grunt， Gulp第 二 阶 段以 打 包 为 核 心 ， 例 如 ： webpack