适配器模式介绍

旧接口格式和使用者不兼容,中间加一个适配器转换接口

在生活中,我们有许多的适配器,例如iPhone7以后的耳机接口从3.5mm圆孔接口更改成为了苹果专属的 lightning接口。许多人以前的圆孔耳机就需要下面的一个适配器,才能够在自个儿新买的iPhone上面听歌。

在前端开发中,我们可能会遇见这样的场景:当我们试图调用某个模块或者对象的接口时,却发现这个接口的格式不符合我们的需求。这时有两种解决办法:

第一种办法:是修改原来的接口实现,但如果原来的代码很复杂,例如是一个库或框架,更改原代码就显得很不现实了

第二种办法:创建一个适配器,将原接口转换为客户希望的另一个接口,客户只需要使用适配器即可。

UML类图和代码示例

Client就是使用者,Target是使用者想要的接口,Adaptee是就的接口

class Adaptee {
specificRequest () {
return '德国标准插头'
}
} class Target {
constructor () {
this.adaptee = new Adaptee()
}
request () {
let info = this.adaptee.specificRequest()
return `${info}—转换器—中国标准插头`
}
} //测试
let target = new Target()
let res = target.request()
console.log(res)

设计原则验证

将旧接口和使用者进行分离,符合开放封闭原则

适配器模式的使用场景

在前端项目中,适配器模式的使用场景示例:封装旧接口,vue computed

封装旧接口

vue computed

Bootstrap的粗体和斜体的更多相关文章

  1. 使用FreeType实现矢量字体的粗体、斜体、描边、阴影效果

    前言: Freetype是一个跨平台.开源的字体渲染器,网上很多文章介绍,本人就不啰嗦了.本文重点在于实现文章标题所属的各种效果,不是Freetype的基本使用方法介绍文档,所以对于Freetype不 ...

  2. 文字排版--粗体(font-weight)

    我们还可以使用css样式来改变文字的样式:粗体.斜体.下划线.删除线,可以使用下面代码实现设置文字以粗体样式显示出来. p span{font-weight:bold;} 在这里大家可以看到,如果想为 ...

  3. openhtmltopdf 支持自定义字体、粗体

    一.支持自定义字体 private static void renderPDF(String html, OutputStream outputStream) throws Exception { t ...

  4. 第十一篇 -- QMainWindow与QAction(斜体-粗体-下划线)

    效果图: ui_mainWindow.py # -*- coding: utf-8 -*- # Form implementation generated from reading ui file ' ...

  5. idea 光标变成粗体且当前文件搜索功能无法使用的问题

    今天安装了idea最新版,安装完成后发现光标变成了粗体,并且快捷键在使用时出现了问题,比如:ctrl+F搜索功能无法使用 经过反复修改配置也无法改善情况,后来一次重启看到下面小窗弹出有关vim的一个提 ...

  6. datagrid标题头粗体

    //标题头粗体        //$("#R_datagrid .datagrid-header-row td div span").each(function (i, th) { ...

  7. chromium 34以后中文字体粗体渲染问题

    估计不少人更新后都遇到这个情况了吧,粗体渲染如然变得很模糊,很奇怪,Google下说是字体实现方式变了,国内一些网站用的中文字体都是宋体,但是宋体本身没有粗体,Win下的粗体是微软自己通过某种方式实现 ...

  8. MathType编辑粗体空心字的技巧

    在用MathType公式编辑器编辑公式时,由于不同的使用需要,会有不同的字体要求.如果是正式的论文中的公式,一般公式只要求数学的国际使用规定就可以了,而如果是用在ppt等这种演示的文稿中,所要用到的字 ...

  9. [修正] Firemonkey Android 文字斜粗体显示不全的问题

    问题:Firemonkey Android 平台显示斜粗体文字时,文字右方会有显示不全的问题. 修正代码: 请将 FMX.FontGlyphs.Android.pas 复制到自己的工程目录下,再修改如 ...

随机推荐

  1. Session机制(是对cookie的作用的提升,使用较多)

    1.Session作用类似于购物车,第一次,放入物品,可以获得Session的id,并可以设置id失效的时间,这样便于多次将物品放在购物车里面,使用的就是获取的Session的id: 2.Sessio ...

  2. UVa 11624,两次BFS

    题目链接:http://vjudge.net/contest/132239#problem/A 题目链接:https://uva.onlinejudge.org/external/116/11624. ...

  3. Oracle之ORA-00972: identifier is too long

    一.前言 今天在程序的日志中出现这个错误,网上搜了一下发现,说是Oracle的对象名字最多是30个字符,不能超过30,而我出错的sql是: "select * from test where ...

  4. WPFの exit()和close()两个方法的用法

    Application.Exit   方法     通知所有消息泵必须终止,并且在处理了消息以后关闭所有应用程序窗口. Form.Close   方法 关闭窗体. 如果该窗体是应用程序的主启动窗体,则 ...

  5. NSIS学习记录の----win8.1和win10对于NSIS创建的卸载快捷方式无法在开始目录下显示

    NSIS提供了很好的软件卸载功能编写的方法,但是针对win8.1和win10操作系统,由于开始目录的权限限制,我们有时候并不能完美的完成所需要的功能----卸载程序的快捷方式不能显示.话不多说,下面提 ...

  6. MVC系列之一 入门概述

    一 概述 MVC作为一种当前比较好的开发web的框架,不得不提一下了,和WebForm比较来看,有了很大的进步和改进. 先进行一个简单的比较,两个都是Web开发框架,理念仍然是较快速开发. 不过MVC ...

  7. 把int放在一个char数组里(用于处理每一位数字)

    sprintf(): #include <stdio.h> void put_int_with_space(int v) {     char str[50];    //定义一个足够大的 ...

  8. BZOJ 2568 比特集合

    题目链接:http://www.lydsy.com:808/JudgeOnline/problem.php?id=2568 题意:维护一个集合S,支持以下操作: (1)INS M : 将元素 M 插入 ...

  9. (转)eclipse 导入Android 项目 步骤

    1.打开eclipse 2. 点击File--选择-->Import,会出来图片,如图 3.按上面的点击android下的Existing Android...出来画面,如下图   4.点击Br ...

  10. wamp出现could not execute run action问题

    wamp出现could not execute run action问题     原文地址:http://blog.sina.com.cn/s/blog_4a60ba9c0100zzlr.html上午 ...