필요한 소개
요구 사항은 AMD 사양의 창립자 인 James Burke에 의해 설립되었습니다.
요구 사항을 사용하면 평소와 다른 방식으로 자바 스크립트를 쓸 수 있습니다. 더 이상 스크립트 태그를 사용하여 JS 파일을 HTML에 소개하지 않으며 더 이상 스크립트 태그를 통해 종속성을 관리 할 필요가 없습니다.
requirejs는 매우 작은 JavaScript 모듈로드 프레임 워크이며 AMD 사양의 가장 좋은 구현 자 중 하나입니다. 요구 사항의 최신 버전은 압축 후 14k에 불과하며 매우 가볍습니다. 또한 다른 프레임 워크와 함께 작동 할 수 있으며 요구 사항을 사용하면 프론트 엔드 코드의 품질이 반드시 향상됩니다.
비동기 모듈 로딩에 requireJS를 사용할 때 주목할 가치가 몇 가지가 있습니다.
1. 모듈 정의를 작성하는 두 가지 방법
1. 종속성에 존재하는 기능적 정의
모듈에 종속성이있는 경우 : 첫 번째 매개 변수는 종속성의 이름 배열입니다. 두 번째 매개 변수는 함수입니다. 모듈의 모든 종속성이로드 된 후에는 모듈을 정의하기 위해 함수가 호출되므로 모듈은 모듈을 정의하는 객체를 반환해야합니다. 종속성 관계는 매개 변수로 함수에 주입되고 매개 변수 목록은 종속성 이름 목록에 하나씩 해당합니다.
정의 ([ 'a'], function (aj) {var hello = function () {aj.hello ( 'i am c.js');} return {hello : hello}});추신 : 모듈의 리턴 값 유형은 객체가되지 않으며 모든 함수의 반환 값이 허용됩니다.
2. CommonJS 모듈 형식 정의
필요 : 다른 모듈에 의존하는 방법을 소개하는 데 사용됩니다.
내보내기 : 모듈 변수 또는 메소드를 내보내는 개체를 내 보냅니다.
모듈 :이 모듈에 대한 정보가 포함되어 있습니다.
require.config ({baseurl : "", config : { 'b': {size : 'large'}}, 경로 : {a : 'base/a', b : 'base/b', c : 'base/c'}}); define (함수 (요구, 내보내기, 모듈) {var aj = require ( "a"); var hello = function () {aj.hello ( 'i am b.js');} var hello2 = function () {aj.hello ( 'i am B.js22'); hello = hello; console.log ( "B.JS :", Exports); console.log ( "b.js : module", module); console.log ( "b.js : config", module.config ()); // 함께 사용할 수 없으므로 Return은 이전 내보내기/*return {hello : hello2}*/});추신 : 반환 오브젝트 및 내보내기를 함께 사용할 수 없으며 반품은 이전 내보내기를 덮어 씁니다.
다음은 통화 후 인쇄 된 정보입니다.
수출 : 수출은 모듈의 속성임을 알 수 있습니다.
모듈 : 여기에는 별명, URI, 내보내기 개체 및 모듈의 구성 정보 방법이 포함됩니다.
구성 : 종종 구성 정보를 모듈로 전달해야합니다. 이러한 구성은 종종 응용 프로그램 수준 정보이며 모듈로 전달할 수있는 수단이 필요합니다.
requirejs에서는 requirejs.config ()의 구성 구성 항목을 기반으로 구현됩니다.
2. 싱글 톤 변수를 조심하십시오
요구 사항 이후에 한 번 필요하기 때문에 후속 요구는 이전 캐시를 사용하기 때문에 싱글 톤의 변수를 조심하십시오. 따라서이 요구 사항이 변경되는 한 변수가 모듈에 정의되면 다른 요구 사항은 일관성을 유지합니다.
define (function () {var index = 0; var hello = function (msg) {console.log (msg);} var addindex = function () {index ++;} var getIndex = function () {return index;} return {addindex : addindex, getIndex : getIndex});라고 불리는:
요구 ([ 'a',], function (a) {require ([ 'a'], function (a) {console.log (a.getindex ()); a.addindex (); a.addindex ();}); 요구 ([ 'a'], function (a) {console.log (a.getindex ());});위의 인쇄는 다음과 같습니다.
0
2
3. 캐시를 지우십시오
요구 사항은 캐싱의 기능을 가지고 있지만 개발 중에 캐시를 원하지 않으므로 reque.config에서 Urlargs를 설정할 수 있습니다.
URLARGS : 요구 사항은 리소스를 얻을 때 URL 이후의 추가 쿼리 매개 변수를 추가합니다.
예:
urlargs : "bust =" + (new date ()). gettime ()
이것은 개발에 유용하지만 빌드 환경에 배포하기 전에 제거해야합니다.
4. 다른 패키지에서 모듈을로드하십시오
요구 사항은 CommonJS 패키지 구조의로드 모듈을 지원하지만 추가 구성이 필요합니다.
패키지 구성은 특정 패키지에 대해 다음 속성을 지정할 수 있습니다.
1. 이름 : 패키지 이름 (모듈 이름/접두사 매핑 용).
위치 : 디스크의 위치. 위치는 프로토콜이 포함되거나 "/"로 시작하지 않는 한 구성의베이스 러 값과 관련이 있습니다.
3. 메인 : "패키지 이름"으로 필요한 호출이 시작된 후에는 패키지의 모듈을 적용 할 수 있습니다.
여기에 달리 설정되지 않는 한 기본값은 "기본"입니다.
이 값은 패키지 디렉토리와 관련이 있습니다.
예:
main.js
require.config ({baseurl : "", 패키지 : [{이름 : "학생", 위치 : "package-stu"}, {name : "교사", 위치 : "package-tea"}], urlargs : "bust =" + (new date ()); gettime ()}); gettime () require ([Student/Store/Tea "), 기능 (sto, teo, <); Tea.hello ();Tea.js :
define (함수 (요구, 내보내기, 모듈) {Exports.hello = function () {console.log ( 'i am a elstu.js :
define (함수 (요구, 내보내기, 모듈) {Exports.name = 'cape';});Store.js :
define (function (요구, 내보내기, 모듈) {var stu = require ( "student/stu"); Exports.hello = function () {console.log ( 'i am' + stu.name);}});다른 패키지에서 모듈을로드하는이 방법에 대한 두 가지 이상한 것들이 있다고 생각합니다 (이해가 안 돼요).
1. 다른 패키지의 모듈이 다른 모듈의 쓰기 방법을 참조하면 사용자가 모듈의 쓰기 방법에 영향을 미칩니 까?
2. 다른 패키지의 main.js는 쓸모없는 것처럼 보이며 내용이없는 문제는 없습니다.
위의 내용은 편집자가 사용하는 요구 사항의 세부 사항이며 모든 사람에게 도움이되기를 바랍니다.