摘要：事件訂閱發(fā)布者模式什么是讀音類似于是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，采用自底向上增量開發(fā)的設計。

MVC && MVVM
前端框架前端 MV*框架的意義
被誤解的MVC和被神化的MVVM
Vue.js新手入門指南
單頁應用SPA的路由
單頁面應用的路由問題

本文是在自己總結時，看了許多篇文章有了些體會，然后把我認為有意義的摘抄下來，文中很大部分摘錄以上參考的文章，再結合一點點自己的觀點，總的來說這篇文章是一個匯總文。

在前端搞 MV有什么意義？也有人提出這樣的疑問：以 AngularJS，Knockout，BackBone 為代表的 MV*框架，它跟 jQuery 這樣的框架有什么區(qū)別？我 jQuery 用得好好的，有什么必要再引入這種框架？

庫和框架是有一些區(qū)別的：庫是一種工具，我提供了，你可以不用，即使你用了，也沒影響你自 己的代碼結構。框架則是面向一個領域，提供一套解決方案，如果你用我，就得按照我的方式辦事。

jQuery 的思維方式是：以 DOM 操作為中心
MV*框架的思維方式是：以模型為中心，DOM 操作只是附加

由于前端功能的增強、代碼的膨脹，導致不得不做“前端的架構”這個事情了。

所以回到那個問題上，jQuery 滿足了你的業(yè)務需要，你還有什么必要引入 MV*框架？
這個是要看產(chǎn)品類型的，如果是頁面型產(chǎn)品，多數(shù)確實不太需要它，因為頁面中的 JavaScript 代碼，處理交互的絕對遠遠超過處理模型的，但是如果是應用軟件類產(chǎn)品，這就太需要了。

MV框架的理念是把前端按照職責分層，每一層都相對比較獨立，有自己的價值，也有各自發(fā)揮的余地。

這種邏輯的好處在于，業(yè)務邏輯與用戶界面分離之后，后期對于界面的改版以及對于用戶交互的處理變化，僅僅需要改動View層即可，不在需要對業(yè)務邏輯層進行多大的改動。后期的維護成本會減少很多。

將開發(fā)重心從DOM操作，轉(zhuǎn)移到數(shù)據(jù)操作，將DOM操作與程序邏輯解耦。
期望提升開發(fā)效率、單位時間產(chǎn)出、后期代碼擴展性，降低維護成本

MVC
Model 數(shù)據(jù)模型
View 用戶界面
Controller 業(yè)務邏輯

不同的框架對Model、View的數(shù)據(jù)同步有不同的處理

MVC開發(fā)模式的原則：我們來看看 MVC 這種架構的特點。其實設計模式很多時候是為了 Don"t repeat yourself 原則來做的，該原則要求能夠復用的代碼要盡量復用，來保證重用。在 MVC 這種設計模式中，我們發(fā)現(xiàn) View 和 Model 都是符合這種原則的。在Controller層盡量寫不能夠復用的。

開發(fā)人員只要考慮和處理Model(數(shù)據(jù)模型)的變化即可，不用考慮Model和View之間的數(shù)據(jù)綁定同步，更不用花精力用大量的代碼獲取DOM元素改變DOM元素的值來完成界面數(shù)據(jù)的變化。所有工作交給VM(View-Model)來處理。

MVVM并沒有業(yè)務邏輯的控制器，它通過數(shù)據(jù)雙向綁定，實時更新View和Model層，當數(shù)據(jù)模型發(fā)生變化的時候，用戶界面(DOM)的內(nèi)容會即時更新。反之如果用戶操作導致某些DOM內(nèi)容變化(如input)，ViewModel也會即時的將Model數(shù)據(jù)模型更新。

數(shù)據(jù)雙向綁定，開發(fā)人員不用再把精力放在DOM的修改和更新，只要通過模板引擎將數(shù)據(jù)模型和用戶界面綁定，框架會實時同步雙方數(shù)據(jù)的變化。減輕了開發(fā)人員的負擔，也減少了DOM操作邏輯導致業(yè)務邏輯混亂的可能性。

調(diào)用 Backbone.history.start() 開始監(jiān)控 hashchange 事件并分配路由
View:視圖
Model:數(shù)據(jù)
Router:路由，由于Controller層主要負責了路由，而業(yè)務邏輯都在View中寫了。
backbone事件：訂閱發(fā)布者模式

Vue.js（讀音 /vju?/, 類似于 view） 是一套構建用戶界面的 漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發(fā)的設計。Vue 的核心庫只關注視圖層，并且非常容易學習，非常容易與其它庫或已有項目整合。另一方面，Vue 完全有能力驅(qū)動采用單文件組件和 Vue 生態(tài)系統(tǒng)支持的庫開發(fā)的復雜單頁應用。

Vue.js 的目標是通過盡可能簡單的 API 實現(xiàn)響應的數(shù)據(jù)綁定和組合的視圖組件。

Vue.js就是一個用于搭建類似于網(wǎng)頁版知乎這種表單項繁多，且內(nèi)容需要根據(jù)用戶的操作進行修改的網(wǎng)頁版應用。

