js 모듈화란 무엇입니까? JS 모듈화 소개

JS 모듈화란 무엇인가요? JS 모듈화는 처음부터 존재했던 개념은 아니지만, 엔지니어링에 대한 요구사항이 점점 높아지면서 JS 모듈 개발의 필요성이 대두되었습니다. 따라서 js 모듈 개발에 관한 내용이 있습니다. JavaScript 모듈화의 몇 가지 예를 살펴보겠습니다.

모듈형 개발 역사

js는 처음에 ajax가 제안되기 전까지는 프론트엔드가 백엔드에 데이터를 요청할 수 있었고, 프런트엔드 로직은 점점 더 복잡해졌습니다. 전역 변수, 함수 이름 충돌, 처리하기 어려운 종속성 등 많은 문제가 발생했습니다.
당시 이러한 문제를 해결하기 위해 하위 실행 함수가 사용되었습니다. 예를 들어 기존 jquery는 익명의 자체 실행 함수를 사용하여 코드를 캡슐화하고 이를 모두 전역 변수 jquery에 마운트했습니다.

CommonJs

CommonJs는 nodeJs를 통해 전달됩니다. 각 js 파일은 모듈이며 각 모듈은 별도의 범위를 갖습니다. 모듈은 module.exports를 내보내기로 사용하고 객체를 출력합니다. 파일을 읽고 내부 module.exports 객체를 반환하려면 require 메소드를 사용하세요.

CommonJs의 문제점은 로딩이 동기식이라는 점입니다. 이는 서버측에서는 일반적인 일이지만, 비동기식으로 가득한 브라우저에서는 적용되지 않습니다. 브라우저에 적응하는 과정에서 커뮤니티가 분열되었습니다.

AMD

AMD는 비동기 모듈 정의를 의미합니다. 브라우저 측의 모듈 개발을 위한 사양으로, JavaScript에서 기본적으로 지원하지 않기 때문에 AMD 작성자가 AMD 사양을 준수하는 RequireJS를 직접 구현했습니다.
AMD 사양에서는 전역 함수 정의가 모듈을 정의하는 데 사용된다고 규정합니다. 여기서 id는 모듈 식별자이고 종속성은 배열이며 배열 내부는 기타입니다. 모듈이 의존하는 모듈과 팩토리는 모듈의 논리를 포함하는 익명 함수입니다.
회사는 현재 AMD 사양을 사용하고 있습니다.
예:

//main.jsrequire(['a', 'b'], function(a, b){
     console.log('main.js执行');
     a.hello();
     $('#b').click(function(){
          b.hello();
     });
})

requireJs 문제는 모듈에 추가되면 해당 모듈의 모든 종속 모듈이 미리 로드되지만 이러한 종속성은 처음에는 사용되지 않을 가능성이 있다는 것입니다. 동시에 긴 종속성 목록을 작성하는 것도 매우 번거로운 일입니다. 더 좋은 점은 AMD가 commonJs에서 require, exprots 및 module의 세 가지 기능을 유지한다는 것입니다. 이 기능을 모두 종속성으로 작성할 필요는 없지만 필요할 때 require를 사용하여 도입할 수 있습니다.

CMD

requirejs에는 위에서 언급한 좋지 않은 측면이 모두 포함되어 있으므로 이를 개선할 새로운 사항이 있어야 합니다. 이것은 떠오르는 스타 seajs의 작성자입니다. 국내 전문가, 타오바오의 선두주자 유삼촌. seajs는 모듈/래핑 사양을 완전히 수용하며 콜백을 사용하여 requirejs와 같은 모듈을 작성하지 않습니다. 그리고 모듈/래핑 사양을 완전히 따르지 않습니다. seajs는 모듈을 정의하기 위해 선언을 사용하지 않지만, requirejs와 동일한 정의를 사용합니다. (단, 이는 다소 이해에 혼란을 야기할 수 있습니다.) seajs를 사용하여 모듈을 정의하는 방법은 다음과 같습니다.

//main.jsdefine(function(require, exports, module){
     console.log('main.js执行');     var a = require('a');
     a.hello();    
     $('#b').click(function(){
          var b = require('b');
          b.hello();
     });

});

모듈을 정의할 때 종속성 배열을 나열할 필요는 없습니다. 이는 팩토리 함수에 전달되어야 하며, 정규 매개변수 require,exports, module을 호출한 다음 팩토리 함수의 toString 메소드를 호출하고 함수 내용에 대해 정기적인 일치를 수행하고 일치된 항목을 통해 종속성을 분석합니다. require 문을 사용하여 commonjs 스타일 코드를 실제로 구현합니다.

AMD와 CMD의 차이점

AMD와 CMD의 가장 분명한 차이점은 모듈을 정의할 때 종속성을 처리하는 방식이 다르다는 것입니다.
AMD는 사전 종속성을 옹호합니다. 정의 모듈을 만들 때 의존하는 모듈을 선언해야 합니다
CMD는 가까운 종속성을 권장하며 특정 모듈이 사용될 때만 필요합니다
이 차이점에는 장점과 단점이 있습니다. 문법적 차이가 있으며 requireJS와 SeaJS는 서로의 작성 방식을 지원합니다

미래 지향적인 ES6 모듈 표준

ES6에서는 모듈화를 고려하고 가져오기 및 내보내기를 사용하지만 현재 브라우저에서는 지원하지 않습니다. 표준은 단지 프로토타입일 뿐입니다.

관련 권장 사항:

js에서 메서드 캡슐화 - 모듈화

#🎜 🎜# JS require.js 모듈러 도구에 대한 첫 번째 접촉

위 내용은 js 모듈화란 무엇입니까? JS 모듈화 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!