个人前端问题与错误记录

在此记录一些在写前端时的一些问题错误以及自己的解决方法（部分问题也许暂时没有良好的解决）。不断的改进与修正。

一、设置标签的属性值有display:flex时同时也需要隐藏此标签。

在写项目时遇到了有的一块东西需要在页面刚载入时不需要显示，但在需要时显示其内容。而且这一块的css设置有display:flex，隐藏时用display:none，再让其显示的时候重新设置一次display:flex属性值就可以。

<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	#test-main>div {
		display: flex;
	}
</style>
<div id="test-main">
	<div id="test-p1">测试第一行</div>
	<div id="test-p2" style="display: none;">
		<p>测试第二行p1</p>
		<p>测试第二行p2</p>
	</div>
</div>
<button id="test-btn" type="button">隐藏</button>
<script>
	var btn = document.getElementById("test-btn");
	btn.onclick=function (){
		document.getElementById("test-p2").style.display='flex';
	}
</script>

二、splice()函数使用的一个弊端

最近在写的项目中需要进行对数据判重处理显示，一开始就使用了splice()函数进行处理，当时用了一个临时变量接收数据，而后进行对数据的判重处理并填充。但当这个函数使用后，原先的数据也发生了改变，把重复的数据给移除掉了，但这个数据在其他地方也需要用到，因此发生了比较严重的结果。

首先看一下使用splice()处理数据的演示：

var arr1 = [1, 2, 3, 1, 5, 1];
var arr3 = arr1;
for (var i = 0; i < arr3.length; i++) {
	for (var j = i + 1; j < arr3.length; j++) {
		if (arr3[i] == arr3[j]) {
			arr3.splice(j,1);
			j--;
		}
	}
}
console.log(arr1);  //结果是1,2,3,5
console.log(arr3);  //结果是1,2,3,5

原数组arr1的数据也发生了改变。换一种方式处理数组进行去重。(ps：结果的顺序会发生些变化)

	var arr1 = [1, 2, 3, 1, 5, 1];
	var arr2 = [];
	for (var i = 0; i < arr1.length; i++) {
		for (var j = i + 1; j < arr1.length; j++) {
			if (arr3[i] == arr3[j]) {
				j = ++i;
			}
		}
		arr2.push(arr1[i]);
	}
	console.log(arr1);  //结果是1,2,3,1,5,1
	console.log(arr3);  //结果是2,3,5,1

三、有关所写项目中confirm弹窗重复出现问题。

在现做的项目中有一个很大的bug存在，自己写的数据动态填充的表格中对于某几列的元素添加click事件并在函数内使用了confirm弹窗或是ajax请求时，页面第一次加载时会弹出一次，刷新一下再点击就会出现两次，依此论推。之前的写法$(document).on(‘click’, “类名”, function () {xxx});

目前解决方案：将那些类的点击函数添加unbind()—>$(document).unbind().on(‘click’, “类名”, function () {xxx});

而将confirm替换成了layer(项目一直引用的是layui的下拉框样式，所以也就直接使用layer)的弹窗。ps：使用前下载引用layer的资源文件。

	layer.alert("确认删除【" + roleName + "】吗？", {
            	skin: 'layui-layer-molv' //样式类名  自定义样式
            	,closeBtn: 1    // 是否显示关闭按钮
           	 ,anim: 5 //动画类型
            	,btn: ['确定','取消'] //按钮
            	,icon: 6    // icon
           	,yes:function(){
           	}
            	,btn2:function(){
            	}
       });

未完待续。。。。