최근에 유 아저씨가 쓴 "프론트 엔드 UI 구성 요소 구축을 위한 새로운 아이디어"라는 기사를 읽었는데, 작년에 공유했던 "감정을 이용한 공동 개발을 위한 JS 디자인 패턴" 이라는 기사가 생각나서 조금 울려 퍼졌습니다. .
작년에 Alipay의 출납원 프로젝트의 새 버전에서 한동안 이 구성 요소 코딩 모델을 시도했다고 합니다. 다음은 여러분과 공유할 수 있는 약간의 경험입니다.
앞에서 언급한 추상 수업을 다시 살펴보면 디자인 패턴에 대해 조금 아는 학생들에게는 익숙할 것입니다. 네, 언뜻 보기에는 추상 공장처럼 보이지만, 다음의 기본 수업과 결합하면 오버라이드하지 않았다는 것을 알 수 있습니다. getVessel, show, hide 및 기타 메소드는 각 기본 클래스에 있지만 추상 클래스에서는 이러한 메소드를 직접 상속받습니다. JAVA가 아니라 JS이기 때문에 왜 이렇게 하는지 이해하지 못하는 사람들이 분명히 있을 것입니다. 충분한 유연성을 위한 어느 정도의 결합은 과도한 것이 아니며, 이 추상 클래스가 형성된 후에는 마음대로 수정이 허용되지 않아야 한다는 점은 말할 것도 없습니다.
이 추상 클래스를 통해 연락처 개체와 컨테이너 개체를 연결하고 액션 메서드를 통해 이들 간의 가장 간단한 상호 작용을 구현합니다. "가장 간단한"이란 표시 또는 숨기기 작업만 의미하므로 표시 및 숨기기 메서드를 정의했습니다. 분명히 "가장 단순한" 상호 작용 동작은 사용자 동작을 100% 만족시킬 수 없으므로 setInterface 메서드를 설정하고 특수 상호 작용 효과가 필요한 클래스에 효과 클래스를 추가해야 합니다. 마지막으로, 이 추상 클래스를 사용할 때 직접 인스턴스화하지 마세요. 작업을 인스턴스화하려면 특정 상속 클래스로 이동하여 작업 메서드를 재정의해야 한다는 점을 작업 메서드에 있는 모든 사람에게 상기시켜 주세요.
이 추상 클래스를 통해 우리는 가장 기본적인 aPop, dropDown, xbox, xTab 및 기타 구성 요소를 상속받을 수 있습니다. 이것들은 이미 이전 p 기사에서 언급되었으므로 여기서는 자세히 설명하지 않겠습니다. 여기에 작성된 기본 클래스가 특별한 요구 사항을 충족할 수 없는 경우 어떻게 개인화된 구성 요소를 신속하게 개발할 수 있습니까?
xTab을 예로 들어 보겠습니다. 이 구성 요소를 사용하여 멀티 터치 포인트와 여러 컨테이너 간의 기본 전환 효과를 완성할 수 있습니다. 하지만 여기에 애니메이션 효과를 추가해야 한다면 어떻게 될까요? 먼저 상속된 클래스 탭의 구현 코드를 살펴보겠습니다.
show 메소드 이후에 setInterface 메소드를 실행한 것을 볼 수 있는데, 추상 클래스에 있는 같은 이름의 메소드가 기본적으로 호출됩니다. 이 인터페이스 메소드는 유사한 인터랙티브 라인에 대해 추가적인 인터랙티브 효과 클래스를 추가하도록 설계되었습니다. 예를 들어, 이제 슬라이드탭의 효과를 처리하려면 xTab을 기반으로 하는 애플리케이션 클래스를 상속하고, setInterface 메소드를 재정의하고, 슬라이드 효과를 얻기 위해 애니메이션 클래스를 추가하기만 하면 됩니다.
AP.widget.animTab = AP.widget.xTab.extend({
setInterface:함수(대상,용기){
this.parent(대상,용기);
this.anim(선박);
},
애니메이션:함수(용기){
...
}
});
솔직히 말해서 이것은 매우 조악한 디자인 아이디어이지만 다른 각도에서 구성 요소의 코딩 모드에 대해 생각할 수 있게 해줍니다. 위의 내용은 단지 일부 피상적인 응용 시도일 뿐이며 흥미진진한 일이 계속될 것입니다...여러분을 기다리고 있습니다!
AP.widget.xTab = AP.widget.basic.extend({
바인딩이벤트:함수(대상,용기){
E.on(target,this.options.eventType,this.action,target,this);
E.on(window,'load',this.oXtab,target,this);
},
작업:함수(e,대상){
this.switchTab(e,target);
},
switchTab:함수(e,대상){
...
for(i=0,len=tabs.length;i<len;i++){
var hash = tabs[i].href.split("#")[1];
var Vessel = D.get(hash + '확장');
if(선박){
this.hide(선박);
}
D.removeClass(tabs[i].parentNode,'현재');
if(target.href == 탭[i].href){
D.addClass(target.parentNode,'현재');
if(선박){
this.show(선박);
}
//다양한 애플리케이션 인터페이스 설정
this.setInterface(target,vessel);
}
E.preventDefault(e);
}
},
showTab: 함수(색인){
...
},
//포지셔닝 탭 초기화
oXtab:함수(대상,e){
...
}
});
AP.widget.basic = 새로운 AP.Class({
setOptions:함수(옵션){
//인터페이스 설정
},
초기화:함수(대상, 옵션){
//초기화 방법, 목적은 대상 하위 집합 요소와 방법 간의 연결을 설정하는 것입니다.
},
getVessel:함수(대상){
//타겟 매핑 관계를 만족하는 컨테이너를 가져옵니다.
},
바인딩이벤트:함수(대상,용기){
//여기에 대상의 트리거 동작을 바인딩합니다.
},
작업:함수(){
//대상에 바인딩된 이벤트에 의해 트리거된 실행 함수에는 실행하려는 논리가 포함되어 있습니다.
},
표시:함수(){
//컨테이너 표시
},
숨기기:함수(){
//컨테이너 숨기기
},
setInterface:함수(){
//각 컴포넌트가 공유하는 인터페이스를 설정합니다.
}
})