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

前端發(fā)展歷史和現(xiàn)主流框架對比2021/6/271目錄Contents發(fā)展歷史歷史前后端分離html5前端自動化jq與框架jquery框架對比前端框架angularreactvue對比框架原理angularreact+redux+mobxvue+vuex2021/6/272web前端歷史history1、網(wǎng)頁三劍客（Firework、Dreamweaver、Flash），ie瀏覽器時代2、新版瀏覽器時代，html5，響應式布局網(wǎng)頁，前后端分離，ajax異步請求，jsjq需要兼容各種瀏覽器3、2012年后，前端開發(fā)框架時代（angular、react、vue），前端單頁面應用+路由，按需加載（require、sea），前端自動化工具(grunt、gulp、webpack)，新版es6語法，2021/6/273jquery工具庫與前端框架對比jquery（必學）：1、是一個將軍，專注的是每個戰(zhàn)場細節(jié)上的戰(zhàn)術(shù)安排。2、一個完善的工具庫，兼容各種瀏覽器，由各種復用的函數(shù)集成，非常便捷的修改頁面元素。3、面向dom開發(fā)，數(shù)據(jù)結(jié)構(gòu)一變，view層也要重新維護。框架（以react為例）：1、是一個元帥，考慮的是整個戰(zhàn)局大體上的戰(zhàn)略規(guī)劃。2、組件式開發(fā)，整個UI是一個通過小組件構(gòu)成的大組件，每個組件只關(guān)心自己部分的邏輯，彼此獨立。3、面向state開發(fā)，讓開發(fā)者更多的關(guān)注數(shù)據(jù)，底層數(shù)據(jù)變化時，自動處理所有界面的更新。2021/6/2742021/6/2752021/6/276單頁面應用開發(fā)以往頁面是用iframe來做頁面路由，現(xiàn)在用框架適配的路由2021/6/277前端三大框架之間的關(guān)系2021/6/278angular2021/6/279vue2021/6/2710react2021/6/2711組件間數(shù)據(jù)交互一、父子，兄弟二、全局數(shù)據(jù)管理器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管理庫，函數(shù)式編程，自定義listener,通過action來改變數(shù)據(jù)，同時執(zhí)行相關(guān)listener函數(shù)（2）mobx管理庫，2021/6/2712框架同步數(shù)據(jù)到視圖實現(xiàn)原理：1、定義一個變量，2、監(jiān)聽這個變量的每次獲取和賦新值，3、然后同步到視圖2021/6/2713angular臟檢查同步數(shù)據(jù)雙向數(shù)據(jù)綁定是AngularJS的核心機制之一。

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、當瀏覽器接收到可以被angularcontext處理的事件時，$digest循環(huán)就會觸發(fā)，遍歷所有的$watch，最后更新dom。2021/6/2714虛擬dom:檢測虛擬dom變化后，渲染到真實dom2021/6/2715mobx，前端適配庫，js語言自帶的攔截器實現(xiàn)2021/6/2716簡易redux2021/6