2025-09-09

什麼是 Javascript module，讓 JavaScript 代碼更有組織

光輝咖碼692 mins
a computer with a keyboard and mouse

我們可能都很會使用開發 node.js 程式，使用各種前端工具，但可能不是很了解什麼是 Javascript module、ES modules、CommonJS Module，又為什麼有些程式使用 require？有些程式使用 import ?

網頁開發的早期挑戰

在 JavaScript 模組成為標準之前，開發大型網頁應用程式是一項相當複雜的任務。當時開發者面臨許多挑戰：

全域命名空間污染

命名衝突： 所有 JavaScript 變數和函數默認在全域命名空間中。這導致了命名衝突，特別是在使用多個腳本時。

維護困難： 隨著代碼庫的增長，找出命名衝突的源頭變得越來越困難。

依賴管理的挑戰

手動管理： 開發者需要手動管理腳本之間的依賴關係，確保它們以正確的順序加載。

性能問題： 隨著腳本數量的增加，網頁加載時間增長，影響用戶體驗。

重複代碼

重複性工作： 缺乏模組化導致代碼重複，特別是在大型團隊或多個項目中。

為了應對這些挑戰，開發者們採用了不同的策略：

立即調用函數表達式（IIFE）： 用於創建局部作用域，避免全域變數污染。

命名空間模式： 通過創建一個全域對象來存儲所有功能和變數，減少全域變數的數量。

但這些方式在專案範圍擴大時，也變的窒礙難行，所以漸漸開始有在前端引入模組的想法出現。

JavaScript 模組的本質

在 JavaScript 的世界中，模組就像是應用程式的樂高積木，它們透過將程式碼分解成更小、可重複使用的部分，幫助組織和管理程式碼。

所有這些模組系統都有一個共同點: 它們允許您導入和導出內容。

模組化程式碼： 將模組視為個別的腳本檔案，每個模組封裝特定的功能或一組相關功能。

範圍和封裝： 模組有助於封裝程式碼。除非明確導出，否則模組中的變數和函數對其他模組不可見。

假設有一個用於實用功能的模組（utils.js）：

// utils.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

然後可在另一個模組中使用這些函數（main.js）：

// main.js
import { add, subtract } from './utils.js';

console.log(add(5, 3)); // 輸出：8
console.log(subtract(5, 3)); // 輸出：2

使用模組自然會產生諸多設計上的優點：

可維護性： 將複雜的程式碼分解成易於管理的部分。

可重用性： 允許在應用程式的不同部分重複使用程式碼。

命名空間管理： 減少全局命名空間污染，最小化衝突。

依賴性管理： 明確定義程式碼各部分之間的依賴關係。

現代 JavaScript 模組的類型

CommonJS 模組

非原生 JavaScript 模組，在 ES6 模組標準之前，JavaScript 沒有內建的模組系統，非原生模組是透過各種工具和規範實現。

類型包括 CommonJS（Node.js 中使用）、AMD（Asynchronous Module Definition）、UMD（Universal Module Definition）等。

主要通過工具如 Webpack 或 Babel 轉譯或封裝，以支援模組化，使用 require() 進行導入和 module.exports 進行導出。

範例：

// CommonJS 模組的導出
module.exports = {
  sayHello: function(name) {
    return `Hello, ${name}!`;
  }
};

// 導入
const { sayHello } = require('./module');

ECMAScript（ES）模組

原生 JavaScript 模組（也稱為 ECMAScript 模組或 ES 模組）是 ECMAScript 2015 (ES6)標準的一部分；使用 import 和 export 語句，現代瀏覽器和 Node.js 都已開始原生支持。

範例：

// 導出
export function sayHello(name) {
  return `Hello, ${name}!`;
}

// 導入
import { sayHello } from './module.js';

模組程式和一般的 javascript 程式放在瀏覽器執行時，還一個很重要的差異：

<script src="classic.js"></script>
<script src="classic.js"></script>
<!-- 引入程式會執行多次 -->

<script type="module" src="module.js"></script>
<script type="module" src="module.js"></script>
<script type="module">import './module.js';</script>
<!-- 模組只會執行一次 -->

原生與非原生的比較

特性原生 JavaScript 模組非原生 JavaScript 模組
語法使用 ES6 import 和 export依賴特定規範，如 CommonJS 的 require 和 module.exports
執行環境現代瀏覽器和最新版本的 Node.js 直接支援多在特定環境（如 Node.js）或需透過轉譯工具在瀏覽器中運行
加載機制支援異步加載，適合大型應用和網頁環境主要用於同步加載
工具依賴不依賴於外部工具或編譯器，簡化設置和部署流程通常需要像 Webpack 或 Babel 這樣的打包工具

