灏天阁

套餐服务 - 外观模式

· Yin灏

外观模式：为一组复杂的子系统接口提供一个更高级的统一接口，通过这个接口使得对子系统接口的访问更容易。

添加一个点击事件

document.onclick = function (e) {
  e.preventDefault();
  if (e.target !== document.getElementById("myinput")) {
    hidePageAlert();
  }
};
function hidePageAlert() {
  // 隐藏提示框
}

兼容方式

// 外观模式实现
function addEvent(dom, type, fn) {
  if (dom.addEventListener) {
    dom.addEventListener(type, fn, false);
  } else if (dom.attachEvent) {
    dom.attachEvent("on" + type, fn);
  } else {
    dom["on" + type] = fn;
  }
}
// 使用
var myInput = document.getElementById("myinput");
addEvent(myInput, "click", function () {
  console.log("绑定第一个事件");
});
addEvent(myInput, "click", function () {
  console.log("绑定第二个事件");
});
addEvent(myInput, "click", function () {
  console.log("绑定第三个事件");
});

除此之外

外观模式可以简化底层接口复杂性，可以解决浏览器兼容性问题，

// 获取事件对象
var getEvent = function (event) {
    return event || window.event;
};
// 获取元素
var getTarget = functon(event) {
    var event = getEvent(event);
    return event.target || event.srcElement;
}
// 阻止默认行为
var preventDefault = function(event) {
    var event = getEvent(event);
    if(event.preventDefault) {
        event.preventDefault();
    } else {
        event.returnValue = false;
    }
}
// 有了上面的方法我们就可以用兼容的简单方式来解决上面的问题
document.onclick = function(e) {
    preventDefault(e);
    if(getTarget(e) !== document.getElementById('myinput')) {
        hideInputSug();
    }
}

小型代码库

很多代码库都是通过外观模式来封装多个功能，简化底层操作方法，比如我们简单实现获取元素的属性样式的简单方法库。

// 简约版属性样式方库
var A = {
  g: function (id) {
    return document.getElementById(id);
  },
  css: function (id, key, value) {
    document.getElementById(id).style[key] = value;
  },
  attr: function (id, key, value) {
    document.getElementById(id)[key] = value;
  },
  html: function (id, html) {
    document.getElementById(id).innerHTML = html;
  },
  on: function (id, type, fn) {
    document.getElementById(id)["on" + type] = fn;
  },
};

// 使用
A.css("box", "background", "red");
A.attr("box", "className", "box");
A.html("box", "这是新添加的内容");
A.on("box", "click", function () {
  A.css("box", "width", "500px");
});

- Book Lists -