TypeScript(JavaScript)封装一个Toast组件

Posted 2021-06-18 萌杰尔

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了TypeScript(JavaScript)封装一个Toast组件相关的知识，希望对你有一定的参考价值。

大家好，又是我，我是萌杰尔

最近闲来无事，就用javascript封装了一个组件库(其实目前只有一个Toast组件，嘿嘿嘿)，叫Gree。在这里我就和大家讲一讲目前的Toast组件的实现过程和使用介绍。

这个组件是用TypeScript实现的，然后转译成JavaScript的代码，我这里就直接放出JavaScript的下载链接吧。

点击这里下载Gree-0.1

使用方法介绍

首先新建一个网页项目，创建一个index.html
引入gree.js
为了页面更好看一些，我在页面中添加了背景图片(稍后可以在源码打包处下载到)
在里面添加两个按钮(为了好看我把按钮放在了中间并且加上了毛玻璃)

<div class="button" id="button-1">点击显示Toast1</div>
<div class="button" id="button-2">点击显示Toast2</div>

声明Toast对象并实例化，四个参数依次为要显示的文本、滞留时间、动画过渡时间、自定义样式

var toast1 = new Toast("我是Toast1", 3000, 0.2, {
    borderRadius: '20px',
    backgroundColor: '#ffffff33'
})
var toast2 = new Toast("我是Toast2", 3000, 0.2, {
    borderRadius: '20px',
    backgroundColor: '#ffffff33'
})

为两个按钮添加点击事件，点击显示Toast

document.getElementById('button-1').onclick = function () {
    toast1.show();
}
document.getElementById('button-2').onclick = function () {
    toast2.show();
}

实现完成，合并代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gree Toast</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .page {
            width: 100vw;
            height: 100vh;
            background: url(./images/background.jpg) no-repeat;
            background-size: cover;
            background-position: center;
        }
        .page > .button-group {
            width: 300px;
            height: 50px;
            margin: 100px 0px 0px calc((100vw - 300px) / 2);
            float: left;
        }
        .page > .button-group > .button {
            width: 145px;
            height: 50px;
            float: left;
            color: #fff;
            text-align: center;
            line-height: 50px;
            background-color: #ffffff33;
            backdrop-filter: blur(5px);
            border-radius: 10px;
            cursor: pointer;
            font-size: 15px;
            user-select: none;
        }
        .page > .button-group > .button:last-child {
            margin: 0px 0px 0px 10px;
        }
    </style>
</head>
<body>
    <div class="page">
        <div class="button-group">
            <div class="button" id="button-1">点击显示Toast1</div>
            <div class="button" id="button-2">点击显示Toast2</div>
        </div>
    </div>
    <script src="https://gree.dowalet.cn/gree/0.1/website/gree.js"></script>
    <script>
        var toast1 = new Toast("我是Toast1", 3000, 0.2, {
            borderRadius: '20px',
            backgroundColor: '#ffffff33'
        })
        var toast2 = new Toast("我是Toast2", 3000, 0.2, {
            borderRadius: '20px',
            backgroundColor: '#ffffff33'
        })
        document.getElementById('button-1').onclick = function () {
            toast1.show();
        }
        document.getElementById('button-2').onclick = function () {
            toast2.show();
        }
    </script>
</body>
</html>

下载打包源码

点击后如果无法下载，请复制https://gree.dowalet.cn/gree/0.1/website/gree.js链接手动下载

注意：Toast组件默认字和背景颜色都为白色，需要在自定义样式中修改，上文中的没有更改颜色是因为我为该页面添加了背景图片，用以显示出Toast。

注意：Toast的背景颜色为半透明时（例如#ffffff33），会自动添加毛玻璃的效果

下面我们来讲解一下实现过程，请大家打开gree.js的源代码

这个组件库首先定义了一个Toast类，并且声明了一个变量GreeGlobalData用于存放Toast的状态信息。

var GreeGlobalData = {
	···
};

var Toast = /** @class */ (function () {
    ···
    return Toast;
}());

原理与实现过程

然后我们来分析一下这个Toast类

先来看看里面的构造函数

function Toast(text, retention, duration, style) {
    this.text = text;
    this.retention = retention;
    this.status = true;
    this.duration = duration || 0.2;
    this.style = style;
    this.addToast();
}

根据构造函数我们可以看到有四个属性（JavaScript的属性和Java的声明方式不太一样）

text：显示的文本
retention：滞留时间
status：状态，显示或隐藏
duration：动画过渡时间
style：自定义样式

