利用es6和es5的继承方式写一个简单的弹窗

本片博文受到https://blog.csdn.net/zfzhuman123/article/details/90411793的启发,es6部分代码只改了一点点,逻辑也是遵照他的思想来的,而且es5继承的部分也是用了部分es6的语法

1.首先是index.html

弹窗消息提醒

2.es6部分

class Message {//构造函数会在实例化的时候自动执行constructor(opts={}) {const containerId = opts.containerId || 'message-container';// 检测下html中是否已经有这个message-container元素this.containerEl = document.getElementById(containerId);//没有就创建一个if (!this.containerEl) {// 创建一个Element对象，也就是创建一个id为message-container的dom节点this.containerEl = document.createElement('div');this.containerEl.id = containerId;// 把message-container元素放在html的body末尾document.body.appendChild(this.containerEl);}}show({ type = 'success', text = '', duration = 2000, closeable = false }) {// 创建一个Element对象let messageEl = document.createElement('div');// 设置消息class，这里加上move-in可以直接看到弹出效果messageEl.className = 'message move-in';// 消息内部html字符串messageEl.innerHTML = `${text}`;//点击弹窗提醒按钮,不能多次出现弹窗if(document.getElementsByClassName(messageEl.className).length>0) {alert('弹窗已存在');return;}// 是否展示关闭按钮if (closeable) {// 创建一个关闭按钮let closeEl = document.createElement('div');closeEl.className = 'close icon icon-close';// 把关闭按钮追加到message元素末尾messageEl.appendChild(closeEl);// 监听关闭按钮的click事件，触发后将调用我们的close方法// 我们把刚才写的移除消息封装为一个close方法closeEl.addEventListener('click', (e) => {this.close(messageEl)});}// 追加到message-container末尾// this.containerEl属性是我们在构造函数中创建的message-container容器this.containerEl.appendChild(messageEl);// 只有当duration大于0的时候才设置定时器，这样我们的消息就会一直显示if (duration > 0) {// 用setTimeout来做一个定时器setTimeout(() => {//this.close(messageEl);}, duration);}   }/*** 关闭某个消息* 由于定时器里边要移除消息，然后用户手动关闭事件也要移除消息，所以我们直接把移除消息提取出来封装成一个方法* @param {Element} messageEl */close(messageEl) {// 首先把move-in这个弹出动画类给移除掉，要不然会有问题，可以自己测试下messageEl.className = messageEl.className.replace('move-in', '');// 增加一个move-out类messageEl.className += 'move-out';// 这个地方是监听动画结束事件，在动画结束后把消息从dom树中移除。// 如果你是在增加move-out后直接调用messageEl.remove，那么你不会看到任何动画效果messageEl.addEventListener('animationend', () => {// Element对象内部有一个remove方法，调用之后可以将该元素从dom树种移除！messageEl.remove();});}
}

3.es5方法

function Message(opts) {var defaultOpts = {containerId: opts.containerId||'message-container'};const containerId = defaultOpts.containerId;// 检测下html中是否已经有这个message-container元素this.containerEl = document.getElementById(containerId);//没有就创建一个if (!this.containerEl) {// 创建一个Element对象，也就是创建一个id为message-container的dom节点this.containerEl = document.createElement('div');this.containerEl.id = containerId;// 把message-container元素放在html的body末尾document.body.appendChild(this.containerEl);}
}//弹窗出现
Message.prototype.show = function(opts) {//es6的语法--解构赋值var defaultOpts = {type: opts.type||'success',text: opts.text||'点我旁边的叉叉试试',duration: opts.duration||2000,    // 不会自动消失closeable: opts.closeable||true, // 可手动关闭}let {type,text,duration,closeable} = defaultOpts;// 创建一个Element对象let messageEl = document.createElement('div');// 设置消息class，这里加上move-in可以直接看到弹出效果messageEl.className = 'message move-in';// 消息内部html字符串messageEl.innerHTML = `${text}`;//点击弹窗提醒按钮,不能多次出现弹窗if(document.getElementsByClassName(messageEl.className).length>0) {alert('弹窗已存在');return;}// 是否展示关闭按钮if (closeable) {// 创建一个关闭按钮let closeEl = document.createElement('div');closeEl.className = 'close icon icon-close';// 把关闭按钮追加到message元素末尾messageEl.appendChild(closeEl);// 监听关闭按钮的click事件，触发后将调用我们的close方法// 我们把刚才写的移除消息封装为一个close方法closeEl.addEventListener('click', (e) => {this.close(messageEl)});}// 追加到message-container末尾// this.containerEl属性是我们在构造函数中创建的message-container容器this.containerEl.appendChild(messageEl);// 只有当duration大于0的时候才设置定时器，这样我们的消息就会一直显示if (duration > 0) {// 用setTimeout来做一个定时器setTimeout(() => {//this.close(messageEl);}, duration);}   
}//弹窗消失
Message.prototype.close = function(messageEl) {// 首先把move-in这个弹出动画类给移除掉，要不然会有问题，可以自己测试下messageEl.className = messageEl.className.replace('move-in', '');// 增加一个move-out类messageEl.className += 'move-out';// 这个地方是监听动画结束事件，在动画结束后把消息从dom树中移除。// 如果你是在增加move-out后直接调用messageEl.remove，那么你不会看到任何动画效果messageEl.addEventListener('animationend', () => {// Element对象内部有一个remove方法，调用之后可以将该元素从dom树种移除！messageEl.remove();});
}

然后各自将es6或者es5这部分js在index.html中使用script标签引入,点击按钮查看效果就行了

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！