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

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

本文是在自己總結(jié)時(shí)，看了許多篇文章有了些體會(huì)，然后把我認(rèn)為有意義的摘抄下來(lái)，文中很大部分摘錄以上參考的文章，再結(jié)合一點(diǎn)點(diǎn)自己的觀點(diǎn)，總的來(lái)說(shuō)這篇文章是一個(gè)匯總文。

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

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

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

由于前端功能的增強(qiáng)、代碼的膨脹，導(dǎo)致不得不做“前端的架構(gòu)”這個(gè)事情了。

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

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

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

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

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

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

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

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

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

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

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

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

Vue.js 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。

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

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

通過(guò)js對(duì)象。。。。。。。。。

beforeCreate

observe Data / init Events

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

應(yīng)用：beforeCreate 給個(gè)loading加載界面

created

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

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

3.但是還沒(méi)有開(kāi)始 DOM 編譯，$el 還不存在,但是實(shí)例存在,即this.a存在,可打印出來(lái) 。

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

el / template

beforeMounted

模板編譯、掛載之前

replace el

mounted

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

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

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

data changed

beforeUpdated

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

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

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

virtual dom re-render / patch

updated

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

然而在大多數(shù)情況下，你應(yīng)該避免在此期間更改狀態(tài)，因?yàn)檫@可能會(huì)導(dǎo)致更新無(wú)限循環(huán)。

vm.$destroyed

beforeDestroy

dsetroyed

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

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

這篇文章我覺(jué)還不錯(cuò)，跟著自己寫一遍，就會(huì)比較了解了。所有才有我的亂七八糟之說(shuō)。自己理解最重要。

1.實(shí)例MVVM對(duì)象時(shí)，會(huì)生成觀察者observe去觀察實(shí)例中的data的每一個(gè)屬性。

2.observe對(duì)象會(huì)遍歷每一個(gè)key、value。如果value也是對(duì)象，也會(huì)通過(guò)observe來(lái)觀察其中的key、value。

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

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

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

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

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

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

第二點(diǎn)：對(duì)于過(guò)大的項(xiàng)目，數(shù)據(jù)綁定需要花費(fèi)更多的內(nèi)存。

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

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

state:驅(qū)動(dòng)應(yīng)用的數(shù)據(jù)源

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

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

當(dāng)我們的應(yīng)用遇到多個(gè)組件共享狀態(tài)時(shí)，單向數(shù)據(jù)流的簡(jiǎn)潔性很容易被破壞：

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

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

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

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

由于 Vuex 的狀態(tài)存儲(chǔ)是響應(yīng)式的，從 store 實(shí)例中讀取狀態(tài)最簡(jiǎn)單的方法就是在計(jì)算屬性中返回某個(gè)狀態(tài)

State:狀態(tài)

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

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

Actions：

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

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

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

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

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

Modules

由于使用單一狀態(tài)樹(shù)，應(yīng)用的所有狀態(tài)會(huì)集中到一個(gè)比較大的對(duì)象。當(dāng)應(yīng)用變得非常復(fù)雜時(shí)，store 對(duì)象就有可能變得相當(dāng)臃腫。

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

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

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

location.hash更改了，頁(yè)面也不會(huì)變化 hashchange hash值的改變也會(huì)加入歷史記錄中
總的來(lái)說(shuō)，基于Hash的路由，兼容性更好；基于History API的路由，更加直觀和正式。但是，有一點(diǎn)很大的區(qū)別是，基于Hash的路由不需要對(duì)服務(wù)器做改動(dòng)，基于History API的路由需要對(duì)服務(wù)器做一些改造。

pushstate的使用方法：

history.pushState(state, title, url)

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

history.replaceState(state, title, url)

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

window.onpopstate

一般來(lái)說(shuō)，每當(dāng)url變動(dòng)時(shí)，popstate事件都會(huì)被觸發(fā)。因此，我們可以把它用作瀏覽器的前進(jìn)后退事件。該事件有一個(gè)參數(shù)，就是上文pushState方法的第一個(gè)參數(shù)state。

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

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

Pjax
ajax請(qǐng)求，通過(guò)html5pushState來(lái)修改歷史記錄，如果不支持html5則
重寫url
每次修改location的屬性（hash除外），頁(yè)面都會(huì)以新URL重新加載