原生JS前端工具箱及开发中碰到的经典bug_js的描述之前遇到过一个最棘手的bug, 如何解决的-CSDN博客

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

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();
}

三：JSON API在前端的使用

JSON.parse(text,reviver)：将数据转换为 JavaScript 对象。
text:必需，一个有效的 JSON 字符串。
reviver: 可选，一个转换结果的函数，将为对象的每个成员调用此函数。

JSON.stringify(value[, replacer[, space]]):
value:
必需，要转换的 JavaScript 值（通常为对象或数组）。
replacer:
可选。用于转换结果的函数或数组。
如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。
如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时，将忽略 replacer 数组。
space:
可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。

eval()
var obj = eval ("(" + txt + “)”);
函数可编译并执行任何 JavaScript 代码。这隐藏了一个潜在的安全问题。

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

$(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;/*显示省略符号来代表被修剪的文本。*/

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

前提：需要获取图片中的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、0==0，这就没有问题了，但是业务中可以使用【= = =】进行比较结果，就不会出现结果一样的情况，因为他不会转换，同时也会校验类型是否一致，然后在比较结果

十、前端滚动条设置


::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  width: 6px;
  background
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

::-webkit-scrollbar-thumb {
  background-color: #2888ED;
  background-clip: padding-box;
  min-height: 50px;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
  transition: background-color .3s;
  cursor: pointer;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(144,147,153,.3);
}

十一、防止事件冒泡

 event.stopPropagation();    //  阻止事件冒泡
 event.preventDefault();

获取地址栏参数

/**
 * 获取地址参数Value
 */
function tooVal(name){ 
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = decodeURI(window.location.search).substr(1).match(reg);
    if(r!=null){    	
    	return unescape(r[2]);
    }else{
    	return null;
    }
}

获取json串对象

/**
 * 获取对象
 */
function too2(name){ 
	if(name==null || typeof(name)==="undefined"){
		return;
	}
    var r = decodeURI(window.location.search).split("=")[1].replace(/%3A/g,';');
    if(r!=null && r!=''){
    	return r;
    }
}

判空

/**
 * 判空处理
 */
function isEmpty(data){
	if(data==null || typeof(data)=="undefined"){
		return true;
	}
	return false;
}

前端生成UUID

/**
 * 获取UUID
 * @returns
 */
function uuid2() {
    var s = [];
    var hexDigits = "0123456789abcdef";
    for (var i = 0; i < 32; i++) {
    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
    }
    s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
    s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
    s[8] = s[13] = s[18] = s[23];
    var uuid = s.join("");
    return uuid;
}

前端获取long类型的时间戳

/**
 * 获取时间戳
 * @returns
 */
function getTimestamp(){
	return (new Date()).valueOf();
}

前端获取时间：年月日-时分秒

/**
 * 获取时间
 *
 */
var getDate=function(){
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();
    var hour = date.getHours();
    var min = date.getMinutes();
    var s = date.getSeconds();
    var str = year + '-' + (month < 10 ? ('0' + month) : month) + '-' + (day < 10 ? ('0' + day) : day) + ' ' + (hour < 10 ? ('0' + hour) : hour) + ':' + (min < 10 ? ('0' + min) : min) + ':' + (s < 10 ? ('0' + s) : s);
    return str;
}

前端将时间戳转换为可视化时间

function getDateTime(time){
	 var date = new Date(Number(time));//将接收到的的String类型的时间转为数字类型
     var y = date.getFullYear();
     var m = date.getMonth() + 1;
     var d = date.getDate();
     var hour = date.getHours().toString();
     var minutes = date.getMinutes().toString();
     var seconds = date.getSeconds().toString();
     if(hour < 10) {
         hour = "0" + hour;
     }
     if(minutes < 10) {
         minutes = "0" + minutes;
     }
     if(seconds < 10) {
         seconds = "0" + seconds;
     }
     return y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d) + " " + hour + ":" + minutes + ":" + seconds;
 }

ajax中的三种响应数据类型

$.ajax({
		type : "GET",
		url : 'url',
		dataType : "json",
		contentType : "application/json;charset=utf-8",
		async : false,
		success : function(data) {
 }, error : function(msg, error) {
			console.warn(msg);
		}
});

1、这是因为ajax请求dataType值为json，jquery就会把后端返回的字符串尝试通过JSON.parse()尝试解析为js对象。
2、我又把dataType值改为'text'，结果弹出框直接显示后台返回的json字符串。
3、我又把dataType值改为'html'，结果弹出框直接显示后台返回的json字符串。