"일꾼이 일을 잘하려면 먼저 도구를 갈고 닦아야 한다." - 공자, 『논어』.
첫 장 > 프로그램 작성 > 모듈

모듈

2024-11-04에 게시됨
검색:888

Modules

  • 모듈 패턴은 ES6 모듈 이전에 사용되었습니다.
  • 목표: 기능을 캡슐화하고, 비공개 데이터를 지원하고, 공개 API를 공개하며 이 모든 것이 IIFE를 사용하여 달성됩니다.

IIFE: 예. (기능(){})();

// IIFE Goal: Create a new scope, return the data just once. All of data inside IIFE will be private as it would inside the fn scope. 
// Using this way, we don't need to call it separately. And it ensures its called only once.
// IIFE is created only once, goal is 'NOT TO REUSE' by executing it multiple times.

// Result of running an IIFE is stored, or else it will disappear simply.
const ShoppingCart2 = (function(){
  const cart = [];
  const shippingCost = 10;
  const totalPrice = 237;
  const totalQuantity = 10;

  const addToCart = function(product, quantity){
    cart.push({product, quantity});
    console.log(`${quantity} ${product} added to cart. Shipping cost is ${shippingCost}`);
  };

  const orderStock = function(product, quantity){
    console.log(`${quantity} ${product} ordered from supplier`);
  };
  // Need to return something, in order to return a public API. For that, an object is returned containing stuff which needs to be made public.
  return {
    addToCart,
    cart, 
    totalPrice,
    totalQuantity
  };
})();
// Everything inside the above module is private to the module.
// The above fn returns the object mentioned inside return statement and assign it to the ShoppingCart2 variable mentioned at the start of fn. This IIFE is returned then long ago.
// All this is possible because of closures. Hence, addToCart can acccess the cart variable.

ShoppingCart2.addToCart('apple', 4);
ShoppingCart2.addToCart('pizza', 5);
ShoppingCart2;
ShoppingCart2.shippingCost; // inaccessible.

모듈 패턴은 ES6 모듈 이전에도 작동했습니다.

단점:

  1. 이제 ES6 모듈과 같이 파일당 하나의 모듈을 원하는 경우 여러 스크립트를 생성하고 HTML 파일 내에 연결해야 합니다.
  2. 스크립트 로딩 순서도 중요합니다.
  3. 해당 변수는 모두 전역 범위에 존재합니다.

기본 ES6 모듈 및 모듈 패턴 외에도 JS는 JS에 기본이 아닌 다른 모듈 시스템도 지원했습니다. 전. AMD, CommonJS
전. CommonJS 모듈은 Node.js의 모든 존재에 사용됩니다. 최근 ES6 모듈이 Node.js에 구현되었습니다
npm 저장소의 모든 모듈은 npm이 원래 node.js용으로 의도되었기 때문에 여전히 commonJS 모듈 시스템을 사용합니다. 나중에야 npm은 JS 세계 전체의 저장소가 되었습니다. 따라서 우리는 기본적으로 CommonJS에 갇혀 있습니다. 따라서 CommonJS는 Node.js에 미치는 영향으로 여전히 주의를 기울여야 합니다.
ES6 모듈과 마찬가지로 CommonJS에서는 파일 1개가 모듈 1개입니다.
commonJS 코드는 브라우저에서는 작동하지 않지만 node.js에서는 작동합니다
ES 모듈은 결국 모든 모듈 시스템을 대체할 것이지만 현재로서는 commonjs도 사용해야 합니다.

export 키워드는 브라우저는 물론 코드에서도 정의되지 않은 개체입니다.

// EXPORT
export.addToCart = function(product, quantity){
    cart.push({product, quantity});
    console.log(`${quantity} ${product} added to cart. Shipping cost is ${shippingCost}`);
};

// IMPORT: is similar to ES Modules but would use a require fn.
// require is not defined in browser env but its defined in node env as its a part of commonjs
const addToCart = require('./shoppingCart.js')
릴리스 선언문 이 글은 https://dev.to/mahf001/iife-module-pattern-commonjs-5gkd?1 에서 복제되었습니다.1 침해 내용이 있는 경우, [email protected]으로 연락하여 삭제하시기 바랍니다.
최신 튜토리얼 더>

부인 성명: 제공된 모든 리소스는 부분적으로 인터넷에서 가져온 것입니다. 귀하의 저작권이나 기타 권리 및 이익이 침해된 경우 자세한 이유를 설명하고 저작권 또는 권리 및 이익에 대한 증거를 제공한 후 이메일([email protected])로 보내주십시오. 최대한 빨리 처리해 드리겠습니다.

Copyright© 2022 湘ICP备2022001581号-3