2. 程式人生 > >node.js事件events詳解

node.js事件events詳解

阿新 • • 發佈：2018-12-18

nodejs基於事件驅動

事件釋出，事件訂閱

  • 大多數 Node.js 核心 API 構建於慣用的非同步事件驅動架構，其中某些型別的物件（又稱觸發器，Emitter）會觸發命名事件來呼叫函式（又稱監聽器，Listener）。同步函式，非同步觸發，通過回撥函式處理非同步。

例如，net.Server 會在每次有新連線時觸發事件，fs.ReadStream 會在檔案被開啟時觸發事件，stream會在資料可讀時觸發事件。

所有能觸發事件的物件都是 EventEmitter 類的例項。 這些物件有一個 eventEmitter.on() 函式，用於將一個或多個函式繫結到命名事件上。 事件的命名通常是駝峰式的字串。

當 EventEmitter 物件觸發一個事件時，所有繫結在該事件上的函式都會被同步地呼叫。

  • 這是node.js文件的一個例子： 我的程式碼下載index.js檔案裡，通過node index執行
const EventEmitter = require('events');

class MyEmitter extends EventEmitter {}

const myEmitter = new MyEmitter();
myEmitter.on('event', () => {
  console.log('觸發事件');
});
myEmitter.emit('event'
 
); //這個就會觸發myEmitter.on裡的回撥函式
  • 實際上這個例子不太好，我再處理一下：

放在以前，我們處理"非同步"都是這樣做的(需要的話會傳一些引數啥的)：

let fn = () => {
  console.log("資料結果的處理");
  
}
setTimeout(() => {
    console.log("得到資料");
    fn()
}, 2000);

在純的js裡，雖然可以達到預期目標，但是層層巢狀的函式實在是太讓人頭疼，為了減少這種麻煩，node.js的events的事件監聽就能很好的解決。

  • EventEmitter,釋出-訂閱模式：

const
 
 EventEmitter = require("events").EventEmitter
const myEmitter = new EventEmitter

let fn = () => {
    console.log("資料結果的處理");

}
//為了好看設定的定時*********
setTimeout(() => {
    console.log("1s");
}, 1000);
setTimeout(() => {
    console.log("1.5s");
}, 1500);
setTimeout(() => {
    console.log("2s");
}, 2000);
//************************
setTimeout(() => {
    console.log("2.5s 得到資料");
    myEmitter.emit("dataMake")
}, 2500);
myEmitter.on("dataMake",fn)

在這裡插入圖片描述

這樣，非同步觸發回撥函式將會變得更加好歸類、結構化。

用於物件

  • 讓物件繼承事件的EventEmitter的原型：
const EventEmitter = require("events").EventEmitter

function FnObj(params) {
    this.name = params;
}

FnObj.prototype.__proto__=EventEmitter.prototype

const obj = new FnObj("Lucy");
obj.on("ly",function() {
    console.log(this.name);
    //注意箭頭函式沒有this哦
})
setTimeout(() => {
    obj.emit("ly")
}, 2000);

在這裡插入圖片描述

這就是node.js的事件，釋出-訂閱模式

events使用進階

非同步執行的處理函式

雖然對函式的處理變得更加結構有序，但是非同步執行總會發生一些資料競爭的情況，誰也不知道什麼時候資料能被真正的準備好供非同步函式使用。

或許有人會說我的處理函式在資料得到返回的函式裡顯示呼叫呢？然後現實開發中並不一定完全按照你的想法來執行，很多網站的資料並不能僅通過一個表單獲取，也不一定保證兩個資料的先後結果，在兩個資料集合得到時間不一致或不能保證一致的情況下，非同步執行就是個問題。

所以，處理好函式執行順序則是至關重要的：

  • 第一步，搞清楚到底傳了什麼引數進去

傳引數和this到你的監聽器：

eventEmitter.emit() 方法可以傳任意數量的引數到監聽器函式。 當監聽器函式被呼叫時，this 關鍵詞會被指向監聽器所繫結的 EventEmitter 例項

不要用箭頭函式 不要用箭頭函式 不要用箭頭函式 重要的事情說三遍，箭頭函式沒有this，它根本指不到你的例項

