适配器2021-09-30

最新推荐文章于 2025-04-01 21:15:06 发布

AC_QI

最新推荐文章于 2025-04-01 21:15:06 发布

阅读量69

点赞数

分类专栏：笔记2021

本文链接：https://blog.youkuaiyun.com/m0_60297110/article/details/120572403

版权

适配器模式对象数组库函数数据转换代码兼容性

关键词由优快云通过智能技术生成

笔记2021 专栏收录该内容

4 篇文章

订阅专栏

普通适配器：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app"></div>
    <script>
        //1.定义函数
        function demo(arr) {
            //第一个成员表示标题
            var h1 = document.createElement('h1');
            h1.innerHTML = arr[0];
            //第二个成员表示内容
            var p = document.createElement('p');
            p.innerHTML = arr[1];
            //第三个成员表示时间
            var span = document.createElement('span');
            span.innerHTML = arr[2];
            //上树
            app.appendChild(h1);
            app.appendChild(p);
            app.appendChild(span);
        }

        // //4.数据变了，方法需要重写
        // function demo(obj) {
        //     //第一个成员表示标题
        //     var h1 = document.createElement('h1');
        //     h1.innerHTML = obj.title;
        //     //第二个成员表示内容
        //     var p = document.createElement('p');
        //     p.innerHTML = obj.content;
        //     //第三个成员表示时间
        //     var span = document.createElement('span');
        //     span.innerHTML = obj.time;
        //     //上树
        //     app.appendChild(h1);
        //     app.appendChild(p);
        //     app.appendChild(span);
        // }

        // var arr = ['新闻标题', '新闻内容', '2021-9-30'];
        //3.为了增强数据信息的语义化，将数据作为对象提供
        var obj = {
            title: '新闻标题',
            content: '新闻内容',
            time: '2021-9-30'
        }
        // //2.测试
        // demo(arr);//正常执行//3处传递的是对象，数组的方法不能用了
        //5.测试
        // demo(obj);//正常执行

        //6.由于数据变了重写方法，代价太大，所以需要适配器
        //定义适配器，将对象适配成数组，然后统一使用数组的格式
        function dataAdptor(obj) {
            return [obj.title, obj.content, obj.time]
        }
        //7.使用适配器适配的数据
        demo(dataAdptor(obj));//正常执行

    </script>
</body>

</html>

核心处：

 //6.由于数据变了重写方法，代价太大，所以需要适配器
        //定义适配器，将对象适配成数组，然后统一使用数组的格式
        function dataAdptor(obj) {
            return [obj.title, obj.content, obj.time]
        }

两个库的适配器：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>切换</button>
    <h1>内容</h1>
    <!-- 1.引用 -->
    <!-- <script src="./自用库01面向对象优化.js"></script> -->
    <!-- 3.引用jQ库，不想重新写一遍方法实现的交互，就需要适配她-->
    <script src="./jquery1.12.js"></script>
    <script>
        //4.如果开发时间短，没有充足的时间去重写页面，就需要定义适配器，兼容这两个库
        var QAQ = {
            //5.适配绑定事件方法
            bindEvent: function (dom, type, fn) {
                $(dom).on('click', fn)//此处传入type也可
            },
            //6.适配修改样式方法
            css: function (dom, key, value) {
                $(dom).css(key, value)
            },
            //7.适配获取样式方法
            getStyle: function (dom, key) {
                return $(dom).css(key)//注意：前面不能加return会打断函数
            }
        };

    </script>
    <script>
        // 2.老方法实现交互
        var h1 = document.getElementsByTagName('h1')[0];
        var btn = document.getElementsByTagName('button')[0];
        //设置交互：点击button切换h1的显隐
        QAQ.bindEvent(btn, 'click', function () {
            //切换显隐
            QAQ.css(h1, 'display', QAQ.getStyle(h1, 'display') === 'block' ? 'none' : 'block')
        })
    </script>
    <!-- 注意：如果时间足够，应该重写页面，不然两个库的相同方法在一起显得很呆 -->
</body>

</html>

核心处：

   //4.如果开发时间短，没有充足的时间去重写页面，就需要定义适配器，兼容这两个库
        var QAQ = {
            //5.适配绑定事件方法
            bindEvent: function (dom, type, fn) {
                $(dom).on('click', fn)//此处传入type也可
            },
            //6.适配修改样式方法
            css: function (dom, key, value) {
                $(dom).css(key, value)
            },
            //7.适配获取样式方法
            getStyle: function (dom, key) {
                return $(dom).css(key)//注意：前面不能加return会打断函数
            }
        };