再接着我们看一下该类中的另一个函数addToast的实现

Toast.prototype.addToast = function () {
    this.element = document.createElement('div');
    this.element.innerText = this.text;
    this.element.style.padding = '0px 50px 0px 50px';
    this.element.style.height = '50px';
    this.element.style.textAlign = 'center';
    this.element.style.lineHeight = '50px';
    this.element.style.borderRadius = '5px';
    this.element.style.backgroundColor = '#ffffff50';
    this.element.style.position = 'absolute';
    this.element.style.userSelect = 'none';
    this.element.style.backdropFilter = 'blur(5px)';
    this.element.style.top = '-50px';
    this.element.style.color = '#fff';
    this.element.style.visibility = 'hidden';
    this.element.style.transitionDelay = '.1s';
    this.element.style.transition = 'visibility ' + this.duration + 's ease, opacity ' + this.duration + 's ease, top ' + this.duration + 's ease';
    document.body.insertBefore(this.element, document.querySelector('script'));
    this.element.style.left = 'calc((100vw - ' + this.element.offsetWidth + 'px) / 2)';
    for (var attr in this.style) {
        if (Object.prototype.hasOwnProperty.call(this.style, attr)) {
            var style = this.style[attr];
            this.element.style[attr] = style;
        }
    }
};

其实看懂这段代码还是不难的，前面都是在设置Toast组件的基础样式，我们先来看看第13行和第15行

这里添加了两个css样式

top：当布局为绝对布局时，该样式决定了元素的位置
visibility：元素显示还是隐藏

由于Toast的父元素直接就是body元素，所以，会直接跑到网页可见区域的上面，再加上visibility样式，这样就把Toast组件隐藏起来了

然后我们看第18行

第18行这里实际上就能看得明白我的Toast组件是放在什么位置的了，会先找到script标签，然后插入到script标签的前面，所以一定要注意你的script标签一定要卸载body里面最后的位置哦（我也不想约束大家，但是这个位置大概是网页JavaScript内容的最佳位置了吧，正好我省事大家也能养成好的习惯，一举两得）

一不小心就把自己懒的本性露出来了(｀・ω・´)

再往后有一个for循环，这里我遍历了自定义样式里的内容，并一一赋值给Toast组件了

接着，我们来讲最后的两个控制Toast状态的函数show和hidden

首先看看show函数

Toast.prototype.show = function () {
    var _this = this;
    clearTimeout(this.waiter);
    if (GreeGlobalData.Toast.nowShowingToast == null) {
        if (this.status) {
            this.element.style.transition = 'visibility ' + this.duration + 's ease, opacity ' + this.duration + 's ease, top ' + this.duration + 's ease';
            this.element.style.top = '25px';
            this.element.style.visibility = 'visible';
            this.status = !this.status;
            this.waiter = setTimeout(function () {
                _this.hidden();
            }, this.retention);
        }
    }
    else {
        GreeGlobalData.Toast.nowShowingToast.hidden();
        this.element.style.transition = 'visibility ' + this.duration + 's ease ' + this.duration + 's, opacity ' + this.duration + 's ease ' + this.duration + 's, top ' + this.duration + 's ease ' + this.duration + 's';
        this.element.style.top = '25px';
        this.element.style.visibility = 'visible';
        this.status = !this.status;
        this.waiter = setTimeout(function () {
            _this.hidden();
        }, this.retention);
    }
    GreeGlobalData.Toast.nowShowingToast = this;
};

这个函数会操作top样式和visibility样式让元素显示出来，并把正在显示的Toast组件保存到我们在一开始声明的GreeGlobalData变量中，并且通过setTimeout函数进行异步处理（当十六时间超出就会调用hidden函数）

接下来我们看看hidden函数

Toast.prototype.hidden = function () {
    this.element.style.transition = 'visibility ' + this.duration + 's ease-in, opacity ' + this.duration + 's ease-in, top ' + this.duration + 's ease-in';
    this.element.style.top = '-50px';
    this.element.style.visibility = 'hidden';
    this.status = !this.status;
};

hidden函数所做的事情就简单的多了，实际上就是修改当前的Toast所有状态为addToast函数中所定的初始值

点击下载GreeJS
点击下载Gree样例源码

好了，到这里，本篇文章就写完了，希望大家多多支持，来个一键四连吧，求求了(´；ω；`)

以上是关于TypeScript(JavaScript)封装一个Toast组件的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript 和 TypeScript 的封装性 —— 私有成员

TypeScript(JavaScript)封装一个Toast组件

TypeScript中的属性封装