const EventEmitter = require("events").EventEmitter

const myEmitter = new EventEmitter();
myEmitter.on('event', function (a, b) {
    console.log(a, b);
    console.log(this);
    console.log(this === myEmitter);
});
myEmitter.emit('event', '引數a', '引數b');

在這裡插入圖片描述

貼心的我又簡單優化了node文件的列印結果，更加易讀

但是如果有些人就是倔強，我就要寫箭頭函式，我牛逼：

const EventEmitter = require("events").EventEmitter

const myEmitter = new EventEmitter();
myEmitter.on('event',  (a, b)=> {
    console.log(a, b);
    console.log(this);
    console.log(this === myEmitter);
});
myEmitter.emit('event', '引數a', '引數b');

對比上一次的結果： 在這裡插入圖片描述

const EventEmitter = require("events").EventEmitter

const myEmitter = new EventEmitter();
myEmitter.on('event',  (a, b,othis)=> {
    console.log(a, b);
    console.log(othis);
    console.log(othis === myEmitter);
});
myEmitter.emit('event', '引數a', '引數b', myEmitter);

非要用箭頭函式，但是這樣不很麻煩嗎？ 在這裡插入圖片描述

同步還是非同步，無所謂

  • 加上引數傳遞，一切都不是障礙了：
const EventEmitter = require("events").EventEmitter

const myEmitter = new EventEmitter();
let data = {}

myEmitter.on('event', function (data) {
    setImmediate(() => {
    	//假如這裡有個數據結構化、圖形化的處理函式
        console.log('非同步進行結果處理');
        console.log(data.name, data.age, data.height,data.sex);
    });
});
myEmitter.emit('event', data); //雖然我立馬就準備觸發資料處理函式

process.nextTick(() => {
    console.log("同步的程式碼去獲取到了資料")
    data.name = "小芳";
    data.age = "18"
} )
process.nextTick(() => {
    console.log("同步的程式碼去獲取到了資料")
    data.height = "1米8"
})
Promise.resolve("女").then(res => {
    console.log("非同步的then函式也去拿了一下資料")
    data.sex = res
})

即便我先於獲取資料的函式呼叫了資料處理的函式，但是結合同步非同步函式，資料處理得到了最後的保障：

在這裡插入圖片描述

也有人可能會問，你這資料暴露在全域性這樣做有意義嗎？

回答：這裡是為了呼叫方便，你完全可以將資料請求封裝起來，讓他們在區域性執行，並將事件觸發也放在區域性作用域裡，引數傳遞只是事件釋出函式的基本功能，合理使用效果更佳！

監聽事件的行為

  • 監聽事件的建立：
const EventEmitter = require("events").EventEmitter
const myEmitter = new EventEmitter();

myEmitter.on('newListener',function() {
    console.log('有事件創建出來');
})
myEmitter.on('event', function () {
    console.log('事件處理函式呼叫');
});
// myEmitter.emit('event')
//列印：有事件創建出來

如果我重新開啟事件觸發，那麼結果是這樣 在這裡插入圖片描述

  • 事件解綁：
const EventEmitter = require("events").EventEmitter
const myEmitter = new EventEmitter();

function fn() {
    console.log('事件處理函式呼叫');
}
myEmitter.on('newListener',function() {
    console.log('有事件創建出來');
})
myEmitter.on('event', fn);
myEmitter.emit('event')
myEmitter.off('event', fn);
myEmitter.emit('event')
myEmitter.emit('event')
myEmitter.emit('event')

在這裡插入圖片描述

事件解綁是將回調函式與監聽的事件分離，如果想上面一樣直接把回撥函式寫在事件繫結函式裡是無法解綁，下面是錯誤的示範： 在這裡插入圖片描述

在這裡插入圖片描述

  • 監聽事件的解綁：
const EventEmitter = require("events").EventEmitter
const myEmitter = new EventEmitter();

function fn() {
    console.log('事件處理函式呼叫');
}
myEmitter.on('newListener',function() {
    console.log('有事件創建出來');
})
myEmitter.on('removeListener', function () {
    console.log('有事件被解綁');
})
myEmitter.on('event', fn);
myEmitter.emit('event')
myEmitter.off('event', fn);
myEmitter.emit('event')
myEmitter.emit('event')
myEmitter.emit('event')

