首先,我们写一个遮罩层,没错就是那种
页面有一个按钮,点击按钮遮罩层出现,遮罩层上面的按钮也出现 ,
点击遮罩层上面的按钮,遮罩层隐藏,遮罩层上的按钮也隐藏
先来看看页面html代码
<style> * {margin: 0;padding: 0;} html,body { 100%;} .mask {position: fixed;left: 0;top: 0;z-index: 1; 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5); } .btn2 { position: fixed;left: 100px;top: 100px;z-index: 2;border: 1px solid blue;padding: 20px;background-color: palegreen;} .btn1 {border: 1px solid blue;padding: 20px;background-color: orange;} </style> <div class="btn1" id="btn1">点击我打开遮罩层</div>
然后是js部分,这是一开始我们写js的普通写法
var btn1 = document.getElementById("btn1"); btn1.onclick = function(){ var mask = document.createElement("div"); mask.id = "mask"; mask.className = "mask"; document.body.appendChild(mask); var btn2 = document.createElement("div"); btn2.id = "btn2"; btn2.className = "btn2" btn2.innerHTML = "点击我关闭遮罩层"; btn2.onclick = function(){ this.parentNode.removeChild(mask); this.parentNode.removeChild(this); } document.body.appendChild(btn2); }
这种写法其实是面向过程的写法,优点是写法灵活,对于初学者来说比较易读。但是缺点也很明显,假如我们要增加新的东西,容易对前面的代码造成影响,有些可复用的东西其实可以封装个方法来调用,这样可以减少代码的冗余,那么我们在优化一下就变成了下面那样
var doc = document; var body = doc.body; var btn1 = getId("btn1"); btn1.onclick = function() { var mask = createEle('div'); setAttr(mask, { "id": "mask", "class": "mask" }); body.appendChild(mask); var btn2 = createEle('div'); setAttr(btn2, { "id": "btn2", "class": "btn2", }); btn2.innerHTML = '点击我关闭遮罩层'; btn2.onclick = function() { removeSiblingEle(this, mask); removeSiblingEle(this, this); } body.appendChild(btn2) } function getId(n) { return doc.getElementById(n); } function removeSiblingEle(m, n) { m.parentNode.removeChild(n) } function createEle(n) { return doc.createElement(n); } //遍历属性穿插进去 function setAttr(self, attr) { for(var i in attr) { self.setAttribute(i, attr[i]) } }
可以看到我们做了些代码的优化,但是,我们还有个问题,就是全局变量的污染,而且以一个组件的角度而言,感觉方法之间没什么联系,那么我们使用面向对象的方法再将他进行优化一下,
//创建一个构造函数 function MaskFn(){ this.doc = document; this.body = this.doc.body; this.getId = function(n){ return this.doc.getElementById(n) } } //用prototype进行扩展 MaskFn.prototype = { init:function(){ var _self = this; var btn1 = _self.getId("btn1"); btn1.onclick = function(){ _self.clickFn(); } }, createDom:function(n){ var _self = this; return _self.doc.createElement(n); }, setAttr:function(param,attrs){ var _self = this; var i; for(i in attrs){ param.setAttribute(i,attrs[i]); } }, removeDom:function(param1,param2){ var _self = this; param1.parentNode.removeChild(param2); }, clickFn:function(){ var _self = this; var mask = _self.createDom("div"); _self.setAttr(mask, { "id": "mask", "class": "mask", }); _self.body.appendChild(mask); var btn2 = _self.createDom("div"); _self.setAttr(btn2,{ "id":"btn2", "class":"btn2" }) btn2.innerHTML = "点击我关闭遮罩层"; btn2.onclick = function(){ _self.removeDom(this,mask); _self.removeDom(this,this); } _self.body.appendChild(btn2) } } //实例构造函数 new MaskFn().init();
好了,大概就优化到这里了,要看到实例的效果,你可以狠狠的点击这里,查看例子