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

1、整理課件前端發(fā)展歷史和現主流框架對比2017/12/16整理課件目錄Contents發(fā)展歷史歷史前后端分離html5前端自動化jq與框架jquery框架對比前端框架angularreactvue對比框架原理angularreact+redux+mobxvue+vuex整理課件web前端歷史history1、網頁三劍客（Firework、Dreamweaver、Flash），ie瀏覽器時代2、新版瀏覽器時代，html5，響應式布局網頁，前后端分離，ajax異步請求，jsjq需要兼容各種瀏覽器3、2012年后，前端開發(fā)框架時代（angular、react、vue），前端單頁面應用+路由，按需加載（

2、require、sea），前端自動化工具(grunt、gulp、webpack)，新版es6語法，整理課件jquery工具庫與前端框架對比jquery（必學）：1、是一個將軍，專注的是每個戰(zhàn)場細節(jié)上的戰(zhàn)術安排。2、一個完善的工具庫，兼容各種瀏覽器，由各種復用的函數集成，非常便捷的修改頁面元素。3、面向dom開發(fā)，數據結構一變，view層也要重新維護?？蚣埽ㄒ詒eact為例）：1、是一個元帥，考慮的是整個戰(zhàn)局大體上的戰(zhàn)略規(guī)劃。2、組件式開發(fā)，整個UI是一個通過小組件構成的大組件，每個組件只關心自己部分的邏輯，彼此獨立。3、面向state開發(fā)，讓開發(fā)者更多的關注數據，底層數據變化時，自動處理所有界

3、面的更新。整理課件整理課件整理課件單頁面應用開發(fā)以往頁面是用iframe來做頁面路由，現在用框架適配的路由整理課件前端三大框架之間的關系整理課件angular整理課件vue整理課件react整理課件組件間數據交互一、父子，兄弟二、全局數據管理器1、angular（1）注冊單例factory，注入到controller中；（2）每個controller都可監(jiān)聽廣播事件，發(fā)送向上、向下和全局的廣播，$broadcast，$emit，$on，$watch3、vue（1）vuex管理庫，借鑒redux而創(chuàng)造出的和vue更加契合的2、react（1）redux管理庫，函數式編程，自定義listener,

4、 通過action來改變數據，同時執(zhí)行相關listener函數（2）mobx管理庫， 整理課件框架 同步數據到視圖實現原理：1、定義一個變量，2、監(jiān)聽這個變量的每次獲取和賦新值，3、然后同步到視圖整理課件angular 臟檢查 同步數據雙向數據綁定是 AngularJS 的核心機制之一。 view 中有任何數據變化時，會更新到 model ，model 中數據有變化時，view 也會同步更新1、Angular 在 scope 模型上設置了一個 監(jiān)聽隊列，用來監(jiān)聽數據變化并更新 view 。2、每次綁定一個東西到 view 上時 AngularJS 就會往 $watch 隊列里插入一條 $watch，用來檢測它監(jiān)視的 model 里是否有變化的東西。3、當瀏覽器接收到可以被 angular context 處理的事件時，$digest 循環(huán)就會觸發(fā)，遍歷所有的 $watch，最后更新 dom。整理課件虛擬dom: 檢測虛擬dom變化后，渲染到真實dom整理課件mobx，前端適配庫，js語言自帶的攔截器實現整理課件簡易redux整理課件整理課件前端自動化工具grunt