外观模式:为一组复杂的子系统接口提供一个更高级的统一接口,通过这个接口使得子系统接口的访问更容易
//外观模式
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"
})