TypeScript 封装并发布一个库
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了TypeScript 封装并发布一个库相关的知识，希望对你有一定的参考价值。
参考技术A 使用TypeScript封装一个定时清除localStore的方法。项目中token的信息保存在了localStorage里面了。localStorage中除非手动删除不然就一直留存在浏览器里面。另一个是当token过期时，只有发起一个请求才能感知，如果提前从浏览器中间将要过期的token删除，通知用户重新登录，就能节省一次链接。根据自己的情况设置 name, version, description, entry point 以及后面的内容。
这里在的entry point 指的是以后使用这个包要引入的文件，不是编译的入口文件
完成后创建一个tsconfig.json的文件
创建完成需要配置几个配置项
编写完成后在运行 tsc 命令会在根目录下生成 dist 文件夹；js 文件是编译生成的文件，.d.ts是typescript的声明文件。
在根目录下创建测试文件夹 example，创建测试文件，并在tsconfig.json中将该文件添加至 exclude 中。
TypeScript(JavaScript)封装一个Toast组件
大家好，又是我，我是萌杰尔
最近闲来无事，就用JavaScript封装了一个组件库(其实目前只有一个Toast组件，嘿嘿嘿)，叫Gree。在这里我就和大家讲一讲目前的Toast组件的实现过程和使用介绍。
这个组件是用TypeScript实现的，然后转译成JavaScript的代码，我这里就直接放出JavaScript的下载链接吧。
使用方法介绍
- 首先新建一个网页项目，创建一个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函数中所定的初始值
好了，到这里，本篇文章就写完了，希望大家多多支持，来个一键四连吧，求求了(´；ω；`)
以上是关于TypeScript 封装并发布一个库的主要内容，如果未能解决你的问题，请参考以下文章
如何将 jQuery 导入 Angular2 TypeScript 项目？