对于有的方法,逢用便创建,显得太麻烦不说,无形之中增加了我们的工作量,于是我们可以将常用的一些方法进行封装,以后我们就可以随用随拿啦。
注意:
在封装一个方法之前,我们要先给方法起一个名字,最好是语义化名字,方便以后的理解,对优化和查找等方面都有好处。
方法里面需要的参数我们可以设置参数名,可以看哪些是需要的就进行提取并且写到参数名的位置;
还要注意一定要返回需要的值,不然会报错;
并且在使用的时候一定要保证和参数名字是一一对应的。
1、阻止事件冒泡封装
function stopBubble(eve){
if(event.stopPropagation){
eve.stopPropagation();
}else{
eve.cancelBubble=true;
}
}
2、事件委托的封装
function eveEnt(child,cb){
return function(eve){
let e = eve || window.eveEnt;
let targetEle = e.target || e.srcElement;
for(let i=0;i<child.length;i++){
if(child[i] == targetEle){
cb.call(targetEle)();
}
}
}
}
3、获取可视窗口大小
function view() {
return {
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight|| 0
};
}
4、获取已经滚动到元素的左边界或上边界的像素数
function scroll() {
return {
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
};
}
5、event兼容
var eve = {
getEvent: function(event) {
return event || window.event;
}
}
6、随机数的封装
function random(min, max) {
return Math.round(Math.random()*(max - min)+min);
}
random(min, max) ;
7、获取行内样式的兼容
function getStyle(ele,attr){
if(ele.currentStyle){
return currentStyle[attr];
}else{
return getComputedStyle(ele,false)[attr];
}
}