JS 모듈성을 구현하는 방법은 무엇입니까? js 모듈화 설명

이 기사에서 제공하는 내용은 JS 모듈화 구현 방법이 무엇인지입니다. js 모듈화에 대한 설명은 특정 참조 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. CommonJS
배경: 처음에는 모두가 JS가 케이크 조각이고 쓸모가 없다고 생각했습니다. CommonJS는 더 이상 브라우저 기반 애플리케이션을 구축할 수 없습니다. API는 일반 애플리케이션(주로 브라우저가 아닌 애플리케이션)에서 사용되는 많은 API를 정의하여 이러한 격차를 해소합니다. 궁극적인 목표는 Python, Ruby 및 Java와 유사한 표준 라이브러리를 제공하는 것입니다. 이 경우 개발자는 CommonJS를 사용할 수 있습니다. 다양한 JavaScript 인터프리터와 다양한 호스트 환경에서 실행될 수 있는 애플리케이션을 작성하는 API입니다. 2009년 미국 프로그래머 라이언 Dahl은 서버 측 프로그래밍에 JavaScript 언어를 사용하는 node.js 프로젝트를 만들었습니다. 이는 "Javascript 모듈러 프로그래밍"의 공식적인 탄생을 의미합니다. 솔직히 말해서 브라우저 환경에서는 모듈이 없어도 큰 문제가 되지 않습니다. 결국 웹 프로그램의 복잡성은 제한적이지만 서버 측에서는 운영 체제 및 기타 응용 프로그램과 상호 작용할 수 있는 모듈이 있어야 합니다. 그렇지 않으면 프로그래밍 방법이 없습니다.

특정 대표: nodeJs, webpack
Principle: 브라우저가 CommonJS와 호환되지 않는 근본적인 이유는 4가지 Node.js 환경 변수(모듈, 내보내기, 요구, 전역, 긴)가 부족하기 때문입니다. 4개의 변수를 제공할 수 있으므로 브라우저는 CommonJS 모듈을 로드할 수 있습니다.
간단한 구현:

var module = {  
exports: {}
};
(function(module, exports) {  
exports.multiply = function (n) { 
return n * 1000 
};
}(module, module.exports))
var f = module.exports.multiply;
f(5) // 5000

위 코드는 즉시 실행 기능에 두 개의 외부 변수인 모듈과 내보내기를 제공하며 모듈은 다음과 같습니다. 이 즉시 실행 함수 안에 출력 값이 배치되어 모듈 로딩이 구현됩니다.

2. AMD
Background: commonJS 사양을 기반으로 한 nodeJS가 나온 후 그러나 CommonJS는 큰 한계로 인해 서버사이드 모듈이라는 개념이 형성되었습니다. 해당 사양은 브라우저 환경에는 적용되지 않습니다. var 수학 = require('math'); 3);require는 동기식입니다. 모든 모듈이 로컬 하드 디스크에 저장되고 동기식으로 로드될 수 있기 때문에 이는 서버 측에서는 문제가 되지 않습니다. 대기 시간은 하드 디스크를 읽는 시간입니다. 그러나 브라우저의 경우 모듈이 서버 측에 배치되고 대기 시간은 네트워크 속도에 따라 시간이 오래 걸릴 수 있으며 브라우저가 "일시 중단" 상태에 있기 때문에 이는 큰 문제입니다. 상태. 브라우저 측 모듈은 "동기 로딩"(동기)을 사용할 수 없고 "비동기 로딩"(비동기)만 사용할 수 있습니다. 이것이 AMD 스펙 탄생의 배경이다.

특정 표현: RequireJS
사용 예: require([종속성], function(){});
require() 함수는 두 개의 매개변수를 허용합니다.
첫 번째 매개변수는 모든 종속 모듈을 나타내는 배열입니다.
두 번째 매개변수는 콜백 함수로, 이전에 지정한 모듈이 모두 성공적으로 로드되면 호출됩니다. 로드된 모듈은 함수에 매개변수로 전달되므로 이 모듈은 콜백 함수 내에서 사용할 수 있습니다

// 定义模块 myModule.js
define(['dependency'], function(){    
var name = 'Byron';    
function printName(){        
console.log(name);    
}
    return {        
    printName: printName    
    };
    });
// 加载模块
require(['myModule'], function (my){　 
my.printName();
});

3, CMD
배경 생성: CMD는 공통 모듈 정의입니다. CMD 사양은 국내에서 개발되었습니다. AMD에 requireJS가 있는 것처럼 CMD에도 SeaJS 브라우저 구현이 있습니다. SeaJS가 해결해야 할 문제는 requireJS와 동일하지만 모듈 정의 방법과 모듈 로딩(실행, 구문 분석) 타이밍에 차이가 있습니다.
특정 표현: Sea .js
사용 예: Factory는 세 개의 매개변수를 갖는 함수입니다. function(require,exports, module)
require는 모듈 ID를 다른 모듈을 얻기 위한 유일한 매개변수로 받아들이는 메소드입니다. 제공된 인터페이스: require(id)
내보내기는 외부 세계에 모듈 인터페이스를 제공하는 데 사용되는 개체입니다.
module은 현재 모듈과 관련된 일부 속성과 메서드를 저장하는 개체입니다.

// 定义模块  myModule.js
define(function(require, exports, module) {  
var $ = require('jquery.js')  
$('p').addClass('active');});
// 加载模块
seajs.use(['myModule.js'], 
function(my){
});

AMD와 CMD의 차이점:
실행 메커니즘: 모듈에 대한 SeaJS의 태도는 다음과 같습니다. 게으른 실행, RequireJS의 모듈에 대한 태도는 실행 전입니다.
사양 준수: RequireJS는 AMD(Asynchronous Module Definition) 사양을 따르고 Sea.js는 CMD(Common Module Definition) 사양을 따릅니다. 사양의 차이로 인해 두

4, ES6 모듈

간의 API가 달라집니다.

세대 배경: Es6* 이전에는 JavaScript에 모듈 시스템이 없었습니다. 대규모 프로그램을 서로 의존하는 작은 파일로 분할한 다음 간단한 방법으로 조립하는 것은 불가능했습니다. 이는 크고 복잡한 프로젝트를 개발하는 데 큰 장벽이 됩니다. 모듈 종속성 로딩 문제를 해결하기 위해 AMD, CMD, COMMONJS가 등장했는데, AMD와 CMD(둘 사이에도 차이점이 있는데 나중에 설명하겠습니다)는 클라이언트에 사용되고 COMMONJS는 서버에 사용됩니다. es6 등장 이후 모듈은 기능으로 정의되었으며 구현이 매우 간단하여 기존 CommonJS 및 AMD 사양을 완전히 대체하고 브라우저 및 서버를 위한 범용 모듈 솔루션이 될 수 있습니다.
사용 예: 내보내기(던지기) 가져오기(소개) 내보내기 기본값(다른 모듈이 이 모듈을 로드할 때 가져오기 명령은 익명 함수의 이름을 지정할 수 있음)

# 🎜🎜#관련 권장 사항:

JS 모듈화-RequireJS

javascript 모듈러 프로그래밍(재인쇄) , javascript 모듈화_PHP 튜토리얼

위 내용은 JS 모듈성을 구현하는 방법은 무엇입니까? js 모듈화 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!