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

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

view中有任何數(shù)據(jù)變化時(shí)，會(huì)更新到model，model中數(shù)據(jù)有變化時(shí)，view也會(huì)同步更新1、Angular在scope模型上設(shè)置了一個(gè)監(jiān)聽隊(duì)列，用來監(jiān)聽數(shù)據(jù)變化并更新view。2、每次綁定一個(gè)東西到view上時(shí)AngularJS就會(huì)往$watch隊(duì)列里插入一條$watch，用來檢測(cè)它監(jiān)視的model里是否有變化的東西。3、當(dāng)瀏覽器接收到可以被angularcontext處理的事件時(shí)，$digest循環(huán)就會(huì)觸發(fā)，遍歷所有的$watch，最后更新dom。2021/6/2714虛擬dom:檢測(cè)虛擬dom變化后，渲染到真實(shí)dom2021/6/2715mobx，前端適配庫(kù)，js語(yǔ)言自帶的攔截器實(shí)現(xiàn)2021/6/2716簡(jiǎn)易redux2021/6