工作中写的一些常用代码

2017年5月19日

对数组打乱洗牌：

1
2
3
4
5
/*
* @param {Array} array 待洗牌数组
*/
const shuffle = (array) => array.sort(()=> Math.random()>.5 );
shuffle([1,2,3,4,5,6]) //[2,1,5,3,6,4]

将url query参数全部取出，返回obj:

1
2
3
4
5
6
7
8
9
10
11
12
13
function queryString(url){
	var str = url || window.location.href;
	var reg = /(?:&|\?)(\w+)=([^#&$\/]+)/g
	var queryObj = {};
	while(true) {
		var match = reg.exec(str);
		if (!match) break;
		if(match[1]){
			queryObj[match[1]] = match[2];
		}
	}
	return queryObj;
}

简单实现bind方法：

1
2
3
4
5
6
Function.prototype.bind = function(obj){
	let _self = this, arg = arguments;
	return function(){
		_self.apply(obj || this, Array.prototype.slice.call(arg,1));
	}
}

DOM元素的offsetTop属性值

2014年12月1日

官方释义

HTMLElement.offsetTop 为只读属性，它返回当前元素相对于其 offsetParent 元素的顶部的距离。

我的理解

之前一直误以为返回的永远是元素到文档顶部的距离值，然而这种理解真的是too naive啊。。。
这次遇到需求是图片元素露出窗口才可见的lazy load功能，offsetTop老是获取“错误”，才发现对此属性的理解就是错误的 🤣

这个offsetParent指元素最近的有定位属性的上级元素，有两个特殊情况需要注意：

  • 如果没有定位的元素，则 offsetParent 为最近的 table 元素对象或根元素（标准模式下为 html；quirks 模式下为 body）；
  • 当元素的 style.display 设置为 “none” 时，offsetParent 返回 null

参考

MDN/Web 技术文档/HTMLElement.offsetTop