JavaScript
모듈화 기법

범용 모듈 정의 (UMD)

UMD (범용 모듈 정의) 패턴은 여러 모듈 로더 (예 : AMD, CommonJS)에서 모듈을 가져와야하는 경우에 사용됩니다.

패턴 자체는 두 부분으로 구성됩니다.

1. 사용자가 구현중인 모듈 로더를 확인하는 IIFE (Immediately-Invoked Function Expression)입니다. 이것은 두 개의 인수를 취할 것입니다; root (전역 범위에 대한 this 참조) 및 factory (우리 모듈을 선언하는 함수).

2. 모듈을 생성하는 익명의 함수. 이것은 두 번째 인수로 패턴의 IIFE 부분에 전달됩니다. 이 함수는 모듈의 종속성을 지정하기 위해 여러 개의 인수를 전달합니다.

아래 예제에서 AMD, CommonJS를 확인합니다. 이들 로더 중 어느 것도 사용 중이 아니면 모듈과 그 의존성을 전역 적으로 사용할 수있게됩니다.

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['exports', 'b'], factory);
    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
        // CommonJS
        factory(exports, require('b'));
    } else {
        // Browser globals
        factory((root.commonJsStrict = {}), root.b);
    }
}(this, function (exports, b) {
    //use b in some fashion.

    // attach properties to the exports object to define
    // the exported module properties.
    exports.action = function () {};
}));

즉시 호출 된 함수 식 (IIFE)

즉시 호출 된 함수 표현식을 사용하여 공용 API를 생성하는 동안 개인용 범위를 작성할 수 있습니다.

var Module = (function() {
  var privateData = 1;

  return {
    getPrivateData: function() {
      return privateData;
    }
  };
})();
Module.getPrivateData(); // 1
Module.privateData; // undefined

자세한 내용은 모듈 패턴 을 참조하십시오.

비동기 모듈 정의 (AMD)

AMD는 CommonJS 및 익명 폐쇄와 같은 다른 시스템의 공통 문제를 해결하기 위해 노력하는 모듈 정의 시스템입니다.

AMD는 다음과 같은 방법으로이 문제를 해결합니다.

• define ()을 호출하여 factory 함수를 즉시 등록하는 대신 등록
• 의존성을 전역을 사용하는 대신로드 된 모듈 이름의 배열로 전달
• 모든 종속성이로드되고 실행 된 후에 만 ​​팩토리 함수를 실행하십시오.
• 팩토리 함수에 대한 인수로 종속 모듈 전달

여기서 중요한 점은 모듈이 의존성을 가질 수 있으며 개발자가 복잡한 코드를 작성하지 않고도로드를 기다리는 동안 모든 것을 보유하지 않을 수 있다는 것입니다.

다음은 AMD의 예입니다.

// Define a module "myModule" with two dependencies, jQuery and Lodash
define("myModule", ["jquery", "lodash"], function($, _) {
    // This publicly accessible object is our module
    // Here we use an object, but it can be of any type
    var myModule = {};

    var privateVar = "Nothing outside of this module can see me";

    var privateFn = function(param) {
        return "Here's what you said: " + param;
    };

    myModule.version = 1;

    myModule.moduleMethod = function() {
        // We can still access global variables from here, but it's better
        // if we use the passed ones
        return privateFn(windowTitle);
    };

    return myModule;
});

모듈은 이름을 건너 뛰고 익명으로 처리 할 수도 있습니다. 완료되면 일반적으로 파일 이름으로로드됩니다.

define(["jquery", "lodash"], function($, _) { /* factory */ });

또한 종속성을 건너 뛸 수 있습니다.

define(function() { /* factory */ });

일부 AMD 로더는 정의 모듈을 일반 객체로 지원합니다.

define("myModule", { version: 1, value: "sample string" });

CommonJS - Node.js

CommonJS는 Node.js에서 사용되는 인기있는 모듈화 패턴입니다.

CommonJS 시스템은 다른 모듈을로드하는 require() 함수와 모듈이 공개적으로 액세스 가능한 메소드를 내보낼 수있게하는 exports 속성을 중심으로합니다.

다음은 CommonJS의 예입니다. Lodash 및 Node.js의 fs 모듈을로드합니다.

// Load fs and lodash, we can use them anywhere inside the module
var fs = require("fs"),
    _ = require("lodash");

var myPrivateFn = function(param) {
    return "Here's what you said: " + param;
};

// Here we export a public `myMethod` that other modules can use
exports.myMethod = function(param) {
    return myPrivateFn(param);
};

module.exports 사용하여 함수를 전체 모듈로 내보낼 수도 있습니다.

module.exports = function() {
    return "Hello!";
};

ES6 모듈

export function greet(name) {
    console.log("Hello %s!", name);
}

var myMethod = function(param) {
    return "Here's what you said: " + param;
};

export {myMethod}

export class MyClass {
    test() {}
}

import greet from "mymodule.js";

greet("Bob");

import * as myModule from "mymodule.js";

myModule.greet("Alice");

import { greet as A, myMethod as B } from "mymodule.js";

ES6 모듈에 대한 자세한 내용은 모듈 항목을 참조하십시오.