前端-适配器模式

mudiyouyou 发布于2019-08-19 18:10 / 2818人阅读

摘要：适配器模式的一大特点就是库多，更新快现在前端程序猿使用上了之后，哪个不是了十几个包就得，个吧，针对这个背景，适配器模式对于来说就特别重要为甚么怎么说呢之前公司用了自己写的操作库，后来吊炸天，性能好的一比，那我们现在想要使用的话，但是已经有很

适配器模式

JavaScript的一大特点就是库多，更新快！现在前端程序猿使用上了npm之后，哪个不是install了十几个包（devDependencies就得5，6个吧，grunt/gulp）.

针对这个背景，适配器模式对于JSer来说就特别重要！为甚么怎么说呢？之前公司用了自己写的DOM操作库，后来JQuery吊炸天，性能好的一比，那我们现在想要使用JQuery的话，但是已经有很多程序都基于原来的库了，那写个适配器吧！

更重要的是js的库一般火了之后，更新特别快，有时候难免api就会改动，所以在使用较新的库时，你最好写个适配器，你的代码基于自己的api，如果后面库更新的话，你只需要修改适配器就可以了。这种还有一个好处，就是通过适配器，更改某些api的默认设置，以后更新库，也不会影响！反正一句话：适配器算是前端开发比较常用的吧！

写个适配器

原来公司用的DOM操作库A

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

Boss说引入JQuery,我试着写了下面的代码

window.A = A = jQuery;

居然大部分代码能正常运行，好吧！这个例子告诉我们适配器写的不要太离谱，名称和调用方式尽量要和目标库相同，不是方便很多吗？新人也容易上手，适配器更改也方便！

异类框架的适配

上面的例子是我意淫的！事实上公司的框架是这样

A = (function(){

  var version = "v2.2.12";
  function select(id){
    return document.getElementById(id);
  }
  
  funcion on(id,type,fn){
    var dom = typeof id==="string"?this.select(id):id;
    if(dom.addEventListener({
      dom.addEventListener(type,fn,false);
    }
    else if(dom.attachEvent){
      dom.attachEvent("on"+type,fn);
    }
    else
    {
      dom["on"+type] = fn;
    }
  }
  
  return {
    select:select,
    on:on,
    version:version
  }
})();

好吧，这个差别很大吧？其实也不难，因为逻辑操作是相似的，只是api名字不同，参数不同而已！这个例子告诉我们，即使api无法设计一致，但逻辑不要太奇葩！

A = (function(){
  return{
    select:function(id){
      return $(id).get(0);
    },
    on:function(id,type,fn){
      var dom = typeof id === "string"?$("#"+id):$(id);
      dom.on(type,fn);
    }
  }
})();

加入自己逻辑的适配器

以前写的一些库，现在需要添加一些特有的逻辑，不建议直接更改,先写个适配器，调用自己的适配器

    select:function(id){
      doSomething(id);
      return $(id).get(0);
    },

参数适配器

api不要超过3个参数，如果有的必须很多呢，让用户传递一个obj吧，不仅参数变少了，可以设置默认值哦

function doSomething(obj){
  var defaults = {
    name:"雨夜清河",
    title:"设计模式",
    ...
  }
  
  for(var i in defaults){
    defaults[i] = obj[i] || defaults[i];
  }
  
  // do thing
}

服务器数据适配

前后端数据分离，当后端数据接口发生变化，前端写个适配器就好了

function ajaxAdapter(data){
  return [data["name"],data["title"],data["age"]];
}

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

云服务器 GPU云服务器适配器模式前端设计模式适配器适配器详解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79271.html

从ES6重新认识JavaScript设计模式(四): 适配器模式

摘要：什么是适配器模式适配器模式将一个类的接口转换成客户希望的另外一个接口，使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。中的适配器模式在前端项目中，适配器模式的使用场景一般有以下三种情况库的适配参数的适配和数据的适配。 1 什么是适配器模式适配器模式(Adapter)：将一个类的接口转换成客户希望的另外一个接口，使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。在...

URLOS 2019-08-22 18:30 评论0 收藏0
JS 适配器模式

摘要：另外，适配器模式和其它几个模式可能容易让人迷惑，这里说一下大概的区别适配器和桥接模式虽然类似，但桥接的出发点不同，桥接的目的是将接口部分和实现部分分离，从而对他们可以更为容易也相对独立的加以改变。 1. 简介适配器模式（Adapter）是将一个类（对象）的接口（方法或属性）转化成客户希望的另外一个接口（方法或属性），适配器模式使得原本由于接口不兼容而不能一起工作的那些类（对象）可以一...

Jeffrrey 2019-08-22 11:18 评论0 收藏0
JavaScript设计模式之适配器模式

摘要：旧接口格式和使用者不兼容，中间加一个适配器转换接口。模式作用使用一个已经存在的对象，但其方法或接口不符合你的要求。原文博客地址：https://finget.github.io/2018/11/22/adapter/ 适配器模式适配器模式(Adapter)是将一个类(对象)的接口(方法或属性)转换成客户希望的另外一个接口(方法或属性),适配器模式使得原本由于接口不兼容而不能一起工作...

CNZPH 2019-08-23 13:46 评论0 收藏0
从SpringBoot到SpringMVC

摘要：概述用久了，深受其约定大于配置的便利性毒害之后，我想回归到时代，看看开发模式中用户是如何参与的。备注当然本文所使用的全是非注解的配置方法，即需要在中进行配置并且需要遵循各种实现原则。而更加通用主流的基于注解的配置方法将在后续文章中详述。 showImg(https://segmentfault.com/img/remote/1460000015244684); 概述用久了Sprin...

xavier 2019-08-15 18:16 评论0 收藏0