01 js訂閱者模式和觀察者模式代碼(詳解如何模擬實現node中的Events模塊(通俗易懂版))

js 怎么理解js事件觀察者模式

觀察者模式主要應用于對象之間一對多的依賴關系，當一個對象發生改變時，多個對該對象有依賴的其他對象也會跟著做出相應改變，這就非常適合用觀察者模式來實現。使用觀察者模式可以根據需要增加或刪除對象，解決一對多對象間的耦合關系，使程序更易于擴展和維護。

基礎知識:

觀察者模式定義了對象間的一種一對多依賴關系，每當一個對象發生改變時，其相關依賴對象皆得到通知并被進行相應的改變。觀察者模式又叫做發布-訂閱模式。生活中有很多類似的關系，比如買粉絲買粉絲訂閱，多個讀者訂閱一個買粉絲買粉絲，一旦買粉絲有更新，多個讀者都會收到更新，而這種情況在應用程序中也非常常見，js綁定各種事件本質上就是觀察者模式的實現。

觀察者模式是一個非常有用的設計模式，它主要有兩個角色組成：

（1）目標對象：作為一對多關系中的一，可以用來管理觀察者的增加和刪除。

（2）觀察者對象：觀察目標對象，一旦目標發生改變則做出相應的反應。

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

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

自學方法：

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數據庫)

視頻教程：

網頁鏈接

網頁鏈接

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

下面哪些方法可以用作javascript異步模式的編程

javascript語言是單線程機制。所謂單線程就是按次序執行，執行完一個任務再執行下一個。

對于瀏覽器來說，也就是無法在渲染頁面的同時執行代碼。

單線程機制的優點在于實現起來較為簡單，運行環境相對簡單。缺點在于，如果中間有任務需要響應時間過長，經常會導致

頁面加載錯誤或者瀏覽器無響應的狀況。這就是所謂的逗同步模式地，程序執行順序與任務排列順序一致。對于瀏覽器來說，

同步模式效率較低，耗時長的任務都應該使用異步模式；而在服務器端，異步模式則是唯一的模式，如果采用同步模式個人認為

服務器很快就會出現12306在高峰期的表現。。。。

異步模式的四種方式：

1.回調函數callback

所謂回調函數，就是將函數作為參數傳到需要回調的函數內部再執行。

典型的例子就是發送ajax請求。例如：

$.ajax({

async: false,

cache: false,

dataType: 'json',

url: "url",

success: function(data) {

買粉絲nsole.log('success');

},

error: function(data) {

買粉絲nsole.log('error');

}

})

當發送ajax請求后，等待回應的過程不會堵塞程序運行，耗時的操作相當于延后執行。

回調函數的優點在于簡單，容易理解，但是可讀性較差，耦合度較高，不易于維護。

2.事件驅動

javascript可以稱之為是基于對象的語言，而基于對象的基本特征就是事件驅動（Event-Driven）。

事件驅動，指的是由鼠標和熱鍵的動作引發的一連串的程序操作。

例如，為頁面上的某個

$('#btn').onclick(function(){

買粉絲nsole.log('click button');

});

綁定事件相當于在元素上進行監聽，是否執行注冊的事件代碼取決于事件是否發生。

優點在于容易理解，一個元素上可以綁定多個事件，有利于實現模塊化；但是缺點在于稱為事件驅動的模型后，流程不清晰。

3.發布/訂閱

發布訂閱模式（publish-subscribe pattern）又稱為觀察者模式(Observer pattern)。

該模式中，有兩類對象：觀察者和目標對象。目標對象中存在著一份觀察者的列表，當目標對象

的狀態發生改變時，主動通知觀察者，從而建立一種發布/訂閱的關系。

jquery有相關的插件，在這不是重點不細說了。。。。回頭寫個實現貼上來

4.promise模式

promise對象是CommonJS工作組提供的一種規范，用于異步編程的統一接口。

promise對象通常實現一種then的方法，用來在注冊狀態發生改變時作為對應的回調函數。

promise模式在任何時刻都處于以下三種狀態之一：未完成（unfulfilled）、已完成（resolved）和拒絕（rejected）。以CommonJS

Promise/A

標準為例，promise對象上的then方法負責添加針對已完成和拒絕狀態下的處理函數。then方法會返回另一個promise對象，以便于形成promise管道，這種返回promise對象的方式能夠支持開發人員把異步操作串聯起來，如then(resolvedHandler,

rejectedHandler); 。resolvedHandler

回調函數在promise對象進入完成狀態時會觸發，并傳遞結果；rejectedHandler函數會在拒絕狀態下調用。

Jquery在1.5的版本中引入了一個新的概念叫Deferred，就是CommonJS promise A標準的一種衍生。可以在jQuery中創建

$.Deferref的對象。同時也對發送ajax請求以及數據類型有了新的修改，參考JQuery API。

除了以上四種，javascript中還可以利用各種函數模擬異步方式，更有詭異的諸如用同步調用異步的case

只能用team里同事形容java和javascript的一句話作為結尾：

逗寫java像在高速路上開車，寫javascript像在草原上開車地-------------以此來形容javascript這種無類型的語言有多自由

but，如果草原上都是坑。

Javascript如何實現接口？

在javascript中并沒有原生的創建或者實現接口的方式，或者判定一個類型是否實現了某個接口，我們只能利用js的靈活性的特點，模擬接口。

在javascript中實現接口有三種方式：注釋描述、屬性驗證、鴨子模型。

note：因為我看的是英文書，翻譯水平有限，不知道有些詞匯如何翻譯，大家只能領會精神了。

1. 注釋描述 （Describing Interfaces with Comments）

例子：

復制代碼 代碼如下:

/*

interface Composite {

function add(child);

function remove(child);

function getChild(index);

}

interface FormItem {

function save();

}

*/

var CompositeForm = function(id, method, action) { // implements Composite, FormItem

...

};

//Implement the Composite interface.

CompositeForm.prototype.add = functi

很赞哦!（44461）