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

本节书摘来自异步社区《JavaScript设计模式》一书中的第10章，第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); }

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

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