検索
ホームページウェブフロントエンドjsチュートリアルイベントループを使用した mjs と cjs

導入

開発者の皆さん、こんにちは!

今日は、Node.js の .mjs (ECMAScript モジュール) と .cjs (CommonJS モジュール) の違いについて説明します。 React、Next.js、Vue などの最新のフレームワークはモジュールのサポートを自動的に処理することがよくありますが、Node.js を直接操作する場合、特にイベント ループと実行順序に関してこれらの違いを理解することが重要です。

この議論の主な目標はイベント ループに向けてであり、次のセクションではいくつかのケースを見ていきます。

基本情報

mjs (ECMAScript モジュール) は、

import fs from 'fs'
import https from 'https'

cjs (CommonJS モジュール) のサポート

const fs = require('fs')
const https = require('https')

イベントループと実行順序

Node.js イベント ループは、特定の役割と優先順位を持つさまざまなキューを処理します。実行順序に影響を与える 2 つの重要な関数は process.nextTick() と setImmediate() であり、これらを時々使用します。

process.nextTick と setImmediate

process.nextTick と setImmediate の違いを知っていれば、それは素晴らしいことですが、そうでなくても、非常に基本的な考え方です

process.nextTick は、コードの一部が現在の関数の後、非同期 I/O 操作の前に実行されるようにします。

setImmediate は、I/O イベントの後、イベント ループの次の反復で実行されるコールバック関数をスケジュールします。

現在のコード -> process.nextTick ->あらゆる I/O 操作 -> setImmediate

コード例

実行順序を示すコード スニペットを調べてみましょう:

//In case of mjs
import https from "https";
import fs from "fs";

//In case of cjs
const https = require("https");
const fs = require("fs");

setImmediate(() => {
    console.log("setImmediate callback");
});

process.nextTick(() => {
    console.log("nextTick callback");
});

fs.readFile("./async.cjs", (err, data) => {
    console.log("file IO Callback");
});

fs.readdir(process.cwd(), () => console.log("file IO Callback 2"));

https.get("https://www.google.com", (res) => {
    console.log("https callback");
});

setImmediate(() => {
    console.log("setImmediate callback 2");
});

Promise.resolve().then(() => {
    console.log("Promise Callback");
});

process.nextTick(() => {
    console.log("Process nextTick console");
    process.nextTick(() => {
        console.log("Process nextTick console 2");
        process.nextTick(() => {
            console.log("Process nextTick console 3");
            process.nextTick(() => {
                console.log("Process nextTick console 4");
            });
        });
    });
});

Promise.resolve().then(() => {
    console.log("Promise Callback 2");
});

console.log("Main thread mjs");

Promise.resolve().then(() => {
    console.log("Promise Callback 3");
});

予想される実行順序と実際の実行順序

コードはこのように実行され、実行されるはずです

  • メインスレッド
  • コールバックを約束する
  • nextTick コールバック
  • setImmediate コールバック
  • I/O コールバックと出力は次のようにする必要があります。
Main thread mjs
Promise Callback
Promise Callback 2
Promise Callback 3
nextTick callback
Process nextTick console
Process nextTick console 2
Process nextTick console 3
Process nextTick console 4
setImmediate callback
setImmediate callback 2
file IO Callback
file IO Callback 2
https callback

でも、mjs の場合もそうなのでしょうか?
そうではありません!

これは mjs と cjs の出力です

mjs vs cjs with Event Loop

process.nextTick や setImmediate と同様に、Promise でも同じ動作が見られます。

理由は何ですか?

どうやら、setImmediate と process.nextTick に関して mjs (ECMAScript モジュール) と cjs (CommonJS モジュール) ファイルの間で観察されている動作の違いは、Node.js が異なるモジュール システムでイベント ループとマイクロタスクを処理する方法に起因しているようです。 .

ESM (.mjs) の場合:

  • ESM では、Node.js は別のアプローチを使用してメイン モジュールの実行を処理します。
  • メイン モジュールのコードは非同期関数でラップされ、その後実行されます。
  • これにより、すべてのマイクロタスク (process.nextTick と Promises を含む) が処理された後、イベント ループの次の反復で setImmediate コールバックがスケジュールされます。

