RequireJS 소개 - 첫 번째 example_javascript 기술 구현

RequireJS를 배워야 하는 이유는 무엇인가요?

저 같은 초보자는 수많은 기사에서 언급된 AMD, JS 모듈형 프로그래밍, 비동기... 등을 언급할 것입니다

RequireJS를 사용하면 평소와 다르게 JavaScript를 작성할 수 있습니다. HTML에 JS 파일을 도입하고 스크립트 태그 순서를 통해 종속성을 관리하기 위해 더 이상 스크립트 태그를 사용하지 않습니다.

RequireJS는 js 코드를 관리하는 데 도움이 되는 Javascript 파일 및 모듈 프레임워크입니다(내 이해).

심층적인 연구를 통해 우리는 data-main, require, 정의, baseUrl, paths, shims, deps 등 일련의 명사를 받아들여야 합니다. . . 잠깐만요

요컨대, 많은 기사가 우리가 이해하지도 못하는 용어와 개념을 파고들고 있습니다.

간단하게 유지하세요. 이제 간단한 요구 사항을 만들고 RequireJS를 사용하여 js 코드를 관리하고 jquery를 사용할 수 있어야 합니다!

1. 웹 프로젝트를 빌드하고 실행해보세요!

안에 들어있는 파일은 아래와 같습니다.

여기에는 함정이 많기 때문에 먼저 이러한 작은 문제를 해결하기 위해 모든 파일을 파일 루트 디렉터리에 넣습니다!

그 중 jquery.js와 require.js는 바이두 홈페이지에서 다운로드 받아야 합니다.

2. index.jsp에 스크립트 태그

를 추가합니다.

6c04bd5ca3fcae76e30b72ad730ca86dRequireJS 비동기 로딩 테스트94b3e26ee717c64999d7867364b1b4a3

에 태그를 추가할 수 있습니다.

3.main.js 파일을 보완합니다

require.config({
　　paths: {
　　  jquery: 'jquery-2.1.1'
　　}
});
require(['jquery'], function($) {
　　alert($().jquery);
});

4. 달려라~

팝업 상자가 표시되고 "RequireJS 비동기 로딩 테스트"를 표시하는 페이지가 렌더링됩니다.

요약:

a. RequireJS는 AMD 사양의 창시자이기도 한 James Burke에 의해 만들어졌습니다. 클라이언트 측 모듈 관리를 위한 도구 라이브러리입니다.

이 예에서:

1. 경고가 나타나면 페이지도 동시에 렌더링되는데, 이는 비동기 로딩 기능을 반영합니다. 헤드의 기존 쓰기 방식은 확인을 클릭한 후에만 페이지를 렌더링할 수 있습니다.

2. 페이지에는 require.js만 소개하면 되고, 다른 복잡한 js 코드를 소개할 필요가 없습니다. 나머지 작업은 RequireJS 프레임워크에 맡깁니다.

b. 배우기 전에 먼저 AMD 사양을 이해하세요. AMD는 정의를 통해 모듈을 정의합니다. 정의("id",[deps1,deps2,...],callback);

이 예제가 정의 없이 실행될 수 있는 이유는 무엇입니까? jquery는 AMD를 지원하기 때문입니다. 경로 객체는 다양한 모듈을 소개하는 데 사용됩니다.

일반 js 코드도 RequireJS로 관리할 수 있나요? 예, 심을 사용하여 이러한 리소스를 로드하세요!

c. 향후 코딩 아이디어 요약:

                 각 모듈의 기능 및 변수.

d. 직접 구현: 페이지에 juqery의 클릭 청취 이벤트를 추가하고 모니터링이 성공하는지 테스트하세요.

e. 남은 문제: 경로 문제, 루트 디렉토리에 있을 수는 없지만 이는 문제가 되지 않습니다!

이 글은 RequireJS를 시작하는 첫 번째 예제에 대한 전체 설명입니다. 모든 사람에게 도움이 되기를 바랍니다.