• 做一个简单的遮罩层


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

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

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

    先来看看页面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();
    

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

  • 相关阅读:
    你所不知道的 C# 中的细节
    数据分析与数据挖掘 ---- 系列教程
    Tiny Core Linux 安装配置
    Debian 安装
    基于C#的内网穿透学习笔记(附源码)
    Layui前端框架介绍
    使用 C# 捕获进程输出
    sonar扫描——方法重构分析
    消除代码中的坏味道,编写高质量代码
    TensorFlow之张量
  • 原文地址:https://www.cnblogs.com/qqing/p/6547796.html
Copyright © 2020-2023  润新知