美文网首页
JavaScript设计模式——适配器模式

JavaScript设计模式——适配器模式

作者: 你看到我的小熊了吗 | 来源:发表于2019-10-27 17:56 被阅读0次

无问西东

今日观影《无问西东》感触最深的话,记录于此:

人把自己置身于忙碌当中,有一种麻木的踏实,但丧失了真实,你的青春也不过只有这些日子。
什么是真实?
你看到什么,听到什么,做什么,和谁在一起,有一种从心灵深处满溢出来的不懊悔,也不羞耻的平和与喜悦。

适配器模

下图就是适配器,emmmm...明明白白,清清楚楚。


适配器.jpg

先来看看它的定义:

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

所以当iPhone上的3.5mm耳机孔被砍掉时,为了能够让新iPhone继续使用3.5mm接口的耳机来听歌,我们不得不使用lightning转3.5mm接口,作为适配器。

一个简单的适配器

早先各种框架还没有流行的时候,我们通过document.getElementById()来获取DOM元素,进行DOM操作的,只不过每次都要写很长一段字符,就很麻烦,本着偷懒的原则,我们会封装一个适配器,用一个$就可以搞定。

function $(id) {
    return document.getElementById(id)
}

后来有了jQuery,只要引入jQuery.js文件,便可以直接使用$('#'),进行DOM操作。

jQuery源码中看适配器

⚠️这里使用jQuery的版本为v3.4.1

在jQuery样式相关的API中,最方便使用的就是css()了:

// 既可以像这样调用,取得display值
$('.elem').css('display');

// 也可以像这样,设置display值
$('.elem').css({'display': 'none'});

它是怎么实现的呢?

jQuery.fn.extend( {
    css: function( name, value ) {
        return access( this, function( elem, name, value ) {
            var styles, len,
                map = {},
                i = 0;

            if ( Array.isArray( name ) ) {
                styles = getStyles( elem );
                len = name.length;

                for ( ; i < len; i++ ) {
                    map[ name[ i ] ] = jQuery.css( elem, name[ i ], false, styles );
                }

                return map;
            }

            return value !== undefined ?
                jQuery.style( elem, name, value ) :
                jQuery.css( elem, name );
        }, name, value, arguments.length > 1 );
    }
} );

总结

上一章节我们学习了外观者模式,外观模式的作用和适配器比较相似,有人把外观模式看成一组对象的适配器,但外观模式最显著的特点是定义了一个新的接口。但是,适配器模式主要用来解决两个已有接口之间不匹配的问题,它不考虑这些接口是怎样实现的,也不考虑它们将来可能会如何演化。适配器模式不需要改变已有的接口,就能够使它们协同作用。

结束语

最后借用《无问西东》里的结束语,为结尾:

愿你在被打击时,记起你的珍贵,抵抗恶意;愿你在迷茫时,坚信你的珍贵,爱你所爱,行你所行,听从你心,无问西东。

相关文章

  • 组合模式设计

    一、设计模式 javascript里面给我们提供了很多种设计模式: 工厂、桥、组合、门面、适配器、装饰者、享元、代...

  • 装饰者模式设计

    一、设计模式 javascript里面给我们提供了很多种设计模式: 工厂、桥、组合、门面、适配器、装饰者、享元、代...

  • 适配器模式

    一、设计模式 javascript里面给我们提供了很多种设计模式: 工厂、桥、组合、门面、适配器、装饰者、享元、代...

  • 简说设计模式之适配器模式

    前言:对于设计模式基础概念可以去看[简说设计模式之设计模式概述] 一、什么是适配器模式 适配器模式(Adapter...

  • 设计模式 - 目录

    设计模式01 - 单例模式 设计模式02 - 工厂模式 设计模式03 - 建造者模式 设计模式04 - 适配器模式...

  • 最常用的设计模式---适配器模式(C++实现)

    适配器模式属于结构型的设计模式,它是结构型设计模式之首(用的最多的结构型设计模式)。 适配器设计模式也并不复杂,适...

  • iOS设计模式(5)策略模式

    设计模式系列文章 《iOS设计模式(1)简单工厂模式》《iOS设计模式(2)工厂模式》《iOS设计模式(3)适配器...

  • iOS设计模式(6)模板模式

    设计模式系列文章 《iOS设计模式(1)简单工厂模式》《iOS设计模式(2)工厂模式》《iOS设计模式(3)适配器...

  • iOS设计模式(7)建造者模式

    设计模式系列文章 《iOS设计模式(1)简单工厂模式》《iOS设计模式(2)工厂模式》《iOS设计模式(3)适配器...

  • iOS设计模式(4)抽象工厂模式

    设计模式系列文章 《iOS设计模式(1)简单工厂模式》《iOS设计模式(2)工厂模式》《iOS设计模式(3)适配器...

网友评论

      本文标题:JavaScript设计模式——适配器模式

      本文链接:https://www.haomeiwen.com/subject/jkkmvctx.html