欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

原生JS的封装

程序员文章站 2022-03-29 21:06:13
原生JS的封装 /** * 原生JS的封装 * version:1.0 * date:2017/6/12 * author:GYunZhi */ /...
原生JS的封装
/**
 * 原生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;idocument.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)
}