web前端中常用的封装方法是什么

本篇内容介绍了"web前端中常用的封装方法是什么"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

1、放大镜

//页面加载完毕后执行

_window.onload=function(){

varoDemo=document.getElementById('demo');

varoMark=document.getElementById('mark');

varFloatBox=document.getElementById('float-box');

varSmallBox=document.getElementById("small-box");

varbigBox=document.getElementById('big-box');

varbigImg=bigBox.getElementsByTagName('img')[0];

oMark.onmouseover=function(){

FloatBox.style.display="block";

bigBox.style.display="block";

}

oMark.onmouseout=function(){

FloatBox.style.display="none";

bigBox.style.display="none";

}

oMark.onmousemove=function(ev){

varev=ev||window.event;

varleft=ev.clientX-oDemo.offsetLeft-SmallBox.offsetLeft-FloatBox.offsetWidth/2;

vartop=ev.clientY-oDemo.offsetTop-SmallBox.offsetTop-FloatBox.offsetHeight/2;

if(left<10){

left=0;

}elseif(left>=oMark.offsetWidth-FloatBox.offsetWidth-10){

left=oMark.offsetWidth-FloatBox.offsetWidth;

}

if(top<10){

top=0;

}elseif(top>=oMark.offsetHeight-FloatBox.offsetHeight-10){

top=oMark.offsetHeight-FloatBox.offsetHeight;

}

FloatBox.style.left=left+"px";

FloatBox.style.top=top+"px";

varscaleX=left/(oMark.offsetWidth-FloatBox.offsetWidth);

varscaleY=top/(oMark.offsetHeight-FloatBox.offsetHeight);

bigImg.style.left=-scaleX*(bigImg.offsetWidth-bigBox.offsetWidth)+"px";

bigImg.style.top=-scaleY*(bigImg.offsetHeight-bigBox.offsetHeight)+"px";

}

}

2、JSONP

functionfn1(data){

varhtml='';

varoUl=document.getElementsByTagName('ul')[0];

console.log(data);

if(data.total!=-1){

for(vari=0;i

html+='

oUl[xss_clean]=html;

}else{

document.body[xss_clean]+='

亲~~没有数据哦~~~

}

}

_window.onload=function(){

varoBtn=document.getElementById('btn');

variNow=0;

oBtn.onclick=function(){

//动态添加script标签加载URL地址后传入callback=fn1输出一个函数,在上面则定义好这个函数,接受一个data就是资源json类型,循环输出,可先console.log(dara)查看数据

varoScript=document.createElement('script');

oScript.src="https://api.douban.com/v2/book/search?q=%E6%A0%A1%E5%9B%AD&count=10&start="+iNow+"&callback=fn1";

document.head.appendChild(oScript);

//点击一次+10，从多少开始获取

iNow+=10;

}

}

3、获取指定区间范围随机数，包括lowerValue和upperValue

functionrandomFrom(lowerValue,upperValue)

{

returnMath.floor(Math.random()*(upperValue-lowerValue+1)+lowerValue);

}

//如获取1-100之间的随机数

console.log(randomFrom(1,100));

4、数组排序

1、快速排序

/**

*得到中间那位那位数,然后循环判断,arr[i]<中间数则pushleftArr,否则pushrightArr,最后返回left数组'拼接'中间数+right数组

*/

functionsort(arr){

if(arr.length<=1){

returnarr;

}

varnumIndex=Math.floor(arr.length/2);

varnumVal=arr.splice(numIndex,1);

varleftArr=[];

varrightArr=[];

for(vari=0;i

if(arr[i]

leftArr.push(arr[i]);

}else{

rightArr.push(arr[i])

}

}

returnsort(leftArr).concat(numVal,sort(rightArr));

}

2、sort排序

varnum=[7,45,100,4,2,564];

num.sort(function(a,b){

returna-b;

});

console.log(num)//[2,4,7,45,100,564]

5、数组去重

1、indexOf去重

/**

*当arr的第一次出现的位置==i则是第一次出现就push到tempArr

*/

functionunique(arr){

if(arr.length<=1){

returnarr;

}

vartempArr=[];

for(vari=0;i

if(tempArr.indexOf(parseInt(arr[i]))==-1){//-1证明没有出现过

tempArr.push(arr[i]);

}

}

returntempArr;

}

2、Set去重

functionSetUnique(array){

return[...newSet(array)];

}

dedupe([1,1,2,3])//[1,2,3]

6、深度拷贝

/**

*深度拷贝

*使用forin在循环赋值，避免对象引用

*/

functioncopy(obj){

if(typeofobj!='object'){

returnobj;

}

varnewObj={};

for(varattrinobj){

newObj[attr]=copy(obj[attr]);

}

returnnewObj;

}

"web前端中常用的封装方法是什么"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！