zoukankan      html  css  js  c++  java
  • JS 设计模式: 适配器模式

    适配器模式:

          是将一个类(对象)的接口(方法和属性)转化成客户希望的一个接口(方法和属性),适配器模式使得原本由于接口不兼容而不能一起工作的那些类(对象)可以一些工作。速成包装器。

    适配器可以被添加到现有代码中以协调两个不同的接口,如果现有代码的接口很好地满足需要,那就没必要使用适配器,如果是现有的接口对于手头的工作来说不够直观或实用,那么可以使用适配器来提供一个更简单的或更丰富的接口。

    适配器场景:存在较多代码调用旧接口,为了避免修改旧代码和更换新接口,不影响现有实现方式的应用场景。

    如果你有一个具有3个字符串参数的函数,但客户系统拥有的却是一个包含三个字符串的元素的数组,此时就可以用一个适配器来衔接二者。

     1 var clientObject = [
     2 {string1: 'foo'},
     3 {string2: 'baq'},
     4 {string3: 'bar'},
     5 {string4: 'baz'}
    ]
    6 7 function insterfaceMethod(str1, str2, str3, str4) { 8 console.log(str1) // foo 9 console.log(str2) // baq 10 console.log(str3) // bar 11 console.log(str4) // baz 12 } 13 // 为了把clienObject 作为参数传递给insterfaceMethod,需要用到适配器 14 15 function clientToInterfaceAdapter(o){ 16 insterfaceMethod(o[0].string1, o[1].string2, o[3].string4) 17 } 18 clientToInterfaceAdapter(clientObject )

     实际应用:

    随着前端框架的发展,越来越多的开发者开始使用MVVM框架进行开发,只需要操作数据而不需要操作DOM元素,jQuery的作用越来越少。而很多项目中还是引用着jQuery库作用工具类,因为我们要利用jQuery提供的ajax去服务器请求数据。如果jQuery在项目中的作用仅仅是作为ajax工具库的话,有点杀鸡焉用牛刀的感觉,造成资源浪费。这个时候我们完全可以封装一个自己的ajax库。
    假设我们封装的ajax就通过一个函数进行使用:

    1 ajax({
    2 url:'/getData',
    3 type:'Post',
    4 dataType:'json',
    5 data:{
    6 id:"123"
    7 }
    8 })
    9 .done(function(){})

    除了调用接口ajax与jQuery的$.ajax的不同,其他完全一样。

    项目中请求ajax的地方必然很多,我们替换jQuery的时候不可能一个一个去修改$.ajax,那怎么办呢,这个时候,我们就可以增加一个适配器:

    var $ = {
    2     ajax:function (options){
    3         return ajax(options);
    4     }
    5 }

    这样就能兼容旧代码和新接口,避免对已有的代码的修改。

    总结:

            适配器模式的原理很简单,就是新增一个包装类,对新的接口进行包装以适应旧代码的调用,避免修改接口和调用代码。

    适用场景:存在较多代码调用旧接口,为了避免修改旧代码和更换新接口,不影响现有实现方式的应用场景。

  • 相关阅读:
    年报统计系统—基本信息模块的目标文档
    用户分析
    第一周第三天
    第一周第二天
    第一周第一天
    学习进度条第三周
    学习进度表第二周
    四则运算2
    构建之法阅读笔记 01
    软件工程概论学习进度表第一周
  • 原文地址:https://www.cnblogs.com/zhfli/p/8436682.html
Copyright © 2011-2022 走看看