AMD 비동기 모듈 정의 소개 및 Require.js_jquery에서 jQuery 및 jQuery 플러그인을 사용하는 방법

AMD 모듈

AMD(Asynchronous Module Definition) 형식의 전반적인 목표는 현재 개발자에게 사용 가능한 모듈식 JavaScript 솔루션을 제공하는 것입니다.

AMD 모듈 형식 자체는 모듈과 종속 항목이 모두 비동기적으로 로드될 수 있도록 모듈을 정의하는 방법에 대한 제안입니다. 본질적으로 비동기적이고 유연성이 뛰어나 일반적인 코드와 모듈 ID 간의 긴밀한 결합을 깨뜨릴 수 있는 등 많은 고유한 장점이 있습니다. jQuery(1.7)를 포함한 많은 프로젝트에서 채택되었습니다.

RequireJS

RequireJS는 주로 클라이언트 모듈 관리에 사용되는 도구 라이브러리입니다. 이를 통해 클라이언트 코드를 비동기식 또는 동적 로딩을 위한 모듈로 나눌 수 있으므로 코드의 성능과 유지 관리성이 향상됩니다. 모듈 관리는 AMD 사양을 준수합니다.

AMD에 대한 jQuery 지원

jQuery 1.7에서는 jQuery를 AMD 비동기 모듈로 등록하는 것을 지원하기 시작합니다. 비동기 모듈 형식을 사용하여 모듈을 로드할 수 있는 호환 가능한 스크립트 로더(RequireJS 및 컬 포함)가 많이 있습니다. 즉, 모든 작업을 수행하는 데 많은 해킹이 필요하지 않습니다. jQuery 1.7의 소스 코드를 살펴볼 수 있습니다:

코드 복사 코드는 다음과 같습니다.

// jQuery를 AMD 모듈로 노출합니다. 단, 모두가 정의()를 호출할 수 있는 페이지에서
// 여러 버전의 jQuery를 로드할 때 발생하는 문제를 이해하는 AMD 로더에만 해당됩니다
//. 로더는
/ / Define.amd.jQuery = true를 지정하여
// 여러 jQuery 버전에 대한 특별 허용을 표시합니다. jQuery는 다른 버전과 연결될 수 있으므로 명명된 모듈로 등록하세요.
// 정의를 사용할 수 있는 파일은
// 익명
// AMD 모듈을 이해하는 적절한 연결 스크립트를 사용하지 않습니다. AMD라는 이름이 가장 안전하고 강력한 등록 방법입니다.
// 소문자 jquery가 사용됩니다. AMD 모듈 이름은
// 파일 이름에서 파생되고 jQuery는 일반적으로 소문자 파일 이름으로 전달되기 때문입니다.
if ( typeof 정의 === "function" && 정의.amd && 정의.amd.jQuery ) {
정의( "jquery ", [], function () { return jQuery; } );
}

작동 방식은 사용된 스크립트 로더가 Define.amd.jQuery 속성을 true로 지정하여 여러 jQuery 버전을 지원할 수 있음을 나타내는 것입니다. 특정 구현 세부 사항을 알고 싶다면 jQuery를 명명된 모듈로 등록할 수 있습니다. 왜냐하면 jQuery가 AMD의 정의() 메서드를 사용하는 다른 파일과 함께 엮일 위험이 있기 때문입니다. 익명의 AMD 모듈 정의를 이해합니다.

jQuery 상위 버전(1.11.1)에서는 Define.amd.jQuery 판단이 제거되었습니다.

코드 복사 코드는 다음과 같습니다.

if ( typeof 정의 === "function " && 정의 .amd ) {
정의( "jquery", [], function() {
return jQuery;
});
}

Require.js에서 jQuery 사용

Require.js에서 jQuery를 사용하는 것은 매우 편리합니다. 예를 들어 간단히 구성하면 됩니다.

코드 복사 코드는 다음과 같습니다.

//간단한 구성
이 필요합니다. config( {

// RequireJS는 상대 경로인 baseUrl을 통해 모든 코드를 로드합니다. baseUrl은 일반적으로 data-main 속성으로 지정된 스크립트의 동일한 수준 디렉터리로 설정됩니다. baseUrl: "./js",

// 타사 스크립트 모듈의 별칭인 jquery는 libs/jquery-1.11.1.min.js보다 더 간결하고 명확합니다.
paths: {

"jquery; ": "libs/jquery- 1.11.1.min.js"

}

});

// jQuery 모듈 사용 시작
require([" jquery"], function ($ ) {

//코드
//여기에서 jquery 메서드를 직접 사용할 수 있습니다. 예: $( "#result" ).html( "Hello World!" );

});

Require.js에서 jQuery 플러그인 사용

jQuery가 AMD API를 지원한다고 해서 jQuery 플러그인이 AMD와도 호환된다는 의미는 아닙니다.

일반 jQuery 플러그인 형식:

코드 복사 코드는 다음과 같습니다.

(function ($) {

$.fn.myPlugin = function () {
//자신만의 플러그인 코드
};
})(jQuery);

그러나 Require.js를 사용하면 약간 수정하여 jQuery 플러그인을 로드할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

;(function (factory) {
if (typeof 정의 === "function" && 정의.amd) {
// AMD 모드
정의([ "jquery" ] , 공장);
} else {
                                                              ~         ) {
//플러그인 코드
};
}));



Require.js에서 jQuery UI 구성 요소 사용

Require.js에서 jQuery UI 구성 요소를 사용하는 방법은 비슷합니다. jQuery Widget Factory 코드를 수정하고 jQuery UI의 종속성을 로드하면 됩니다. 예:

코드 복사

코드는 다음과 같습니다.(function (widgetFactory) {

if (typeof 정의 === "function" && 정의.amd) {

// AMD 모드
정의("jquery.ui.widget", ["jquery"], function ( ) {

                                                                                                          }
}
(함수 ($, 정의되지 않음) {

// jQuery 위젯 팩토리 코드

}));