资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

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+='

  • '+data.books[i].title+'

    '+data.books[i].author_intro+'

    '+data.books[i].summary+'

    '+data.books[i].publisher+'

  • ';}

        oUl.innerHTML=html;

        }else{

        document.body.innerHTML+='

    亲~~没有数据哦~~~

    ';

        }

        }

        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前端中常用的封装方法是什么”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!


    文章题目:web前端中常用的封装方法是什么
    本文来源:http://www.cdkjz.cn/article/geedhh.html
    多年建站经验

    多一份参考,总有益处

    联系快上网,免费获得专属《策划方案》及报价

    咨询相关问题或预约面谈,可以通过以下方式与我们联系

    大客户专线   成都:13518219792   座机:028-86922220