CommonJS (.cjs) の場合:

  • CommonJS では、メイン モジュールのコードは同期的に実行されます。
  • これは、setImmediate コールバックがすぐにスケジュールされ、十分に早くキューに入れられていれば、いくつかのマイクロタスクの前に実行できることを意味します。

フレームワークの動作

Express および Nextjs アプリ (開発モード) でこの動作をテストしました。興味深いことに、Express は cjs のように動作し、Nextjs は mjs のように動作しました。最初のログセットは Express からのもので、次は Nextjs

からのものです。

mjs vs cjs with Event Loop

結論

Node.js を直接操作する場合、.mjs ファイルと .cjs ファイルの実行順序の違いを理解することが重要です。これが、ファイルに対するこれらの関数の違いと実行をもう少しよく理解するのに役立つことを願っています。したがって、次回アプリでこれらの機能をプレイしたり試したりするときは、次の点に留意してください :)

別の例については、ES モジュールと CommonJS ファイル実行の違いに関する公式 Node.js ドキュメントを参照してください。

以上がイベントループを使用した mjs と cjsの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
JavaScriptの文字列文字を交換しますJavaScriptの文字列文字を交換しますMar 11, 2025 am 12:07 AM

JavaScript文字列置換法とFAQの詳細な説明 この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します:内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します 最も直接的な方法は、置換()メソッドを使用することです。 str = str.replace( "find"、 "置換"); この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace(/fi

独自のAjax Webアプリケーションを構築します独自のAjax Webアプリケーションを構築しますMar 09, 2025 am 12:11 AM

それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか? Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました

10 jQueryの楽しみとゲームプラグイン10 jQueryの楽しみとゲームプラグインMar 08, 2025 am 12:42 AM

10の楽しいjQueryゲームプラグインして、あなたのウェブサイトをより魅力的にし、ユーザーの粘着性を高めます! Flashは依然としてカジュアルなWebゲームを開発するのに最適なソフトウェアですが、jQueryは驚くべき効果を生み出すこともできます。また、純粋なアクションフラッシュゲームに匹敵するものではありませんが、場合によってはブラウザで予期せぬ楽しみもできます。 jquery tic toeゲーム ゲームプログラミングの「Hello World」には、JQueryバージョンがあります。 ソースコード jQueryクレイジーワードコンポジションゲーム これは空白のゲームであり、単語の文脈を知らないために奇妙な結果を生み出すことができます。 ソースコード jquery鉱山の掃引ゲーム

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか?独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか?Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

jQuery Parallaxチュートリアル - アニメーションヘッダーの背景jQuery Parallaxチュートリアル - アニメーションヘッダーの背景Mar 08, 2025 am 12:39 AM

このチュートリアルでは、jQueryを使用して魅惑的な視差の背景効果を作成する方法を示しています。 見事な視覚的な深さを作成するレイヤー画像を備えたヘッダーバナーを構築します。 更新されたプラグインは、jQuery 1.6.4以降で動作します。 ダウンロードしてください

ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか?ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか?Mar 18, 2025 pm 03:14 PM

この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。

Matter.jsを始めましょう:はじめにMatter.jsを始めましょう:はじめにMar 08, 2025 am 12:53 AM

Matter.jsは、JavaScriptで書かれた2D Rigid Body Physics Engineです。このライブラリは、ブラウザで2D物理学を簡単にシミュレートするのに役立ちます。剛体を作成し、質量、面積、密度などの物理的特性を割り当てる機能など、多くの機能を提供します。また、重力摩擦など、さまざまな種類の衝突や力をシミュレートすることもできます。 Matter.jsは、すべての主流ブラウザをサポートしています。さらに、タッチを検出し、応答性が高いため、モバイルデバイスに適しています。これらの機能はすべて、物理ベースの2Dゲームまたはシミュレーションを簡単に作成できるため、エンジンの使用方法を学ぶために時間をかける価値があります。このチュートリアルでは、このライブラリのインストールや使用法を含むこのライブラリの基本を取り上げ、

jqueryとajaxを使用した自動更新Divコンテンツjqueryとajaxを使用した自動更新DivコンテンツMar 08, 2025 am 12:58 AM

この記事では、JQueryとAjaxを使用して5秒ごとにDivのコンテンツを自動的に更新する方法を示しています。 この例は、RSSフィードからの最新のブログ投稿と、最後の更新タイムスタンプを取得して表示します。 読み込み画像はオプションです

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。