master

分支 (3)

管理

管理

master

develop

feature

design-patterns
/
singletonPatternTest.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>
    <script src="./dist/idnex.js"></script>
    <!-- 测试单例模式 -->
</head>

<body id="body-dom">

    <button id="createAlert">创建弹窗</button>
    <button id="removeAlert">移除弹窗</button>

</body>
<script src="./dist/SingletonPattern.js"></script>
<script lang="ts">
    const createAlertBtn = document.getElementById('createAlert')
    const removeAlertBtn = document.getElementById('removeAlert')
    const bodyDom = document.getElementById('body-dom')

    let div

    createAlertBtn.onclick = function () {
        // 调用了两次方法，但是只创建了一个实例
        div = singletonCreateAlertMessage({ height: '200px', width: '200px', html: '123123', style: { color: 'red' } })
        const div1 = singletonCreateAlertMessage({ height: '200px', width: '200px', html: 'aaaaa', style: { color: 'green' } })

        console.log('div === div1', div === div1);

        bodyDom.appendChild(div)
        bodyDom.appendChild(div1)
    }

    removeAlertBtn.onclick = function () {
        bodyDom.removeChild(div)
    }
</script>

</html>