在這裡插入圖片描述

  • 或者只讓事件執行一次：
const EventEmitter = require("events").EventEmitter
const myEmitter = new EventEmitter();

function fn() {
    console.log('事件處理函式呼叫');
}
myEmitter.on('newListener',function() {
    console.log('有事件被建立1');
})
myEmitter.on('newListener',function() {
    console.log('有事件被建立2');
})
myEmitter.on('removeListener', function () {
    console.log('有事件被解綁');
})
myEmitter.once('event', fn);
console.log('1111111111111111111111');
myEmitter.emit('event')
console.log('2222222222222222222222');
myEmitter.emit('event')
myEmitter.emit('event')
myEmitter.emit('event')

在這裡插入圖片描述

兩個事件監聽器弄清楚流程： 事件新增監聽器1被建立，但是當時沒有監聽事件建立的監聽器； 事件新增監聽器2被建立，觸發了事件建立監聽器1，列印：事件被建立1； 事件移除監聽器被建立，觸發事件建立監聽器1，2，列印：事件被建立1，事件被建立2； 事件’event’建立一次性事件，觸發事件建立監聽器1,2，列印：事件被建立1，事件被建立2； log列印：11111111111111111； emit觸發事件event，觸發解綁事件監聽器，處理事件佇列裡的event事件， 列印：有事件被解綁，事件處理函式被呼叫； log列印：22222222222222222； 由於事件event被解綁，無法被呼叫，後面沒有列印結果。。。

這裡需要注意的就是，nodejs裡的事件佇列的事件是在監聽建立觸發後再執行事件的觸發

相關推薦

node.js事件events詳解

nodejs基於事件驅動 事件釋出，事件訂閱 大多數 Node.js 核心 API 構建於慣用的非同步事件驅動架構，其中某些型別的物件（又稱觸發器，Emitter）會觸發命名事件來呼叫函式（又稱監聽器，Listener）。同步函式，非同步觸發，通過回撥函式處理

js 事件模型詳解

捕獲 dom0 dde html true 一個 lse 之前 {} 　　把js的事件模型，分為兩類，DOM0級和DOM2級， 　　DOM0級 通常直接在DOM對象上綁定函數對象，指定事件類型，dom.onClick = function(){};類似於這種寫法，移除事件，

Node.js Log4js使用詳解

log4js-node是log4js的Node.js版本。 log4js-node的使用比較簡單，以下內容主要部分來自官方文件。 https://github.com/log4js-node/log4js-node Installation npm install log

JS事件迴圈詳解

本文講什麼? 伴隨著JavaScript這種web瀏覽器指令碼語言的普及，對它的事件驅動互動模型，以及它與Ruby、Python和Java中常見的請求-響應模型的區別有一個基本瞭解，對您是有益的。在這篇文章中，我將解釋一些JavaScript併發模型的核心概念

node.js http請求詳解和配置服務目錄

Node.js開發的目的就是為了用JavaScript編寫Web伺服器程式。因為JavaScript實際上已經統治了瀏覽器端的指令碼，其優勢就是有世界上數量最多的前端開發人員。如果已經掌握了JavaScript前端開發，再學習一下如何將JavaScript應用在後端開發，就是名副其實的全棧了。 HTTP

Node.js websocket/ws 詳解

前言 眾所周知，HTTP協議是一種無狀態、無連線、單向的應用層協議，只能由客戶端發起請求，服務端響應請求。 這就顯示了一個明顯的弊端：服務端無法主動向客戶端發起訊息，一旦客戶端需要知道服務端的頻繁狀態變化，就要由客戶端盲目地多次請求以獲得最新地狀態，這

【轉】js中的事件委托或是事件代理詳解

ava 程序 fff 員工 我們 cnblogs 上傳 on() 類型 起因： 1、這是前端面試的經典題型，要去找工作的小夥伴看看還是有幫助的； 2、其實我一直都沒弄明白，寫這個一是為了備忘，二是給其他的知其然不知其所以然的小夥伴們以參考； 概述： 那什麽叫

js中的事件委托或是事件代理詳解

