03 js觀察者模式和發布訂閱(Javascript如何實現接口？)

行內容替換，替換為vm實例中的data中的內容

然后，在向碎片化文檔中添加節點時，每個節點都處理一下。

創建Vue的實例化函數

效果圖如下：

我們成功將內容都綁定到了輸入框與文本節點上！

4、實現任務2——【view => model

對于此任務，我們從輸入框考慮，輸入框的問題，輸入框如何改變data。我們通過事件監聽器keyup，input等，來獲取到最新的value，然后通過Object.defineProperty將獲取的最新的value，賦值給實例vm的text，我們把vm實例中的data下的text通過Object.defineProperty設置為訪問器屬性，這樣給vm.text賦值，就觸發了set。set函數的作用一個是更新data中的text，另一個等到任務三再說。

首先實現一個響應式監聽屬性的函數。一旦有賦新值就發生變化

然后，實現一個觀察者，對于一個實例 每一個屬性值都進行觀察。

改寫編譯函數，注意由于改成了訪問器屬性，訪問的方法也產生變化，同時添加了事件監聽器，把實例的text值隨時更新

實例函數中，觀察data中的所有屬性值，注意增添了observe

最終我們改變input中的內容能改變data中的數據，單頁面卻沒有刷新

4、實現任務3——【model => view】

通過修改vm實例的屬性 該改變輸入框的內容 與 文本節點的內容。

這里涉及到一個問題 需要我們注意，當我們修改輸入框，改變了vm實例的屬性，這是1對1的。

但是，我們可能在頁面中多處用到 data中的屬性，這是1對多的。也就是說，改變1個model的值可以改變多個view中的值。

這就需要我們引入一個新的知識點：

訂閱/發布者模式

訂閱發布模式（又稱觀察者模式）定義了一種一對多的關系，讓多個觀察者同時監聽某一個主題對象，這個主題對象的狀態發生改變時就會通知所有觀察者對象。

發布者發出通知 => 主題對象收到通知并推送給訂閱者 => 訂閱者執行相應操作

1

舉個例子：

之前提到的set函數的第二個作用 就是來提醒訂閱者 進行noticy操作，告訴他們：“我的text變了！” 文本節點變成了訂閱者，接到消息后，立馬進行update操作

回顧一下，每當 new 一個 Vue，主要做了兩件事：第一個是監聽數據：observe(data)，第二個是編譯 HTML：nodeToFragement(id)。

在監聽數據的過程中，我們會為 data 中的每一個屬性生成一個主題對象 dep。

在編譯 HTML 的過程中，會為每個與數據綁定相關的節點生成一個訂閱者 watcher，watcher 會將自己添加到相應屬性的 dep 容器中。

我們已經實現：修改輸入框內容 => 在事件回調函數中修改屬性值 => 觸發屬性的 set 方法。

接下來我們要實現的是：發出通知 dep.notify() => 觸發訂閱者的 update 方法 => 更新視圖。

這里的關鍵邏輯是：如何將 watcher 添加到關聯屬性的 dep 中。

注意： 我把直接賦值的操作改為了 添加一個 Watcher 訂閱者

那么，Watcher又該做些什么呢？

首先，將自己賦給了一個全局變量 Dep.target；

其次，執行了 update 方法，進而執行了 get 方法，get 的方法讀取了 vm 的訪問器屬性，從而觸發了訪問器屬性的 get 方法，get 方法中將該 watcher 添加到了對應訪問器屬性的 dep 中；

再次，獲取屬性的值，然后更新視圖。

最后，將 Dep.target 設為空。因為它是全局變量，也是 watcher 與 dep 關聯的唯一橋梁，任何時刻都必須保證 Dep.target 只有一個值。

最終我們就實現了這個雙向數據綁定功能，雖然很繁瑣，但我相信，你多打幾遍，一定會對你有所幫助，加油吧!!

小白準備轉行學習前端，有大神可以提一些建議嗎

學習是以興趣為前提的，你要對你所要學的內容產生興趣，這樣你才會花心思去學習。這和是不是小白沒關系的，對于小白而言，在學習過程中就需要更努力，多花時間和心思沒有什么是學不會的。

自學方法：

1、作為一個初學者，你必須明確系統的學習方案，我建議一定有一個指導的人，全靠自己學，放棄的幾率非常大，在你對于web前端還沒有任何概念的時候，需要一個人領進門，之后就都靠自己鉆研，第一步就是確定web前端都需要哪些內容，并且在多少時間內學完，建議時間6個月保底。

2、視頻為主，書為輔。很多初學者在學習前端的時候非常喜歡去買書，但是最后的結果是什么？看來看去什么都不會寫，所以在這里給大家提醒，書可以看，但是是在建立于你已經對于某個知識點有了具體操作的執行后，在用書去鞏固概念，這樣更加利于你對于知識的理解。

3、對于學習技術來講，掌握一個學習方法是非常重要的，其實對于學習web前端來講，學習方法確實很多都是相通的，一旦學習方法不對，可能就會造成“方法不對，努力白費”。其實關于這方面還是很多的，我就簡單說個例子，有的人邊聽課邊跟著敲代碼，這樣就不對，聽課的時候就專心聽，做題的時候就專心做題，這都是過來人的經驗，一定要聽。根據每個人的不同，可能學習方法也會有所出路，找到適合你自己的學習法方法是學習的前提。

4、不建議自己一個人瞎學，在我了解學習編程的這些人來看，從零基礎開始學并且最后成功做這份工作的其實并沒有幾個，我覺得大部分原因就是因為他們都不了解web前端是干什么的，學什么的，就盲目的買書看，到處找視頻看，最后看著看著就放棄了，所以我建議初學者在沒有具體概念之前，還是找有經驗的人請教一下，聊過之后你就會知道web前端具體是干什么的，該怎么學，這是我個人的小建議，可以不采納。

自學路線：

第1階段：前端頁面重構(4周)

內容包含了：(PC端網站布局項目、HTML5+CSS3基礎項目、WebApp頁面布局項目)

第2階段：JavaScript高級程序設計(5周)

內容包含：(原生JavaScript交互功能開發項目、面向對象進階與ES5/ES6應用項目、JavaScript工具庫自主研發項目)

第3階段：PC端全棧項目開發(3周)

內容包含：(jQuery經典交互特效開發、HTTP協議、Ajax進階與PHP/JAVA開發項目、前端工程化與模塊化應用項目、PC端網站開發項目、PC端管理信息系統前端開發項目)

第4階段：移動端項目開發(6周)

內容包含：(Touch端項目、買粉絲場景項目、應用Angular+Ionic開發WebApp項目、應用Vue.js開發WebApp項目、應用React.js開發WebApp項目)

第5階段：混合(Hybrid,ReactNative)開發(1周)

內容包含：(買粉絲小程序開發、ReactNative、各類混合應用開發)

第6階段：NodeJS全棧開發(1周)

內容包括：(WebApp后端系統開發、一、NodeJS基礎與NodeJS核心模塊二、Express三、noSQL數據庫)

視頻教程：

網頁鏈接

網頁鏈接

如果你對于學習前端有任何不懂的可以隨時來問我，如果沒有比較好的教程，也可以問我要。

很赞哦!（736）