이제 require.js는 JavaScript를 프로그래밍하는 가장 좋아하는 방법입니다. 코드를 조각으로 만들고 관리하기 쉽습니다. require.js Optimizer는 더 큰 응용 프로그램을 여러 개의 작은 응용 프로그램에 배포하고 종속성을 통해 연결하고 결합 및 포장 중에 병합하는 데 도움이됩니다. 이러한 이유는 우리에게 요구 사항을 사용하도록 촉구합니다.
따라서 멋진 기능이 필요한 것을 살펴 보겠습니다 .JS!
commonjs와 호환됩니다
AMD (비동기 모듈 정의 사양)는 CommonJS WorkGroup에서 나타납니다. CommonJS는 JavaScript의 생태계를 만드는 것을 목표로합니다. CommonJS의 중요한 부분은 AMD의 전임자 인 Transport/C이며 요구 사항은이 사양의 구현입니다.
CommonJS 모듈과 AMD 모듈의 구문 차이는 주로 AMD가 브라우저의 비동기 기능을 지원해야하기 때문입니다. CommonJS 모듈은 예를 들어 동기화되어야합니다.
코드 사본은 다음과 같습니다.
var somemodule = 요구 사항 ( "somemodule");
var exermodule = require ( "다른 모듈");
Exports.asplode = function () {
somemodule.doteHawesome ();
다른 모드.
};
AMD 모듈은 모듈을 비동기로로드하므로 모듈 정의는 첫 번째 매개 변수로 배열이 필요하며 모듈로드 된 후 다시 호출 된 함수는 두 번째 매개 변수로 전달됩니다.
코드 사본은 다음과 같습니다.
정의 ([ "somemodule"], function (somemodule) {
반품 {
asplode : function () {
somemodule.doteHawesome ();
// 이것은 비동기 적으로 실행됩니다
요구 ([ "다른 모드"], function (다른 모드) {
다른 모드.
});
}
};
});
그러나 AMD는 require.js의 CommonJS 구문과도 호환됩니다. AMD의 Define 함수를 통해 CommonJS 모듈을 래핑하면 AMD에 CommonJS 모듈을 가질 수도 있습니다.
코드 사본은 다음과 같습니다.
정의 (함수 (요구, 내보내기, 모듈)
var somemodule = 요구 사항 ( "somemodule");
var exermodule = require ( "다른 모듈");
somemodule.doteHawesome ();
다른 모드.
Exports.asplode = function () {
somemodule.doteHawesome ();
다른 모드.
};
});
실제로, require.js는 콜백 함수의 모듈 내용을 함수 .ToString을 통해 해석하고 올바른 종속성을 찾고이를 일반 AMD 모듈로 바꿉니다. 이러한 방식으로 모듈을 작성하면 AMD 사양을 위반하기 때문에 다른 AMD 로더와 호환되지 않을 수 있지만이 형식이 어떻게 작성되는지 이해할 수 있습니다.
여기서 진행되는 일은 필요합니다 .JS는 실제로 기능을 수행합니다 .ToString 콜백 함수는 모듈의 내용을 구문 분석하고 일반적인 AMD 모듈 인 경우와 마찬가지로 올바른 종속성을 찾습니다. 이와 같은 모듈을 작성하기로 선택하면 AMD 사양을 위반하므로 다른 AMD 모듈 로더와 호환되지 않을 가능성이 높지만이 형식이 존재한다는 것을 이해하는 것이 좋습니다!
cdn back
또 다른 숨겨진 요구 사항 JS 보물은 CDN이 잘못로드 될 때 해당 라이브러리 로딩을 지원한다는 것입니다. 요구 사항을 통해이를 달성 할 수 있습니다. config :
코드 사본은 다음과 같습니다.
requirejs.config ({
경로 : {
jQuery : [
'//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js',
'lib/jquery'
]]
}
});
의존성이 없습니까? 물체 문자 그대로? 괜찮아요!
종속성이없는 모듈을 작성하고 일부 기능 기능이 포함 된 객체를 반환하면 간단한 구문을 사용할 수 있습니다.
코드 사본은 다음과 같습니다.
정의하다({
Forcechoke : function () {
},
forcelighting : function () {
},
Forcerun : function () {
}
});
모듈이 단지 함수 모음이거나 패킷이라면 간단하고 유용합니다.
원형 의존성
경우에 따라 일부 응용 분야에 의존하기 위해 모듈 모듈 및 모듈링 기능이 필요할 수 있습니다. 이것은 원형 의존성입니다.
코드 사본은 다음과 같습니다.
// js/app/modulea.js
정의 ([ "요구", "앱/앱"],
함수 (요구, 앱) {
반품 {
foo : function (title) {
var app = require ( "app/app");
return app.something ();
}
}
}
);
모듈 주소를 가져옵니다
모듈의 주소를 가져와야한다면이 작업을 수행 할 수 있습니다 ...
코드 사본은 다음과 같습니다.
var path = require.tourl ( "./ style.css");
baseurl
일반적으로 단위 테스트를 수행 할 때 소스 코드는 SRC와 유사한 폴더에 배치 될 수 있으며 동시에 테스트와 유사한 폴더에 테스트를 배치 할 수 있습니다. 테스트 구성을 올바르게 얻기가 어려울 수 있습니다.
예를 들어, 테스트 폴더에 index.html 파일이 있으며 로컬로 테스트/사양/*. js를로드해야합니다. 모든 소스 코드가 SRC/JS/*.
index.html에서 요구할 때 데이터 메인이 설정되지 않습니다 .JS는로드됩니다.
코드 사본은 다음과 같습니다.
<script src = "src/js/vendor/require.js"> </script>
<cript>
require ([ "../src/js/main.js"], function () {
require.config ({
Baseurl : "../src/js/"
});
필요하다([
"./spec/test.spec.js",
"./spec/moar.spec.js"
], 기능() {
// 테스트 프레임 워크를 시작합니다
});
});
</스크립트>
main.js가로드 된 것을 찾을 수 있습니다. 그러나 Data-Main이 설정되지 않았으므로 원하는대로 BaseUrl을 공식화해야합니다. Data-Main을 사용하는 경우 BaseURL은 설정하는 파일에 따라 자동으로 설정됩니다.
여기에서 main.js가로드되는 것을 볼 수 있습니다. 그러나 데이터 기본 스크립트 태그를로드하지 않으므로 기본을 지정해야합니다. 데이터가 주로 BaseUrl에 사용되는 경우, 기본 파일의 위치에서 유추됩니다. BaseURL을 사용자 정의하면 테스트 코드 및 응용 프로그램 코드를 별도로 저장할 수 있습니다.
JSONP
우리는 다음과 같은 JSONP 터미널을 처리 할 수 있습니다.
코드 사본은 다음과 같습니다.
필요하다( [
"http://someapi.com/foo?callback=define"
], 함수 (데이터) {
Console.log (데이터);
});
비 AMD 라이브러리의 경우 Shim을 사용하여 해결하십시오
많은 요청에 따라 AMD가 아닌 라이브러리를 사용해야합니다. 예를 들어, 백본과 밑줄은 AMD 사양에 적응하지 않습니다. 그리고 jQuery는 실제로 자신을 jQuery라는 글로벌 변수로 정의하므로 jQuery로 아무것도 할 필요가 없습니다.
다행히도 Shim 구성을 사용 하여이 문제를 해결할 수 있습니다.
코드 사본은 다음과 같습니다.
require.config ({
경로 : {
"백본": "공급 업체/백본",
"밑줄": "공급 업체/밑줄"
},
심 : {
"백본": {
DEPS : [ "밑줄"],
수출 : "백본"
},
"밑줄": {
수출 : "_"
}
}
});