前端培訓(xùn)PPT課件

1、1,前端工程化歷程,現(xiàn)代前端框架思想,2,前端工程化,1. 前端代碼結(jié)構(gòu)以及模塊化 2. 渲染方式以及模板 3. 組件 4. 前端路由與前端應(yīng)用 5. CSS解決方案 6. 異步流程處理 7. 構(gòu)建工具,3,前端代碼結(jié)構(gòu)與模塊化,第一階段 html js css代碼分離，js css分層切割在不同文件中，統(tǒng)一在html引入，以閉包和命名空間劃分彼此。 第二階段 動(dòng)態(tài)創(chuàng)建標(biāo)簽引入js，實(shí)現(xiàn)模塊化加載，例如：requireJS。這段時(shí)期提出了AMD,CMD等加載方式的概念。,4,前端代碼結(jié)構(gòu)與模塊化,第三階段 引入node用于編譯代碼，基于commonjs標(biāo)準(zhǔn)，像寫node一樣寫瀏覽器端代碼，例如

2、：browserify。 第四階段 一切資源皆是模塊，支持es6模塊，node，按需加載，代碼分割，環(huán)境變量，版本號(hào)等等。例如：webpack。,5,渲染方式,第一階段 命令式，直接操作DOM，例如：jQuery 第二階段 聲明式，僅描述數(shù)據(jù)與UI的映射關(guān)系，DOM操作交給庫(kù)框架，例如：Vue，react,6,模板,第一階段 字符串模板，字符串拼接，輸出html 第二階段 模板引擎，例如：Handlebars 第三階段 模板 + 虛擬DOM + Diff（數(shù)據(jù)DOM）,7,組件,第一階段 DOM組件，將DOM操作集成在組件對(duì)象中。例如：jQuery ui，bootstrap javascrip

3、t組件 第二階段 controller + 模板，將數(shù)據(jù)與視圖綁定。例如：Backbone 第三階段 組件可以表示為函數(shù)，組件可以由其他組件組裝而成，結(jié)合變化偵測(cè)，虛擬DOM，Diff，提升效率。例如：React，Vue,8,前端路由與前端應(yīng)用,組件可以表示為一個(gè)函數(shù) 一個(gè)大型組件可以由很多小組件拼裝而成 多個(gè)大型組件可以構(gòu)成應(yīng)用 路由表示一個(gè)前端應(yīng)用 那么路由也可以表示為一個(gè)函數(shù),9,CSS解決方案,第一階段 按照約定的規(guī)則，寫CSS代碼，例如：BEM 第二階段 結(jié)合構(gòu)建工具進(jìn)行預(yù)處理，例如：Less，Sass，Post CSS 第三階段 契合組件，樣式與組件綁定，例如：css in js，CSS modules,10,異步流程處理,第一階段 基于回調(diào)函數(shù) 第二階段 基于Promise對(duì)象 第三階段 基于生成器，asyncawait，rxjs,11,構(gòu)建工具