js单例模式

最新推荐文章于 2024-03-10 00:13:53 发布

江呱呱

最新推荐文章于 2024-03-10 00:13:53 发布

阅读量129

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/weixin_46500485/article/details/108753339

版权

js 专栏收录该内容

76 篇文章 2 订阅

订阅专栏

js单例模式

1.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>
        * {
            margin: 0;
            padding: 0;
        }
        
        form {
            width: 500px;
            margin: 0 auto;
            height: 200px;
            padding: 20px 0;
        }
        
        .item {
            height: 80px;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .item label {
            flex-basis: 100px;
        }
        
        .item input {
            flex-basis: 400px;
            box-sizing: border-box;
        }
        
        .item span {
            flex-basis: 500px;
            font-size: 12px;
            text-align: center;
            height: 30px;
        }
    </style>
</head>

<body>
    <form>
        <div class="item">
            <label>用户名</label> <input id="usernameInput" type="text" /> <span id="usernameTips"></span>
        </div>
        <div class="item">
            <label>密码</label> <input id="passwordInput" type="password" /> <span id="passwordTips"></span>
        </div>
    </form>
    <script src="QF.js">
    </script>
    <script>
        var usernameInput = document.getElementById("usernameInput");
        var usernameTips = document.getElementById("usernameTips");
        var passwordInput = document.getElementById("passwordInput");
        var passwordTips = document.getElementById("passwordTips");

        var Strategy = (function() {
            var _S = {
                checkWord7T19(value) {
                    // 定义正则表达式
                    var checkWord7T19 = /^[a-zA-Z_]\w{6,18}$/;
                    return checkWord7T19.test(value) ? "" : "请输入长度为7~19位的组合字符，由数字、字母、下划线组成，不能以数字开头"
                },
                checkWord7T16(value) {
                    // 定义正则表达式
                    var checkWord7T16 = /^[a-zA-Z_]\w{6,15}$/;
                    return checkWord7T16.test(value) ? "" : "请输入长度为7~16位的组合字符，由数字、字母、下划线组成，不能以数字开头"
                }
            }
            return {
                // 允许增加更多的正则表达式
                add(name, fn) {
                    _S[name] = fn;
                },
                // 使用
                use(name, value) {
                    return _S[name](value)
                }
            }
        })();

        // 用户如果无法找到对应的满意的策略 我们也可以允许用户自己添加
        Strategy.add("checkemail", function(value) {
            var reg = /^\w{1,20}@\w{2,5}\.\w{2,4}$/;
            return reg.test(value) ? "" : "请输入格式正确的邮箱";
        });

        // 绑定 onblur 事件
        usernameInput.onblur = function() {
            // 获取用户输入的数据
            var str = Strategy.use("checkemail", this.value);
            // 验证
            if (str) {
                new Tips(str)

                return;
            }
            usernameTips.style.color = "green";
            usernameTips.innerHTML = "√";
        }

        passwordInput.onblur = function() {
            // 获取用户输入的数据
            var str = Strategy.use("checkWord7T19", this.value);
            // 验证
            if (str) {
                new Tips(str)
                return;
            }
            passwordTips.style.color = "green";
            passwordTips.innerHTML = "√";
        }


        // 第一个问题： 改代码 不好改 
        // 第二个问题： 如果有多个表单在同一个页面 正则表达式没法复用
    </script>
</body>

</html>

2.js代码
这里面是一个立即执行函数所以这个立即执行函数中返回了一个函数而这个函数又返回了先new好的实例在返回之前又先调用了这个实例的方法所以就实现了单例即一个类只能创建一个一样的对象

var Tips = (function() {
    class Tips {
        constructor(msg) {
            this.dom = document.createElement("div");
            this.msg = msg;
            this.closeBtn = document.createElement("button");
            this.init();
        }
        init() {
                this.create();
                this.render();
                this.upTree()
            }
            // 创建结构
        create() {
                // 创建上面的部分
                this.top = document.createElement("div");
                // 创建下面的部分
                this.bottom = document.createElement("div");
                this.dom.appendChild(this.top);
                this.p = document.createElement("p");
                this.top.appendChild(this.p);
                this.dom.appendChild(this.bottom);
                this.bottom.appendChild(this.closeBtn);
                this.closeBtn.innerHTML = "关闭";
                this.update(this.msg);
                this.bindEvent();
            }
            // 更改提示文本
        update(msg = "") {
                this.p.innerHTML = msg;
            }
            // 添加样式
        render() {
            var domObj = {
                display: 'none',
                position: "fixed",
                top: "50%",
                left: '50%',
                marginLeft: '-250px',
                marginTop: "-150px",
                width: "500px",
                height: "300px",
                // textAlign: "center",
                backgroundColor: "rgba(125, 50, 120, .7)",
            }
            for (var i in domObj) {
                this.dom.style[i] = domObj[i]
            }

            var topObj = {
                height: '245px',
                display: "flex",
                alignItems: "center",
                justifyContent: "space-around",
                borderBottom: '5px solid #ccc',
                padding: "0 40px"
            }
            for (var i in topObj) {
                this.top.style[i] = topObj[i];
            }

            var bottomObj = {
                height: "50px",
                lineHeight: '50px',
                textAlign: "center"
            }
            for (var i in bottomObj) {
                this.bottom.style[i] = bottomObj[i];
            }

            var buttonObj = {
                width: "100px",
                height: "40px",
                fontSize: "25px",
                marginTop: "5px",
                borderRadius: "40px"
            }
            for (var i in buttonObj) {
                this.closeBtn.style[i] = buttonObj[i];
            }
        }
        bindEvent() {
            this.closeBtn.onclick = () => {
                this.hide();
            }
        }

        upTree() {
            document.body.appendChild(this.dom)
        }

        show() {
            this.dom.style.display = "block"
        }
        hide() {
            this.dom.style.display = "none"
        }
    }
    var instance = new Tips();

    return function(msg) {
        instance.update(msg);
        instance.show();
        return instance
    }

})();

江呱呱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js单例模式

js单例模式1.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> *
复制链接

扫一扫

专栏目录