《javascript设计模式》笔记之第十章 和 第十一章：门面模式和适配器模式

第十章：门面模式

一：门面模式的作用

1. 简化已有的api，使其更加容易使用
2. 解决浏览器的兼容问题

二：门面模式的本质

门面模式的本质就是包装已有的api来简化操作

 

三：门面模式的两个简单例子

下面这个例子就是一个简单的门面模式，用来处理事件的兼容性问题：

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

下面这个例子使用门面模式来简化设置样式的操作：

function setStyle(elements, prop, val) {
  for (var i = 0, len = elements.length-1; I < len; ++i) {
    document.getElementById(elements[i]).style[prop] = val;
  }
}

//使用
setStyle(['foo'], 'position', 'absolute');
setStyle(['foo'], 'top', '50px');
setStyle(['foo'], 'left', '300px');

---

第十一章：适配器模式

一：适配器模式的作用

1. 改变已有接口的使用方式，使其适应新的接口需求

二：适配器模式的本质

其实就是对已有的接口进行包装，使它完成新接口的调用方式。注意，本质是不改变已有接口的功能的。

三：适配器模式的简单例子

假设我们有一个函数是这样子的：

function interfaceMethod(str1, str2, str3) {
  ...
}

它要求我们传入的参数是三个字符串。但是我们现在有一个对象里面包含了三个字符串参数：

var clientObject = {
  string1: 'foo',
  string2: 'bar',
  string3: 'baz'
};

那我们为了使新接口传入的参数为对象，就可以这样对原有的接口进行改变：

function clientToInterfaceAdapter(o) {
  interfaceMethod(o.string1, o.string2, o.string3);
}

这样的话我们就可以在不改变原有的对象结构情况下调用原有函数了。