JavaScript设计模式(九):水管弯弯-适配器模式

简介: 水管弯弯-适配器模式

适配器模式(Adapter)

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

适配异类框架

团队内存在一个和jQuery类似的A代码库,但是现在要代码库中的方法适配到jQuery上,该如何实现?

  • A代码库

      // 团队内部创建的A代码库
      const A = {
         
          // 通过ID获取元素
          g(id) {
         
              return document.getElementById(id)
          },
          // 为元素绑定事件
          on(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('btn01', 'click', function (e) {
         
              // do something
              console.log('AAA');
          });
      });
    
  • 适配实现:

      const A = {
         
          // 通过ID获取元素
          g(id) {
         
              // 通过jQuery获取jQuery对象,然后返回第一个成员
              return $(id).get(0);
          },
          // 为元素绑定事件
          on(id, type, fn) {
         
              // 如果传递参数是字符串则以id处理,否则以元素对象处理
              var dom = typeof id === 'string' ? {
         mathJaxContainer[0]}(id);
              dom.on(type, fn);
          }
      };
    
      // 窗口加载完成事件
      A.on(window, 'load', function () {
         
          // 按钮点击事件
          A.on('btn01', 'click', function (e) {
         
              // do something
              console.log('AAA');
          });
      });
    

参数适配

当一个方法的传参有固定的顺序是我们很难进行适配,因为第三方的框架可能不能完美的契合我们写的传参顺序方法,解决方法如下:

通过传入对象的方式进行参数的适配 (数组格式的数据我们一般也会处理成对象的格式在进行传参)

function funA({
    name, age }) {
   
    console.log(name, age);
}

let data1 = {
   
    name: 'Lee',
    age: 18
};

let data2 = {
   
    age: 18,
    name: 'Lee'
};

// 无所谓对象内部的顺序,打印结果一样
funA(data1); // Lee 18
funA(data2); // Lee 18
目录
相关文章
|
11天前
|
设计模式 Java 开发者
「全网最细 + 实战源码案例」设计模式——适配器模式
适配器模式(Adapter Pattern)是一种结构型设计模式,通过引入适配器类将一个类的接口转换为客户端期望的另一个接口,使原本因接口不兼容而无法协作的类能够协同工作。适配器模式分为类适配器和对象适配器两种,前者通过多重继承实现,后者通过组合方式实现,更常用。该模式适用于遗留系统改造、接口转换和第三方库集成等场景,能提高代码复用性和灵活性,但也可能增加代码复杂性和性能开销。
60 28
|
1月前
|
设计模式 数据安全/隐私保护
Next.js 实战 (七):浅谈 Layout 布局的嵌套设计模式
这篇文章介绍了在Next.js框架下,如何处理中后台管理系统中特殊页面(如登录页)不包裹根布局(RootLayout)的问题。作者指出Next.js的设计理念是通过布局的嵌套来创建复杂的页面结构,这虽然保持了代码的整洁和可维护性,但对于特殊页面来说,却造成了不必要的布局包裹。文章提出了一个解决方案,即通过判断页面的skipGlobalLayout属性来决定是否包含RootLayout,从而实现特殊页面不包裹根布局的目标。
81 33
|
2月前
|
设计模式 JSON 前端开发
前端必须掌握的设计模式——适配器模式
适配器模式是一种结构型设计模式,用于使接口不兼容的对象能够相互合作。通过在客户端和系统之间引入一个“中间层”适配器,将不同类型的输入数据转换为系统能处理的标准格式,减轻系统的负担,提高扩展性和可维护性。例如,MacBook的扩展坞将多种接口(如HDMI、USB)转换为Type-C接口,实现多接口兼容。
|
3月前
|
设计模式 前端开发 JavaScript
JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式
本文深入探讨了JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式,结合电商网站案例,展示了设计模式如何提升代码的可维护性、扩展性和可读性,强调了其在前端开发中的重要性。
53 2
|
4月前
|
设计模式 JavaScript 前端开发
JavaScript设计模式--访问者模式
【10月更文挑战第1天】
47 3
|
5月前
|
设计模式 Java 程序员
Java设计模式-适配器模式(8)
Java设计模式-适配器模式(8)
|
4月前
|
设计模式 Java
Java设计模式之适配器模式
这篇文章详细讲解了Java设计模式中的适配器模式,包括其应用场景、实现方式及代码示例。
75 0
|
6月前
|
设计模式 JavaScript 前端开发
从工厂到单例再到策略:Vue.js高效应用JavaScript设计模式
【8月更文挑战第30天】在现代Web开发中,结合使用JavaScript设计模式与框架如Vue.js能显著提升代码质量和项目的可维护性。本文探讨了常见JavaScript设计模式及其在Vue.js中的应用。通过具体示例介绍了工厂模式、单例模式和策略模式的应用场景及其实现方法。例如,工厂模式通过`NavFactory`根据用户角色动态创建不同的导航栏组件;单例模式则通过全局事件总线`eventBus`实现跨组件通信;策略模式用于处理不同的表单验证规则。这些设计模式的应用不仅提高了代码的复用性和灵活性,还增强了Vue应用的整体质量。
90 1
|
5月前
|
设计模式 Java
设计模式--适配器模式 Adapter Pattern
这篇文章介绍了适配器模式,包括其基本介绍、工作原理以及类适配器模式、对象适配器模式和接口适配器模式三种实现方式。
|
6月前
|
设计模式 XML 存储
【六】设计模式~~~结构型模式~~~适配器模式(Java)
文章详细介绍了适配器模式(Adapter Pattern),这是一种结构型设计模式,用于将一个类的接口转换成客户期望的另一个接口,使原本不兼容的接口能够一起工作,提高了类的复用性和系统的灵活性。通过对象适配器和类适配器两种实现方式,展示了适配器模式的代码应用,并讨论了其优点、缺点以及适用场景。