master

分支 (3)

管理

管理

master

develop

feature

design-patterns
/
singletonPatternClassTest.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-class.js"></script>
<script lang="ts">

    const singleton1 = Singleton.getInstance({ height: '200px', width: '200px', html: 'bbbb', style: { color: 'pink' } })
    const singleton2 = Singleton.getInstance({ height: '200px', width: '200px', html: 'aaaa', style: { color: 'black' } })

    console.log('singleton1', singleton1);
    console.log('singleton2', singleton2);

    // 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>