javascript 디자인 모델 의 구조 형 디자인 모델

외관 모드
외관 모드: 복잡 한 서브 시스템 인터페이스 에 더욱 고 급 스 러 운 통일 인 터 페 이 스 를 제공 합 니 다. 이 인 터 페 이 스 를 통 해 서브 시스템 인터페이스 에 대한 접근 이 더욱 쉽 습 니 다.

//    
function addEvent(obj,type,fn){
	if(obj.addEventListener){
		obj.addEventListener(type,fn,false);
	}else if(obj.attachEvent){
		obj.attachEvent('on'+type,fn)
	}else{
		obj['on'+type] = fn;
	}
}

//    
var getEvent = function(e) {
   return  e || window.event;
}

//    

var getTarget = function(e) {
	var e = getEvent(e);
	return e.target || e.srcElement
}

//         
var preDefault = function(e) {
    var e = getEvent(e);
    if(e.preventDefault){
    	e.preventDefault()
    }else{
    	e.returnValue = false;
    }
}

//      

var stopP = function(e) {
	var e = getEvent(e);
	if(e.stopPropagation){
		e.stopPropagation()
	}else{
		e.cancelBubble = true;
	}
}

위의 몇 가지 방법 을 작은 코드 라 이브 러 리 로 바꾸다.

var Method = {
	addEvent : function(obj,type,fn) {
		if(obj.addEventListener){
			obj.addEventListener(type,fn,false)
		}else if(obj.attachEvent){
			obj.attachEvent('on'+type,fn)
		}else{
			obj['on'+type] = fn;
		}
	},
	getEvent : function(e){
		return e || window.event;
	},
	getTarget : function(e){
		var e = this.getEvent(e);
		return e.target || e.srcElement;
	},
	preDef : function(e) {
		var e = this.getEvent(e);
		if(e.preventDefault){
			e.preventDefault()
		}else{
			e.returnValue = false;
		}
	},
	stopPro : function(e) {
		var e = this.getEvent(e);
		if(e.stopPropagation){
			e.stopPropagation()
		}else{
			e.cancelBubble = true;
		}
	}
}

위의 작은 코드 라 이브 러 리 를 호출 하려 면 Method. stopPro () 만 필요 합 니 다.
어댑터
어댑터 모드: 클래스 (대상) 의 인터페이스 (방법 또는 속성) 를 다른 인터페이스 로 전환 하여 사용자 의 수 요 를 만족 시 키 고 클래스 (대상) 간 인터페이스의 불 균형 문 제 를 어댑터 로 해결 합 니 다.

var A = A || {}; //    
A.g = function(id) {
	return document.getElementById(id)
}
//       
A.on = function(id,type,fn){
  //            id  ,         
  var dom = typeof id === 'string' ? this.g(id) :id;
  if(dom.addEventListener) {
  	 dom.addEventListener(type,fn,false);
  }else if(dom.attachEvent) {
  	 dom.attachEvent('on'+type,fn)
  }else{
  	 dom['on'+type] = fn;
  }
}

//      
A.on(window,'load',function(){
	A.on('box','click',function(){
		box.style.display = "none"
	})
})

//   ，  jQuery
A.g = function(id){
	return $(id).get(0);
}
A.on = function(id,type,fn){
	var dom = typeof id ==='string' ? $('#' + id) : $(id);
	dom.on(type,fn)
}

파라미터 어댑터

//    

function doSomeThing(obj) {
	var _adapter = {
		name:'   ',
		title:'    ',
		age:26,
		color:'pink',
		size:100,
		prize:50
	}

	for(var i in _adapter) {
		_adapter[i] = obj[i] || _adapter[i];
	}
}

//    
var obj = {
	name:'',
	type:'',
	title:'',
	time:''
}

function arrToObjectAdapter(arr) {
	return {
		name : arr[0],
		type : arr[1],
		title : arr[2],
		data : arr[3]
	}
}

//        
//     ，    jQuery ajax  ，           
function ajaxAdapter(data) {
	return [data['key1'],data['key2'],data['key3']]
}

$.ajax({
	url:'some.php',
	success:function(data,status){
		if(data) {
			doSomething(ajaxAdapter(data))
		}
	}
})

에이전트 모드
프 록 시 모드: 한 대상 이 다른 대상 을 직접 인용 할 수 없 기 때문에 프 록 시 대상 을 통 해 이 두 대상 사이 에서 중개 역할 을 해 야 합 니 다.
JSONP 크로스 필드:

//       
//    ，            
function jsonpCallBack(res,req){
	console.log(res,req)
}

//      

서버 쪽 php 파일

$data = $_GET["data"];
$callback = $_GET['callback'];
echo $callback."('success','".$data."')";

장식 자 모드

//   
var decorator = function(input,fn){
	//     
	var input = document.getElementById(input);
	//          
	var oldClickFn = input.onclick;
	if(typeof input.onclick === 'function') {
	   //           
	   var oldClickFn = input.onclick;
	   //         
	   input.onclick = function() {
		//         
		oldClickFn();
		fn();
	  }
	}else{
		//        ，              
		input.onclick = fn;
	}
	
}

//  
decorator('tel_input',function(){
	document.getElementById('tel_demo_text').style.display ="none"
})

미 완성 계속...