検索
ホームページウェブフロントエンドjsチュートリアルnode.js エクスポート、module.exports、ES6 エクスポート、エクスポートのデフォルトの詳細な分析

この記事では主に、node.js のエクスポートと module.exports に関する関連情報と、ES6 のエクスポートとエクスポートのデフォルトについて、サンプル コードを通じて詳しく紹介します。これは、学習や作業に非常に役立ちます。一定の参考と学習価値がありますので、それを必要とする友人が来て一緒に学ぶことができます。

はじめに

最近自由時間がほとんどないので、標準化された方法でノードプログラミングを再度学習し始めることにしました。しかし、モジュールを導入するときに require メソッドを見て、さまざまな ES6 エクスポートとエクスポートのデフォルトを思い出しました。

アキシ、あなたの頭はもう大きいです…

頭が終わったら、まず座って使用範囲を整理しましょう。

  • require: インポートはノードとes6の両方でサポートされます

  • export/import: インポートされたエクスポートはes6でのみサポートされます

  • module.exports/exports: エクスポートはノードによってのみサポートされます

これ以降、そろそろ二人の関係をはっきりさせないと、混乱して死ぬと思います。言うことはあまりありません。始めましょう! !

node module

NodeのモジュールシステムはCommonJS仕様に従います。

それでは、CommonJS 仕様とは何でしょうか?という質問がまた出てきます。

以前の js は非常に複雑で、誰もが独自のコードを記述しており、モジュールという概念がなかったため、この仕様は実際にはモジュールの定義です。

CommonJSで定義されているモジュールは、モジュール識別(module)、モジュール定義(exports)、モジュール参照(require)に分かれています

まずexportsとmodule.exportsについて説明します

ノードがファイルを実行すると、これはファイル内にエクスポートとモジュールオブジェクトが生成されます

、モジュールにはエクスポート属性があります。それらの関係は次のようになり、すべて {} メモリ領域を指します。

exports = module.exports = {};


それでは、コードを見てみましょう。

//utils.js
let a = 100;

console.log(module.exports); //能打印出结果为:{}
console.log(exports); //能打印出结果为:{}

exports.a = 200; //这里辛苦劳作帮 module.exports 的内容给改成 {a : 200}

exports = '指向其他内存区'; //这里把exports的指向指走

//test.js

var a = require('/utils');
console.log(a) // 打印为 {a : 200}

上記からわかるように、実際には、require によってエクスポートされるコンテンツは、exports ではなく、module.exports によってポイントされるメモリ ブロックのコンテンツです。

つまり、これらの違いは、exports は module.exports への単なる参照であり、後者によるコンテンツの追加を支援するために使用されるということです。

俗に言うと、exports は module.exports がメモリ内のデータを操作するのを支援するだけです。データを操作するという大変な作業を経ても、結局のところ、実際に必要なコンテンツは依然としてモジュールです。 .exports、これは本当に大変な作業です。

実際、メモリブロックの概念を使って理解すると、非常に明確になります。

次に、混乱を避けるために、module.exports を使用してエクスポートし、require を使用してインポートしてみてください。

ESでのモジュールのエクスポートとインポート

正直に言うと、ESのモジュールは非常に明確です。ただし、明確にする必要がある詳細がいくつかあります。

例えば、エクスポートとエクスポートのデフォルト、インポートの場合はimport a from ..、import {a} from ..というように、要するに少しややこしいので整理してみましょう。

エクスポートとエクスポートデフォルト

まずこれら 2 つのエクスポートについて説明します

  • エクスポートとエクスポートデフォルトはどちらも定数、関数、ファイル、モジュールなどをエクスポートするために使用できます

  • 1 つのファイルまたはモジュールには複数のエクスポートとインポートが存在します。

  • エクスポートのデフォルトは必須ではありません。

  • export は変数式を直接エクスポートできますが、エクスポートのデフォルトは機能しません。
  • コードを見て検証してみましょう

testEs6Export.js

'use strict'
//导出变量
export const a = '100'; 

 //导出方法
