master

分支 (1)

管理

管理

master

javascript_design_patterns
/
factory.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>
        .box{
            width: 100px;
            height: 100px;
            border-radius: 100%;
            background: red;
            color: rgb(13, 45, 223);
            line-height: 100px;
            text-align: center;
            font-weight: 700;
        }


    </style>
</head>
<body>
    <div class="box">&lt抖抖/&gt</div>

    <script>
        class DoudouLogo extends HTMLElement{
            connectedCallback(){
               this.render();
            }
            render(){
                this.style.background = "blue";
                this.style.width = "100px"
                this.style.height = "100px"
                this.innerHTML = "hello";
                this.style.display = "block";
            }
            sayhello(){
                alert("hello");
            }
        }

        customElements.define("doudou-logo",DoudouLogo);
        const box = document.createElement("doudou-logo");
        box.sayhello();
        document.body.append(box);
    </script>
</body>
</html>