预览效果

链接：http://yongma16.xyz/static/Csslearn/css_study/day36/%E5%8D%95%E4%BE%8B%E6%A8%A1%E5%BC%8F%E4%B9%8B%E6%97%A0%E9%99%90%E5%BC%B9%E7%AA%97.html

单例模式

定义：
单体模式，规定一个类只有一个实例，并且提供可全局访问点
实例：
全局缓存、弹窗
缺点：
频繁的创建和销毁
资源浪费
优化：
标记：创建变量标记（使用闭包）
实现：
call() 方法分别接受参数。
apply() 方法接受数组形式的参数。
实现：
绑定到window全局

// 单例模式
function getSingle(fn) {var result;return function() {return result || (result = fn.apply(this, arguments))}
}

无限弹窗与销毁

思路：
创建弹窗div函数，传入定义的全局函数（单例模式实现），将创建的dom加入body实现弹窗的弹出（dispaly的属性控制none->block）
销毁：
将创建的dom加入数组，从前往后销毁，应用数组的splice对数组进行切割

创建弹窗函数

将style拆分出来，便以后期修改，最后返回div窗口

var createLayer = function() {// 随机位置var div = document.createElement('div')var left = "50%",top = "50%";if (countFlag != 0) {left = Math.round(Math.random() * 100) + "%";top = Math.round(Math.random() * 100) + "%";}let page = {position: "absolute",display: 'none',background: "url(pop.jpeg)",width: "400px",height: "400px",boxSizing: "border-box",left: left,top: top,margingTop: "20px",margingBottom: "20px",border: "1px solid red"}for (let key in page) {div.style[key] = page[key]}// 关闭按钮let pageCloseBtn = document.createElement('button')let pageClose = {position: "relative",float: "right",margin: "2px",padding: "2px",background: "bisque",border: "1px",color: "dark",cursor: "pointer"}for (let key in pageClose) {pageCloseBtn.style[key] = pageClose[key]}pageCloseBtn.innerText = '关闭'// 问题let pageQuestionDom = document.createElement('p')let pageQuestion = {position: "relative",left: "3%",top: "50%",fontSize: "2em",fontWeight: "bolder",color: "rgb(80,87,133)",transform: "translateY(-50%)",textAlign: "center"}for (let key in pageQuestion) {pageQuestionDom.style[key] = pageQuestion[key]}// 回答divpageQuestionDom.innerText = "闭包单例模式是否明白"let answerDiv = document.createElement('div')let btnYes = document.createElement('button')btnYes.style.margin = '10px'btnYes.innerText = '是'let btnNo = document.createElement('button')btnNo.innerText = '否'btnNo.style.margin = '10px'let pageAnswer = {position: "relative",top: "40%",transform: "translateY(-50%)",textAlign: "center"}for (let key in pageAnswer) {answerDiv.style[key] = pageAnswer[key]}// 添加绑定事件btnYes.addEventListener('click', initPage)btnNo.addEventListener('click', initPage)pageCloseBtn.addEventListener('click', initPage)answerDiv.appendChild(btnYes) //是answerDiv.appendChild(btnNo) //否div.appendChild(pageCloseBtn) //关闭的按钮div.appendChild(pageQuestionDom) //问题div.appendChild(answerDiv) //窗口return div
}

初始化与销毁实现

