스크립트 태그를 통한 JS의 기본 로딩 방법은 동기화됩니다. 즉, 첫 번째 스크립트 태그의 JS가로드 된 후, 두 번째 스크립트 태그가로드되기 시작하고 모든 JS 파일이로드 될 때까지 켜집니다. 또한, JS의 종속성은 스크립트 순서를 통해 보장되어야합니다. 그리고 JS로드하는 동안 브라우저는 응답을 중단하여 사용자 경험에 큰 영향을 미칩니다. 이를 바탕으로 JS에 대한 많은 솔루션이 나타나고로드되었으며 JS가 필요합니다.
요구 사항에 의해로드 된 모듈은 일반적으로 AMD 표준을 준수하는 모듈, 즉 Ruturn을 사용하여 노출 된 방법 및 변수를 정의하고 반환하는 모듈입니다. 요구 사항은 AMD 표준을 비행하는 모듈을로드 할 수 있지만 더 번거 롭고 이번에는 관련되지 않습니다.
JS 메인로드 필요는 다음과 같은 측면을 포함합니다.
HTML 데모
<script src = "js/require.js"Defer Async = "true"data-main = "js/main"> <!-필요한 js 경로를 제공하고, 비동기로드로 선언하고, 입력 모듈을 main.js로 지정하십시오 (생략 될 수 있음)->.
main.js
require.config ({// 모듈 경로의 위치를 선언합니다. { "jQuery": "libs/jQuery" "login": "libs/login"} // 또는 BaseUrl을 사용하여 모든 모듈의 경로를 지정하십시오. "js/libs"}); // 모듈을로드하려면 사용합니다. 첫 번째 매개 변수는 배열, 즉로드 될 모듈이 배열 순서대로로드됩니다. 두 번째는 콜백 함수이며, 모든 로딩이 완료된 후에 실행됩니다. 요구 ([ 'jQuery', 'login'], function ($, login) {alert ( "jQuery and login module load succes!"); login.do_login (); // 다른});AMD에 따라 로그인 모듈 정의
// jQuery ([ 'jQuery'], function ($)의 정의 정의 정의 {// 일부 정의 기능 함수 do_login () {$ .post ( '/sessions/create', {uname : $ ( "#uname"), password : $ ( "#password"), function (data (data)}); }); // 다른 모듈의 정의 정의 (function () {// 일부 정의는 {xx : xx};});Rails는 JS 로더를 적용하지 않습니다. 한편으로, 새 버전의 Rails Asset Pipe는 여러 JS로드 상태없이 모든 JS 파일을 하나의 JS 파일로 패키지합니다. 반면에 Turbolink는 소위 PJAX 기술을 혼합 칭찬과 비판으로 사용합니다. 기본 링크는 AJAX 메소드로 변경되며 HTML의 BOD 부분 만 가져오고 헤드 부품은 변경되지 않으므로 웹 사이트가 처음 열릴 때만 JS로드가 수행됩니다.
사례 1 : JavaScript 파일로드
<script src = "./ js/require.js"> </script> <script> 요구 사항 ([ "./ js/a.js", "./js/b.js"], function () {myFunctiona (); myFunctionB ();}); </스크립트>요구 메소드의 문자열 배열 매개 변수는 다른 값을 허용 할 수 있습니다. 문자열이 ".js"로 끝나거나 "/"로 시작하거나 URL 인 경우 요구 사항은 사용자가 JavaScript 파일을 직접로드하고 있다고 생각합니다. 그렇지 않으면 문자열이 "my/module"과 유사 할 때, 이것은 모듈이라고 생각하고 해당 모듈이 BaseUrl과 함께 있고 사용자가 구성한 경로가있는 JavaScript 파일을로드합니다. 구성 섹션은 나중에 자세히 설명됩니다.
여기서 기본적으로 요구 사항은 페이지가로드 된 후 MyFunctiona 및 MyFunctionB를 실행해야한다고 보장하지 않습니다. 페이지가로드 된 후 스크립트가 실행되도록 해야하는 경우 요구 사항은 독립적 인 DOMREADY 모듈을 제공합니다. requirejs에는 포함되지 않은 requirejs 공식 웹 사이트 에서이 모듈을 다운로드해야합니다. DOMREADY 모듈의 경우 COSE 1의 코드는 약간 수정되었으며 DOMREADY에 대한 의존성입니다.
사례 2 : 페이지가로드 된 후 JavaScript를 실행합니다
<script src = "./ js/require.js"> </script> <cript> require ([ "domready!", "./js/a.js", "./js/b.js"], function () {myFunctiona (); myFunctB ();}); </스크립트>Case 2의 코드를 실행 한 후 Firebug를 통해 요구 사항이 현재 페이지에 a.js로 <cript> 태그를 각각 a.js로 삽입하고 b.js는 <cript> 태그를 각각 <script> 태그로 삽입하여 JavaScript 파일을 비동기 적으로 다운로드한다는 것을 알 수 있습니다. Async 속성은 현재 대부분의 브라우저에서 지원되는데,이 <cript> 태그의 JS 파일은 다른 페이지 컨텐츠의 다운로드를 차단하지 않음을 나타냅니다.
사례 3 : <script> requirejs에 의해 삽입됩니다
<script type = "text/javaScript"charset = "utf-8"async = ""data-requirecontext = "_"data-requiremodule = "js/a.js"src = "js/a.js"> </script>
JavaScript 모듈을 정의하기 위해 요구 사항을 사용하십시오
여기서 기존 JavaScript 코드와 다른 점은 전역 변수에 대한 액세스가 필요하지 않다는 것입니다. 모듈 식 디자인을 통해 JavaScript 코드는 이러한 "글로벌 변수"가 "글로벌 변수"에 액세스해야 할 때 종속성을 통해 매개 변수로 전달하고 구현에서 글로벌 변수 또는 기능에 액세스하거나 선언하지 않아 많은 수의 복잡한 네임 스페이스 관리를 피할 수 있습니다.
CommonJS의 AMD 사양에 명시된 바와 같이, JavaScript 모듈 정의는 Define 메소드를 통해 구현됩니다.
먼저 간단한 예를 살펴 보겠습니다. 이 예는 기본 프로그램에서 학생 객체를 생성하고 학생 모듈과 클래스 모듈을 정의하여 학생 객체를 수업에 넣습니다.
사례 4 : 학생 모듈, 학생 .js
define (function () {return {createStudent : function (name, gender) {return {name : name, gender};}};}); });사례 5 : 클래스 모듈, class.js
define (function () {var allstudents = []; return {classId : "001", Department : "Computer", addToclass : function (Student) {AllStudents.push (Student);}, getClassSize : functs () {return AllStudents.length;}});사례 6 : 주요 프로그램
요구 ([ "JS/Student", "JS/Class"], 함수 (학생, CLZ) {Clz.addtoClass (학생 .Createstudent ( "jack", "male")); clz.addtoclass (Student.createstudent ( "Rose", "Female")); console.log (clz.getclasssize ());학생 모듈과 클래스 모듈은 모두 독립 모듈입니다. 새 모듈을 정의해 봅시다. 이 모듈은 학생 및 수업 모듈에 의존하므로 기본 프로그램 부분의 논리를 포장 할 수 있습니다.
사례 7 : 학생 및 수업 모듈에 의존하는 관리자 모듈, manager.js
define ([ "js/student", "js/class"], function (student, clz) {return {let사례 8 : 새로운 주요 프로그램
요구 ([ "js/manger"], function (manager) {manager.addnewstudent ( "jack", "male"); manager.addnewstudent ( "rose", "female"); console.log (manager.getmyClassSize ()); // 출력 2});위의 코드 예제를 통해 모듈 작성 방법,이 모듈 사용 방법 및 모듈 간의 종속성을 정의하는 방법을 명확하게 이해했습니다. 사용할 몇 가지 팁이 있습니다.
모듈의 ID를 제공하지 마십시오. AMD 사양에 명시된 바와 같이,이 ID는 옵션입니다. 제공된 경우, 모듈의 마이그레이션 가능성은 요구 사항 구현에 영향을 미치며 파일 위치 변경으로 인해 ID가 수동으로 수정됩니다.
각 JavaScript 파일은 하나의 모듈 만 정의합니다. 모듈 이름 및 파일 경로에 대한 검색 알고리즘은이 메소드가 최적이라고 결정합니다. 여러 모듈과 파일은 Optimizer에 의해 최적화됩니다. 모듈의 원형 의존성을 피하십시오. 피할 수없는 경우 모듈에 "요구 사항"모듈에 종속성을 추가하여 코드에서 직접 사용할 수 있습니다.
require ( "fectionencymodulename")
요구 사항 구성 :
이전 소개에서 우리는 기본적인 질문을 간과 한 것 같습니다. 모듈 이름은 어떻게 생겼습니까? 모듈이 필요한 경우이 모듈은 특정 JavaScript 파일에 어떻게 매핑됩니까? 여기에는 요구 사항을 구성하는 방법이 포함됩니다.
요구 사항을로드하는 가장 간단한 방법은 사례 2에 나와 있습니다.이 경우 BaseUrl 및 요구 사항 경로를 지정하지 않습니다. Case 10에 표시된 메소드 인 경우 Data-Main은 현재 index.html 디렉토리와 평행 한 폴더에 /js/main.js를 프로그램 입력으로 지정하고 /js 디렉토리도 다른 모듈을 정의 할 때 BaseURL로 사용됩니다.
사례 9 : 로딩이 필요합니다 .JS
<script data-main = "js/main"src = "scripts/require.js"> </script>
따라서 이전 예제의 모든 모듈 종속성은 "JS/"에서 "학생", "클래스", "관리자"등을 직접 작성할 수 있습니다. 지정된 BaseUrl 및 경로를 표시하는보다 직접적인 방법은 요구 사항을 사용하여 이러한 매개 변수를 설정하는 것입니다. 경우 10에 표시된대로.
사례 10. 요구 사항 구성
<script type = "text/javascript"src = "./ js/require.js"> </script> <script type = "text/javaScript"> require.config ({baseUrl : "./js", 경로 : { "some/v1"}, waitseconds : 10}); 요구 ([ "일부/모듈", "my/module", "./js/a.js"], function (somemodule, myModule) {}); </스크립트>BaseUrl은 모든 모듈의 기본 URL을 나타냅니다. 예를 들어, "my/module"으로로드 된 스크립트는 실제로 /js/my/module.js입니다. .js로 끝나는 파일은로드 할 때 BaseUrl을 사용하지 않으며 현재 Index.html이 위치한 상대 경로를 사용하므로 여전히 "./js/"를 추가해야합니다. BaseURL이 지정되지 않으면 데이터 메인에 지정된 경로가 사용됩니다.
경로에 정의 된 경로는 위의 예에서 일부/모듈과 같은 모듈의 경로를 대체하는 데 사용됩니다. 특정 javaScript 파일 경로는 /js/some/v1/module.js입니다. Waitseconds는 JavaScript 파일을로드하는 데 걸리는 시간을 지정합니다. 기본값은 사용자가 지정하지 않고 7 초입니다.
또 다른 중요한 구성은 CommonJS AMD 사양을 준수하는 다른 디렉토리 구조를 지정하여 풍부한 확장 성을 가져올 수있는 패키지입니다. Dojo, jQuery 등과 같은 모듈은이 구성을 통해 요구 사항에 의해로드 될 수도 있습니다.
다른 구성 가능한 옵션으로는 로케일, 컨텍스트, DEP, 콜백 등이 있습니다. 관심있는 독자는 요구 사항 공식 웹 사이트에서 관련 문서를 확인할 수 있습니다.