다양한 프런트엔드 모듈러 사양

따라야 할 증거와 함께 항상 기억할 수 있도록 몇 가지 핵심 사항을 기록하세요!

모듈화의 길을 되돌아보며.. 잡다한 내용이 너무 많아서 이해만 할 수 있고, 프론트엔드를 모듈화하는 것이 불편합니다. 포괄적인 이해; 지난 며칠 동안 일부 프런트 엔드를 인터뷰한 결과 나를 죽이러 온 전문가를 제외하고 대부분의 사람들은 모듈성에 대해 상대적으로 익숙하지 않고 모듈성이 무엇인지 들어본 적도 없다는 사실을 발견했습니다. 조금 당황스럽습니다. ;오늘날 세계에서 인기 있는 세 가지 프레임워크인 React, Angular(2) 및 Vue를 살펴보세요. 이들의 가장 큰 공통점은 모듈화 및 구성 요소화도 있다는 것입니다. Nodejs: Webpack, Gulp 및 Systemjs는 모듈화 또는 구성 요소화를 기반으로 하며 프로젝트가 원활하게 실행되고 이러한 구성 도구를 사용할 수 있다고 주장한다면 한숨을 쉬게 됩니다. 왜 귀찮게? 프로젝트의 규모에 관계없이 모듈화가 필요하다는 것을 알 수 있으며, 이를 잘 이해하고 실무에 적용해야 하는 것은 한편으로는 작업 효율성을 향상시킬 수 있고 다른 한편으로는 프런트 엔드를 향상시킬 수 있습니다. level;

모듈화에 관해서는 인터넷상의 다양한 의견의 이점에 대해 자세히 설명하지 않겠습니다. 그리고 더 중요한 것은 이를 기반으로 팀원 간의 암묵적인 이해를 형성하는 것입니다. 모듈화, 팀 내 개인 창고 구성 및 통합 관리 백엔드가 패키지를 호출하는 것처럼 자연스럽게 프런트엔드 모듈을 호출하는 목적을 달성합니다.

모든 것이 CommonJS에서 나옵니다.

이게 어떤 프레임워크인지 두려워하지 말고 시간을 들여 배워보세요. CommonJS는 JS의 모듈입니다. JS의 역사적인 이유로 인해 처음에는 모듈성이 없었습니다. 이후 JS는 사실상의 표준이 되었습니다. 브라우저 측에서는 그 상태가 점점 더 중요해졌습니다. CommonJS 사양은 이 문제를 해결하기 위해 제안되었으며 JS는 브라우저 측뿐만 아니라 어디에서나 실행될 수 있기를 바랍니다. 그러다가 Nodejs가 서버 측에 CommonJS 사양을 구현함으로써 JS를 브라우저라는 작은 환경에서 프론트엔드와 백엔드 통신이라는 큰 환경으로 끌어들이게 되었습니다. 미운 오리새끼는 마침내 백조로 변했습니다!

CommonJS 사양에 따르면 파일은 모듈을 참조하고 로드하는 데 필요하며, 모듈을 정의하고 내보내려면 내보내기를 사용하고, 모듈을 식별하려면 모듈을 사용해야 합니다. 그런 다음 내보내기로 내보낸 콘텐츠를 반환합니다. 모듈 읽기 및 실행은 동기식 파일 작업이므로 CommonJS는 서버 측의 Nodejs에 의해서만 전달될 수 있습니다. 여기에서 Nodejs의 모듈화를 볼 수 있습니다. 프런트엔드와 백엔드에서 이동하지만 브라우저 측에서는 이러한 종류의 동기 작업이 적용되지 않습니다. 적어도 시간이 많이 걸리고 후속 코드 실행을 차단하므로 CommonJS는 두 가지 주요 분기를 파생했습니다. 브라우저 측: AMD(Asynchronous Module Definition) 및 CMD(Common Module Definition)

AMD(Asynchronous Module Definition):

