JS와 Nodejs의 이벤트 구동에 대한 간단한 설명

6033 단어 JS이벤트 구동nodejs

이벤트 구동 및 게시 - 구독


이벤트 구동 구조는 소프트웨어 개발에서 일종의 유니버설 모델에 세워진 것으로 이런 모델은 발표-구독 또는 관찰자 모델이라고 불린다.
이벤트 드라이브 구조에는 최소한 두 명의 참여자가 있습니다. 테마 (subject) 와 관찰자 (observer) 입니다.
주제는 주파수 변조 라디오처럼 이 주제의 내용을 듣고 싶은 관찰자에게 방송된다.
관찰자는 하나일 수도 있고 100개일 수도 있다. 이것은 상관없다. 주제에 방송할 소식이 있으면 충분하다.
이벤트 구동, 발표 - 구독과 관찰자 모델은 실천에서 하나의 것이 아니지만 이상적인 상황에서 그들은 같은 방법을 사용한다. 하나의 실체가 하나의 메시지를 방송하고 다른 실체가 이 소식을 정탐하는 것이다.
게시-구독 모드는 나처럼 오래되었다.1987년경에 이론화되기 시작했고 관찰자 모델은 1994년에'4인방'이 쓴 저서인 에 등장했다.

이벤트 드라이브는 브라우저의 JavaScript에서 어떻게 사용됩니까?


엔진을 사용하면 브라우저에서 JavaScript를 실행할 수 있습니다.
가장 인기 있는 JavaScript 엔진은 Google Chrome과 Node입니다.js에서 사용하는 V8, Firefox의 SpiderMonkey와 Safari/WebKit에서 사용하는 JavaScriptCore.
풍부한 환경을 바탕으로 자바스크립트 엔진은 언어를 강화하고 이벤트 구동의 자바스크립트 플랫폼을 제공한다.
실제로 브라우저의 자바스크립트는 html 요소와 상호작용을 할 수 있는데 이런 html 요소는 이벤트 전송기(eventemitters), 즉 이벤트를 보낼 수 있는 대상이다.
버튼이 있는 HTML 문서의 간단한 예를 생각해 보십시오.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>What means "event-driven" in JavaScript?</title>
</head>
<body>
<div>
    <button id="subscribe">SUBSCRIBE</button>
</div>
</body>
</html>
자바스크립트가 없으면 이 단추는 생명이 없습니다.현재 HTML 버튼은 HTML Button Element 유형의 요소이며 모든 HTML 요소와 마찬가지로 EventTarget - 모든 HTML 요소의 공통 조상에 연결됩니다.
브라우저의 이벤트 목표는 이벤트를 보낼 수 있는 대상입니다. 이것은 관찰자 모드의 주제입니다.
좀 혼란스러워요?기억하세요: 주제는 FM 라디오이기 때문에 어떤 HTML 요소도 광방송국과 같습니다.
이따가 너는 누가 관찰자인지 보게 될 것이다.

브라우저의 주제 및 관찰자


HTML 요소가 주제라면 관찰자는 누구입니까?탐색기로 등록된 모든 JavaScript 함수는 브라우저의 이벤트에 반응할 수 있습니다.
JavaScript를 사용하여 HTML 요소를 선택합니다.

const btn = document.getElementById('subscribe');
addEventListener를 사용하여 탐지기를 등록합니다.

const btn = document.getElementById('subscribe');
btn.addEventListener("click", function () {
    console.log("Button clicked");
});
여기의'click'은 사건입니다. 단추는 주제이거나 송신기이고, 함수는 탐지기이거나 관찰자입니다.
돌아보기:
HTML 요소는 이벤트 송신기입니다.
JavaScript에서 탐지기로 등록된 함수는 관찰자입니다.
이 모든 구성 요소는 "작은 이벤트 구동 아키텍처로 구성되어 있습니다. 코드를 테스트하려면 아래 HTML 내용을 파일에 저장하거나 Codepen에서 시도하십시오.) 단추를 누르고 브라우저 콘솔을 보십시오.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>What means "event-driven" in JavaScript?</title>
</head>
<body>
<div>
    <button id="subscribe">SUBSCRIBE</button>
</div>
</body>
<script>
    const btn = document.getElementById('subscribe');
    btn.addEventListener("click", function () {
        console.log("Button clicked");
    });
</script>
</html>
다음 부분에서 Node에 사용되는 것을 볼 수 있습니다.js의 동일한 개념.

이벤트 드라이브가 Node에 사용되는 방법입니다.js？


