CommonJS 功能介紹

CommonJS是JavaScript的模塊化規范,主要用于服務器端(如Node.js)的模塊化開發,其核心功能和特點如下:

一、核心功能

  1. 模塊定義與導出

    • module.exports:用于導出模塊的內容,可以是函數、對象、變量等。例如:
      module.exports = function(a, b) { return a + b; }; // 導出單個函數
      module.exports = { add, subtract }; // 導出多個方法[^1^][^4^]
      
    • exportsmodule.exports的簡寫引用,用于簡化導出操作。例如:
      exports.sayHello = function(name) { return `Hello, ${name}`; }; [^4^]```
  2. 模塊導入

    • require():同步導入模塊并返回其導出的內容。例如:
      const math = require('./math'); // 導入整個模塊
      const { add } = require('./math'); // 解構導入[^1^][^4^]
      

二、關鍵特點

  1. 同步加載

    • 模塊加載是同步的,執行require時會阻塞后續代碼,直到模塊加載完成。適用于服務器端本地文件加載(速度快),但不適合瀏覽器環境[1][4]。
  2. 單例模式與緩存

    • 每個模塊在首次加載后會被緩存,后續require同一模塊直接返回緩存實例。例如:
      const moduleA = require('./module');
      const moduleB = require('./module');
      console.log(moduleA === moduleB); // true[^1^][^4^]
      
  3. 動態導入

    • 支持運行時動態加載模塊,根據條件靈活導入不同模塊。例如:
      if (condition) {const moduleA = require('./moduleA');
      } else {const moduleB = require('./moduleB');
      }[^1^][^4^]
      
  4. 文件即模塊

    • 每個文件視為獨立模塊,擁有單獨的作用域,避免全局變量污染[2][4]。

三、模塊加載機制

  1. 加載流程

    • 路徑解析:優先從緩存中查找模塊;若未緩存,則檢查是否為核心模塊(如fs);否則按路徑查找文件模塊[4]。
    • 文件擴展名:自動按.js.json.node順序補全后綴[2]。
    • 編譯與執行:加載后立即編譯并執行模塊代碼[4]。
  2. 循環依賴處理

    • 通過緩存機制解決循環依賴,但需注意模塊的加載順序和狀態[3][4]。

四、應用場景

  1. 服務器端開發

    • Node.js默認使用CommonJS,適合后端代碼的組織與管理。例如,通過require引入數據庫驅動、路由模塊等[1][4]。
  2. 前端開發

    • 需通過構建工具(如Webpack、Browserify)將CommonJS模塊轉換為瀏覽器兼容格式。例如:
      # 使用Webpack打包
      webpack --entry ./src/index.js --output ./dist/bundle.js [^5^]
      

五、與ES模塊(ESM)的對比

特性CommonJSES模塊(ESM)
語法require()module.exportsimportexport
加載方式同步加載(阻塞)異步加載(非阻塞)
動態導入支持require()動態加載需使用import()返回Promise
緩存機制模塊單例緩存無默認緩存(可通過import實現)
適用環境服務器端(Node.js)瀏覽器端、現代前端工程
靜態分析不支持(運行時解析)支持(編譯時優化)

六、總結

CommonJS通過同步加載、單例緩存和簡單的API設計,成為服務器端JavaScript模塊化的事實標準。雖然ES模塊在現代前端開發中更受青睞,但在Node.js生態和舊項目中,CommonJS仍具有重要價值[1][4][5]。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/91594.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/91594.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/91594.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

3D材質總監的“光影魔法”:用Substance Sampler AI,“擦除”照片中的光影

在三維視覺藝術的創作中,我們始終在探索一對核心的“對立統一”:一方面是**“現實世界的光照”(Real-World Lighting),它被固定、“烘焙”在一張照片的像素之中;另一方面是“虛擬世界的光照”(V…

從高斯噪聲的角度分析MAE和MSE

文章目錄1. MAE與MSE的本質區別2. 高斯噪聲下的統計特性3. MAE導致稀疏解的內在機制4. 對比總結1. MAE與MSE的本質區別 MAE(Mean Absolute Error)和MSE(Mean Squared Error)是兩種常用的損失函數,它們的數學形式決定了…

AR智能巡檢:制造業零缺陷安裝的“數字監工”

在制造業中,設備安裝與組裝環節的準確性是產品質量和生產效率的關鍵。傳統的人工巡檢和紙質作業指導書容易因人為疏忽、經驗不足或信息滯后導致安裝錯誤,進而引發返工、延誤甚至安全事故。然而,隨著增強現實(AR www.teamhelper.cn…

js最簡單的解密分析

js最簡單的解密分析 一、JavaScript 代碼保護技術簡介 ? 為什么要保護 JavaScript 代碼? JavaScript 是前端語言,代碼在瀏覽器中是完全可見的。這意味著: 別人可以輕松查看你的核心算法或業務邏輯頁面上的接口地址、加密邏輯等容易被抓包分析…

React強大且靈活hooks庫——ahooks入門實踐之開發調試類hook(dev)詳解

什么是 ahooks? ahooks 是一個 React Hooks 庫,提供了大量實用的自定義 hooks,幫助開發者更高效地構建 React 應用。其中開發調試類 hooks 是 ahooks 的一個重要分類,專門用于開發調試階段,幫助開發者追蹤組件更新和副…

React強大且靈活hooks庫——ahooks入門實踐之副作用類hook(effect)詳解

什么是 ahooks? ahooks 是一個 React Hooks 庫,提供了大量實用的自定義 hooks,幫助開發者更高效地構建 React 應用。其中副作用類 hooks 是 ahooks 的一個重要分類,專門用于處理各種副作用操作,如定時器、防抖、節流等…

SpringBoot一Web Flux、函數式Web請求的使用、和傳統注解@Controller + @RequestMapping的區別

一、函數式 Web 在 Spring Boot 中,使用函數式 Web(Function-based Web)可以通過 RouterFunction 和 HandlerFunction 來定義路由和請求處理邏輯。這種方式與傳統的注解驅動的方式不同,它更加簡潔,并且適合響應式編程。…

Vue+Cesium快速配置指南

安裝必要依賴在項目根目錄下運行以下命令安裝vue-cesium和cesium:npm install vue-cesium3.1.4 cesium1.84配置Vite在vite.config.js文件中添加以下配置:import { defineConfig } from vite import vue from vitejs/plugin-vue import { resolve } from …

礦業自動化破壁者:EtherCAT轉PROFIBUS DP網關的井下實戰

在深井鉆機的轟鳴、礦石輸送帶的奔流與通風設備的不息運轉中,礦業生產的脈搏強勁跳動。然而,這片創造價值的土地,卻為自動化技術的深入設置了嚴苛的考場:信息孤島林立: 高效現代的EtherCAT控制系統與井下大量穩定服役的…

SpringBoot+Loki4j+Loki+Grafana搭建輕量級日志系統

文章目錄前言一、組件介紹(一)Loki特點架構適用場景總結(二)Loki4j特點(三)Grafana特點適用場景二、組件配置(一)Loki(二)Grafana三、項目搭建參考文章前言 …

SpringCloud之Config

SpringCloud之Config 推薦網站:https://www.springcloud.cc/spring-cloud-dalston.html#_spring_cloud_config 1. 什么是 Spring Cloud Config Spring Cloud Config 是 Spring 官方提供的 分布式配置中心 組件,用來 集中管理、動態下發、版本控制 所有微…

探索VB.NET中的貝塞爾Bezier曲線繪制技巧

簡介:Bezier曲線是計算機圖形學中用于創建平滑曲線的重要工具,廣泛應用于圖形設計、游戲開發、CAD系統等領域。本文深入探討了Bezier曲線的基礎知識,并詳細說明了如何在Visual Basic中使用 Graphics 對象的 DrawBezier 方法繪制曲線。通過理論…

分布式分片策略中,分片數量的評估與選擇

分布式分片策略中,分片數量的評估與選擇是影響系統性能、擴展性和運維成本的核心問題 一、分片數量評估方法論 1. ??數據量基準模型?? ??單分片容量建議??:根據Elasticsearch最佳實踐,單個分片建議控制在10-50GB(冷數據可放寬至100GB),超過100GB會導致段合并效率…

Vue3高級特性:深入理解effectScope及其應用場景

系列文章目錄 Vue3 組合式 API 進階:深入解析 customRef 的設計哲學與實戰技巧 Vue3 watchEffect 進階使用指南:這些特性你可能不知道 Vue3高級特性:深入理解effectScope及其應用場景 文章目錄系列文章目錄前言一、核心概念1、什么是 effect…

Docker 中的動態配置:docker update 命令與環境變量管理

Docker 中的動態配置:docker update 命令與環境變量管理 在 Docker 容器的日常管理中,動態調整配置以適應業務需求變化是常見的操作。docker update 命令作為 Docker 平臺的重要工具,為運行中的容器提供了便捷的配置調整方式,而環…

ELK 使用教程采集系統日志

作者:小凱 沉淀、分享、成長,讓自己和他人都能有所收獲! 本文的宗旨在于通過易于上手實操的方式,教會讀者完成系統ELK日志采集的對接和使用。那你知道對于一個系統的上線考察,必備的幾樣東西是什么嗎?其實這…

小程序部分pai

wx.setClipboardData 這是微信小程序提供的 API,用于將數據復制到剪貼板。 Page({data: {clientInfo: {email: exampleexample.com // 假設的郵箱數據}},// 復制郵箱到剪貼板copyEmail: function() {wx.setClipboardData({data: this.data.clientInfo.email,success…

【解決方案】鴻蒙 / 礦鴻系統 Shell 無故退出問題(息屏導致)詳解

平臺環境 OpenHarmony 版本:4.1 release開發板:DAYU / RK3568調試工具:hdc 在使用 OpenHarmony 4.1 Release(礦鴻系統)進行開發時,遇到這樣的問題: 🚨 Shell 會在一段時間后自動退出…

Data Analysis TTAD=>CNN-BiGRU-MSA

TTAO 預處理、CNN-BiGRU-MSA 模型 時序數據回歸分析時序數據分析方法,特點:TTAO 預處理:通過三角拓撲結構增強時序特征的局部和全局關系混合模型架構:CNN 層提取局部特征模式BiGRU 捕獲雙向時序依賴多頭自注意力機制進行序列建模…

python-字典、集合、序列切片、字符串操作(筆記)

一、字符串常見操作(重點)?1.?2.字符串無法修改#錯誤示范 str1"djskds" str1[2]"3"3.?str1"abcand" # 輸出3 print(str1.index("and"))4.?str1"abcand" newStrstr1.replace("and",&quo…