zoukankan      html  css  js  c++  java
  • 前端常用设计模式之适配器模式

    前情

    在前端开发越来越复杂的今天,越来越需要一些设计模式来提高开发质量和效率

    定义

    适配器模式(Adapter Pattern)是作为两个不兼容的接口之间的桥梁。这种类型的设计模式属于结构型模式,它结合了两个独立接口的功能。

    这种模式涉及到一个单一的类,该类负责加入独立的或不兼容的接口功能。举个真实的例子,读卡器是作为内存卡和笔记本之间的适配器。您将内存卡插入读卡器,再将读卡器插入笔记本,这样就可以通过笔记本来读取内存卡。

    代码演示

    通过适配器模式不修改源数据的前提下获取想要的数据结构

    
    function getUsers() {
      return [
        {
          name: 'zs',
          age: 30
        },
        {
          name: 'ls',
          age: 20
        }
      ]
    }
    
    // 不想修改上面代码,但想获取 [{zs: 30}, {ls: 20}]格式的数据
    
    /**
     * 适配器
     * @param {Array} users 
     */
    function adaptor(users) {
      let result = [];
      users.forEach(user => {
        result.push({
          [user.name]: user.age
        })
      });
      return result;
    }
    
    let res = getUsers();
    console.log(res);
    // [ { name: 'zs', age: 30 }, { name: 'ls', age: 20 } ]
    console.log(adaptor(res));
    // [ { zs: 30 }, { ls: 20 } ]
    
    好好学习!天天向上!
  • 相关阅读:
    oa_mvc_easyui_删除(6)
    oa_mvc_easyui_详细页(5)
    oa_mvc_easyui_分页(4)
    oa_mvc_easyui_后台布局(3)
    oa_mvc_easyui_登录完成(2)
    oa_mvc_easyui_项目搭建及登录页面验证码(1)
    第六篇 ajax
    AOP切入点表达式
    开发的时候,有异步回调的时候,问题终于解决了
    mysql数据表结构查询
  • 原文地址:https://www.cnblogs.com/xwwin/p/15658603.html
Copyright © 2011-2022 走看看