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

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)標準的一部分;使用 importexport 語句,現代瀏覽器和 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 importexport依賴特定規範,如 CommonJS 的 requiremodule.exports
執行環境現代瀏覽器和最新版本的 Node.js 直接支援多在特定環境(如 Node.js)或需透過轉譯工具在瀏覽器中運行
加載機制支援異步加載,適合大型應用和網頁環境主要用於同步加載
工具依賴不依賴於外部工具或編譯器,簡化設置和部署流程通常需要像 Webpack 或 Babel 這樣的打包工具

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

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

參考來源:

2 thoughts on “什麼是 Javascript module,讓 JavaScript 代碼更有組織

  1. Steering through the Social Security Disability application process could be a daunting task for some. The process may be advanced and time-consuming, plus the odds of getting rejected are great. That is where a social security disability law firm is available in. A lawyer will allow you to navigate the application form process, enhance your odds of becoming accepted, plus appeal a denied claim. In this essay, we shall chat about a few subject areas associated with the part of a social security disability legal practitioner.

    Going through the maze of the Social Security Disability application system by using a lawyer
    The social security disability application processes can be puzzling as well as stressful. Legal counsel will allow you to comprehend the requirements and make suggestions through the procedure. They are able to also allow you to gather the required professional medical information and certification to aid your very own demand. They are able to also assist in prepping anyone for the case, if required.

    The necessity of health-related proof in a Social Security Disability case
    Medical evidence is vital in a social security disability case. It really is utilized to prove which you posses a medical condition that stops you against performing. An attorney makes it possible to produce the required medical data and introduce it in a way that is most likely to be established by the social security administration. They are able to also allow you to receive medical records along with other papers that maintain your claim.

    Popular fallacies concerning Social Security Disability and just how a legal professional will help
    There are numerous false impressions regarding social security disability. For instance, many people think that only those people who are permanently disabled are entitled to benefits. Conversely, this is simply not true. A lawyer makes it possible to understand the eligibility requirements and dispel any misconceptions you may possibly have. They could also provide assistance with just how to present your case when you look at the most favorable light.

    The appeals plan for declined Social Security Disability claims and how a legal professional will help
    If for example the claim is denied, you’ve got the straight to appeal. Legal counsel makes it possible to comprehend the appeals plan and portray you throughout the hearing. They are able to also assist you to gather additional evidence and create a stronger case to boost your odds of success.

    How to choose the proper Social Security Disability legal professional for the case
    You should choose a legal professional who has got experience handling social security disability cases. Try to find a lawyer that is familiar with the social security administration’s procedures and operations. It’s also advisable to feel comfortable communicating with them and trust their judgment. Look for a legal professional who are able to provide clear and genuine solutions to your questions and offer direction through out the procedure.

    In closing, a social security disability law firm can play a vital role when you look at the application and appeals process. They are able to assist you to go over the method, raise your likelihood of getting sanctioned, and appeal a rejected claim. A legal professional will help you recognize the qualifications requirements and drive out any beliefs you might have. It is critical to choose a lawyer that has experience handling social security disability cases, in accordance with that you feel safe communicating.

    If you want to understand more info on this subject examine a ssa lawyer online store:

      disability lawyers in my area in Albuquerque NM

發佈留言

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