做一个简单的遮罩层

Posted 2020-09-04 梁小清

 

首先，我们写一个遮罩层，没错就是那种

页面有一个按钮，点击按钮遮罩层出现，遮罩层上面的按钮也出现 ，

点击遮罩层上面的按钮，遮罩层隐藏，遮罩层上的按钮也隐藏

先来看看页面html代码

<style>
	* {margin: 0;padding: 0;}		
	html,body {width: 100%;}
	.mask {position: fixed;left: 0;top: 0;z-index: 1;width: 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();

 好了，大概就优化到这里了，要看到实例的效果，你可以狠狠的点击这里，查看例子