原生JS的封装

最新推荐文章于 2025-07-14 14:45:09 发布
原创最新推荐文章于 2025-07-14 14:45:09 发布 · 899 阅读
1 ·
CC 4.0 BY-SA版权
JS 专栏收录该内容
10 篇文章
订阅专栏
本文介绍了一个基于原生JavaScript的封装库，包括选择器、DOM操作、事件处理、AJAX请求等功能，提供了多种实用的方法来简化前端开发工作。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
/**
 * 原生JS的封装
 * version:1.0
 * date：2017/6/12
 * author：GYunZhi
 */

//模拟jquery的$符选择器
function $(v){

    if(typeof v==='function'){

        window.onload=v;

    }else if(typeof v==='string'){

        return document.getElementById(v);
    }else if(typeof v==='object'){

        return v;   
    }
};



//完美版getByClass函数
function getByClass(oParent, sClass)
{
    var aEle=oParent.getElementsByTagName('*');
    var aResult=[];
    var re=new RegExp('\\b'+sClass+'\\b', 'i');//  /b单词边界
    var i=0;

    for(i=0;i<aEle.length;i++)
    {

        if(re.test(aEle[i].className))
        {
            aResult.push(aEle[i]);
        }
    }

    return aResult;
}

/*
    元素到可视区的绝对距离的函数的封装

    参数：obj  元素

    示例
    var p=getPos(oDiv3);

    p.left 元素到可视区左边的距离

    p.top  元素到可视区顶部的距离
 */
 function getPos(obj){

    var pos={left:0,top:0};

    while(obj){

    pos.left+=obj.offsetLeft;
    pos.top+=obj.offsetTop;
    obj=obj.offsetParent;
    }
    return pos;
 };


/*
    封装insertBefore方法

    参数：    obj：父节点

          newNode：要添加的子节点

    1)在非标准IE下，如果第二个参数的节点不存在，会报错

    2)在其他标准浏览器下，如果第二个参数的节点不存在，则会以appendChild形式进行添加
*/
function insertBefore(obj,newNode){

    /*if (obj.children[0]) {

        obj.insertBefore(newNode,obj.children[0]);

    }else{

        obj.appendChild(newNode);
    }*/

    obj.children[0]?obj.insertBefore(newNode,obj.children[0]):obj.appendChild(newNode);
}


/*
    标准：obj.addEventListener(事件名称，事件函数，是否捕获)

    非标准IE：obj.attachEvent(事件名称,事件函数)

    addEventListener兼容性解决方案

    参数
       obj：元素
    evname：事件名称（不用加on）
        fn：事件函数
 */
function bind(obj, evname, fn) {

    if (obj.addEventListener) {

        obj.addEventListener(evname, fn, false);

    } else {

        obj.attachEvent('on' + evname,function() {

            fn.call(obj);
        });
    }
}

/*
    封装cookie函数

    1）设置cookie

    参数：  key   cookie名称
          value   cookie值
              t   过期时间


    2）获取cookie

    参数：  key   cookie名称


    3）删除cookie

    参数：  key   cookie名称
*/

 //设置cookie
 function setCookie(key, value, t) {
    var oDate = new Date();
    oDate.setDate( oDate.getDate() + t );
    document.cookie = key + '=' + value + ';expires=' + oDate.toGMTString();
}

//读取cookie
function getCookie(key) {
    var arr1 = document.cookie.split('; ');
    for (var i=0; i<arr1.length; i++) {
        var arr2 = arr1[i].split('=');
        if ( arr2[0] == key ) {
            return decodeURI(arr2[1]);
        }
    }
}

//删除cookie
function removeCookie(key) {
    setCookie(key,'', -1);
}

