前端工具箱及开发中碰到的经典bug

一：进行对象赋值所引发的事故：深拷贝

var val1={
    
    };
var val2={
    
    };
val1 = val2=AJAX(同步请求)；

…进行一系列数据操作
val2.val=13;
然后这个属性值被用到多出地方，就出现移除更改，影响两个对应的同一属性值

解决方式：通过前端JSON实现深拷贝：将一个对象进行拷贝给另外一个对象，这样前端的这两个对象，就开辟了两块存储空间，指针指向的存储空间也不一样。

val1=AJAX(同步请求)；
val2=JSON.Parse(JSON.stringify(val1));

这样改变其中任意相同属性的值，不会影响到另一个对象的相同属性值

二：涮新父页面

if (window.opener != null && window.opener.location != undefined && window.opener.location != null) {
window.opener.location.reload();
}

三：url：地址栏传参数

通过：JSON.stringify();//转换成字符形式

四：动态计算也在不同屏幕下的宽高

$(window).height();
$(window).width();

五：正则特殊字符校验

var pattern = new RegExp("[`~!@%#$^&*]");
pattern.test(参数);//校验

六：自己写区域滚动条

height: 750px;  /*高度*/
overflow: auto;/*溢出动作：	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。*/
cursor:pointer;/*鼠标图标*/
display: inline-block;/*行内块元素。*/
width: 170px;/*宽度*/
white-space: nowrap;/*文本不会换行，文本会在在同一行上继续*/
overflow: hidden;/*内容会被修剪，并且其余内容是不可见的。*/
text-overflow: ellipsis;/*显示省略符号来代表被修剪的文本。*/

六：node卸载出现问题

A later version of Node.js is already installed. Setup will now exit.

找到node卸载exe程序执行下就行

七：前端中点击图片生成数据展示

前提：需要获取图片中的id或者拓扑关系字段【集成组件中需要回调回数据关系字段】

$(function(){
    
    
		$("html").on('click',function(event){
    
    
		            var x="", y="";
					x=event.clientX;
					y=event.clientY-20;
					$("#box2").css({
    
    
						"display":"block",
						"margin-left":x,
						"margin-top":y
					});
				});
			});

八JQ页面回到顶部功能

.wrap {
    
    
			height:2000px;
		}
		.red {
    
    
			background:red;
			height:600px;
		}
		.green {
    
    
			background:green;
			height:600px;
		}
		.yellow {
    
    
			background:yellow;
			height:800px;
		}
		#back-top {
    
    
			position:fixed;
			width:60px;
			height:60px;
			bottom:30px;
			right:30px;
			background:#ccc;
			text-align:center;
			line-height:60px;
			text-decoration:none;
		}

<div class="wrap">
		    <div class="red">
		        内容
		    </div>
		    <div class="green">
		        内容
		    </div>
		    <div class="yellow">
		        内容
		    </div>
		</div>
		<a href="#" id="back-top">Top</a>

 $(function() {
    
    
			     //先将#back-top隐藏
			     $('#back-top').hide();
			     //当滚动条的垂直位置距顶部100像素一下时，跳转链接出现，否则消失
			     $(window).scroll(function() {
    
    
			         if ($(window).scrollTop() > 100) {
    
    
			             $('#back-top').fadeIn(1000);
			         } else {
    
    
			             $("#back-top").fadeOut(1000);
			         }
			     });
			
			     //点击跳转链接，滚动条跳到0的位置，页面移动速度是1000
			     $("#back-top").click(function() {
    
    
			         $('body').animate({
    
    
			             scrollTop: '0'
			         }, 1000);
			         //return false; //防止默认事件行为
			     });
			 });

八 js中为什0==""

1、在进行比较的时候字符串会优先转换成number进行比较
2、00，这就没有问题了，但是业务中可以使用=进行比较结果，就不会出现结果一样的情况，因为他不会转换，同时也会校验类型是否一致，然后在比较结果