Node.js는 브라우저 외부(명령줄 도구 및 서버)에서 실행되는 V8 엔진 기반의 JavaScript 환경입니다.
너는 노드에 있다.js에서 하는 대부분의 업무는 사건에 기초한 것이다.언젠가는 송신기 대상이 있을 것이고, 일부 관찰자들은 소식을 감청하고 있을 것이다.
노드에서.js에는 HTML 요소가 없기 때문에 대부분의 이벤트는 프로세스, 네트워크와의 상호작용, 파일 등에서 나온다.
Node.js의 모든 이벤트 송신기에는 on이라는 방법이 있습니다. 이 방법은 적어도 두 개의 매개 변수가 필요합니다.
  • 수사할 사건의 이름
  • 감청기 함수
    • 우리들은 실제적인 예를 하나 들자.이 간단한 노드를 보세요.js 서버:
    
const net = require("net");
const server = net.createServer().listen(8081, "127.0.0.1");
server.on("listening", function () {
  console.log("Server listening!");
});
server.on("connection", function (socket) {
  console.log("Client connected!");
  socket.end("Hello client!");
});
    이 코드는 로컬 호스트 포트 8081을 감청하는 서버를 만들었다.서버 대상에서, 우리는 온 방법을 호출하여 두 개의 탐지기 함수를 등록합니다.
    서버가 시작되면 바로 listening 이벤트를 터치하고 클라이언트가 127.0.1:8081에 연결되면 연결 이벤트를 터치합니다.
    이 예시에서 서버는 이벤트 송신기, 테마입니다.다른 한편, 탐지기 함수는 관찰자다.
    그런데 그 온 방법은 어디서 났지?

    EventEmitter 이해


    Node.js의 모든 이벤트 드라이브 모듈은 EventEmitter라는 루트 클래스를 확장합니다.이전의 예에서 net 모듈에서 온 네트워크 서버는 Event Emitter를 사용했다.
    Node.js의 EventEmitter에는 두 가지 기본 방법이 있습니다. on과 emit입니다.
    브라우저에 대응하려면 EventEmitter를 이벤트를 보낼 수 있는 모든 HTML 요소로 볼 수 있습니다.
    브라우저에서 이벤트를 탐색하려면 주제 객체에서 addEventListener를 호출합니다.
    
const btn = document.getElementById('subscribe');
btn.addEventListener("click", function () {
    console.log("Button clicked");
});
    반대로, 노드에서.js에는 on이 있습니다.
    
// omit
server.on("listening", () => {
  console.log("Server listening!");
});
// omit
    정확히 말하면 Eve nt Emitter에는 addListener 방법이 하나 더 있습니다.on은 그것의 별명이다.
    EventEmitter는 사용자 정의 이벤트 (메시지) 를 방송할 때 유용한 emit 방법이 하나 더 있습니다.
    EventEmitter를 사용하려면 Events 모듈에서 이벤트 가져오기 및 보내기:
    
const EventEmitter = require("events");
const emitter = new EventEmitter();
emitter.on("customEvent", () => console.log("Got event!"));
emitter.emit("customEvent");
    노드로.js 실행 코드, 콘솔에서 "Got event"를 볼 수 있습니다.

    JavaScript의 관찰자/게시 - 구독에 대한 추가 예


    JavaScript는 관찰자 객체에 대한 원본 지원이 없지만 언어에 추가하는 것이 좋습니다.
    RxJS는 관찰자 모드를 JavaScript에 도입하는 라이브러리입니다.
    Redux는 JavaScript에서 게시 - 구독 모드를 구현합니다.이것은 매우 좋은 사건 송신기로, 그 중의 상태 변경은 모든 감청 관찰자에게 분배될 것이다.
    현대 브라우저는 Intersection Observer API를 포함하는데 이것은 관찰자 모델의 또 다른 예이다.
    Socket.IO는 이벤트를 많이 사용하는 라이브러리입니다.

    총결산


    네가 이 문장에서 새로운 것을 배웠으면 좋겠다.너는 많은 용어를 배웠지만, 결국은 약 30년 전에 발명한 모델인 발표-구독으로 귀결된다.
    이런 모델은 관찰자라고도 하는데 우리가 오늘 자바스크립트와 노드에 있는 것이다.js에서 사용하는 이벤트 구동 구조의 기초입니다.
    다시 한 번 강조하지만 이벤트 구동, 발표-구독과 관찰자의 모델은 완전히 같지 않다. 이벤트 구동의 체계 구조는 발표-구독 위에 세워지고 관찰자 모델은 DOM과 Node보다 높다.js 사건이 더욱 풍부하다.
    그러나 그들은 모두 같은 가정의 구성원에 속한다.
    이상은 JS와 Nodejs의 이벤트 드라이브에 대한 상세한 내용입니다. JS와 Nodejs의 이벤트 드라이브에 대한 더 많은 자료는 저희 다른 관련 글을 주목해 주십시오!
    영속성 컨텍스트(Entity LifeCycle)
    격자판 최대합

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage