JavaScript 필수사항: 7부

이것은 JavaScript 시리즈의 7번째 부분(전체의 일부)이며, 이 부분에서는 프로젝트를 작은 조각으로 나누어서 다루기 쉬운. 우리는 일종의 관심사 분리를 만들어 프로젝트를 매력적이고 탐색하기 쉽게 만들 것입니다. 모든 일에는 아름다운 부분도 있고, 추악한 부분도 있습니다. 그러니 과용하지 마세요. 꼭 필요할 때 하세요.

앞서 언급했듯이 여기서 초점은 프로젝트의 일부를 별도의 파일로 나누어 내보낸 다음 "메인 앱"으로 가져오는 것입니다. 현재 JavaScript에서는 이를 수행하는 두 가지 방법이 있습니다. commonjs 접근 방식과 ES6의 모듈식 접근 방식을 사용합니다. 모두 훌륭하므로 둘 다 살펴보겠습니다.

CommonJ

지정되지 않은 경우 commonjs를 사용한 가져오기 및 내보내기가 기본값입니다. 이것이 우리가 할 수 있는 방법입니다. const readline = require("readline");. readline은 내장 패키지입니다. 우리 프로젝트에 작성된 타사 패키지나 모듈에 이 접근 방식을 사용할 수 있습니다.

• commonjs를 사용한 가져오기는 const someVarNameForTheModule = require("modNameOrPath");를 사용하여 수행됩니다.
• module.exports = thingToExportOrStructuredObjectToExport를 수행하여 내보냅니다.

프로젝트

수학을 수행하는 프로젝트를 시작하겠습니다. 더하고 빼는 함수를 만들어 보겠습니다. 딱 이 두가지 입니다.

• 프로젝트 폴더 cmodule 만들기: cd ~/Projects && mkdir cmodule && cd cmodule
• npm init -y를 수행하여 노드 프로젝트를 초기화합니다.
• package.json 파일에 "type": "commonjs"를 추가하도록 선택할 수 있습니다. 그것이 기본값이기 때문에 선택할 수 있다는 뜻입니다.

  {
    "name": "cmodule",
    "version": "1.0.0",
    "main": "index.js",
    "type": "commonjs",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "description": ""
  }

• 두 개의 파일 lib.js 및 main.js를 만듭니다. touch lib.js main.js
• lib.js에 추가 기능에 대한 본문을 구현합니다.

  function add(x, y) {
    // return the sum of x and y
  }

• 이제 기능 구현이 완료되었으므로 main.js에서 사용할 수 있도록 내보내야 합니다. 내보내려면 module.exports = functionName을 사용합니다. 우리의 경우 module.exports = add를 수행합니다.

  module.exports = add;

• 여기서는 lib.js 전체가 추가 기능입니다. 추가 기능으로 lib.js를 내보냈습니다. 따라서 이를 다음과 같이 가져올 수 있습니다. const someName = require("./lib");
• main.js에서 lib.js 파일을 import하고 add 기능을 활용해 보겠습니다.

  const lib = require("./lib");
  // we did, "./lib", "dot slash lib", because main.js and lib.js are in the same folder.

  console.log(lib(1, 2));

• 뺄셈 기능을 추가해보자

  function sub(x, y) {
    // returns the difference x and y
  }

• 이러한 기능을 직접 구현해야 합니까?

• 질문은 서브를 어떻게 내보낼 수 있느냐는 것입니다. 사용해보시고 main.js

  에서 액세스해 보세요.

• 이렇게 하면 module.exports = X, X가 전체 모듈로 내보내지므로 const moduleName = require("moduleName");을 가져올 때 X에 직접 액세스할 수 있습니다. 동일한 접근 방식으로 다른 값을 내보낼 수 없습니다.

• 이런 경우에는 add와 sub를 모두 그룹(객체)으로 내보내서 내보낼 수 있습니다.
  

  {
    "name": "cmodule",
    "version": "1.0.0",
    "main": "index.js",
    "type": "commonjs",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "description": ""
  }

• 이제 main.js에서 가져오면 다음을 수행할 수 있습니다.

  function add(x, y) {
    // return the sum of x and y
  }

• lib 모듈은 moduleName.add 및 moduleName.sub 객체로 내보내집니다.

• 구조 분해를 통해 가져올 수도 있습니다. const { add, sub } = require("./lib");
  

  module.exports = add;

• 여러 내보내기를 수행하는 또 다른 방법이 있습니다.

  const lib = require("./lib");
  // we did, "./lib", "dot slash lib", because main.js and lib.js are in the same folder.

  console.log(lib(1, 2));

또는

  function sub(x, y) {
    // returns the difference x and y
  }

• imports.alias = someThing 및 imports.someThing= someThing 또는 module.exports = { someThing }처럼 작동합니다. 나는 일반적으로 imports.alias = someThing을 선택합니다. 왜냐하면 module.exports = { ... }가 추가 줄을 가질 수 있기 때문입니다.

ES 모듈

ES 모듈 스타일을 사용한 가져오기 및 내보내기는 현재 기본값이 아니므로 에서 type 속성을 ​​"module"으로 설정하여 명시적으로 지정해야 합니다. package.json 파일입니다. 이 경우, "readline"에서 readline을 가져올 수 있습니다. const readline = require("readline"); 대신. const를 import로, =와 require를 from으로 대체했습니다.

• ES 모듈 가져오기는 import someVarNameForTheModule from "modNameOrPath";로 수행됩니다.
• 기본 thingToExportOrStructuredObjectToExport 내보내기 또는 thingToExportOrStructuredObjectToExport 내보내기를 통해 내보냅니다.

