封装js原生插件dialog，不用prototype

最新推荐文章于 2022-08-08 13:08:30 发布

zouzixuan

最新推荐文章于 2022-08-08 13:08:30 发布

阅读量1.3k

点赞数

文章标签： js 插件弹框

本文链接：https://blog.csdn.net/zouzixuan/article/details/84701298

版权

自己写的，虽说也是面向对象，但是没有用到原型，方法和属性全部挂在对象上面……

大概思路：

1.打好一个底层的样子，默认的样式，静态页面写一下

<style>
        *{margin: 0;padding: 0;}
        .dialog{position: fixed;left: 0;right: 0;top: 0;bottom: 0;margin: auto;width: 300px;height: 200px;background-color: burlywood}
        .dialog-head{height: 50px;background-color: brown;}
        .dialog-content{height: 80px;background-color: chocolate;padding: 10px;}
        .dialog-foot{height: 50px;background-color: cornflowerblue}
        .dialog-foot span{float: right;line-height: 30px;margin-right: 20px;background-color: black;color: bisque;display:block;height: 30px;margin-top: 5px;padding: 5px;}
    </style>
</head>
<body>
    <div class="dialog">
        <div class="dialog-head">
            提示：弹框标题
        </div>
        <div class="dialog-content">
            你确定要怎么怎么样嘛？
        </div>
        <div class="dialog-foot">
            <span>取消</span>
            <span>确定</span>
        </div>

    </div>
</body>

2.设置默认的参数，初始化要做什么，定义好

如果已经存在这个dom了，就不创建，只进行显影操作

第一次实例化就创建

extend：挂载参数

bindData：绑定参数（这步可以写在create里面也行）

bindEvent：绑定事件

init:function(opt){
                this.option={
                    title:"我的妈啊",
                    content:"这是我的初始化内容部分",
                    okbtn:{
                        html:"我的确定按钮",
                        fn:function(){
                            alert("确定？？")
                        }
                    },
                    cancelbtn:{
                        html:"这是我的取消按钮",
                        fn:function(){
                            // ????
                        }
                    }

                }

                
                if(this.box){
                    this.show()
                }else{
                    this.create()
                }
                this.extend(opt)
                this.bindData()
                this.bindEvent()
            }

3.create虚拟的dom，生成一下看看效果

create:function(){
                this.box=document.createElement("div")
                this.box.style.border="1px solid red"
                this.dialogHead=document.createElement("div")
                this.dialogContent=document.createElement("div")
                this.dialogFoot=document.createElement("div")
                this.okbtn=document.createElement("span")
                this.cancelbtn=document.createElement("span")
                this.box.className="dialog"
                this.dialogHead.className="dialog-head"
                this.dialogContent.className="dialog-content"
                this.dialogFoot.className="dialog-foot"
                this.dialogHead.innerHTML="我是头部"
                this.dialogContent.innerHTML="我是身体"

                this.okbtn.innerHTML="确定"
                this.cancelbtn.innerHTML="取消"
                this.dialogFoot.appendChild(this.cancelbtn)
                this.dialogFoot.appendChild(this.okbtn)
                this.box.appendChild(this.dialogHead)
                this.box.appendChild(this.dialogContent)
                this.box.appendChild(this.dialogFoot)
                document.body.appendChild(this.box)
            }

4.绑定参数，绑定事件

（我这里加了框子可拖拽效果）

extend:function(opt){
                for(var i in opt){
                    this.option[i]=opt[i]
                }
            },
            bindData:function(){
                this.dialogHead.innerHTML=this.option.title
                this.dialogContent.innerHTML=this.option.content
            },
            bindEvent:function(){
                var that=this
                this.okbtn.onclick=this.option.okbtn.fn
                this.cancelbtn.onclick=function(){
                    that.hide()
                }
                this.box.onmousedown=function(e){
            var evt=window.event||e
            var startx=evt.pageX
            var starty=evt.pageY
            var left=parseInt(getComputedStyle(that.box)["left"])
            var top=parseInt(getComputedStyle(that.box)["top"])
            document.onmousemove=function(e){
                var evt=window.event||e
                var x=evt.pageX-startx
                var y=evt.pageY-starty
                that.box.style.left=left+x+"px"
                that.box.style.top=top+y+"px"
            }
            document.onmouseup=function(){
                document.onmousemove=""
            }
        }
            },
            hide:function(){
                this.box.style.display="none"
            },
            show:function(){
                this.box.style.display="block"
            }

5.实例化

btn1.onclick=function(){
            dialog.init({
                title:"?????????",
                    content:"tamade",
                    okbtn:{
                        html:"我的确定按钮",
                        fn:function(){
                            alert("确定？？")
                        }
                    },
                    cancelbtn:{
                        html:"这是我的取消按钮",
                        fn:function(){
                            // ????
                        }
                    }
            })
        }

上面这是简陋版本的，下面这个是精修版，需要的可以看看~

github：

https://github.com/zouzixuan/jsdialog