AMD는 Define(id)를 통해 모듈을 정의하는 RequireJS로 표현됩니다. ?, 종속성?, 팩토리) 및 require([종속성], function(){}) 모듈을 사용하여 종속 모듈을 미리 비동기적으로 로드하는 방법을 사용합니다. 모듈이 로드된 후 콜백 함수가 실행됩니다. JS의 비동기 메커니즘을 이해하려면 여러 파일이 비동기적으로 병렬로 로드되므로 로드 순서에 따라 예측할 수는 있습니다.

CMD(Common Module Definition):

CMD의 대표는 SeaJS이고, RequireJS는 모듈을 정의하고 로딩하는 방식이 약간 다릅니다. .define(id?, dependency?,factory)을 통해 모듈을 정의할 수도 있지만 SeaJS는 모듈을 로드하기 위해 가장 가까운 종속성 방법을 사용합니다. 일반적으로 종속성에서는 모듈에 의존하지 않고 통합된 방식으로 작성합니다. (function(require,exports,module){}), 공장 근처의 종속 모듈을 로드하고 seajs.use([종속성], function(mod,[mod]){})로 모듈을 사용합니다. 모듈의 비동기 로딩은 RequireJS와 비교하여 로딩 및 실행 시점이 다르다는 것입니다.

이에 비해 Seajs와 Requirejs는 모두 매우 좋은 프런트 엔드 모듈식 구성 솔루션이며 각각 고유한 장점이 있습니다. 프런트 엔드 종속성이 로드되고 실행된 후 기본 코드 로직이 다시 호출됩니다. 누락된 것이 있으면 프런트 엔드 종속성을 최적화해야 하지만 일반적으로 Seajs는 사전에 매우 원활합니다. 종속 모듈을 로드하고 실행하지 않으면 필요할 때 근처에서 사용하세요.

Seajs에 대한 간단한 이해:

좋습니다. 필요없다고 하면 사용하지 마세요

seajs를 잘 활용해보세요!

도구는 생산성에 매우 중요합니다.

브라우저 측에서 널리 사용되는 모듈식 사양은 AMD 및 CMD이지만 도구의 도움으로 여전히 브라우저 측에서 시뮬레이션할 수 있습니다. 예를 들어 CommonJS 사양은 Gulp 및 Webpack과 같은 도구를 사용하여 Nodejs를 작성하는 것처럼 개발 환경에서 프런트엔드 JS 코드를 작성할 수 있으며 도구는 이를 브라우저에서 실행 가능한 JS로 패키징합니다. ;

UMD(범용 모듈 사양):

이제 JS를 프런트엔드와 백엔드 모두에서 사용할 수 있으므로 JS 모듈을 광범위하게 실행할 수 있습니다. 브라우저와 동시에 서버가 실행됩니다. UMD 솔루션은 JS의 크로스 플랫폼 모듈화를 달성하기 위해 다음과 같습니다.

(function(root, factory){
if(typeof define ==='function'&& define.amd){
// AMD
define(['jquery'], factory);
}elseif(typeof exports ==='object'){
// Node, CommonJS之类的
module.exports = factory(require('jquery'));
}else{
// 浏览器全局变量(root 即 window)
root.returnExports = factory(root.jQuery);
}
}(this,function($){
// 方法
function myFunc(){};
// 暴露公共方法
return myFunc;
}));

모듈화 ES6:

JavaScript의 새로운 표준인 ES6에는 모듈 가져오기 및 내보내기를 통해 모듈을 가져오고 내보낼 수 있습니다. 기본 아이디어는 CMD 및 AMD와 유사하지만 결국 기본 지원입니다. 물론 현재 브라우저 환경으로 인해 사용하고 이해하기가 더 쉽습니다. 안심하고 사용하려면 여전히 도구의 힘을 사용하여 변환해야 합니다. -최종 모듈화는 필수입니다! 우리는 현상 유지에 만족할 수 없습니다. 비록 우리가 몇 가지 무작위적인 일을 하더라도 여전히 여러 번 작동할 것입니다. 가만히 있는 것은 한 걸음 물러서는 것입니다. 왜냐하면 우리보다 더 열심히 일하는 위대한 스승들이 너무 많기 때문입니다!