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)
}

<script type="text/javaScript" src="http://localhost/test/jsonp.php?callback = jsonp CallBack&data = getJsonPData"></script>//跨域请求地址

服务器端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"
})

未完待续...