// 初始化完成
window.onload = initPage
// object添加监听事件var count = {value: 0
}
Object.defineProperty(count, 'value', {value: {configurable: true,get: function() {return data},set: function(newValue) {data = newValue; //更新// 触发删除函数console.log('触发删除函数')deletePagePop();}}
})
var countFlag = 0
// 单链表存储dom
var createDomList = []function initPage() {count.value = 1; //初始化if (countFlag > 0) {console.log('开始销毁')function deletPageDom() {return new Promise(resolve => {setTimeout(function() {let headPage = createDomList[0]console.log('移出的dom', headPage)document.body.removeChild(headPage)createDomList = createDomList.splice(1, createDomList.length - 1)--count.value}, 3000)resolve('delete')})}async function doDelete() {await deletPageDom()}doDelete();}console.log('create page')var getSingleLogin = getSingle(createLayer)let CreateLoginDom = getSingleLogin()console.log(CreateLoginDom)CreateLoginDom.style.display = 'block'// 先进先出document.body.appendChild(CreateLoginDom) //加入渲染domcount.value = count.value + 1++countFlagconsole.log('count.value=', count.value)createDomList.push(CreateLoginDom)}function deletePagePop() {// 删除第一个出现的}

getSingle函数已经注册到全局window对象中

仓库代码

链接：https://codechina.csdn.net/qq_38870145/css_study

js_单例模式制作无限弹窗（3s内销毁）相关推荐

我的世界服务器做新手无限装备,我的世界——如何制作无限弓？，原来是这样的...
在我的世界游戏中,除了近战武器以外,还需要准备一把备用的远程武器,这样在对付苦力怕的时候,就可以不必靠近也能消灭它了,不过要想长期使用远程武器--弓的话,就需要准备大量的箭,这实在是有些麻烦,因此建议 ...
Android：使用Activity制作中间弹窗
使用Activity制作中间弹窗前言使用activity制作弹窗的好处就是,自由发挥的余地更大了.匆匆的用activity制作了中间弹窗的小demo,没有重写activity显示和消失的动画,圆角 ...
游戏系列之无限弹窗游戏
hi,hi!今天我来给大家提供一款难度为:⭐⭐⭐⭐(共5星)的游戏: 无限弹窗!!! 众所周知,无限弹窗是一个恶搞游戏,不过我也是要蹚浑水讲一下如何速成无限弹窗. 话不多说,直接上代码!!! #inc ...
Python恶搞无限弹窗程序
最近闲着无聊,写了个简单的无限弹窗,给你们看看
连连看外挂制作 —— 无限时间（2）
标题: 连连看外挂制作 -- 无限时间(2) 作者: Koma 时间: 2009-12-11 08:10 链接: http://blog.csdn.net/wangningyu/archive ...
Python表白代码合集：5种表白代码、比小心心、无限弹窗、520表白墙、抖音热门表白小软件、无套路表白
一.介绍一下写了5个Python表白代码,代码很简单,通俗易懂,都有注释.有什么问题联系本人QQ:483062431.文章最后教你们怎么打包成exe,如果你懒得搞懂代码怎么回事 ...
使用Axure制作无限循环展示图片效果
一.实现的效果如图: 1.此次需要实现的效果是,进入界面后,在图片展示区域的图片根据事先设定好的时间,自动切换不同的图片: 2.循环不间断: 3.页面不出现闪烁的现象. 二.做前工作图片:4张软 ...
我的世界服务器被无限循环怎么办,我的世界怎么制作无限循环装置_我的世界无限循环装置制作方法_游戏堡...
在我的世界游戏里面,无限循环装置是个非常实用的装置,玩家可以通过这个实现刷怪,或者一些意想不到的功能,可能很多玩家不知道怎样实现,下面游戏堡小编为大家带来详细制作方法,希望对大家有所帮助. 无限循环装 ...
如何用python做无限弹窗_python弹出框
广告关闭腾讯云11.11云上盛惠 ,精选热门产品助力上云,云服务器首年88元起,买的越多返的越多,最高返5000元! super(winform, self).init(parent) self.r ...
商场里的导购图怎么制作？在商场内怎么导航？
在商场内怎么导航?很多顾客在逛商场的时候会先看商场的导览图,寻找自己心仪品牌的位置.有的商场导览图上会标注商铺号,在几层的几号铺位,然后按照品牌对应的编号去找店,方便.快捷,不然真的很容易迷路. 上海 ...

js_单例模式制作无限弹窗（3s内销毁）

单例模式制作无限弹窗