JS에서 모듈성은 어떻게 구현됩니까?-JS 튜토리얼-php.cn

Js의 초기 포지셔닝으로 인해(처음에는 지나치게 복잡한 시나리오에 사용될 것이라고 기대하지 않았습니다), 애플리케이션이 더욱 복잡해짐에 따라 모듈화는 해결해야 할 문제가 됩니다. Feimai의 심층 원칙에 맞춰 모듈화의 베일을 들어올리는 것이 필요합니다. 이 글에서는 Js에서 모듈화가 어떻게 구현되는지를 주로 소개하고, 특정 참고 가치가 있는 모듈화의 작동을 자세히 소개합니다. 관심 있는 분들은 더 많은 정보를 얻으실 수 있으니, 모두에게 도움이 되기를 바랍니다.

1. 모듈화로 해결해야 할 문제

어떤 것을 심층적으로 분석하려면 목적을 가지고 살펴보는 것이 필요합니다. 모듈화로 해결해야 할 문제는 한 문장으로 요약됩니다

글로벌 오염 없이 프로젝트 코드의 더 나은 구성

간단한 예를 들기 위해 이제 다음 코드가 있습니다.

function doSomething () {
 const a = 10;
 const b = 11;
 const add = function (a + b) {
  return a + b
 }
 add (a + b)
}

로그인 후 복사

실제 응용 시나리오에서 , doSomething 은 아주 많은 일을 해야 할 수도 있고 추가 기능은 더 복잡하고 재사용될 수 있으므로 추가 기능을 별도의 파일로 분리하기를 바랍니다. 따라서:

// doSomething.js 文件
const add = require('add.js');
const a = 10;
const b = 11;
add(a+ b);

로그인 후 복사

// add.js 文件
function add (a, b) {
 return a + b;
}
module.exports = add;

로그인 후 복사

이 목적은 분명합니다. 프로젝트 코드를 더 잘 구성하려면 두 파일의 require 및 module.exports를 확인하세요. 현재 관점에서 이는 CommonJS 사양의 키워드에서 나온 것입니다(나중에 사양에 대한 전용 장이 있을 예정입니다). 이는 가져오기 및 내보내기를 나타냅니다. 사양에 관계없이 이는 실제로 모듈화 과정에서 해결해야 할 문제입니다. 또한, add 모듈을 재사용해야 하지만 add 도입 시 전역 오염을 일으키고 싶지 않습니다.

2. 가져온 모듈을 실행하는 방법

위의 예에서는 코드를 두 개의 모듈로 분할했습니다. 파일에서 전역 오염을 일으키지 않고 예제의 코드가 정상적으로 실행될 수 있도록 require를 구현하는 방법은 무엇입니까?

require가 이미 모듈 파일에서 코드 문자열을 읽을 수 있다고 가정하고 모듈 파일 코드의 로딩 프로세스를 무시하고 require는 다음과 같이 구현할 수 있습니다.

function require (path) {
  // lode 方法读取 path 对应的文件模块的代码字符串
  // let code = load(path);
  // 不考虑 load 的过程，直接获得模块 add 代码字符串
  let code = 'function add(a, b) {return a+b}; module.exports = add';
  // 封装成闭包
  code = `(function(module) {$[code]})(context)`
  // 相当于 exports，用于导出对象
  let context = {};
  // 运行代码，使得结果影响到 context
  const run = new Function('context', code);
  run(context, code);
  //返回导出的结果
  return context.exports;
}

로그인 후 복사

몇 가지 사항이 있습니다:

1) 원인 전역 오염의 경우 코드 문자열을 클로저 형식으로 캡슐화해야 하며 module.exports 키워드를 내보내야 합니다. 모듈은 외부 세계와 접촉하는 유일한 전달자입니다. 클로저 익명 함수의 매개변수 및 참조자가 전달한 컨텍스트

2) new Function을 사용하여 코드 문자열을 실행하는 것은 일반적으로 new Function에 익숙하지 않은 것으로 추정됩니다. 함수를 정의하려면 Function 클래스를 사용하여 함수를 직접 생성할 수 있다는 것을 알아야 합니다. 구문은 다음과 같습니다.

var function_name = new function(arg1, arg2, ..., argN, function_body)

로그인 후 복사

위 형식에서 각 arg는 매개 변수이고 마지막 매개 변수는 함수 본문(실행할 코드)입니다. ). 이러한 매개변수는 문자열이어야 합니다. 즉, eval과 유사하게 문자열 코드를 실행하는데 사용할 수 있고, eval과 비교하여 특정 변수의 값을 문자열 코드에 매개변수 형태로 전달할 수도 있습니다

3) 만약 표준 내보내기 키워드는 내보내기만 하는데 실제 사용에서는 module.exports를 사용해야 하는 이유에 대해 의문을 품은 적이 있습니까(Node 코드를 작성한 사람은 이에 익숙해야 함). 그렇다면 이 코드에서 답을 찾을 수 있습니다. 내보내기를 사용하면 컨텍스트를 다시 할당해도 컨텍스트에 아무런 영향을 미치지 않습니다(매개변수의 주소가 전달됨). 믿을 수 없다면 코드를 다음 형식으로 변경하고 다시 실행하세요.

데모 결과

3. 코드 로딩 방법

코드 실행 문제를 해결하려면 모듈 파일 코드 로딩 문제도 해결해야 합니다. 위의 예에 따르면 우리의 목표는 모듈을 로드하는 것입니다. 문자열 형식의 파일 코드

노드 컨테이너에서는 모든 모듈 파일이 로컬에 있으므로 로컬 디스크에서 모듈 파일을 읽어서 문자열 코드를 로드한 후 위의 프로세스를 따르기만 하면 됩니다. Node의 내장 모듈이 아닌 코어 모듈과 C++ 모듈의 로딩 및 실행 방법이 거의 동일하다는 사실이 입증되었습니다(새로운 기능은 아니지만 비슷한 방법입니다)

RN/Weex 컨테이너에서는 원격 Bundle.js를 로드해야 하는 경우 Native의 기능을 통해 원격 js 파일을 요청한 다음 이를 문자열 코드로 읽어서 로드할 수 있습니다. (이 논리에 따르면 Node는 원격 js 모듈을 읽을 수 있는 것처럼 보입니다. 대부분의 경우에는 이 작업을 수행할 필요가 없습니다.)

브라우저 환경에서는 모든 JS 모듈을 원격으로 읽어야 합니다. 안타깝게도 브라우저에서 제공하는 기능에 따라 원격 JS 파일을 다음 형식으로 직접 읽을 수 없습니다. ajax를 통한 파일 스트림은 문자열 코드입니다. 전제 조건을 충족할 수 없으면 위의 작업 전략이 작동하지 않으며 다른 방법을 찾을 수 밖에 없습니다

이것이 CommonJs 사양이 있는 이유이고, AMD/CMD 사양도 있는 이유

그럼 어떻습니까? 브라우저에서 완료되었나요? 브라우저에서 Js 컨트롤을 통해 원격 Js 모듈 파일을 동적으로 로드하려면