Mga Module sa JavaScript

Ipinaliliwanag ng artikulong ito ang mga module sa JavaScript.

YouTube Video

Mga Module sa JavaScript

Ang mga module sa JavaScript ay isang paraan upang ayusin ang code at hatiin ito sa mga bahagi na maaaring muling magamit. Sa pamamagitan ng paggamit ng mga module, napapabuti ang pagbabasa at pagpapanatili ng code, at maaaring magamit muli ang parehong functionality sa iba pang mga proyekto. Dito namin ipinaliliwanag ang iba't ibang sistema ng module, mula sa konsepto ng mga module hanggang sa tiyak na mga halimbawa ng paggamit.

Ang Konsepto ng mga Module sa JavaScript

Walang orihinal na modular system ang JavaScript. Gayunpaman, habang lumalaki ang mga aplikasyon, naging mahalaga ang modularization upang hatiin ang code sa mga mas maliit na yunit para sa muling paggamit. Ang isang module ay isang bahagi ng code na may tiyak na function na maaaring pamahalaan nang nakapag-iisa mula sa ibang code, na nagpapahintulot nito na mahati sa maraming file.

Pangunahing Mga Uri ng Module

Mayroong iba't ibang mga sistema ng module sa JavaScript. Ang pinakakaraniwang mga ito ay ang ES Modules (ESM) at CommonJS.

• ES Modules ay isang sistema ng module na ipinakilala sa ECMAScript 2015 (ES6), na nagde-define ng mga module gamit ang mga keyword na import at export. Ang sistemang ito ay malawakang ginagamit kapwa sa panig ng kliyente (mga browser) at sa panig ng server (Node.js).

• Ang CommonJS ay isang sistema ng module na pangunahing ginagamit sa Node.js. Ang mga module ay tinutukoy gamit ang require at module.exports upang mag-import at mag-export ng mga file.

Mga Detalye ng ES Modules (ESM)

Ang ES Modules ay ang standard na sistema ng module sa JavaScript, na nagpapadali sa pagpapalitan ng mga functionality sa pagitan ng mga module. Sa mga browser at Node.js, ginagamit ang sistemang ito upang tukuyin at mag-import ng mga module.

export at import

Ang export ay isang keyword para ipakita ang mga functionality ng isang module sa labas. Ang import ay ginagamit upang isama ang mga functionality na tinukoy sa ibang mga module.

Halimbawa: Pag-export ng Module

Maaaring i-export ang mga module sa ES Modules tulad ng sumusunod.

1// math.mjs
2export function add(a, b) {
3    return a + b;
4}
5export function subtract(a, b) {
6    return a - b;
7}

Sa module na math.mjs, ang mga function na add at subtract ay na-export. Ang mga function na ito ay maaaring i-import mula sa ibang mga module.

Dito, ang .mjs ay isang file extension na malinaw na nagpapahiwatig ng JavaScript file na nasa ES Modules format. Sa Node.js, ang file extension ang nagsasabi kung ito ay CommonJS o ES Modules. Gayunpaman, kapag ang type: "module" ay tinukoy sa package.json, ang mga file na may .js extension ay awtomatikong itinuturing na ES Modules.

Halimbawa: Module Import

Maaaring i-import ang mga module sa ES Modules tulad ng sumusunod.

1// main.mjs
2import { add, subtract } from './math.mjs';
3
4console.log(add(3, 5)); // 8
5console.log(subtract(10, 7)); // 3

Sa ganitong paraan, gamit ang import, madali mong magagamit ang mga function na tinukoy sa ibang mga file.

Default Export at Named Export

Mayroong dalawang paraan ng pag-e-export para sa mga module. Ang isa ay named export, at ang isa pa ay default export.

• Ang named exports ay ginagamit kapag nag-e-export ng maraming mga function o variable mula sa isang module. Maaari kang mag-perform ng maramihang export, at sa pag-import, natatanggap mo ito gamit ang itinakdang mga pangalan.

1// utils.mjs
2export function sum(a, b) {
3    return a + b;
4}
5export function multiply(a, b) {
6    return a * b;
7}

1// main.mjs
2import { sum, multiply } from './utils.mjs';
3
4console.log(sum(4, 6));       // 10
5console.log(multiply(3, 5));  // 15

• Ang default export ay ginagamit kapag nag-e-export ng isang function o class mula sa isang module. Sa pag-import, maaari itong tanggapin gamit ang anumang pangalan.

1// greet.mjs
2export default function greet() {
3    return "Hello, World!";
4}

1// main.mjs
2import greet from './greet.mjs';
3
4console.log(greet()); // "Hello, World!"

Isang default export lamang ang posible, ngunit ang named exports ay maaaring mag-export ng maraming elemento nang sabay-sabay.

Halimbawa ng paggamit sa panig ng kliyente (browser).

Halimbawa: Pag-export ng Module

Maaaring i-export ang mga module sa ES Modules tulad ng sumusunod.

