대부분의 프로젝트는 모듈 식 개발을 사용하므로 요구 사항은 AMD 모듈 개발을위한 모델이므로 배워야합니다. 요구 사항을 단계별로 사용하여 데모를 작성함으로써 요구 사항의 전반적인 개발 과정과 요구 사항을 직접 사용하는 느낌을 배울 수 있습니다.
AMD : 모듈을 기반으로 JavaScript 코드의 비동기로드 메커니즘. 개발자는 JavaScript 코드를 모듈로 캡슐화 할 것을 권장하며, 전역 객체에 대한 의존성은 많은 글로벌 변수를 선언하지 않고 다른 모듈에 대한 의존성이됩니다. 지연 및 주문형 로딩을 통해 개별 모듈의 종속성을 해결하십시오. 모듈 식 자바 스크립트 코드의 이점은 분명합니다. 다양한 기능성 구성 요소의 느슨한 결합은 코드의 재사용 성과 유지 가능성을 크게 향상시킬 수 있습니다. 이 JavaScript 코드의 비 블로킹 동시 빠른 빠른로드는 웹 페이지의 다른 UI 요소를 가능하게하여 그림, CSS 및 기타 DOM 노드와 같은 JavaScript 코드에 의존하지 않는 다른 UI 요소가 먼저로드하여 웹 페이지가 더 빨리로드되고 사용자도 더 나은 경험을 얻습니다.
1. requiejs를 다운로드하십시오
Requiejs와의 모듈 식 개발 전에 무언가를 준비해야합니다. 요구 사항을 기반으로 개발되었으므로 require.js 파일 Hahaha를 다운로드해야합니다.
2. HTML 파일을 만듭니다
HTML 파일을 작성한 후 importing requirejs는 <cript> 태그를 사용해야합니다. 이에 대해 의심의 여지가 없습니다. 그런 다음이 태그에는 데이터 메인 속성이 있습니다. 그 기능은 입구 및 종료 역할을하는 것입니다. 즉, 요구 사항을로드 후 데이터 메인 속성에서 입력하는 것입니다.
예를 들어 다음은 다음과 같습니다.
<! docType html> <head> <title> 요구 </title> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/</head> <body> <! src = "js/require.js"> </script> </body> </html>
js/require.js를로드하면 JS/Main의 JS 파일을 실행합니다. 메인은 또한 JS 파일입니다. 우리는 .js 접미사를 생략 할 수 있으며 요구 사항을 추가합니다.
3. 데이터 메인
프로그램이 <script data-main = 'js/main'src = 'js/require.js'> </script>를 실행 한 후 data-main을 통해 main.js를 입력하고 main.js를 실행하십시오. 그래서 main.js는 무엇입니까?
코드를 참조하십시오 :
/* config execute baseurl은 'js'로 실행됩니다. BaseUrl은 모듈 파일의 루트 디렉토리를 말합니다.이 파일은 절대 경로 또는 상대 경로가 될 수 있습니다*/require.config ({baseurl : 'js', paths : {jquery : 'jquery-18.2.min'}); 원숭이-> mk*/require ([ 'monkey'], function (mk) {mk.init ();})와 같은 익명 함수;위의 코드에서 Main.js에는 요구 사항이 포함되어 있음을 알 수 있습니다. require.config 및 요구 사항.
require.config의 함수는 요구 사항의 일부 매개 변수를 구성한 다음 공개적으로 참조하는 것입니다.
예를 들어, 위의 BaseURL의 기능은이를 기본 경로로 사용 하고이 경로에서 파일을 검색하는 것입니다. 모든 .js 파일을 JS 폴더에 넣습니다. 따라서이 속성을 구성한 후 후속 파일은 JS 경로에서 컨텐츠를 검색합니다.
다음과 같이 :
요구 ([ 'monkey'], function (monkey) {monkey.init ();});원숭이를 말하면 JS/원숭이가 아닌 참조 원숭이입니다.
경로의 역할은 무엇입니까? 일반적으로 사용되는 일부 JS 파일을 공통 이름으로 바꾸는 것입니다. 예를 들어, jquery-1.8.2.min.js는 호출 할 때마다 이것을 쓸 수 없으므로 편의를 위해 jquery-1.8.2.min.js를 대체합니다. 앞으로는 jQuery를 직접 사용할 수 있습니다. 이는 빠르고 편리합니다.
좋아요, 요구. Config는 기본적으로 그것에 익숙합니다. 한마디로, 그 기능은 요구 사항을 구성하는 것입니다.
필요한 것은 어떻습니까?
요구의 기능은 실행하는 것입니다. 예를 들어, 여기에서는 Monkey.js 만 실행하면 원숭이를 가져온 다음 MK 매개 변수를 통해 원숭이 실행 후 리턴 값을 얻었습니다. 반환 값이 있으면 해당 MK 처리를 수행 할 수 있습니다.
이봐, 원숭이 안에 무엇이 있습니까?
봅시다 :
/* 매개 변수 정의는 객체를 반환하는 익명 함수입니다*/define ([ 'jQuery'], function ($) {var init = function () {console.log ($. 브라우저);}; return {init : init};});정의하다! 기능은 다른 모듈 또는 요구 사항에서 사용하기 위해 JS 모듈을 정의하는 것입니다. 다른 JS 모듈을 참조하는 방법은 요구 사항과 유사합니다. 필요한 JS 파일을 소개 한 다음 매개 변수에 하나씩 해당합니다. 다른 모듈은 Define에 정의 된 메소드 또는 변수에 액세스 할 수 없으므로 다른 모듈에 액세스 할 수있게하려면 해당 메소드 (리턴) 객체 또는 함수를 버릴 수 있습니다. 여기에서 반환하는 것은 다른 모듈이 호출 할 수있는 init를 제공하는 객체입니다.