Node.js---0三、node.js 的事件（僅四行關鍵代碼）以及應用實例

時間 2019-11-07

標籤 node.js node 事件四行關鍵代碼以及應用實例欄目 Node.js 简体版

原文原文鏈接

1、自定義事件的基本步驟javascript

一、加載 events 事件對象（const EventEmitter = require('events')）；html

二、建立事件存儲容器（let emitter = new EventEmitter( )）；java

三、註冊綁定事件（emitter.on( ) 方法）；node

四、觸發事件（emitter.emit( ) 方法，發射器）express

2、具體說明瀏覽器

全部能觸發事件的對象都是 EventEmitter 類的實例服務器
是Node.js 核心 ==> 不少定義好的事件，經過事件觸發的方式完成JS 代碼的執行函數
Node.js 的事件機制 ==> 事件環post
事件環：事件在註冊後，不停的觸發，會讓事件表如今執行結果的循環過程當中，這個過程咱們叫作事件環（一直循環，等待觸發，觸發後繼續等待下次觸發）學習

代碼實現：

// 加載 events 事件對象
const EventEmitter = require('events');

// 建立事件存儲容器
let emitter = new EventEmitter();

// 自定義的事件 能夠在 emitter 對象中 進行註冊綁定。emitter.on() 綁定自定義事件

emitter.on("myClick",function(aa,bb){//"myClick"自定義事件名,自定義function()觸發事件時執行的函數
    console.log("自定義事件myClick");
    console.log(aa,bb);
});

// 觸發事件 emitter.emit(eventName)
emitter.emit("myClick","參數1","參數2");//"myClick"前文提到的自定義文件名，兩個參數也是前文自定義function的參數

運行結果：

3、拓展案例

綜合http服務搭建，實現監聽瀏覽器地址欄（如：http://127.0.0.1:3000/showLogin，跳轉到顯示登陸界面；http://127.0.0.1:3000/showRegister 界面等）（若是對http服務器搭建不太清楚，能夠看以前博客《 Node.js---0一、初識NodeJS和Node.js的HTTP服務器搭建》）

具體代碼以下：

const http = require("http");
const EventEmitter = require('events');
const emitter = new EventEmitter();

// 定義登陸頁面
emitter.on("/showLogin",function(req,res){
    console.log("showLogin 頁面");
    res.writeHead(200,{
		"Content-Type":"text/html;charset=utf-8"
	});
    res.write('<!DOCTYPE html>');
	res.write('<html lang="en">');
	res.write('<head>');
	res.write('	<meta charset="UTF-8">');
	res.write('	<title>Document</title>');
	res.write('</head>');
	res.write('<body>');
	res.write('	<form action="/doLogin" method="post">');
	res.write('		<table border="1">');
	res.write('			<tr>');
	res.write('				<td>用戶名：</td>');
	res.write('				<td><input type="text" name="username"></td>');
	res.write('			</tr>');
	res.write('			<tr>');
	res.write('				<td>密碼</td>');
	res.write('				<td><input type="password" name="password"></td>');
	res.write('			</tr>');
	res.write('			<tr>');
	res.write('				<td colspan="2">');
	res.write('					<input type="submit" value="登錄">');
	res.write('				</td>');
	res.write('			</tr>');
	res.write('		</table>');
	res.write('	</form>');
	res.write('</body>');
	res.write('</html>');

    res.end();
});
emitter.on("/doLogin",function(req,res){
    console.log("登陸完成");
    res.writeHead(200,{
		"Content-Type":"text/html;charset=utf-8"
	});
    res.write("<h1>登陸完成</h1>")
    res.end();
});
emitter.on("/showRegister",function(req,res){
    console.log(" 註冊頁面");
    res.writeHead(200,{
		"Content-Type":"text/html;charset=utf-8"
	});
    res.write("<h1>顯示註冊頁面</h1>")
    res.end();
});
emitter.on("/doRegister",function(req,res){
    console.log("註冊");
    res.writeHead(200,{
		"Content-Type":"text/html;charset=utf-8"
	});
    res.write("<h1>註冊完成</h1>")
    res.end();
});

const server = http.createServer(function(request,response){
    // console.log(request.url);
    let path = request.url;

    emitter.emit(path,request,response);
});

server.listen(3000,function(){
    console.log("正在監聽3000端口");
});

執行結果以下：

1. 執行程序：控制檯顯示開始監聽

2. 在瀏覽器中輸入 http://127.0.0.1:3000/showLogin，控制檯提示showLogin頁面，瀏覽器顯示登陸頁面

點擊登陸按鈕進入登陸成功頁面（注意form表單中action的地址）

3. 在瀏覽器中輸入 http://127.0.0.1:3000/showRegister，顯示相應的頁面

本實例到此基本結束。我我的以爲，這種方法和Java開發中的 Struts 2 的方法很類似。

此外，經過登陸也面的HTML代碼咱們發現，這樣一行一行寫響應代碼太過 不舒服 。能不能直接引入HTML文件呢？

答案是確定的，一種方法是下一篇博文咱們繼續學習node.js 對文件的操做(不建議)，第二種方法express的路由功能（後面會再講）。