《《前端培訓(xùn)》PPT課件》由會(huì)員分享，可在線閱讀，更多相關(guān)《《前端培訓(xùn)》PPT課件（11頁珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。
1、前 端 工 程 化 歷 程現(xiàn) 代 前 端 框 架 思 想 前 端 工 程 化1. 前 端 代 碼 結(jié) 構(gòu) 以 及 模 塊 化2. 渲 染 方 式 以 及 模 板3. 組 件4. 前 端 路 由 與 前 端 應(yīng) 用5. CSS解 決 方 案6. 異 步 流 程 處 理7. 構(gòu) 建 工 具 前 端 代 碼 結(jié) 構(gòu) 與 模 塊 化第 一 階 段html js css代 碼 分 離 ， js css分 層 切 割 在 不 同 文 件中 ， 統(tǒng) 一 在 html引 入 ， 以 閉 包 和 命 名 空 間 劃 分 彼 此 。第 二 階 段動(dòng) 態(tài) 創(chuàng) 建 標(biāo) 簽 引 入 js， 實(shí) 現(xiàn) 模 塊 化 加 載
2、， 例 如 ：requireJS。 這 段 時(shí) 期 提 出 了 AMD,CMD等 加 載 方 式 的 概念 。 前 端 代 碼 結(jié) 構(gòu) 與 模 塊 化第 三 階 段引 入 node用 于 編 譯 代 碼 ， 基 于 commonjs標(biāo) 準(zhǔn) ， 像 寫node一 樣 寫 瀏 覽 器 端 代 碼 ， 例 如 ： browserify。第 四 階 段一 切 資 源 皆 是 模 塊 ， 支 持 es6模 塊 ， node， 按 需 加載 ， 代 碼 分 割 ， 環(huán) 境 變 量 ， 版 本 號(hào) 等 等 。 。 。 例 如 ：webpack。 渲 染 方 式第 一 階 段命 令 式 ， 直 接 操 作 D
3、OM， 例 如 ： jQuery第 二 階 段聲 明 式 ， 僅 描 述 數(shù) 據(jù) 與 UI的 映 射 關(guān) 系 ， DOM操 作交 給 庫 框 架 ， 例 如 ： Vue， react 模 板第 一 階 段字 符 串 模 板 ， 字 符 串 拼 接 ， 輸 出 html第 二 階 段模 板 引 擎 ， 例 如 ： Handlebars第 三 階 段模 板 + 虛 擬 DOM + Diff（ 數(shù) 據(jù) DOM） 組 件第 一 階 段DOM組 件 ， 將 DOM操 作 集 成 在 組 件 對(duì) 象 中 。 例 如 ： jQuery ui，bootstrap javascript組 件第 二 階 段con
4、troller + 模 板 ， 將 數(shù) 據(jù) 與 視 圖 綁 定 。 例 如 ： Backbone第 三 階 段組 件 可 以 表 示 為 函 數(shù) ， 組 件 可 以 由 其 他 組 件 組 裝 而 成 ， 結(jié) 合變 化 偵 測(cè) ， 虛 擬 DOM， Diff， 提 升 效 率 。 例 如 ： React， Vue 前 端 路 由 與 前 端 應(yīng) 用組 件 可 以 表 示 為 一 個(gè) 函 數(shù)一 個(gè) 大 型 組 件 可 以 由 很 多 小 組 件 拼 裝 而 成多 個(gè) 大 型 組 件 可 以 構(gòu) 成 應(yīng) 用路 由 表 示 一 個(gè) 前 端 應(yīng) 用 那 么 路 由 也 可 以 表 示 為 一 個(gè) 函
5、數(shù) CSS解 決 方 案第 一 階 段按 照 約 定 的 規(guī) 則 ， 寫 CSS代 碼 ， 例 如 ： BEM第 二 階 段結(jié) 合 構(gòu) 建 工 具 進(jìn) 行 預(yù) 處 理 ， 例 如 ： Less， Sass， Post CSS第 三 階 段契 合 組 件 ， 樣 式 與 組 件 綁 定 ， 例 如 ： css in js， CSS modules 異 步 流 程 處 理第 一 階 段基 于 回 調(diào) 函 數(shù)第 二 階 段基 于 Promise對(duì) 象第 三 階 段基 于 生 成 器 ， async await， rxjs 構(gòu) 建 工 具第 一 階 段以 文 件 處 理 為 主 ， 例 如 ： Grunt， Gulp第 二 階 段以 打 包 為 核 心 ， 例 如 ： webpack
《前端培訓(xùn)》PPT課件
