常用的JS方法

最新推荐文章于 2022-03-15 15:47:00 发布

N1qiugu

最新推荐文章于 2022-03-15 15:47:00 发布

阅读量288

点赞数

分类专栏： js基础

本文链接：https://blog.youkuaiyun.com/Ningqiugu/article/details/80571147

版权

js基础专栏收录该内容

4 篇文章

订阅专栏

这周写了很多项目，也遇到了很多看似很简单的问题，但是实际操作起来发现其实还是有点复杂的，当然也是一些常用的方法，掌握的话，以后也是会经常遇到。当然在此之前，自己也是去网上搜索过，不过网上的东西都是比较杂乱，可能有的满足不了项目的需求，我们可以在一个基础的方法上进行扩展，去达到自己的需求。

近期遇到的第一个常用的方法就是关于table表格固定表头的问题，网上的方法非常多，有的也是非常的复杂，有的简单但是却满足不了自己的项目，自己遇到的这个项目中，table里面的thead和tbody，都是动态生成的，在加载以后，会出现一个表头，但是没有身体部分，所以表头都是缩小的表头，从服务器取到数据以后，身体部分出现，表头也随着展开。因为字段比较多，所以还出现了横向的滚动条，因此使用fixed的定位，会导致只有表头前几个字段可以看见，后面拉动横向滚动条的时候，表头依然是固定不变的，这样显然达不到自己预想的效果。然后在网上搜到了一个利用滚动事件进行固定的例子，一下子让自己茅塞顿开，对上面的方法也是进行了自己的扩展，下面是代码：

$(window).scroll(function(){
    let scroll = $(window).scrollTop();
    //获取滚动条距离顶部的距离
    $(selector)[0].style.transform = 'translateY("+scrollTop+"px)';
});

这个主要就是利用了css3的平移变换的transform方法，让表头始终固定在顶部的位置，代码也是非常的简单，当然这个是基于window的滚动事件，如果是某个元素滚动，则在某个元素身上绑定滚动事件即可。另外一个则是如何将json转换成树形结构，这个网上的代码非常多，自己也是看了很多，一直没有能明白其中的意思，后来也是将代码写一遍，并且log了很多次，才明白了原理，这里也是详细解释一下这个代码的意思。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
		/*
		*@param {json} 		需要转换的json数据
		*@param {string}	数组的id属性字符串
		*@param {string}	数组元素父级元素的id属性，也就是pid的意思
		*@param {string}	数组元素子元素的属性名
		*@return {array}	返回数组
		*/
		function transJson(jsonData,id,pid,children){
			let arr = [],hash = [],len = jsonData.length;
			for(let i = 0;i < len;i++){
				hash[jsonData[i][id]] = jsonData[i];	
				//将数组转换成对象的形式，即a[i][id]是数组中的id属性作为hash数组的属性名
			}
			for(let j = 0;j < len;j++){
				//aVal实际就是jsonDate数组，hashVP则代表hash数组的父元素的id，即pid
				let aVal = jsonData[j],hashVP = hash[aVal[pid]]；
				if(hashVP){
					!hashVP[children] && (hashVP[chilren] = [])	
					//判断父对象是否存在，即pid是否存在，不存在，则将对象放到第一层
					hashVP[children].push(aVal);	//存在的话就将本对象放入chilren属性
				}else{
					r.push(aVal);
				}
			}
		}
	</script>
</body>
</html>

自己看这段代码的时候，开始始终无法理解pid的意思，尝试了很多次，最后再知道pid就是指向父元素的id的意思，如果pid不存在的话，那就将这个对象放在最外层。当然转换json的结构，也只是第一步，如何将json属性结构去体现在dom上，自己也是尝试写过，但是抽象不出来方法，面对那些无限嵌套的情况，也是束手无策，网上看到的方法也是比较复杂，难以理解，如果有小伙伴知道，也可以和我分享