前端發(fā)展歷史和現(xiàn)主流框架對比

1、前端發(fā)展歷史和現(xiàn)主流框架對比制作人：鄭錦鵬 2017/12/16第一頁，共19頁。目錄Contents發(fā)展歷史歷史前后端分離html5前端自動化jq與框架jquery框架對比前端框架angularreactvue對比框架原理angularreact+redux+mobxvue+vuex第二頁，共19頁。web前端歷史history1、網(wǎng)頁三劍客（Firework、Dreamweaver、Flash），ie瀏覽器時代2、新版瀏覽器時代，html5，響應(yīng)式布局網(wǎng)頁，前后端分離，ajax異步請求，jsjq需要兼容各種瀏覽器3、2012年后，前端開發(fā)框架時代（angular、react、vue），前端

2、單頁面應(yīng)用+路由，按需加載（require、sea），前端自動化工具(grunt、gulp、webpack)，新版es6語法，第三頁，共19頁。jquery工具庫與前端框架對比jquery（必學(xué)）：1、是一個將軍，專注的是每個戰(zhàn)場細(xì)節(jié)上的戰(zhàn)術(shù)安排。2、一個完善的工具庫，兼容各種瀏覽器，由各種復(fù)用的函數(shù)集成，非常便捷的修改頁面元素。3、面向dom開發(fā)，數(shù)據(jù)結(jié)構(gòu)一變，view層也要重新維護(hù)。框架（以react為例）：1、是一個元帥，考慮的是整個戰(zhàn)局大體上的戰(zhàn)略規(guī)劃。2、組件式開發(fā)，整個UI是一個通過小組件構(gòu)成的大組件，每個組件只關(guān)心自己部分的邏輯，彼此獨立。3、面向state開發(fā)，讓開發(fā)者更多的關(guān)

3、注數(shù)據(jù)，底層數(shù)據(jù)變化時，自動處理所有界面的更新。第四頁，共19頁。第五頁，共19頁。第六頁，共19頁。單頁面應(yīng)用開發(fā)以往頁面是用iframe來做頁面路由，現(xiàn)在用框架適配的路由第七頁，共19頁。前端三大框架之間的關(guān)系第八頁，共19頁。angular第九頁，共19頁。vue第十頁，共19頁。react第十一頁，共19頁。組件間數(shù)據(jù)交互一、父子，兄弟二、全局?jǐn)?shù)據(jù)管理器1、angular（1）注冊單例factory，注入到controller中；（2）每個controller都可監(jiān)聽廣播事件，發(fā)送向上、向下和全局的廣播，$broadcast，$emit，$on，$watch3、vue（1）vuex管理

4、庫，借鑒redux而創(chuàng)造出的和vue更加契合的2、react（1）redux管理庫，函數(shù)式編程，自定義listener, 通過action來改變數(shù)據(jù)，同時執(zhí)行相關(guān)listener函數(shù)（2）mobx管理庫， 第十二頁，共19頁。框架 同步數(shù)據(jù)到視圖實現(xiàn)原理：1、定義一個變量，2、監(jiān)聽這個變量的每次獲取和賦新值，3、然后同步到視圖第十三頁，共19頁。angular 臟檢查 同步數(shù)據(jù)雙向數(shù)據(jù)綁定是 AngularJS 的核心機(jī)制之一。 view 中有任何數(shù)據(jù)變化時，會更新到 model ，model 中數(shù)據(jù)有變化時，view 也會同步更新1、Angular 在 scope 模型上設(shè)置了一個 監(jiān)聽隊列，用來監(jiān)聽數(shù)據(jù)變化并更新 view 。2、每次綁定一個東西到 view 上時 AngularJS 就會往 $watch 隊列里插入一條 $watch，用來檢測它監(jiān)視的 model 里是否有變化的東西。3、當(dāng)瀏覽器接收到可以被 angular context 處理的事件時，$digest 循環(huán)就會觸發(fā)，遍歷所有的 $watch，最后更新 dom。第十四頁，共19頁。虛擬dom: 檢測虛擬dom變化后，渲染到真實dom第十五頁，共19頁。mobx，前端適配庫，js語言自帶的攔截器實現(xiàn)第十六頁，共19頁。簡易redux第十