JavaScript용 AMD 사양

1. Origin

CommonJS 조직은 프런트 엔드 개발을 위한 통일된 지침을 제공하기 위해 많은 새로운 JavaScript 아키텍처 솔루션과 표준을 제안했습니다. AMD 사양은 가장 유명한 사양 중 하나입니다. 정식 명칭은 비동기 모듈 정의(Asynchronous Module Definition)입니다. 이는 비동기 모듈 로딩 메커니즘입니다. 모듈 정의, 종속성, 참조 관계 및 로딩 메커니즘을 완벽하게 설명합니다. 이 사양은 requireJS, NodeJs, Dojo, JQuery에서 사용되었으며, 그 가치가 매우 크다는 것을 알 수 있습니다.

2. 소개

사양으로는 구문 API만 정의하면 되며 구현에는 신경 쓰지 않아도 됩니다. AMD 사양은 단 하나의 API인 정의 함수만 갖는 것만큼 간단합니다:
define([module-name?], [array-of-dependents?], [module-factory-or-object]);
여기서:
module-name: 모듈 식별, 생략 가능.
종속성 배열: 의존하는 모듈을 생략할 수 있습니다.
module-factory-or-object: 모듈 구현 또는 Javascript 객체.
정의 함수의 또 다른 속성은 비동기성입니다. 정의 함수가 실행되면
1) 먼저 두 번째 매개변수에 나열된 종속 모듈이 비동기식으로 호출됩니다
2) 모든 모듈이 로드된 후 세 번째 매개변수가 콜백인 경우 함수가 실행됩니다
3) 그런 다음 시스템에 모듈을 사용할 수 있음을 알리고, 자체적으로 의존하는 모듈에도 사용할 수 있음을 알립니다.

3. AMD 예제

1. 모듈 정의 방법

다음 코드는 알파 모듈을 정의하고 내장된 require,exports 모듈 및 외부 모듈을 사용합니다. 베타 모듈. 보시다시피 세 번째 매개변수는 콜백 함수이며, 종속 모듈을 종속성 선언 순서에 따라 매개변수로 콜백 함수에 직접 제공할 수 있습니다.
1) require 함수를 사용하면 언제든지 모듈에 의존할 수 있습니다. 즉, 모듈에 대한 참조를 얻을 수 있으므로 모듈이 매개변수로 정의되지 않은 경우에도 사용할 수 있습니다.
2 ) 내보내기는 정의된 알파 모듈의 엔터티입니다. 여기에 정의된 모든 속성과 메서드는 알파 모듈의 속성과 메서드이기도 합니다. imports.verb = ...에 의해 알파 모듈에 대한 동사 메소드가 정의됩니다.
3) 예제에서는 베타 모듈의 동사 메소드를 간단히 호출합니다.

define("alpha", ["require", "exports", "beta"], function (require,exports, beta) {
　exports.verb = function() {
　 return beta.verb();
　　　//또는: return require("beta").verb();
　}
});

2. 익명 모듈

define 메소드를 사용하면 첫 번째 매개변수를 생략하여 익명 모듈을 정의할 수 있습니다. 이때 모듈 파일의 파일 이름은 모듈 식별자입니다.
이 모듈 파일이 a.js에 있는 경우 a는 모듈 이름입니다. 종속성에서 "a"를 사용하여 이 익명 모듈에 의존할 수 있습니다.
모듈의 재사용성이 높다는 장점이 있습니다. 모듈 이름은 파일 경로에 관계없이 사용할 수 있습니다.
다음 코드는 알파 모듈에 의존하는 익명 모듈을 정의합니다:

define(["alpha"], function (alpha) {
　return {
　verb: function() {
　　　　return alpha.verb() + 2;
　　}
　};
});

3. 하나의 매개변수로만 정의

The 정의의 처음 두 매개변수는 생략될 수 있습니다. 세 번째 매개변수에는 두 가지 상황이 있습니다. 하나는 JavaScript 객체이고 다른 하나는 함수입니다.

객체인 경우 메서드와 함수를 포함하는 객체일 수도 있고 데이터만 제공할 수도 있습니다. 후자는 JSON-P와 매우 유사하므로 AMD도 완전한 JSON-P 구현을 포함하는 것으로 간주할 수 있습니다. 모듈은 간단한 데이터 개체로 발전합니다. 이러한 데이터 개체는 가용성이 높으며 정적 개체이므로 CDN 친화적이므로 JSON-P의 성능을 향상시킬 수 있습니다. 중국의 지방과 도시 간 통신을 제공하는 JavaScript 개체를 전통적인 JSON-P 형식으로 클라이언트에 제공하는 경우 콜백 함수 이름을 제공하고 이 함수 이름을 기반으로 반환 데이터를 동적으로 생성해야 합니다. 표준 JSON-P 데이터 특정 CDN 친화적이지 않음. 그러나 AMD를 사용하는 경우 이 데이터 파일의 형식은 다음과 같습니다.

define({ PRovinces: [ {이름: '상하이', 지역: ['푸동 신지역', '쉬후이 지구']}, 　　{이름: '장쑤', 도시: ['난징', '난퉁']}
　　　 //..... ] });

이 파일이 china.js라고 가정하고, 모듈에 이 데이터가 필요한 경우:

define(['china'], function(china){ //여기서는 중국의 성 및 도시 데이터를 사용합니다});

이러한 방식으로 이 모듈은 원격으로 사용하든 로컬 프로젝트에 복사하든 재사용성이 매우 높아 개발 시간과 유지 관리 시간이 절약됩니다.

매개변수가 함수인 경우 그 용도 중 하나는 이를 빠르게 개발하고 구현하는 것입니다. 소규모 애플리케이션에 적합하므로 어떤 모듈이 필요하고 누가 사용할 것인지 미리 주의할 필요가 없습니다. 이 기능에서는 언제든지 필요한 모듈을 요구할 수 있습니다. 예:

define(function(){
　var p = require('china');
　 //중국 모듈 사용});

즉, 모듈 이름과 의존해야 할 모듈을 생략했습니다. 이는 다른 모듈에 의존할 필요가 없다는 의미는 아니지만 필요할 때 이러한 모듈을 요구할 수 있습니다. 정의 메소드가 실행되면 함수의 toString 메소드를 호출하고 require 호출을 스캔하여 이러한 모듈을 미리 로드한 다음 로드가 완료된 후 실행합니다. 이를 통해 빠른 개발이 가능해졌습니다.

한 가지 주의할 점은 Opera는 함수의 toString 메서드를 잘 지원하지 않기 때문에 브라우저에서의 적용성이 그다지 강력하지 않다는 것입니다. 그러나 빌드 도구를 통해 모든 JavaScript 파일을 패키징하면 문제가 되지 않습니다. 빌드 도구는 요구 사항을 검색하고 종속 모듈을 강제로 로드하는 데 도움이 됩니다.

위 내용은 JavaScript의 AMD 스펙 내용입니다. 더 많은 관련 글은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!