vue 不支持IE8以下瀏覽器的原因？因為 Vue.js 使用了 IE8 不能模擬的 ECMAScript 5 特性

通過js對象。。。。。。。。。

beforeCreate

observe Data / init Events

組件實例被創(chuàng)建，組件屬性計算之前

應用：beforeCreate 給個loading加載界面

created

1.組件實例創(chuàng)建完成，屬性已經(jīng)綁定，但DOM還未生成，$el屬性還不存在

2.在實例創(chuàng)建之后同步調(diào)用。此時實例已經(jīng)結束解析選項，這意味著已建立：數(shù)據(jù)綁定，計算屬性，方法，watcher/事件回調(diào)。

3.但是還沒有開始 DOM 編譯，$el 還不存在,但是實例存在,即this.a存在,可打印出來 。

應用：created階段做一些初始化，實現(xiàn)函數(shù)自執(zhí)行，例如：created撤銷loading

el / template

beforeMounted

模板編譯、掛載之前

replace el

mounted

1.模板編譯、掛載之后不保證組件已在document中

2.在編譯結束后調(diào)用。此時所有的指令已生效，因而數(shù)據(jù)的變化將觸發(fā) DOM 更新。但是不擔保 $el 已插入文檔。

應用：mounted階段做ajax，或者配合路由鉤子做一些事情;此時DOM已經(jīng)獲取到，可以對DOM進行操作

data changed

beforeUpdated

1.數(shù)據(jù)更新時調(diào)用，發(fā)生在虛擬 DOM 重新渲染和打補丁之前。

2.你可以在這個鉤子中進一步地更改狀態(tài)，這不會觸發(fā)附加的重渲染過程。

3.該鉤子在服務器端渲染期間不被調(diào)用。

virtual dom re-render / patch

updated

由于數(shù)據(jù)更改導致的虛擬 DOM 重新渲染和打補丁，在這之后會調(diào)用該鉤子。當這個鉤子被調(diào)用時，組件 DOM 已經(jīng)更新，所以你現(xiàn)在可以執(zhí)行依賴于 DOM 的操作。

然而在大多數(shù)情況下，你應該避免在此期間更改狀態(tài)，因為這可能會導致更新無限循環(huán)。

vm.$destroyed

beforeDestroy

dsetroyed

還好發(fā)布檢查了一次，發(fā)現(xiàn)自己把自己亂七八糟說的都寫進來了。

剖析Vue實現(xiàn)原理 - 如何實現(xiàn)雙向綁定mvvm

這篇文章我覺還不錯，跟著自己寫一遍，就會比較了解了。所有才有我的亂七八糟之說。自己理解最重要。

1.實例MVVM對象時，會生成觀察者observe去觀察實例中的data的每一個屬性。

2.observe對象會遍歷每一個key、value。如果value也是對象，也會通過observe來觀察其中的key、value。

3.在每個observe對象中會創(chuàng)建一個訂閱者，然后再設置屬性的內(nèi)置get、set函數(shù)。

4.通過內(nèi)置get函數(shù)：在里面會給data的屬性添加訂閱者。

5.通過內(nèi)置set函數(shù)：會將value值更改，并且如果新的value值是object，那么則創(chuàng)建一個observe觀察者觀察它。最后會通知訂閱者。

6.compile主要做的事情是解析模板指令，將模板中的變量替換成數(shù)據(jù)，然后初始化渲染頁面視圖，并將每個指令對應的節(jié)點綁定更新函數(shù)，添加監(jiān)聽數(shù)據(jù)的訂閱者，一旦數(shù)據(jù)有變動，收到通知，更新視圖。

7.觀察者Watcher是observe與compile的橋梁，在解析vue的自定義指令時，會為每一個指令創(chuàng)建一個Watcher觀察者對象。watcher會將每個指令的當前狀態(tài)設定，并添加到每個data的訂閱者數(shù)組中，當data的數(shù)值發(fā)生改變時，會通知其綁定的訂閱者，觸發(fā)每一個訂閱者更新函數(shù)。

第一點：數(shù)據(jù)綁定使得 Bug 很難被調(diào)試。你看到界面異常了，有可能是你 View 的代碼有 Bug，也可能是 Model 的代碼有問題。數(shù)據(jù)綁定使得一個位置的 Bug 被快速傳遞到別的位置，要定位原始出問題的地方就變得不那么容易了。

第二點：對于過大的項目，數(shù)據(jù)綁定需要花費更多的內(nèi)存。

我們可以將同一函數(shù)定義為一個 method 而不是一個計算屬性。對于最終的結果，兩種方式確實是相同的。然而，不同的是計算屬性是基于它們的依賴進行緩存的。計算屬性只有在它的相關依賴發(fā)生改變時才會重新求值。這就意味著只要 message 還沒有發(fā)生改變，多次訪問 reversedMessage 計算屬性會立即返回之前的計算結果，而不必再次執(zhí)行函數(shù)。

僅是觀察變量的變化可以不用watch，直接用計算屬性
但是，當在數(shù)據(jù)發(fā)生變化時，你希望執(zhí)行開銷較大的操作時，用watch比較有用。
watch可以限制我們執(zhí)行的頻率，在最終結果前，可以設置中間狀態(tài)。計算屬性無法做到。