/*
    拖拽函数的封装

    参数 

    obj  拖拽的元素
*/
function drag(obj){

    obj.onmousedown=function (ev){

        var ev=ev||event;

        var disX=ev.clientX-obj.offsetLeft;
        var disY=ev.clientY-obj.offsetTop;

        if (obj.setCapture){

            obj.setCapture();
        }

        document.onmousemove=function (ev){

            var ev=ev||event;

            obj.style.left=ev.clientX - disX + 'px';

            obj.style.top=ev.clientY - disY + 'px';

            if (obj.releaseCapture) {

            obj.releaseCapture();

            }
        }

        document.onmouseup=function (){

            document.onmousemove=null;

        }
        return false;
    }
};

// 限制范围的拖拽
function limitdrag(obj){

    obj.onmousedown=function (ev){


        var ev=ev||event;

        var disX=ev.clientX-obj.offsetLeft;
        var disY=ev.clientY-obj.offsetTop;

        if (obj.setCapture){

            obj.setCapture();

        }
        document.onmousemove=function (ev){

            var ev=ev||event;

            //限制移动的范围 
            var L=ev.clientX - disX;

            var T=ev.clientY - disY;

            if (L<0) {

                L=0;
            }else if(L>document.documentElement.clientWidth-obj.offsetWidth){

                L=document.documentElement.clientWidth-obj.offsetWidth;
            }else if(T<0){

                T=0;
            }else if(T>document.documentElement.clientHeight-obj.offsetHeight){

                T=document.documentElement.clientHeight-obj.offsetHeight;
            }

            obj.style.left=L + 'px';

            obj.style.top=T + 'px';

            if (obj.releaseCapture) {

            obj.releaseCapture();

            }
        }

        document.onmouseup=function (){

            document.onmousemove=null;

        }
        return false;
    }
};

/*
    封装ajax函数

    method:数据提交方式

    url:接口

    data：提交的数据

    success：对服务器返回的数据进行处理的函数


 */
function ajax(method, url, data, success) {
    var xhr = null;
    try {
        xhr = new XMLHttpRequest();
    } catch (e) {
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    //get提交方式
    if (method == 'get' && data) {
        url += '?' + data;
    }
    //post提交方式
    xhr.open(method,url,true);
    if (method == 'get') {
        xhr.send();
    } else {
        //设置请求头
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        xhr.send(data);
    }

    xhr.onreadystatechange = function() {

        if ( xhr.readyState == 4 ) {
            if ( xhr.status == 200 ) {
                //获取数据之后对数据进行处理，如果存在就执行
                success && success(xhr.responseText);
            } else {
                alert('出错了,Err：' + xhr.status);
            }
        }

    }
}
/*
   运动函数的封装

    obj：元素

    json：指定属性和属性值

    fn：回调函数
 */

//getComputedStyle与currentStyle兼容性方案
function getStyle(obj,attr){

    //通过属性筛选实现兼容性方案(false  兼容旧版ff)
    return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,false)[attr];
}

function startMove(obj,json, fn)
{
    clearInterval(obj.timer);

    obj.timer=setInterval(function (){

        var bStop=true;     //这一次运动就结束了――所有的值都到达了

        for(var attr in json)
        {
            //1.取当前的值
            var iCurrent=0;

            if(attr=='opacity')
            {
                iCurrent=parseInt(parseFloat(getStyle(obj, attr))*100);
            }
            else
            {
                iCurrent=parseInt(getStyle(obj, attr));
            }

            //2.计算运动速度
            var iSpeed=(json[attr]-iCurrent)/8;
            iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);

            //3.检测停止
            if(iCurrent!=json[attr])
            {
                bStop=false;
            }

            if(attr=='opacity')
            {
                obj.style.filter='alpha(opacity:'+(iCurrent+iSpeed)+')';

                obj.style.opacity=(iCurrent+iSpeed)/100;
            }
            else
            {
                obj.style[attr]=iCurrent+iSpeed+'px';
            }
        }

        //宽高等于指定宽高时，运动停止
        if(bStop)
        {
            clearInterval(obj.timer);

            if(fn)
            {
                fn();
            }
        }
    }, 30)
}