Chapter 8: The Module Pattern - hochan222/Everything-in-JavaScript GitHub Wiki

Encapsulation and Least Exposure (POLE)

캡슐화는 종종 객체 지향 (OO) 프로그래밍의 원칙으로 인용되지만 그보다 더 기본적이고 광범위하게 적용 할 수 있습니다. 캡슐화의 목표는 함께 공통 목적을 제공하는 정보(데이터) 및 동작(함수)의 번들링 또는 공동 배치입니다.

Namespaces (Stateless Grouping)

// namespace, not module
var Utils = { 
  cancelEvt(evt) {
    evt.preventDefault(); 
    evt.stopPropagation(); 
    evt.stopImmediatePropagation();
  }, 
  wait(ms) {
    return new Promise(function c(res){ 
      setTimeout(res,ms);
    }); 
  },
  isValidEmail(email) {
    return /[^@]+@[^@.]+\.[^@.]+/.test(email);
  } 
};

Data Structures (Stateful Grouping)

// data structure, not module
var Student = { 
    records: [
        { id: 14, name: "Kyle", grade: 86 },
        { id: 73, name: "Suzy", grade: 87 },
        { id: 112, name: "Frank", grade: 75 },
        { id: 6, name: "Sarah", grade: 91 }
    ],
    getName(studentID) {
        var student = this.records.find( 
            student => student.id == studentID
        );
        return student.name; 
    }
}; 

Student.getName(73);
// Suzy

Modules (Stateful Access Control)

var Student = (function defineStudent(){ 
    var records = [
        { id: 14, name: "Kyle", grade: 86 },
        { id: 73, name: "Suzy", grade: 87 },
        { id: 112, name: "Frank", grade: 75 },
        { id: 6, name: "Sarah", grade: 91 }
    ];

    var publicAPI = { 
        getName
    };
    return publicAPI;

    // ************************

    function getName(studentID) { 
        var student = records.find(
            student => student.id == studentID );
        return student.name; 
    }
})();

Student.getName(73); // Suzy

어휘 범위가 작동하는 방식으로 인해 외부 모듈 정의 함수 내에서 변수와 함수를 정의하면 기본적으로 모든 것이 비공개로 설정됩니다. 함수에서 반환 된 공용 API 개체에 추가 된 속성 만 외부 공용 사용을 위해 내보내집니다. iife의 사용은 우리 프로그램이 일반적으로 "싱글 톤"이라고하는 중앙 모듈의 단일 인스턴스만 필요함을 의미합니다.

Module Factory (Multiple Instances)

// factory function, not singleton IIFE
function defineStudent() { 
    var records = [
        { id: 14, name: "Kyle", grade: 86 },
        { id: 73, name: "Suzy", grade: 87 },
        { id: 112, name: "Frank", grade: 75 },
        { id: 6, name: "Sarah", grade: 91 }
    ];

    var publicAPI = { 
        getName
    };

    return publicAPI;
// ************************ 

    function getName(studentID) {
        var student = records.find(
            student => student.id == studentID
        );
        return student.name; 
    }
}`

var fullTime = defineStudent();
fullTime.getName(73);  // Suzy

Node CommonJS Modules

module.exports.getName = getName;

// ************************

var records = [
    { id: 14, name: "Kyle", grade: 86 }, 
    { id: 73, name: "Suzy", grade: 87 }, 
    { id: 112, name: "Frank", grade: 75 }, 
    { id: 6, name: "Sarah", grade: 91 }
];

function getName(studentID) { 
    var student = records.find(
        student => student.id == studentID 
    );

    return student.name;
}

---

// defining a new object for the API
module.exports = { 
  // ..exports..
};

이것보다는 얕은 복사를 수행하는 아래로 사용합시다.

Object.assign(module.exports,{ 
  // .. exports ..
});

접근은 다음과 같습니다.

var getName = require("/path/to/student.js").getName; 
// or alternately:
var { getName } = require("/path/to/student.js");

Node에서 require는 절대경로를 찾은 뒤 node_modules에서 찾습니다.

Modern ES Modules (ESM)

export { getName };

// ************************

var records = [
    { id: 14, name: "Kyle", grade: 86 }, 
    { id: 73, name: "Suzy", grade: 87 }, 
    { id: 112, name: "Frank", grade: 75 }, 
    { id: 6, name: "Sarah", grade: 91 }
];

function getName(studentID) {
    var student = records.find(
        student => student.id == studentID 
    );
    return student.name; 
}

export function getName(studentID) { 
  // ..
}
export default function getName(studentID) { 
  // ..
}

다음은 일반적으로 불러올 때 쓰는 코드 입니다.

import { getName } from "/path/to/students.js";
getName(73);   // Suzy

import { getName as getStudentName } from "/path/to/students.js";
getStudentName(73); // Suzy

만약 default export를 사용했다면 다음과 같이 불러올 수 있습니다.

import getName from "/path/to/students.js";
getName(73);   // Suzy