1.前端框架的根本意義
1.1 前端框架的好處
最開始學習前端框架的時候(我第乙個框架是 react)並不理解框架能帶來什麼,只是因為大家都在用框架,最實際的乙個用途就是所有企業幾乎都在用框架,不用框架就 out 了.
隨著使用的深入我逐漸理解到框架的好處:
1.2 前端框架的根本意義
簡單來說,前端框架的根本意義是解決了ui 與狀態同步問題。
頻繁操作 dom 效能低下.
中間步驟過多,易產生 bug且不易維護,而且心智要求較高不利於開發效率
不管是 vue 的資料劫持、angular 的髒檢測還是 react 的元件級 rerender都是幫助我們解決 ui 與狀態同步問題的利器。
這也解釋了backbone作為前端框架鼻祖在之後落寞的原因,backbone只是引入了 mvc 的思想,並沒有解決 view 與 modal 同步的問題,相比於現代的三大框架直接操作 modal 就可以同步 ui 的特性, backbone 仍然與 jquery 繫結,在 view 裡操作 dom來達到同步 ui 的目的，這顯然是不符合現代前端框架設計要求的。
ui 在 mvvm 中指的是 view，狀態在 mvvm 中指的是 modal，而保證 view 和 modal 同步的是 view-modal。
vue 通過乙個響應式系統保證了view 與 modal的同步,由於要相容ie,vue 選擇了object.defineproperty作為響應式系統的實現,但是如果不考慮 ie 使用者的話,object.defineproperty並不是乙個好的選擇target=https%3a%2f%2fjuejin.im%2fpost%2f5acd0c8a6fb9a028da7cdfaf)。
我們將用 proxy 實現乙個響應式系統。
2.1 發布訂閱中心
乙個響應式系統離不開發布訂閱模式,因為我們需要乙個 dep儲存訂閱者,並在 observer 發生變化時通知儲存在 dep 中的訂閱者,讓訂閱者得知變化並更新檢視,這樣才能保證檢視與狀態的同步。
我們在訂閱器dep中實現了乙個notify方法來通知相應的訂閱這們,然而notify方法到底什麼時候被觸發呢?
當然是當狀態發生變化時,即 mvvm 中的 modal 變化時觸發通知,然而dep顯然無法得知 modal 是否發生了變化,因此我們需要建立乙個監聽者observer來監聽 modal, 當 modal 發生變化的時候我們就執行通知操作。
vue 基於object.defineproperty來實現了監聽者，我們用 proxy 來實現監聽者.
與object.defineproperty監聽屬性不同, proxy 可以監聽(實際是**)整個物件,因此就不需要遍歷物件的屬性依次監聽了,但是如果物件的屬性依然是個物件,那麼 proxy 也無法監聽,所以我們實現了乙個observify進行遞迴監聽即可。
我們目前已經解決了兩個問題,乙個是如何得知 modal 發生了改變(利用監聽者 observer 監聽 modal 物件),乙個是如何收集訂閱者並通知其變化(利用訂閱器收集訂閱者,並用notify通知訂閱者)。
我們目前還差乙個訂閱者（watcher）
我們在上一節中實現了訂閱者( watcher),但是其中的update方法是將訂閱者放入了乙個待更新的佇列中,而不是直接觸發,原因如下:
因此這個佇列需要做的是非同步且去重,因此我們用set作為資料結構儲存 watcher 來去重,同時用promise模擬非同步更新。
我們梳理一下流程, 乙個響應式系統是如何做到 ui(view)與狀態(modal)同步的?
我們首先需要監聽 modal, 本文中我們用 proxy 來監聽了 modal 物件,因此在 modal 物件被修改的時候我們的 observer 就可以得知。
我們得知modal發生變化後如何通知 view 呢？要知道，乙個 modal 的改變可能觸發多個 ui 的更新，比如乙個使用者的使用者名稱改變了，它的個人資訊元件、通知元件等等元件中的使用者名稱都需要改變，對於這種情況我們很容易想到利用發布訂閱模式來解決,我們需要乙個訂閱器(dep)來儲存訂閱者(watcher),當監聽到 modal 改變時,我們只需要通知相關的訂閱者進行更新即可。
那麼訂閱者來自**呢？其實每乙個元件例項對應著乙個訂閱者（正因為乙個元件例項對應乙個訂閱者，才能利用 dep 通知到相應元件，不然亂套了，通知訂閱者就相當於間接通知了元件）。
當訂閱者得知了具體變化後它會進行相應的更新,將更新體現在 ui(view)上,至此ui 與 modal 的同步完成了。
響應式系統雖然是 vue 的核心概念,但是乙個響應式系統並不夠.
響應式系統雖然得知了資料值的變化,但是當值不能完整對映 ui 時,我們依然需要進行元件級別的 rerender,這種情況並不高效,因此 vue 在2.0版本引入了虛擬 dom, 虛擬 dom進行進一步的 diff 操作可以進行細粒度更高的操作,可以保證 rereander 的下限(保證不那麼慢)。
除此之外為了方便開發者，vue 內建了眾多的指令，因此我們還需要乙個 vue 模板解析器.
原作者姓名：sir-fa原出處：oschina
你為什麼要使用CDN？
摘要 當你選擇使用cdn的時候，你是為了什麼？內容有吸引力 訪問速度快 支援頻繁的使用者互動 可以在各處瀏覽無障礙 另外，你的 必須能在複雜的網路環境下執行，考慮到全球的使用者訪問體驗。你的 也會隨著使用越來越多的物件 如 幀 css及apis 和形形色色的動作 分享 跟蹤 而系統逐漸龐大。所以，系...
你為什麼要使用CDN？
摘要 當你選擇使用cdn的時候，你是為了什麼？內容有吸引力 訪問速度快 支援頻繁的使用者互動 可以在各處瀏覽無障礙 另外，你的 必須能在複雜的網路環境下執行，考慮到全球的使用者訪問體驗。你的 也會隨著使用越來越多的物件 如 幀 css及apis 和形形色色的動作 分享 跟蹤 而系統逐漸龐大。所以，系...
你為什麼要使用CDN？
如果你在經營一家 那你應該知道幾點因素是你制勝的關鍵 另外，你的 必須能在複雜的網路環境下執行，考慮到全球的使用者訪問體驗。你的 也會隨著使用越來越多的物件 如 幀 css及apis 和形形色色的動作 分享 跟蹤 而系統逐漸龐大。所以，系統變慢帶來使用者的流失。google及其它 的研究表明，乙個 ...