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

无问西东

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

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

适配器模

下图就是适配器，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 );
    }
} );

总结

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

结束语

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

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