JS 모듈성-RequireJS-JS 튜토리얼-php.cn

오늘은 JS 모듈화 - RequireJS를 가져왔습니다. JS 모듈화와 RequireJS 사용 방법에 대한 주의사항은 무엇인가요? 다음은 실제 사례입니다. 살펴보겠습니다.

저는 RequireJS에 대해 늘 들어봤지만 이해할 기회가 없었습니다. 단지 js용 모듈화를 위한 API라는 것만 알고 있을 뿐입니다. 저는 최근 React를 작업하고 있는데, React의 구성 요소화 아이디어는 js 모듈화 아이디어와 일치합니다. 그냥 React를 적용하면서 프로젝트에 RequireJS를 추가해서 페이지 로딩이나 개발에 좋은 영향을 미칠지 알아보고 싶습니다.

RequireJS란 무엇인가요?

RequireJS가 무엇인지 설명하기 전에 Javascript모듈화 역사의 배경을 언급해야겠습니다. 사실 초기에 JavaScript는 거대한 비전을 지닌 새로운 스크립팅 언어로 등장했습니다. 클라이언트만을 위해 설계된 언어는 아니었습니다. 단지 나중에 웹 애플리케이션이 인기를 끌면서 JavaScript가 브라우저 측 스크립팅 언어로 빠르게 확산되었고 Netscape와 Microsoft 간의 경쟁으로 인해 조기에 표준화되었을 뿐입니다. 이로 인해 JS에 많은 결함이 생겼는데, 그 중 하나가 모듈성입니다. (하지만 자바스크립트가 실제로 가져오기, 내보내기 등을 예약어로 사용한다는 사실을 보면 놀랄 수 있는데, 이는 실제로 설계 과정에서 고려했음을 보여줍니다. 새로운 표준 es6에서는 기본 모듈화 지원도 허용합니다. 그런 다음 웹 애플리케이션이 점점 더 복잡해지면서 점점 더 많은 JavaScript 코드가 내장되고 노드가 증가함에 따라 모듈식 프로그래밍이 필수가 됩니다.

그래서 나중에 Dojo 툴킷과 Google의 Closure 라이브러리에서 지원되는 모듈 시스템이 있었습니다. CommonJS와 AMD라는 두 가지 매우 일반적인 표준 사양도 있습니다. 여기서는 자세히 설명하지 않겠습니다. CommonJS 사양을 구현하는 API는 모듈을 동기적으로 로드하는 반면, AMD 사양을 구현하는 API는 비동기적으로 모듈을 로드한다는 것만 알면 됩니다.
그래서 이론적으로는 AMD 사양의 논블로킹 로딩이 브라우저 측에 더 적합합니다. RequireJS는 AMD 사양을 가장 잘 구현한 것입니다. 공식 문서에서 RequireJS에 대한 설명을 복사하세요.

RequireJS는 JavaScript 모듈 로더입니다. 브라우저에서 사용하기에 적합하지만 Rhino 및 Node와 같은 다른 스크립팅 환경에서도 사용할 수 있습니다. RequireJS를 사용하여 모듈식 스크립트를 로드하면 코드의 로딩 속도와 품질이 향상됩니다.

왜 RequireJS가 필요한가요?

이제 RequireJS가 무엇인지 알았으니 RequireJS를 사용하는 이유도 거의 알게 되었습니다. 하지만 RequireJS 사용의 이점을 요약해 보겠습니다.

비동기 "로딩". 우리는 js를 실행하는 브라우저로 인해 페이지가 차단되는 것을 방지하기 위해 웹사이트가 일반적으로 html의 끝에 스크립트를 배치한다는 것을 알고 있습니다. RequireJS를 사용하면 해당 js가 로드된 후 콜백 함수가 실행됩니다. 이 프로세스는 비동기식이므로 페이지를 차단하지 않습니다.

주문형 로드. RequireJS를 통해 js 로직을 로드해야 할 때 해당 js 모듈을 로드할 수 있으므로 웹 페이지를 초기화할 때 많은 요청과 데이터 전송을 피할 수 있습니다. 아마도 어떤 사람들에게는 일부 모듈을 전혀 사용하지 못할 수도 있습니다. 필요하다면 불필요해 보입니다.

모듈 종속성 관리가 더욱 편리해졌습니다. 스크립트 태그 순서 문제로 인해 종속성 오류가 발생한 것 같습니다. 이 함수는 정의되지 않았고 해당 변수는 정의되지 않았습니다. RequireJS의 메커니즘을 통해 모든 종속 모듈이 로드된 후 관련 파일이 실행되도록 보장하여 종속성 관리에 역할을 할 수 있습니다.

버전 관리가 더 효율적입니다. jQuery2를 도입하기 위해 여전히 스크립트 스크립트를 사용하고 있다면 이 100페이지를 수정해 보세요. 그러나 requireJS의 구성에 jQuery 경로 매핑이 있는 경우 한 곳만 변경하면 됩니다.

물론 cdn에서 js 파일을 로드할 수 없거나 로컬 파일을 요청할 수 있다는 등의 다른 장점도 있습니다. 여기에 모두 나열하지는 않겠습니다.

RequireJS는 페이지에 추가해야 하는

파일을 사용합니다

<script data-main="js/main" src="xxx/xxxx/require.js"></script>

로그인 후 복사

RequireJS를 사용하면 require.js만 추가하면 됩니다. 더 나은 방법은 페이지의

저자별 최신 기사

최신 PHP Programmer Toolbox v1.0 버전 소개

2018-06-11 11:57:34
vue.js 라우팅 실패를 처리하는 방법

2018-06-15 15:55:18
js를 사용하여 데이터베이스를 구문 분석하는 방법(코드 포함)

2018-06-15 15:49:00
js를 사용하여 프로젝트에서 DOM 이벤트를 바인딩하는 방법

2018-06-15 15:46:15
JS 문자열 및 특수문자 조작 방법

2018-06-15 15:42:38
프로젝트의 jQuery 내에서 각 메서드를 사용하는 방법

2018-06-15 15:40:34
jquery를 사용하여 파일을 업로드하는 방법

2018-06-15 15:39:32
JS 프로토타입 및 프로토타입 체인 사용 방법

2018-06-15 15:37:14
Angular CLI+Angular 5 실습 프로젝트 시연

2018-06-15 15:34:21
jQuery를 사용하여 노드 요소 교체(코드 첨부)

2018-06-15 15:22:51

에서 2024-04-06 19:25:49

505

d3.js를 확대할 때 산점도 값이 유지되지 않습니다. d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...

에서 2024-04-06 18:16:26

403

공급업체별 의사 요소에 대한 JavaScript 호버 이벤트 나는 아래에 HTMLinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',fun...

에서 2024-04-06 15:35:24

274

Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...

에서 2024-04-06 14:54:03

421

CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요. 클래스 Collapseshow를 사용하여 패널의 카드 제목 스타일을 지정하고 싶습니다. 이 예에서는 첫 번째 패널입니다. CSS를 사용하여 .accordion.c...

에서 2024-04-06 12:53:11

376