RequireJs 사용법에 대한 자세한 설명

이번에는 RequireJs 사용 방법에 대한 자세한 설명을 가져왔습니다. 우리는 RequireJs가 매우 강력하다는 것을 알고 있습니다. 이 기사에서는 분석할 몇 가지 사례를 제공합니다.

먼저 JavaScript 파일을 로드하세요.

RequireJS의 목표는 기존 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그와 다른 스크립트 로딩 단계를 사용하여 코드의 모듈화를 장려하는 것입니다. 이를 사용하여 코드 속도를 높이고 최적화할 수 있지만 주요 목적은 코드를 모듈화하는 것입니다.

RequireJS는 baseUrl에 상대적인 주소가 있는 모든 코드를 로드합니다. 페이지의 최상위 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그에는 require.js에서 스크립트 로딩 프로세스를 시작하는 데 사용되는 특수 속성 data-main이 포함되어 있으며, baseUrl은 일반적으로 이 속성과 일치하는 디렉터리로 설정됩니다.

baseUrl은 RequireJS를 통해서도 전달될 수 있습니다. 수동 설정을 구성합니다. config 및 data-main이 명시적으로 지정되지 않은 경우 기본 baseUrl은 RequireJS가 포함된 HTML 페이지가 속한 디렉터리입니다.

RequireJS는 기본적으로 모든 종속 리소스가 js 스크립트라고 가정하므로 RequireJS가 모듈을 처리하는 모듈 ID에 ".js" 접미사를 추가할 필요가 없습니다. ID를 경로에 구문 분석할 때 접미사가 자동으로 추가됩니다. 경로 구성을 통해 스크립트 세트를 설정할 수 있으며, 이는 스크립트를 사용할 때 더 적은 단어를 작성하는 데 도움이 됩니다.

때로는 "baseUrl + paths" 구문 분석 과정을 피하고 특정 디렉터리에 스크립트를 로드하도록 직접 지정하고 싶을 때가 있습니다. 지금 이 작업을 수행할 수 있습니다. 모듈이 ID가 다음 규칙 중 하나와 일치하면 해당 ID 구문 분석은 일반 "baseUrl + paths" 구성을 우회하고 대신 현재 HTML 문서와 관련된 스크립트로 직접 로드합니다.

는 ".js"로 끝납니다. "/"로 시작합니다.
"http:" 또는 "https:"와 같은 URL 프로토콜을 포함합니다.

일반적으로, baseUrl 및 "paths" 구성을 사용하여 모듈 ID를 설정하는 것이 가장 좋습니다. 손쉬운 이름 바꾸기, 스크립트 재배치 등과 같은 추가적인 유연성을 제공합니다. 동시에, 지저분한 구성을 피하기 위해 다중 레벨 중첩 디렉토리 계층을 사용하여 코드를 구성하지 않는 것이 가장 좋습니다. 대신 모든 스크립트를 baseUrl에 배치하거나 프로젝트 라이브러리/타사의 평면 구조로 분리합니다.

www/
index.html
js/
app/
sub.js
lib/
jquery.js
canvas.js
app.js

index.html:

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

app.js:

requirejs.config({
  //By default load any module IDs from js/lib
  baseUrl: 'js/lib',
  //except, if the module ID starts with "app",
  //load it from the js/app directory. paths
  //config is relative to the baseUrl, and
  //never includes a ".js" extension since
  //the paths config could be for a directory.
  paths: {
    app: '../app'
  }
});
//Start the main app logic.
requirejs(['jquery', 'canvas', 'app/sub'],
function  ($, canvas, sub) {
  //jQuery, canvas and the app/sub module are all
  //loaded and can be used here now.
});

예제에서 jQuery와 같은 타사 라이브러리는 파일 이름에 버전 번호를 포함하지 않습니다. 별도의 파일에서 버전 정보를 추적하는 것이 좋습니다. volo와 같은 도구를 사용하면 package.json에 버전 정보를 추가하고 디스크의 파일 이름을 "jquery.js"로 유지할 수 있습니다. 이렇게 하면 구성을 최소화하고 각 라이브러리 버전에 대한 경로를 설정하지 않아도 됩니다. 예를 들어 "jquery"를 "jquery-1.7.2"로 구성합니다.

이상적으로 로드된 각 스크립트는 정의()를 통해 정의된 모듈이지만 "브라우저 전역 변수 주입" 유형의 일부 기존/레거시 라이브러리는 해당 종속성을 정의하기 위해 정의()를 사용하지 않습니다. 이를 위해 shim을 사용해야 합니다. 종속성을 나타내기 위한 구성입니다. 종속성을 지정하지 않으면 로드 시 오류가 보고될 수 있습니다. 이는 RequireJS가 속도 문제로 인해 이러한 라이브러리를 비동기적으로 순서 없이 로드하기 때문입니다.

require.js는 로드할 때 data-main 속성을 확인합니다.

HTML을 작성하기 위해 스크립트 기반 DOM을 조작하는 대신

HTML 태그를 사용할 수 있다면 좋을 것입니다. 그러나 JavaScript 파일에 HTML을 삽입하는 좋은 방법은 없습니다. 당신이 할 수 있는 일은 js에서 HTML 문자열을 사용하는 것뿐이지만, 특히 여러 줄 HTML의 경우에는 일반적으로 유지 관리가 어렵습니다. .

RequireJS에는 이 문제를 해결하는 데 도움이 되는 text.js 플러그인이 있습니다. 종속성이 텍스트! 접두사를 사용하는 경우

자동으로 로드됩니다. text.js의 README 파일을 참조하세요.

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

관련 자료:

JS의 부울 값, 관계 연산자, 논리 연산자에 대한 자세한 설명과 예

jQuery의 각 함수에 대한 자세한 설명과 예

네이티브 JS가 AJAX 및 JSONP를 구현하는 방법

위 내용은 RequireJs 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!