現代化的瀏覽器已開始支持原生 javascript module.

透過以上簡短說明，應該就能基本了解什麼是 Javascript module，接下來能更認識什麼是 Webpack 打包工具，更能充分使用 Vite 這類更現代化的前端開發工具。

參考來源:

69 thoughts on “什麼是 Javascript module，讓 JavaScript 代碼更有組織”

  1. UP X — обзор официальной платформы Ап Икс
    Сегодня абсолютно каждый житель Российской Федерации может сыграть в увлекательные игровые автоматы, и при этом не покидая собственное жилище. Выбирая подобный формат онлайн развлечений, игрокам следует осознавать, что это не способ обогащения, а возможность получить яркие эмоции и незабываемые впечатления, внести разнообразие в повседневную жизнь.
    https://mymcu.ru/

    回覆

  2. chicken road key parameters
    Chicken Road: What Gamblers Are Saying
    Chicken Road is an arcadestyle gambling game that has caught the attention of players with its simplicity, high RTP (98%), and unique cashout feature. By analyzing user opinions, we aim to figure out whether this game deserves your attention.

    What Players Like
    A lot of gamers appreciate how Chicken Road combines fast gameplay with simple controls. The option to withdraw winnings whenever you want introduces a tactical element, and the high RTP ensures it feels more equitable compared to classic slots. The riskfree demo mode has been a favorite among new players, providing a safe way to explore the game. The game earns extra points for its mobile compatibility, running seamlessly on both new and older devices.
    Melissa R., AU: “Surprisingly fun and fair! The cashout feature adds strategy.”
    Nathan K., UK: “The retro arcade vibe feels invigorating. Plus, it works perfectly on my tablet.”
    Gamers are also fond of the vibrant, retro aesthetic, making it both enjoyable and captivating.

    Areas for Improvement
    Despite its strengths, Chicken Road isn’t without flaws. A number of users feel the gameplay becomes monotonous and lacks complexity. Players also point out unresponsive support teams and insufficient features. One frequent criticism is deceptive marketing, as people thought it was a pure arcade game rather than a gambling platform.

    Tom B., US: “Initially enjoyable, but the repetition kicks in after a short while.”
    Sam T., UK: “Promoted as entertainment, yet it turns out to be a gambling product.”

    Advantages and Disadvantages
    Advantages
    Straightforward, actionpacked mechanics
    An RTP of 98% guarantees a fair experience
    Free demo option for beginners to test the waters
    Optimized for flawless mobile play

    Negative Aspects
    It might feel too predictable over time
    Limited variety and features
    Customer service can be sluggish and unreliable
    Deceptive advertising

    Overall Assessment
    Chicken Road shines through its openness, impressive RTP, and ease of access. It’s a great option for casual players or those new to online gambling. That said, its focus on chance and limited depth might not satisfy all players. To maximize enjoyment, stick to authorized, regulated sites.
    Rating: Four out of five stars
    An enjoyable and equitable option, though it has areas to grow.

    回覆

  4. Заказать диплом https://diplomikon.ru быстро, надёжно, с гарантией! Напишем работу с нуля по вашим требованиям. Уникальность от 80%, оформление по ГОСТу.

    回覆

  22. Автомобили на заказ заказать авто. Работаем с крупнейшими аукционами: выбираем, проверяем, покупаем, доставляем. Машины с пробегом и без, отличное состояние, прозрачная история.

    回覆

  23. Надёжный заказ авто закажи авто купить с аукционов: качественные автомобили, проверенные продавцы, полная сопровождение сделки. Подбор, доставка, оформление — всё под ключ. Экономия до 30% по сравнению с покупкой в РФ.

    回覆

  27. Продвижение сайта https://team-black-top.ru в ТОП Яндекса и Google. Комплексное SEO, аудит, оптимизация, контент, внешние ссылки. Рост трафика и продаж уже через 2–3 месяца.

    回覆

  32. Курс по плазмотерапии https://prp-plazmoterapija.ru с выдачей сертификата. Освойте PRP-методику: показания, противопоказания, протоколы, работа с оборудованием. Обучение для медработников с практикой и официальными документами.

    回覆

  44. Публичная дипломатия России https://softpowercourses.ru концепции, стратегии, механизмы влияния. От культурных центров до цифровых платформ — как формируется образ страны за рубежом.

    回覆

  45. Школа бизнеса EMBA https://emba-school.ru программа для руководителей и собственников. Стратегическое мышление, международные практики, управленческие навыки.

    回覆

  46. Проходите аттестацию https://prom-bez-ept.ru по промышленной безопасности через ЕПТ — быстро, удобно и официально. Подготовка, регистрация, тестирование и сопровождение.

    回覆

  47. «Дела семейные» https://academyds.ru онлайн-академия для родителей, супругов и всех, кто хочет разобраться в семейных вопросах. Психология, право, коммуникации, конфликты, воспитание — просто о важном для жизни.

    回覆

  48. Трэвел-журналистика https://presskurs.ru как превращать путешествия в публикации. Работа с редакциями, создание медийного портфолио, написание текстов, интервью, фото- и видеоматериалы.

    回覆

  49. Свежие скидки https://1001kupon.ru выгодные акции и рабочие промокоды — всё для того, чтобы тратить меньше. Экономьте на онлайн-покупках с проверенными кодами.

    回覆

  50. «Академия учителя» https://edu-academiauh.ru онлайн-портал для педагогов всех уровней. Методические разработки, сценарии уроков, цифровые ресурсы и курсы. Поддержка в обучении, аттестации и ежедневной работе в школе.

    回覆

  52. 德州撲克規則
    想學德州撲克卻完全沒頭緒？不管你是零基礎還是想重新複習，這篇就是為你準備的！一次搞懂德州撲克規則、牌型大小、下注流程與常見術語，讓你從看不懂到能開打一局只差這一篇！看完這篇，是不是對德州撲克整個比較有頭緒了？從玩法、流程到那些常聽不懂的術語，現在是不是都懂了七八成？準備好了嗎？快記好牌型、搞懂位置，然後開打一局練練手啦！富遊娛樂城提供最新線上德州撲克供玩家遊玩！首家引進OFC大菠蘿撲克、NLH無限注德州撲克玩法，上桌就開打，數錢數不停！

    回覆

  53. 加密貨幣
    值得信賴的研究和專業知識匯聚於此。自 2020 年以來，Techduker 已幫助數百萬人學習如何解決大大小小的技術問題。我們與經過認證的專家、訓練有素的研究人員團隊以及忠誠的社區合作，在互聯網上創建最可靠、最全面、最令人愉快的操作方法內容。

    回覆

  54. 加密貨幣
    值得信賴的研究和專業知識匯聚於此。自 2020 年以來，Techduker 已幫助數百萬人學習如何解決大大小小的技術問題。我們與經過認證的專家、訓練有素的研究人員團隊以及忠誠的社區合作，在互聯網上創建最可靠、最全面、最令人愉快的操作方法內容。

    回覆

  55. cgminer download
    CGMiner Software: Powerful Mining Solution for Cryptocurrency Enthusiasts

    Understanding CGMiner

    CGMiner is one of the best miners that allows mining Bitcoin, Litecoin, Dogecoin, and many other coins. The application supports ASIC, FPGA, and GPU (versions up to 3.7.2). CGMiner is highly configurable and offers multi-threaded mining, operating across multiple pools, as well as remote management and monitoring of your mining equipment’s parameters.

    Key Features

    Multi-Coin Compatibility
    CGMiner performs exceptionally well with multiple digital currencies including Bitcoin (BTC), Litecoin (LTC), Dogecoin (DOGE), and various altcoins with various mining algorithms.

    Flexible Hardware Support
    The software works with three main types of mining hardware:
    – ASIC – Dedicated processors for maximum efficiency
    – Field-Programmable Gate Arrays – Configurable integrated circuits for custom mining tasks
    – Graphics Cards – GPU processors (supported up to version 3.7.2)

    Enhanced Features
    – Flexible configuration – Extensive settings for system optimization
    – Multi-threaded operations – Optimal exploitation of computing resources
    – Pool diversification – Automatic failover between mining pools
    – Remote administration – Control and monitor equipment from any location

    What Makes CGMiner Special?

    CGMiner excels for its consistent performance, high performance, and cost-effectiveness. It’s entirely free, open source, and offers clear reporting for efficiency evaluation. The miner’s comprehensive functionality makes it ideal for both domestic and industrial-scale mining activities.

    Getting Started

    Setup is simple on multiple operating systems. Configuration can be done through files or CLI parameters, providing accessibility for all skill levels.

    Final Thoughts

    CGMiner remains among the best options for professional crypto mining, providing the stability and efficiency needed for successful mining operations.

    回覆

  56. bandar togel

    TOGELONLINE88 membawakan update terbaru seputar lomba spin Toto Slot 88 dan prediksi 4D terakurat. Aplikasi ini menghadirkan platform legal yang terpercaya, hasil valid, dan juga kenyamanan bermain dengan sistem terorganisir.

    Tidak hanya itu, TOGELONLINE88 turut menghadirkan banyak penyedia game slot dan permainan fishing dapat dinikmati kapan saja dan di mana saja, dengan peluang meraih jackpot maxwin yang fantastis.

    Kepada penikmat permainan togel dan slot online, TOGELONLINE88 adalah destinasi utama karena memberikan kenyamanan, perlindungan, dan pengalaman seru dalam bermain. Dengan penawaran istimewa beserta platform user-friendly, layanan ini memberikan pengalaman bermain yang tak terlupakan.

    Jadi, tunggu apa lagi? Gabung dalam kompetisi spin Toto Slot 88 dan tebak angka 4D unggulan hanya di TOGELONLINE88. Raih peluang jackpot besar dan rasakan sensasi hadiah jackpot maksimal luar biasa!

    回覆

  57. Добрый день!
    Долго не спал и думал как поднять сайт и свои проекты и нарастить DR и узнал от гуру в seo,
    крутых ребят, именно они разработали недорогой и главное лучший прогон Хрумером – https://www.bing.com/search?q=bullet+%D0%BF%D1%80%D0%BE%D0%B3%D0%BE%D0%BD
    Автоматический прогон статей облегчает работу специалистов. Использование Xrumer в 2025 обеспечивает стабильный рост DR. Линкбилдинг для повышения DR улучшает позиции сайта. SEO рассылки форумов помогают охватывать больше ресурсов. Xrumer: практические примеры показывают эффективность методов.
    продвижение сайтов по другому, раскрутка сайта статьями, Генерация внешних ссылок быстро
    Повышение авторитетности сайта, seo sprint ru официальный сайт, анализировать сайт seo
    !!Удачи и роста в топах!!

    回覆

  59. Backlinks Blogs and Comments, SEO promotion, site top, indexing, links
    Backlinks of your site on discussion boards, blocks, threads.

    Three-stage backlink strategy

    Stage 1 – Basic inbound links.

    Stage 2 – Backlinks through redirects from highly reliable sites with PR 9–10, for example –

    Stage 3 – Listing on SEO analysis platforms –

    The advantage of SEO tools is that they show the Google search engine a website structure, which is essential!

    Clarification for Stage 3 – only the main page of the site is added to SEO checkers, other pages cannot be included.

    I execute all three stages step by step, resulting in 10 to 30 thousand inbound links from the full process.

    This backlink strategy is the best approach.

    Demonstration of placement on SEO platforms via a .txt document.

    回覆

  62. Backlinks Blogs and Comments, SEO promotion, site top, indexing, links
    External links of your site on community platforms, blocks, threads.

    Backlinks – three steps

    Phase 1 – Basic inbound links.

    Step 2 – Backlinks through redirects from authoritative sites with a PageRank score of 9–10, for example –

    Step 3 – Listing on SEO analysis platforms –

    The advantage of analyzer sites is that they show the Google search engine a website structure, which is essential!

    Clarification for the third stage – only the main page of the site is submitted to SEO checkers, internal pages cannot be included.

    I complete all phases sequentially, resulting in 10K–20K backlinks from the three stages.

    This backlink strategy is the best approach.

    Demonstration of placement on SEO platforms via a text file.

    回覆

  66. Занятия по самообороне https://safety-skills.ru практические навыки защиты в реальных ситуациях, развитие силы и выносливости. Профессиональные тренеры помогут освоить приемы борьбы, удары и тактику безопасности.

    回覆

  67. Платформа онлайн-обучения https://craftsmm.ru курсы по маркетингу, продажам и рекламе для новичков и профессионалов. Освойте современные инструменты продвижения, увеличьте продажи и развивайте карьеру в удобном формате.

    回覆

  68. Академия парикмахерского искусства https://charm-academy.ru обучение от ведущих мастеров. Современные техники стрижек, окрашивания и укладок. Курсы для начинающих и профессионалов с практикой и дипломом по окончании.

    回覆

  69. Школа видеорекламы https://tatyanamostseeva.ru обучение созданию креативных роликов для бизнеса и брендов. Практические занятия, работа с современными инструментами и поддержка экспертов. Освойте профессию в сфере digital.

    回覆

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Related Post