export const dogSay = function(){ 
 console.log('wang wang');
}

 //导出方法第二种
function catSay(){
 console.log('miao miao'); 
}
export { catSay };

//export default导出
const m = 100;
export default m; 
//export defult const m = 100;// 这里不能写这种格式。

index.js

//index.js
'use strict'
var express = require('express');
var router = express.Router();

import { dogSay, catSay } from './testEs6Export'; //导出了 export 方法 
import m from './testEs6Export'; //导出了 export default 

import * as testModule from './testEs6Export'; //as 集合成对象导出



/* GET home page. */
router.get('/', function(req, res, next) {
 dogSay();
 catSay();
 console.log(m);
 testModule.dogSay();
 console.log(testModule.m); // undefined , 因为 as 导出是 把 零散的 export 聚集在一起作为一个对象,而export default 是导出为 default属性。
 console.log(testModule.default); // 100
 res.send('恭喜你,成功验证');
});

module.exports = router;

上記からわかるように、ES6 モジュール システムは非常に柔軟であることがわかります。

コードアドレス


GitHub: https://github.com/XuXiaoGH/exportImportTest

以上がこの記事の全内容です。その他の関連コンテンツについては、こちらをご覧ください。 PHP 中国語 Web サイトに注意してください。

関連する推奨事項:

Node.js に基づく JavaScript プロジェクト構築ツール gulp の使用方法


Node.js のサブプロセスとアプリケーションの紹介

以上がnode.js エクスポート、module.exports、ES6 エクスポート、エクスポートのデフォルトの詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
舞台裏:JavaScriptをパワーする言語は何ですか?舞台裏:JavaScriptをパワーする言語は何ですか?Apr 28, 2025 am 12:01 AM

JavaScriptはブラウザとnode.js環境で実行され、JavaScriptエンジンに依存してコードを解析および実行します。 1)解析段階で抽象的構文ツリー(AST)を生成します。 2)ASTをコンパイル段階のバイトコードまたはマシンコードに変換します。 3)実行段階でコンパイルされたコードを実行します。

PythonとJavaScriptの未来:傾向と予測PythonとJavaScriptの未来:傾向と予測Apr 27, 2025 am 12:21 AM

PythonとJavaScriptの将来の傾向には、1。Pythonが科学コンピューティングの分野での位置を統合し、AI、2。JavaScriptはWebテクノロジーの開発を促進します。どちらもそれぞれのフィールドでアプリケーションシナリオを拡大し続け、パフォーマンスをより多くのブレークスルーを行います。

Python vs. JavaScript:開発環境とツールPython vs. JavaScript:開発環境とツールApr 26, 2025 am 12:09 AM

開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1)Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2)JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。

JavaScriptはCで書かれていますか?証拠を調べるJavaScriptはCで書かれていますか?証拠を調べるApr 25, 2025 am 12:15 AM

はい、JavaScriptのエンジンコアはCで記述されています。1)C言語は、JavaScriptエンジンの開発に適した効率的なパフォーマンスと基礎となる制御を提供します。 2)V8エンジンを例にとると、そのコアはCで記述され、Cの効率とオブジェクト指向の特性を組み合わせて書かれています。3)JavaScriptエンジンの作業原理には、解析、コンパイル、実行が含まれ、C言語はこれらのプロセスで重要な役割を果たします。

JavaScriptの役割:WebをインタラクティブでダイナミックにするJavaScriptの役割:WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AM

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1)ページを更新せずにコンテンツを変更できます。2)Domapiを介してWebページを操作する、3)アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4)ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

CおよびJavaScript:接続が説明しましたCおよびJavaScript:接続が説明しましたApr 23, 2025 am 12:07 AM

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1)CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2)ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

Webサイトからアプリまで:JavaScriptの多様なアプリケーションWebサイトからアプリまで:JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1)Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2)ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3)電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4)node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

Python vs. JavaScript:ユースケースとアプリケーションと比較されますPython vs. JavaScript:ユースケースとアプリケーションと比較されますApr 21, 2025 am 12:01 AM

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

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衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。