master

分支 (1)

管理

管理

master

javascript_design_patterns
/
adapter.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .containers {
            display: flex;
            flex-direction: row;
            position: relative;
            margin-left: 50px;
            margin-top: 2em;
        }

        .box {
            width: 100px;
            height: 100px;
            background: blue;
            position: relative;
        }

        .box1 {
            width: 100px;
            height: 100px;
            background: green;
            position: relative;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background: rgb(235, 62, 10);
            position: relative;
            z-index: 1000;
            margin-left: 100px;

        }

        .box2::before {
            content: '';
            position: absolute;
            display: block;
            width: 100px;
            height: var(--height);
            background: #FFF;
            left: -50%;
            top: 50%;
            transform: translateY(-50%);

        }


        .box1::before {
            content: '';
            position: absolute;
            display: block;
            width: 100px;
            height: 50px;
            background: #FFF;
            left: -50%;
            top: 50%;
            transform: translateY(-50%);
        }

        .box1::after {
            content: '';
            position: absolute;
            display: block;
            width: 100px;
            height: 20px;
            background: green;
            right: -50%;
            top: 50%;
            transform: translateY(-50%);
        }

        .box::after {
            content: '';
            position: absolute;
            display: block;
            width: 100px;
            height: 50px;
            background: blue;
            right: -50%;
            top: 50%;
            transform: translateY(-50%);
            z-index: 1;

        }

        .boxs {
            display: flex;
            flex-direction: row;
            left: 0px;
            position: relative;
            z-index: 111111;
            transition: all 1s ease-in-out;
        }

        button {
            width: 300px;
            height: 50px;
            margin: 10px 0;
            margin-left: 50px;

        }
    </style>
</head>

<body>
    <div class="containers">
        <div class="boxs">
            <div class="box">
            </div>
        </div>

        <div class="box2"></div>
    </div>
    <button id="start">Start</button>

    <script>
        class Source {
            constructor(el) {
                this.el = el;
            }
            connectTo(target) {
                this.el.style.left = `${target.num}px`;
                target.connect();
            }
        }

        class Target {
            constructor(el) {
                this.el = el;
                this.num = 100;
                this.height = 20;
                this.el.style.cssText = `--height:${this.height}px`;
            }
            connect() {
                this.el.style.background = "orange"
            }
        }

        class Adapter extends Source{
            constructor(el){
                super(el);
                this.createElement()
            }
            createElement(){
                const div = document.createElement("div");
                div.className = "box1";
                this.el.append(div);
            }
            connectTo(target){
                super.connectTo(target);
                console.log("hello");
            }
        }


        var ele = new Adapter(document.querySelector(".boxs"));
        var target = new Target(document.querySelector(".box2"));


        document.querySelector("#start").addEventListener("click", () => {
            ele.connectTo(target);
        })
    </script>
</body>

</html>