JavaScript 및 Node에서 이벤트 구동은 어떤 의미입니까?js?

13338 단어 nodebeginnersjavascript
"Event Drive"는 JavaScript 부터 시작됩니다.걱정하지 말고 더 많은 것을 알기 위해 계속 읽어라!

이벤트 구동 및 게시 - 구독


이벤트 구동 구조는 소프트웨어 개발에서 흔히 볼 수 있는 모델, 즉 발표-구독 또는 관찰자 모델을 바탕으로 한다.
이벤트 구동 구조에서 적어도 두 명의 참여자가 있는데 그것이 바로 주체와 관찰자이다.
이 주제는 주파수 변조 라디오와 같아서, 그 주제가 말하는 내용을 흥미롭게 듣는 관찰자에게 소식을 방송한다.

단지 한 명 혹은 백 명의 관찰자만이 주제에 대해 방송할 정보가 있다면 이것은 중요하지 않다.
이벤트 구동, 발표 - 구독과 관찰자 모델은 실천에서 같지 않지만 이상적인 상황에서 그들은 같은 방법을 사용한다. 하나는 실체 방송 메시지이고 다른 하나는 실체 정탐 메시지이다.
게시-구독 모드는 나처럼 오래되었다.그것은 1987년에 이론화되었고 관찰자 모델은 1994년 4인방의 고전 저서인 에 등장했다.

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


엔진 덕분에 브라우저에서 JavaScript를 실행할 수 있습니다.
가장 유행하는 JavaScript 엔진은 V8로 Google Chrome과 Node가 사용합니다.js, Firefox의 SpiderMonkey와 JavaScriptCore는 Safari/WebKit에서 사용됩니다.
자바스크립트 엔진은 풍부한 환경을 제공함으로써 언어를 강화하고 자바스크립트에 이벤트 구동 플랫폼을 제공한다.
실제로 브라우저의 JavaScript는 HTML 요소와 상호작용할 수 있으며 HTML 요소는 이벤트 발사기이며 이벤트를 보낼 수 있는 주체이다.
버튼이 있는 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>
JavaScript가 없으면 버튼에 생명이 없습니다.현재 HTML 단추는 HTML Buttone Element 유형의 요소로 모든 HTML 요소와 마찬가지로 모든 HTML 요소의 공통 조상인 EventTarget에 연결됩니다.
브라우저의 이벤트 목표는 이벤트를 보낼 수 있는 대상입니다. 이것은 관찰자 모드의 주체입니다.
좀 곤혹스러워요?기억하세요: 주제는 주파수 변조 라디오이기 때문에 모든 HTML 요소는 방송과 같습니다.
이따가 관찰자가 누군지 보게 될 거야.

브라우저의 주제 및 관찰자


HTML 요소가 주제인 경우 관찰자는 누구입니까?탐색기로 등록된 모든 JavaScript 함수는 브라우저의 이벤트에 반응할 수 있습니다.
JavaScript를 사용하여 HTML 요소를 선택합니다.
const btn = document.getElementById('subscribe');
addEventListener에 탐지기를 등록합니다.
const btn = document.getElementById('subscribe');

btn.addEventListener("click", function () {
    console.log("Button clicked");
});
여기의'클릭'은 사건이고 버튼은 주체나 발사기이며 함수는 감청기나 관찰자이다.
개요:
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>
다음 절에서는 노드에 적용되는 동일한 개념을 볼 수 있습니다.js.

이벤트 드라이브가 노드에 어떻게 적용되는지.js？


노드js는 V8 엔진을 기반으로 하는 브라우저(명령줄 도구와 서버 쪽)에서 자바스크립트를 실행하는 환경입니다.
Node에서 대부분의 작업을 수행합니다.js 기반 이벤트.항상 발사기 대상과 일부 관찰자들이 소식을 정탐하고 있다.
노드에 있습니다.js에는 HTML 요소가 없기 때문에 대부분의 이벤트는 프로세스, 네트워크와의 상호작용, 파일 등에서 비롯된다.
노드의 모든 이벤트 발사기.js에는 최소한 두 개의 매개 변수를 받아들일 수 있는 방법이 있습니다.
  • 청취할 이벤트 이름
  • 탐지기 함수
    • 우리들은 실제적인 예를 하나 들자.이 간단한 노드를 고려하다.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 (localhost) 에서 정탐하는 서버를 만들었다.서버 대상에서, 우리는 On 방법을 호출하여 두 개의 탐지기 함수를 등록합니다.
    수신 이벤트는 서버가 시작될 때 즉시 터치하고, 연결 이벤트는 클라이언트가 127.0.0.1:8081에 연결될 때 터치합니다(시도!).
    이 예에서 서버는 이벤트 발사기, 즉 주제이다.다른 한편, 탐지기 함수는 관찰자다.
    그런데 이런 방법은 어디서 나온 거예요?

    이벤트 송신기 이해


    노드의 모든 이벤트 구동 모듈.js는 EventEmitter라는 루트 클래스를 확장했습니다.이전의 예시에서 net 모듈에서 온createServer는 엔진 뚜껑 아래에서 EventEmitter를 사용했습니다.
    노드의 EventEmitterjs는 두 가지 기본 방법이 있는데 그것이 바로 on과 emit이다.
    브라우저와 병행하려면 EventEmitter를 이벤트를 보낼 수 있는 HTML 요소로 간주할 수 있습니다.
    브라우저에서 이벤트를 탐색하려면 subject 객체의 addEventListener를 호출합니다.
    const btn = document.getElementById('subscribe');

btn.addEventListener("click", function () {
    console.log("Button clicked");
});
    노드에 있습니다.반면 js에는 다음과 같은 내용이 있습니다.
    // omit

server.on("listening", () => {
  console.log("Server listening!");
});

// omit
    정확히 말하면 Event 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");
    Node를 사용하여 코드를 실행합니다.js, 콘솔에서 "Got event"를 볼 수 있습니다.

    JavaScript에서 observer/publish-subscribe의 다른 예


    JavaScript는 관찰 가능한 객체에 대한 네이티브 지원은 없지만 언어에 추가하는 것이 좋습니다.
    RxJS는 관찰자 모드를 JavaScript에 도입하는 라이브러리입니다.
    Redux는 JavaScript에서 게시 - 구독 모드를 구현합니다."이것은 미화된"사건 발사기로서, 그 중의 상태 변경은 모든 정탐하는 관찰자에게 발송된다.
    현대 브라우저는 Intersection Observer API를 첨부했는데 이것은 관찰자 모델의 또 다른 실례이다.

    결론


    나는 네가 이 문장에서 새로운 것을 배울 수 있기를 바란다.너는 많은 기술 용어를 배웠지만, 결국은 약 30년 전에 발명한 모델인 발표-구독으로 귀결된다.
    이런 모델은 관찰자라고도 하는데 우리가 오늘 자바스크립트와 Node에서 사용한 이벤트 구동 구조의 기초이다.js.
    반복해야 할 것은 이벤트 구동, 발표-구독과 관찰자가 완전히 같지 않다는 것이다. 이벤트 구동 구조는 발표-구독에 구축되고 관찰자 모델은 DOM과 노드보다 풍부하다.js 이벤트.
    하지만 결국 그들은 같은 가정의 일원이었다.
    읽어주셔서 감사합니다. 기대하세요!
    Originally published on my blog
    프로그램 집합'mscorlib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089'에서 형식'System.Runt'를 불러올 수 없습니다.
    ZooKeeper 클러스터 구성

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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