标签：position click 做了 gre dom 面向 ini 封装 set
首先，我们写一个遮罩层，没错就是那种
页面有一个按钮，点击按钮遮罩层出现，遮罩层上面的按钮也出现 ，
点击遮罩层上面的按钮，遮罩层隐藏，遮罩层上的按钮也隐藏
先来看看页面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();
好了，大概就优化到这里了，要看到实例的效果，你可以狠狠的点击这里，查看例子
标签：position click 做了 gre dom 面向 ini 封装 set
原文地址：http://www.cnblogs.com/qqing/p/6547796.html
