지난 호에서는 대기열 관리 구성 요소의 설계에 대해 논의하고 스마트 대기열이라는 크고 독특한 이름을 부여했습니다. 이번에는 이전 설계 결과를 실제로 적용하여 코드로 구현해 보겠습니다.
먼저 소스 파일 레이아웃을 고려해야 합니다. 즉, 코드를 독립 파일로 분할하는 방법을 결정해야 합니다. 왜 이런 일을 하는가? 지난 호 끝부분에서 이 구성 요소가 "외부 코드"를 사용할 것이라고 언급한 것을 기억하십니까? 코드의 용도를 구분하기 위해 코드를 최소한 외부 코드 파일과 스마트 큐 파일의 두 부분으로 나누기로 결정했습니다.
차별화 목적은 하나일 뿐이고, 둘째, 독립된 파일로 분산시키는 것이 코드 유지 관리에 도움이 됩니다. 미래에 대기열 관리의 기존 기본 기능에 몇 가지 새로운 확장 기능을 추가하거나 특정 작업을 구현하는 구성 요소로 패키징하기로 결정했지만 기존 기능(내부 구현)을 유지하고 호출하기를 원한다고 상상해 보십시오. 메서드(외부 인터페이스)가 변경되지 않은 경우 새 코드를 별도의 파일에 작성하는 것이 최선의 선택입니다.
음, 다음번에는 파일 레이아웃 주제에 초점을 맞추겠습니다. 이제 요점을 살펴보겠습니다. 물론 첫 번째 단계는 구성 요소에 대한 자체 네임스페이스를 만드는 것입니다. 구성 요소의 모든 코드는 다음과 같은 최상위 네임스페이스로 제한됩니다.
var SmartQueue = window.SmartQueue {};
SmartQueue.version = '0.1';
초기화 도중 네임스페이스 충돌이 발생하면 이를 끌어와서 사용하세요. 일반적으로 이러한 충돌은 구성 요소 코드에 대한 반복적인 참조로 인해 발생하므로 "풀오버"는 최악의 경우 페이지에 SmartQueue라는 다른 개체가 있는 경우 동일한 구현으로 개체를 다시 작성하게 됩니다. 구현을 재정의합니다. 더 이상의 이름 충돌이 없으면 기본적으로 두 구성 요소가 문제 없이 실행될 수 있습니다. 또한 버전 번호도 제공하십시오.
다음으로 세 가지 우선순위에 따라 SmartQueue에 대한 세 가지 대기열을 만듭니다.
var Q = SmartQueue.Queue = [[], [], []];
아직 작업이 추가되지 않았기 때문에 각각은 빈 배열입니다. 그건 그렇고, 나중에 배열에 액세스하려면 Q[n]을 작성하면 됩니다.
다음으로, 우리의 주인공 Task가 웅장한 모습을 드러냅니다. 새로운 Task를 생성하는 방법은 여기에 정의되어 있습니다.
내부의 구체적인 세부 사항은 다루지 않겠습니다. 필요한 설명만 추가하면 일반적으로 코드는 자체 설명이 가능하며 후속 코드에서도 마찬가지입니다. 여기서는 고객(사용자)에게 다음과 같이 말합니다. 새 SmartQueue.Task 인스턴스를 생성하려면 이 생성자에 최소한 하나의 매개 변수를 전달해야 합니다(마지막 세 개는 기본 처리를 위해 생략할 수 있음). 그렇지 않으면 예외가 발생합니다.
그러나 이것만으로는 충분하지 않은 경우도 있습니다. 위의 구성 방법은 다소 불편합니다. 고객은 다음과 같이 작성해야 합니다.
var task1 = new SmartQueue.Task(obj.fn, 1, '', obj.dependent);
출처: 알리페이 UED
var T = SmartQueue.Task = function(fn, 레벨, 이름, 종속성) {
if(fn 유형 !== FUNCTION) {
throw new Error('잘못된 인수 유형: fn.');
}
this.fn = fn;
this.level = _validateLevel(level) ? 레벨 : LEVEL_NORMAL;
// 이름 유형 감지
this.name = 이름 유형 === STRING && 이름 ? 이름 : 't' + _id++;
// 종속성은 'Object'로 검색될 수 있으므로 대신에 instanceof를 사용하십시오.
this.dependent = 배열의 종속성 인스턴스 종속성 : [];
};