프로젝트

ES 모듈 스타일의 가져오기 및 내보내기를 사용하여 유사한 프로젝트를 구축하겠습니다. 이전에 했던 것처럼 더하고 빼는 함수를 만들어보겠습니다. 그러니 이번에는 복사해서 붙여넣으시면 됩니다.

• 프로젝트 폴더 만들기 emodule: cd ~/Projects && mkdir emodule && cd emodule
• 노드 프로젝트 초기화: npm init -y
• package.json 파일에 "type": "module"을 추가합니다.

  module.exports = { add, sub };

• 두 개의 파일 lib.js 및 main.js를 만듭니다. touch lib.js main.js

• lib.js
  에 추가할 본문을 구현합니다.

  {
    "name": "cmodule",
    "version": "1.0.0",
    "main": "index.js",
    "type": "commonjs",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "description": ""
  }

• 이제 추가 기능이 구현되었으므로 main.js에서 사용할 수 있도록 내보내야 합니다. 내보내려면 내보내기 기본 functionName을 사용할 수 있습니다. 우리의 경우에는 기본 추가를 내보냅니다.

  function add(x, y) {
    // return the sum of x and y
  }

• 우리도 할 수 있었어

  module.exports = add;

• 여기서는 lib.js 전체가 추가 기능입니다. 추가 기능으로 lib.js를 내보냈습니다. 따라서 import someName from "./lib";로 가져올 수 있습니다.
• main.js에서 lib.js 파일을 import하고 add 기능을 활용해보겠습니다.

  const lib = require("./lib");
  // we did, "./lib", "dot slash lib", because main.js and lib.js are in the same folder.

  console.log(lib(1, 2));

• 뺄셈 기능을 추가해보자

  function sub(x, y) {
    // returns the difference x and y
  }

• 질문은 서브를 어떻게 내보내나요?
• 이런 경우에는 add와 sub를 모두 그룹(객체)으로 내보내서 내보낼 수 있습니다.

  module.exports = { add, sub };

• 이제 main.js에서 가져오면 다음을 수행할 수 있습니다.

  const lib = require("./lib");
  // lib is an object so we can do lib dot someThing

  console.log(lib.add(1, 2));
  console.log(lib.sub(1, 2));

• import { add, sub } from "./lib";를 수행하여 가져올 수도 있습니다.

  const { add, sub } = require("./lib");

  console.log(add(1, 2));
  console.log(sub(1, 2));

• 여러 내보내기를 수행하는 또 다른 방법이 있습니다.

  exports.add = function add(x, y) {
    // return the sum of x and y
  };

  exports.sub = function sub(x, y) {
    // return the difference of x and y
  };

또는

  exports.add = function (x, y) {
    // return the sum of x and y
  };

  exports.sub = function (x, y) {
    // return the difference of x and y
  };

• 이런 종류의 접근 방식에서는 전체 내보내기를 하나의 가져오기로 묶거나 개별 가져오기에 하나씩 액세스합니다.

  {
    "name": "emodule",
    "version": "1.0.0",
    "main": "index.js",
    "type": "module",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "description": ""
  }

또는

  function add(x, y) {
    // return the sum of x and y
  }

요약

commonjs 또는 es 모듈을 사용하는 경우 가져오기 및 내보내기 스타일은 상대적입니다. commonjs에는 구성이 없으므로 그대로 사용하지 않는 이유가 무엇인지 묻습니다. module.exports = someObject는 기본 someObject 내보내기와 동일합니다. const someObject = require("pathToModule"); 로 가져올 수 있습니다. "pathToModule"에서 someObject를 가져옵니다. 나는 당신이 무엇을 선택하든 괜찮다고 말했습니다. 동일한 파일에 모듈/기본 내보내기와 개별 내보내기가 있을 수 있습니다.

다음은 제가 백엔드 프로젝트를 개발할 때 고수하려고 노력하는 몇 가지 규칙입니다.

• 기본 내보내기나 모듈 내보내기를 최대한 피하고 개별 개체 내보내기를 사용합니다
• 컨트롤러가 있는 경우 동일한 파일에서 다른 항목을 내보내지 않고 기본/모듈 내보내기를 사용합니다. 따라서 module.exports를 사용하거나 기본값을 내보낼 때마다 동일한 파일에서 다른 내보내기를 수행하지 않습니다
• 객체를 사용하여 상수를 그룹화하고 기본적으로 내보내거나 모든 상수를 개별적으로 내보냅니다.
• 이름을 지정하지 않고 개체를 내보낼 수 있으며 별칭(사용자가 지정한 이름)을 사용하면 잘 작동하지만 내보낼 이름을 지정하는 것을 선호합니다

다음은 무엇일지 추측할 수 있나요? 글쎄, 우리는 백엔드 마술을 시작하겠습니다. 백엔드 개발을 시작하겠습니다.

사이드 프로젝트

어려우면 여러 파일을 사용하여 마스터마인드 프로그램을 다시 작성하세요. 주제에 관해 나는 당신에게 도전할 것입니다. 이 프로젝트를 완료하세요. 작동하도록 다시 작성하거나 작동하도록 하고 오늘의 교훈을 적용하기 위해 해야 할 모든 작업을 수행하십시오.

  {
    "name": "cmodule",
    "version": "1.0.0",
    "main": "index.js",
    "type": "commonjs",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "description": ""
  }

위 내용은 JavaScript 필수사항: 7부의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!