用 JS 构造函数方法实现 toast

作者: 肆意木 | 来源:发表于2019-02-18 16:25 被阅读2次

用 JS 构造函数方法实现 toast
Toast 源码学习
ES5和ES6中继承的不同之处
三分钟全面了解构造函数
我的JS笔记 -- 类
2017-4-1 VUE
Toast 源码分析
浅析JS继承方法
面向对象
JS继承的六种方式

这就是一个简单的 toast 实现，禁不起推敲的那种。

我想要实现一个简单的 toast，不考虑异常处理，我希望不同的参数，它可以在页面不同的高度显示，完成后代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var Toast = function () {
    }
    Toast.prototype = {
        create: function (message, time, top) {
            var toastHtml = '<div class="tClass">' + message + '</div>';
            if (document.querySelector('.tClass')) return;
            document.body.insertAdjacentHTML('beforeend', toastHtml);
            document.querySelector('.tClass').style.display = "block";
            document.querySelector(".tClass").style.position = "fixed";
            document.querySelector('.tClass').style.top = top+"%";
            document.querySelector('.tClass').style.left = "50%";
            setTimeout(function () {
                if(document.querySelector('.tClass')){
                    document.querySelector('.tClass').parentNode.removeChild(document.querySelector('.tClass'))
                }
            },time);
        },
        creatToast:function (message,time,top) {
            return this.create(message,time,top)
        }
    }
    var toast = new Toast();
    toast.creatToast("hello",1000,90)      //在页面底端弹出
    toast.creatToast("hello",1000,50)      //在页面中间弹出
    toast.creatToast("hello",1000,10)      //在页面上方弹出
</script>
</body>
</html>