1// utils.js
2export function sum(a, b) {
3    return a + b;
4}
5export function multiply(a, b) {
6    return a * b;
7}

Sa module na utils.js, ang mga function na sum at multiply ay na-export.

Halimbawa: Module Import

Maaaring i-import ang mga module sa panig ng kliyente tulad ng sumusunod.

 1<!DOCTYPE html>
 2<html lang="ja">
 3<head>
 4  <meta charset="UTF-8">
 5  <title>ES Modules Sample in HTML</title>
 6</head>
 7<body>
 8  <h1>ES Modules Sample</h1>
 9  <div id="result"></div>
10
11  <script type="module">
12    import { sum, multiply } from './utils.js';
13
14    const result = `
15      <p>sum(3, 5) = ${sum(3, 5)}</p>
16      <p>multiply(10, 7) = ${multiply(10, 7)}</p>
17    `;
18
19    document.getElementById('result').innerHTML = result;
20    console.log(sum(3, 5));      // 8
21    console.log(multiply(10, 7)); // 70
22  </script>
23</body>
24</html>

• Sa pag-set ng type attribute ng <script> tag bilang module, maaaring gamitin ang ES module syntax tulad ng import at export sa loob ng HTML.
• Ang import statement ay naglo-load ng external na utils.js at ipinapakita ang resulta.

Mga Detalye ng CommonJS

Ang CommonJS ay isang module system na pangunahing ginagamit sa Node.js. Ang mga module ay ine-export at ina-import gamit ang module.exports at require.

require at module.exports

Sa CommonJS, ginagamit ang module.exports para mag-export ng mga module. Ginagamit din ang require upang magamit ang mga module mula sa ibang mga file.

Halimbawa: Pag-export ng Module

Maaaring i-export ang mga module sa CommonJS tulad ng sumusunod.

1// math.js
2module.exports = {
3    add: function(a, b) {
4        return a + b;
5    },
6    subtract: function(a, b) {
7        return a - b;
8    }
9};

Halimbawa: Module Import

Maaaring i-import ang mga module sa CommonJS tulad ng sumusunod.

1// main.js
2const math = require('./math.js');
3
4console.log(math.add(4, 7));      // 11
5console.log(math.subtract(9, 2)); // 7

Sa Node.js, ang CommonJS ang ginagamit bilang default na module system, ngunit sinusuportahan din ang ES Modules.

Dynamic Import

Sa JavaScript, ang mga module ay maaaring i-import nang dynamic gamit ang import(). Gumagamit ang paraan na ito ng asynchronous processing upang ma-load ang mga module kapag kinakailangan.

Maaaring gawin ang dynamic na import tulad ng sumusunod.

1async function loadModule() {
2    const math = await import('./math.js');
3    console.log(math.add(5, 3)); // 8
4}
5
6loadModule();

Ang dynamic import ay isang paraan upang mapahusay ang performance ng application. Dahil maaari kang mag-load ng mga module ayon sa pangangailangan sa halip na i-load lahat sa unang pag-load, pinapabilis nito ang bilis ng pagpapakita ng pahina.

Mga Bentahe ng Mga Module

• Pagagamit Muli ng Kodigo

  • Maaaring magamit muli ang modularized na kodigo sa ibang mga proyekto. Sa pamamagitan ng paggawa ng mga module na may karaniwang mga functionality at paggamit sa mga ito sa iba't ibang aplikasyon, ang kahusayan ng pag-develop ay lubos na napabubuti.

• Pinahusay na Kakayahang Mapanatili

  • Sa paghahati ng kodigo sa mga module, mas madali ang baguhin ang mga partikular na tampok o bahagi. Ang pamamahala sa code sa maliliit na yunit ay nagiging mas madali ang paghahanap at pag-aayos ng mga bug.

• Pag-iwas sa Pagkakabanggaan ng mga Namespace

  • Ang pagdeklara ng maraming mga variable at function sa global scope ay maaaring magdulot ng pagkakabanggaan ng pangalan, ngunit naiiwasan ito ng modularization at nakakatulong mapanatiling malinis ang codebase.

• Pamamahala ng Dependency

  • Ang paggamit ng mga module ay nagbibigay-daan upang malinaw na pamahalaan ang mga dependency ng isang aplikasyon. Nagiging malinaw kung aling module ang umaasa sa ibang mga module, na ginagawang mas madaling maintindihan ang istruktura ng code.

Buod

Ang module system ng JavaScript ay isang makapangyarihang paraan upang ayusin ang code at hatiin ito sa mga reusable na bahagi. Sa pamamagitan ng pag-unawa sa mga pagkakaiba ng ES Modules at CommonJS at pagpili ng angkop na module system batay sa proyekto, maaari mong mapabuti ang pagbabasa at pagpapanatili ng code. Bukod dito, sa pamamagitan ng paggamit ng dynamic imports, maaari mong i-optimize ang performance ng aplikasyon.

Gamitin natin ang module system upang makagawa ng mas scalable at episyenteng JavaScript applications.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video