当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 原生JS的封装

原生JS的封装

2017年12月22日  | 移动技术网IT编程  | 我要评论
原生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)
}

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网