js 의 몇 가지 디자인 모델

디자이너 모드
1. 특징
코드 의 재 활용 성, 가 독성 을 향상 시 켜 코드 를 쉽게 유지 하고 확장 할 수 있 습 니 다.
2. 원칙
디자인 모델 은 6 대 원칙 이 있다.
개폐 원칙.모듈 은 확장 개방 에 대응 하고 수정 에 대해 닫 아야 한 다 는 것 이다
리 씨 교체 원칙.부모 클래스 를 호출 하면 하위 클래스 로 바 꿔 도 충분히 실행 할 수 있 습 니 다
4. 567917. 반전 원칙 에 의존한다.부모 클래스 를 모두 하위 클래스 로 바 꾸 면 프로그램의 행동 은 변 함 이 없다
4. 567917. 인터페이스 격 리 원칙 은 모든 인 터 페 이 스 는 하나의 역할 이 어야 한다. 많 지 않 고 적지 않 으 며 하지 말 아야 할 일 을 하지 않 고 해 야 할 일 을 해 야 한다
단일 직책 원칙
디 미트 법칙.최소 지식 원칙
3. 단일 디자인 모델
정의: 하나의 인 스 턴 스 만 있 고 전체 에 접근 할 수 있 는 점 을 제공 합 니 다.

 
 
 



 
 
 


 var submitObj = {
 form : document.forms[0],
 submitUrl : "data2.php",
 _init : function () {
 this.handSubmit();
 },
 handSubmit : function () {
 var that = this;
 this.form.onsubmit = function (e) {
 e.preventDefault();         //          
 if(!that.checkForm()) return;
 that.ajaxSubmit();
 }
 },
 checkForm : function () {
 return true;     //          
 },
 ajaxSubmit : function () {
 my_ajax.post(this.submitUrl,new FormData(this.form),this.submitResult)
 },
 submitResult : function (result) {
 console.log(result);
 }
 }
 submitObj._init();

4. 어댑터 모드
정의: 어댑터 모드 (Adapter) 는 하나의 클래스 (대상) 의 인터페이스 (방법 또는 속성) 를 고객 이 원 하 는 다른 인터페이스 (방법 또는 속성) 로 바 꾸 는 것 입 니 다. 어댑터 모드 는 인터페이스 가 호 환 되 지 않 아 함께 작업 할 수 없 었 던 클래스 (대상) 를 일부 작업 할 수 있 습 니 다.속칭 포장 기 (wrapper).

 
 
 




​

 //     :            ,       
 my_ajax.get("data3.json",function (result) {
 showMsg(JSON.parse(result),p1);
 })
 my_ajax.get("data4.json",function (result) {
 showMsgAdapter(JSON.parse(result),p2);
 })
 function showMsg(obj,p) {
 p.innerHTML = obj.name;
 }
 function showMsgAdapter(arr,p) {
 showMsg(arr[0],p2);
 }

5. 관찰자 모드
정의: 관찰자 모드 는 게시 구독 모드 (Publish / Subscribe) 라 고도 부 릅 니 다. 이 는 한 쌍 의 다 중 관 계 를 정의 하여 여러 관찰자 대상 이 특정한 주제 대상 을 동시에 감청 하도록 합 니 다. 이 주제 대상 의 상태 가 변화 할 때 모든 관찰자 대상 에 게 알 리 고 자동 으로 자신 을 업데이트 할 수 있 도록 합 니 다.

 
 


    
     

 var publisher = {
 //       
 register: function (event, subscriber) {    //event publisher     
 //  subscriber     
 if (typeof subscriber != "function")  return;
 //          
 if (!this[event]) this[event] = [];
 this[event].push(subscriber);     //          
 },
 //        
 publish: function (event, msg) {
 if (!this[event])  return;   //          
 for (var sub of this[event]) {
 sub(msg);
 }
 },
 //     
 remove: function (event, sub) {
 if (!this[event] || this[event].indexOf(sub) == -1)   return;
 this[event].splice(this[event].indexOf(sub), 1);
 }
 }
 //        ,         
 var f = function (msg) {
 console.log("      " + msg);
 }
 publisher.register("500", f);
 publisher.register("600", function (msg) {
 console.log("      " + msg);
 })
 publisher.register("500", function (msg) {
 console.log("      " + msg);
 })
 publisher.register("700", function (msg) {
 console.log("      " + msg);
 })
 btn1.onclick = function () {
 publisher.publish("500", "    500");
//        publisher.publish("700","    700");
 }
 btn2.onclick = function () {
 publisher.remove("500", f);
 }

관찰자 모드 를 이용 하여 세 번 의 클릭 사건 을 정의 합 니 다.

 
 


   
   

 // button       
 HTMLButtonElement.prototype.addMyEventListener = function (event,f) {
 if(!this[event])   this[event] = [];
 this[event].push(f);
 this.times = [];
 //           
 this.addEventListener("mousedown",function handleClick() {
 //           
 if(this.times.length == 3){
 // [100, 200, 300]
 this.times.shift();
 }
 this.times.push(new Date().getTime());
 //            
 if(this.times.length == 3){
 if(this.times[2] - this.times[0]<500){
 this.times.length = 0;   //      
 for (var tc of this.three){
 tc();           //    , f
 }
 }
 }
 })
 }
 btn1.addMyEventListener("three",function (){
 console.log("          ");
 })
 btn2.addMyEventListener("three",function (){
 console.log("          ");
 })