state:驅(qū)動應用的數(shù)據(jù)源

view:以聲明方式將state映射到視圖

action:響應在view上的用戶輸入導致的狀態(tài)變化。

當我們的應用遇到多個組件共享狀態(tài)時，單向數(shù)據(jù)流的簡潔性很容易被破壞：

多個視圖依賴于同一狀態(tài)。

來自不同視圖的行為需要變更同一狀態(tài)。

對于問題一，傳參的方法對于多層嵌套的組件將會非常繁瑣，并且對于兄弟組件間的狀態(tài)傳遞無能為力。對于問題二，我們經(jīng)常會采用父子組件直接引用或者通過事件來變更和同步狀態(tài)的多份拷貝。以上的這些模式非常脆弱，通常會導致無法維護的代碼。
把組件的共享狀態(tài)抽取出來，以一個全局單例模式管理。

Vuex 是一個專為Vue.js應用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應用的所有組件的狀態(tài)，并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化。

由于 Vuex 的狀態(tài)存儲是響應式的，從 store 實例中讀取狀態(tài)最簡單的方法就是在計算屬性中返回某個狀態(tài)

State:狀態(tài)

Getters：從State中派生出來的一些狀態(tài)

Mutations：更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation,不能直接調(diào)用，需要觸發(fā)store.commit(type,[payload])。mutation必須時同步函數(shù)。異步函數(shù)不能捕捉到改變的狀態(tài)

Actions：

Action 提交的是 mutation，而不是直接變更狀態(tài)

Action 可以包含任意異步操作。

Action 函數(shù)接受一個與 store 實例具有相同方法和屬性的 context 對象。

Action 通過 store.dispatch 方法觸發(fā)：store.dispatch("increment")

store.dispatch 可以處理被觸發(fā)的action的回調(diào)函數(shù)返回的Promise，并且store.dispatch仍舊返回Promise

Modules

由于使用單一狀態(tài)樹，應用的所有狀態(tài)會集中到一個比較大的對象。當應用變得非常復雜時，store 對象就有可能變得相當臃腫。

為了解決以上問題，Vuex 允許我們將 store 分割成模塊（module）。每個模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行同樣方式的分割

單頁面應用（Single Page Application）簡稱SPA，使用SPA構建的應用優(yōu)點有用戶體驗好、速度快，內(nèi)容的改變不需要重新加載整個頁面，避免了不必要的跳轉(zhuǎn)和重復渲染，從而相對減輕了服務器壓力，SPA在WEB移動端應用非常廣泛。

單頁應用路由
HTML5在History里增加了pushState方法，這個方法會將當前的url添加到歷史記錄中，然后修改當前url為新url。當然這個方法只會修改地址欄的Url顯示，但并不會發(fā)出任何請求。因此我們可以利用這個方法結合ajax實現(xiàn)單頁面應用SPA，就是PushState+Ajax，人稱Pjax。

location.hash更改了，頁面也不會變化 hashchange hash值的改變也會加入歷史記錄中
總的來說，基于Hash的路由，兼容性更好；基于History API的路由，更加直觀和正式。但是，有一點很大的區(qū)別是，基于Hash的路由不需要對服務器做改動，基于History API的路由需要對服務器做一些改造。

pushstate的使用方法：

history.pushState(state, title, url)

state: 可以放任意你想放的數(shù)據(jù)，它將附加到新url上，作為該頁面信息的一個補充。 該對象可在onpopstate事件中獲取，也可在history對象中獲取。
title: 顧名思義，就是document.title。
url: 新url，也就是你要顯示在地址欄上的url。

history.replaceState(state, title, url)

replaceState方法與pushState大同小異，區(qū)別只在于pushState會將當前url添加到歷史記錄，之后再修改url，而replaceState只是修改url，不添加歷史記錄。

window.onpopstate

一般來說，每當url變動時，popstate事件都會被觸發(fā)。因此，我們可以把它用作瀏覽器的前進后退事件。該事件有一個參數(shù)，就是上文pushState方法的第一個參數(shù)state。

Pjax能做什么
Pjax是一個優(yōu)秀的解決方案，它可以做：

可以在頁面切換間平滑過渡，增加Loading動畫。  
可以在各個頁面間傳遞數(shù)據(jù)，不依賴URL。  
可以選擇性的保留狀態(tài)，如音樂網(wǎng)站，切換頁面時不會停止播放歌曲。  
所有的標簽都可以用來跳轉(zhuǎn)，不僅僅是a標簽。  
避免了公共JS的反復執(zhí)行，減少了請求體積，節(jié)省流量，加快頁面響應速度。  
對SEO也不會有影響，對于不支持HTML5的瀏覽器以及搜索引擎爬蟲，則可以跳轉(zhuǎn)真實的頁面。  
支持瀏覽器前進和后退按鈕。

Pjax
ajax請求，通過html5pushState來修改歷史記錄，如果不支持html5則
重寫url
每次修改location的屬性（hash除外），頁面都會以新URL重新加載