灏天阁

水管弯弯 - 适配器模式

· Yin灏

适配器模式：将一个类（对象）的接口（方法或者属性）转化成另外一个接口，以满足用户需求，使类（对象）之间接口的不兼容问题通过适配器得以解决。

jQuery 适配器

公司 A 框架与 jQuery 很像，所以需要在加载完 jQuery 框架后写一个适配器，将我们已有的功能适配到 jQuery。适配器主要的任务是适配两种代码库不兼容的代码。

首当其冲的就是全局对象 A 与 jQuery 了，所以可以像下面这样轻松实现：

window.A = A = jQuery;

运行良好，如下：

A(function () {
  A("button").on("click", function (e) {
    //...
  });
});

适配异类框架

如果一个框架与 jQuery 血缘远一点，那如何适配呢？

// 定义框架
var A = A || {};
// 通过 ID 获取元素
A.g = function (id) {
  return document.getElementById(id);
};
// 为元素绑定事件
A.on = function (id, type, fn) {
  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("mybutton", "click", function () {
    // do something
  });
});

那如果想引入 jQuery 来换原有的 A 库，该怎么做呢？

  • 使用 jQuery 改写 A 框架

  • 如无必要不要适配异类框架，尽量选择相似的框架进行适配

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(name, title, age, color, size, prize) {}

问题： 记住这些参数的顺序是很困难的，

function doSomeThing(obj) {
  var _adapter = {
    name: "雨夜清河",
    title: "设计模式",
    age: 24,
    color: "pink",
    size: 500,
    prize: 50,
  };
  for (var i in _adapter) {
    _adapter[i] = obj[i] || _adapter[i];
  }
  // do someting
}

数据适配

var arr = ["JavaScript", "book", "前端编程语言", "8月1日"];

上面数组中每个成员代表的意义不同，所以这种数据结构语义不好，我们通常会将其适配成对象形式，比如下面这种对象数据结构。

var obj = {
  name: "",
  type: "",
  title: "",
  time: "",
};

我们就可以像下面这样适配

function arrToObjAdapter(arr) {
  return {
    name: arr[0],
    type: arr[1],
    title: arr[2],
    data: arr[3],
  };
}
var adapterData = arrToObjAdapter(arr);
console.log(adapterData);

服务器数据适配

function ajaxAdapter(data) {
  return [data["key1"], data["key2"], data["key3"]];
}

$.ajax({
  url: "",
  success: function (data, status) {
    if (data) {
      doSomething(ajaxAdapter(data));
    }
  },
});

- Book Lists -