프런트엔드 모듈화를 위한 세 가지 사양

이번에는 프론트엔드 모듈화 3가지 사양을 들고 왔습니다. 프론트엔드 모듈화 사양의 주의사항은 무엇인가요?

모듈화라고 하면 이것이 프런트엔드 개발에서 합의가 된 것은 부인할 수 없으며, 저는 개발 과정에서 점차 모듈화의 개념을 받아들이고 모듈화 개발의 이점을 깊이 깨달았습니다. 왜 그런 말을 합니까? 간단한 코드를 살펴보겠습니다. (모듈화 없음)

　

모듈화를 사용하기 전에는 흔히 볼 수 있는 현상입니다. 몸체 하단에 js를 잔뜩 넣는 것인데, 이거 아시나요? 이 방법에는 두 가지 큰 문제가 있습니다:

　1. 리프는 트리에 의존하고 트리는 루트에 의존하기 때문에 위에서 아래로 root.js, tree.js 및 leaf.js의 순서가 엉망이 될 수 없습니다. 순서는 동일합니다. 변경하면 작동하지 않습니다.

　　2. 초보자이거나 초보자라면 leaf.js에 따라 다르다는 것을 알고 있지만 알고 있습니까? tree.js는 실제로 root.js에 의존합니까? 어쩌면 root.js를 실행하려면 다른 js에 의존해야 할까요?

　이때 js 파일 간의 불확실한 종속성을 구하기 위해 모듈화가 등장했습니다.

　　AMD 사양

이 사양에 대해 말하자면, 지금은 사용하는 사람이 거의 없습니다. 이 사양의 초석은 먼저 .js 파일에 require를 도입해야 한다는 것입니다. jQuery 구문을 사용하는 것처럼 먼저 jQuery.js를 로드해야 합니다. 이 짜증나는 require.js를 도입한 후, js 파일 묶음은 세 가지 범주로 나뉩니다:

　첫 번째 범주: 단순 정의(), require.js의 리소스에 대한 참조로 인해(또한 리소스가 전달됨) 매개변수로)를 먼저 정의한 다음 요구/정의해야 합니다. 이 유형은 순수한 정의를 담당합니다.

　 두 번째 유형: 매개변수가 있는 정의(["other 정의된 js"]), 이 범주에서는 다른 잘 정의된 js를 인용하는 동시에 이중 책임을 가정하여 스스로 다른 것을 정의합니다.

　세 번째 범주: simple require(["Other Defined js1 ","Other Defined js2",.. .]), 이 카테고리에서는 자료 인용에만 집중하면 되며, 많은 자료를 참고할 수 있습니다.

　어떻게요? 곤란하다고 생각하시나요? 함수를 전역으로 정의해야 하고, require.js를 참조해야 하므로 과감히 포기하세요.

　

CMD 사양

사실 CMD와 AMD 사양 사이에는 종속 모듈의 실행 타이밍을 다르게 처리한다는 점만 다를 뿐 본질적인 차이는 없습니다.

두 모듈 모두 비동기식으로 로드되지만 AMD는 프런트엔드에 의존하지만 js는 종속 모듈이 누구인지, 어떤 js에 의존해야 하는지 쉽게 알 수 있습니다. 그런 다음 이 js에 의존하려는 이유에 대해 먼저 로드합니다. 먼저 기다려 주세요. 리소스를 로드한 후 이에 대해 논의하겠습니다. CMD는 가까운 종속성이므로 이 종속 모듈을 사용해야 할 때 로드하여 사용하겠습니다.

　이건 어떤가요? 오늘 밤에는 삼국지 5부작을 시청할 것 같습니다. AMD는 에피소드 1부터 5까지 5개의 창을 먼저 열고 모두 버퍼링합니다. 어쨌든 나중에 각 에피소드를 시청할 예정이며, CMD는 첫 번째 에피소드의 창을 먼저 열고 첫 번째 에피소드 시청이 끝날 때까지 기다립니다. 두 번째 에피소드를 보고 싶으면 두 번째 에피소드로 이동하세요.

　 CommonJS 사양

일반적으로 위 두 가지 중 어느 것도 현재 가장 자주 사용되는 것이 아니며 모두가 좋은 모듈 사양으로 인정하는 것은 CommonJS입니다.

CommonJS는 매우 간단합니다. js 파일을 내보내려면 module.export={xxx: 출력하려는 ​​내용}을 사용하고, 다른 js에서는 무언가를 인용하려면 var xxxx= 그냥 인용하면 됩니다. require("xxxx")를 사용하여 모듈을 비동기적으로 로드하는 것이 아니라 한 번에 동기적으로 로드하는 것입니다. 개인적으로 나는 이 표준이 어느 정도 좋다고 말할 수 있다고 생각하며, 이를 설명하기 위해 "666"을 사용하는 것조차도 전혀 거짓이 아니라고 생각합니다. 모든 사람에게 이 표준을 사용하도록 권장합니다.

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

Vue.js 양식 입력 바인딩

JS 유형 값을 부울 유형으로 변환하는 규칙은 무엇입니까

위 내용은 프런트엔드 모듈화를 위한 세 가지 사양의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!