這不 ack 說明 同事 input || 內存 一起 占用率 概述： 那什麽叫事件委托呢？它還有一個名字叫事件代理，JavaScript高級程序設計上講：事件委托就是利用事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。那這是什麽意思呢？網上的各位大牛們講事

[js點滴知識(轉)]事件冒泡詳解

冒泡型事件的基本思想是、事件按照從最特定的事件目標到最不特定的事件目標(document物件)的順序觸發。 <html> <head> <title></title> </

js中的事件委託或是事件代理詳解

起因： 1、這是前端面試的經典題型，要去找工作的小夥伴看看還是有幫助的； 2、其實我一直都沒弄明白，寫這個一是為了備忘，二是給其他的知其然不知其所以然的小夥伴們以參考； 概述： 那什麼叫事件委託呢？它還有一個名字叫事件代理，JavaScript高階程式設計上講：事件委託就是利用事件冒泡，只指定一個事件

nodejs---關於真正理解Node.js事件迴圈你需要了解的一切

Node.js是一個基於事件的平臺。這意味著Node中發生的任何事情都是對於事件的響應。傳入Node的資料處理要經歷一層層巢狀的回撥。這一流程相對於開發者被抽象出來，由一個叫做libuv的庫處理，就是libuv為我們提供了事件迴圈機制。事件迴圈也許是Node中最容易被誤解的概

JS中JSON詳解

名稱 完全 rip json詳解 core 兼容 json字符串 之間 org JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式，采用完全獨立於語言的文本格式，是理想的數據交換格式。同時，JSON是 JavaScript 原生格式

node.js零基礎詳細教程(4)：node.js事件機制、node異步IO操作

nod server nbsp node i++ 兩個 con 錯誤 定時器 第四章 建議學習時間3小時 課程共10章 學習方式：詳細閱讀，並手動實現相關代碼 學習目標：此教程將教會大家 安裝Node、搭建服務器、express、mysql、mongodb、編寫後臺業務邏

Node.js 事件循環

並且 循環 用戶 綁定 sta pri 應用 tac 調用 Node.js 事件循環 Node.js 是單進程單線程應用程序，但是通過事件和回調支持並發，所以性能非常高。 Node.js 的每一個 API 都是異步的，並作為一個獨立線程運行，使用異步函數調用，並處理並發

Node.js事件

node med event req nod eve js事件 highlight nds const EventEmitter = require(‘events‘); class MyEmitter extends EventEmitter {} const mye

緩沖加載圖片的 jQuery 插件 lazyload.js 使用方法詳解

java ajax jpg ide javascrip ava ade src doc 在寫代碼的時候，經常會用到懶加載的模式，以前是通過window.onload的模式去加載，但是圖片很多或者用ajax請求的時候，就會很麻煩，現在用lazyload的模式加載方便很多

微信小程序 WXML、WXSS 和JS介紹及詳解

名單 獲取 hang href 直接 last 1.2 data sub 前幾天折騰了下。然後列出一些實驗結果，供大家參考。 百牛信息技術bainiu.ltd整理發布於博客園 0. 使用開發工具模擬的和真機差異還是比較大的。也建議大家還是真機調試比較靠譜。 1. WXML(

JS——正則詳解

序列 屬性 小寫 無效 表示 代碼 split方法 while循環 混淆 　　1.正則匹配規則字面量字符串匹配元字符:點字符（.） 匹配 除回車（\r）、換行(\n) 、行分隔符（\u2028）和段分隔符（\u2029）以外的所有字符。　　　　位置字符（^ / $） ^/$

【重點突破】——第三方繪圖工具FusionCharts.js的使用詳解

統計圖表 使用詳解 body 選擇 ons sessions chart 項目組 線圖 一、引言 項目組中，經常會因為繪制圖表的繁雜度，衡量會不會使用第三方繪圖工具，如果自己做很困難，成本使用高於第三方繪圖工具庫，就會使用。很多人使用的是Chart.js，因為它是免費使用的

Rythm.js 使用教程詳解

class logs 並且 strong pan 顏色 href -c col 轉載自 http://blog.csdn.net/qq_26536483/article/details/78261515 簡介 rythm.js是一款讓頁面元素跳動起來的插件，並且帶音