《JavaScript设计模式》——10.4　适配异类框架

10.4　适配异类框架

“嗯，这是因为咱们公司的整个轻量级的A框架太像jQuery了，我们可以将这两种框架看成是相似框架。但是如果一个框架与jQuery血缘远一点，那么对于这种异类框架适配情况就复杂得多了。举个例子吧，还是实现上面两个事件，所以我写了一个这样的框架。”

// 定义框架
var A = A || {};
// 通过ID获取元素
A.g = function(id){
　　return document.getElementById(id)
}
// 为元素绑定事件
A.on = function(id, type, fn){
　　// 如果传递参数是字符串则以id处理，否则以元素对象处理
　　var dom = typeof id === 'string' ? this.g(id) : id;
　　// 标准DOM2级添加事件方式
　　if(dom.addEventListener){
　　　　dom.addEventListener(type, fn, false);
　　// IE DOM2级添加事件方式
　　}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库，你知道该如何做么？”

小白思考了一下说：“首先g方法是通过id获取元素，所以通过$（jQuery的简写名称）方法获取jQuery对象然后通过get获取第一个成员即可，不过on方法有些复杂，我们不能直接替换，因为jQuery和我们的A库在通过id获取元素时是有区别的，jQuery的id前面要加#。所以异类框架的适配器应该是这样的吧。”

A.g = function(id){
　　// 通过jQuery获取jQuery对象，然后返回第一个成员
　　return $(id).get(0);
}
A.on = function(id, type, fn){
　　// 如果传递参数是字符串则以id处理，否则以元素对象处理
　　var dom = typeof id === 'string' ? $('#' + id) : $(id);
　　dom.on(type, fn);
}

“你还是很聪明的。是这样，通过适配器我们发现如果两种框架的‘血缘’比较相近，那么我们适配起来是比较容易的，如果‘血缘’相差甚远我们的适配器写起来要复杂得多，因此你要记住，日后非到万不得已情况下，尽量引入相似框架。”

“是呀，后一种要写不少代码呀。”小白补充说。