이 기사는 다중 페이지 애플리케이션의 예제 분석과 함께 요구 사항에 대한 일부 지식 포인트에 대한 요약입니다.
이 경우의 디렉토리 구조는 다음과 같습니다.
요구 사항 API 세 가지 주요 함수 : 정의 (만들기 모듈), 요구 사항 (로드 모듈) 및 구성 (구성)
1. html 파일에 js 파일을로드합니다
Page1.html의 내용은 다음과 같습니다.
<! docType html> <html> <head> <title> Page 1 </title> <Script DataMain = "Scripts/Page1"Src = "Scripts/lib/require.js"> </script> </head> <a href = "page2.html"> 2 페이지 </html> </html> </html>
page2.html의 내용은 다음과 같습니다.
<! docType html> <html> <head> <title> Page 2 </title> <Script DataMain = "Scripts/Page2"Src = "Scripts/lib/require.js"> </script> </head> <a href = "page1.html"> 1 페이지로 이동 </html>
지식 확장 :
데이터 메인 속성은 웹 프로그램의 기본 모듈을 지정 하며이 파일은 먼저 requirejs에 의해로드됩니다. 요구 사항의 기본 파일 접미사 이름은 JS이므로 Page1.js는 Page1로 약칭 할 수 있습니다.
스크립트 파일로드에 대한 루트 경로 우선 순위 규칙
require ()가있는 모듈을로드 할 때 .js 접미사는 생략되고 baseurl에서 검색됩니다. .js 접미사가 있거나 "/"로 시작하거나 URL 프로토콜 (http/https)을 포함하는 경우 루트는 다음과 같습니다.
특정 경로 설정에 따라 검색하십시오
config> data-main> default baseUrl
Data-Main 및 Config가 설정되지 않은 경우 기본 BaseUrl은 참조가 필요한 HTML 페이지에 JS가있는 디렉토리입니다.
SET DATA-MAIN, BASEURL은 기본 모듈이있는 디렉토리입니다 (예 : 첫 번째 HTML의 기본 모듈은 Page1.js이므로 위치/스크립트의 디렉토리는 루트 디렉토리입니다)
구성을 구성하고 명시 적으로 BaseURL을 설정하고 각 모듈에 대해 별도의 경로를 설정하십시오.
2. 모듈의 경로를 구성하십시오.
요구 사항을 사용하여 모듈의로드 동작을 사용자 정의하려면 require.config () 메소드를 사용하십시오. 다중 페이지 응용 프로그램에서 구성은이 예제에서 common.js 파일과 같은 공통 파일로 작성 될 수 있습니다. 그런 다음 각 페이지가 현재 구성을로드하면 콜백 기능에 필요한 모듈이로드됩니다.
Common.js 코드는 다음과 같습니다.
require.config ({baseurl : 'scripts/app', 경로 : {jQuery : [ 'http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min', '../lib/jquery']});지식 확장 :
지원되는 구성 항목 :
baseurl :
모든 모듈에 대한 검색 루트 경로. 참고 :로드 된 JS 파일 (.js로 끝나고 "/"로 시작하고 프로토콜이 포함되어 있음)가 사용되지 않습니다. BaseUrl은 사용되지 않습니다.
경로 :
Path Maps BaseUrl 바로 아래에 배치되지 않은 모듈 이름. 경로 설정이 "/"로 시작하거나 URL 프로토콜을 포함하지 않는 한 경로를 설정할 때의 시작 위치;
참고 : 경로 해상도 메커니즘은 .js 접미사를 자동으로 추가하기 때문에 경로에 정의 된 경로는 .js 접미사를 포함 할 수 없습니다. 로딩 경로는 여러 번 설정할 수 있습니다. CDN의 로딩이 실패하면 로컬 JS 파일이로드됩니다.
틈 메우는 나무:
종속성을 선언하기 위해 define ()을 사용하지 않는 모듈에 대한 구성;
주의를 기울여야하는 두 가지 매개 변수가 있습니다.
(1) 값 내보내기 (출력 변수 이름), 노출 메소드 인터페이스
(2) 디스크 배열, 모듈의 종속성을 나타냅니다
좋다:
require.config ({baseurl : '/scripts/lib', shim : {zepto : {exports : '$'}, 백본 : {deps : [ 'aUdterscore', 'Zepto'], 내보내기 : '백본'}, 'Zepto.animate': [Zepto '}});3. 모듈로드
Page1.js 코드는 다음과 같습니다.
요구 ([ './ common'], function (common) {require ([ 'saypage1'], function (saypage1) {saypage1.hello ();});Page2.js 코드는 다음과 같습니다.
요구 ([ './ common'], function (common) {require ([ 'saypage2'], function (saypage2) {saypage2.hello ();});지식 확장 :
require () 함수는 두 매개 변수를 허용합니다. 첫 번째 매개 변수는 의존하는 모듈을 나타내는 배열입니다. 두 번째 매개 변수는 콜백 함수이며 현재 지정된 모든 모듈이 성공적으로로드 된 후에 만 호출됩니다. 로드 된 모듈은 콜백 함수의 매개 변수로 호출 될 수 있습니다.
구성이 완료된 후에 만 필요한 모듈이로드되도록하려면 주로 경로의 올바른 분석을위한 것이며 콜백 함수에서 필요합니다.
4. 모듈의 정의
saypage1.js의 코드 :
define ([ 'jquery'], function ($) {function sayshi () {$ ( 'body'). Append ( '<h1> hello page1! </h1>');} return {hello : sayhi}});지식 확장 :
Define 함수는 또한 두 개의 매개 변수를 허용합니다. 첫 번째 매개 변수는 종속 모듈의 배열이고 두 번째 매개 변수는 콜백 함수입니다.
물론 마침내 시작되면 JS 파일을 병합하고 압축해야합니다. 편리하고 빠른 R.JS를 사용할 수 있습니다 ~
위의 것은 편집자가 소개 한 요구 사항에 대한 예제 분석입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!