封装方法示例

Posted 2020-08-11 超小级小萝莉

对封装方法这个概念理解来自于写原生代码中，代码重复繁琐，通过引用方法可简化大量代码

例一

选择id---------$ID()

其实可以这样实现

var $ID = function(str) {       //全局函数
        return document.getElementById(str);
    }

$ID()就相当于document.getElementById（），可以省代码

例二
处理后台返回的数据对象如果有很多层，要判断是否存在再执行操作时

数据  A{

　　a:{a1:{a2:{a3:{}},a2:{}},

　　b:{b1:{},b2:{}},

　　c:{c1:{},c2:{}}

　　}

进行判断 if（res.A  &&  res.A.a  &&  res.A.a.a1  &&  res.A.a.a1.a2  &&  res.A.a.a1.a2.a3）

如果返回的对象有很多层判断就麻烦

解决方式

var JudgeExsit=function(res,str){      //全局
    var A=str.split(".");
    var L=A.length;    
    var flag=res;
    for(var i=0;i<=L-1;i++){
        flag=flag[A[i]];                  //属性的[]表示方式使用更灵活
        if(!flag){return false}
    }
    return true;
}

再调用 if(JudgeExsit（res,"res.A.a.a1.a2.a3"）即可，这样对数据的处理就简单多啦。
例三

对之前学的Ajax进行方法封装

Var  Install.ajax=function(obj){
    var xhr = new XMLHttpRequest();
    xhr.open(obj.type, obj.url);
    xhr.onreadystatechange = function() {
        if(xhr.status>=200&&xhr.status<300){
            if (xhr.readyState == 4) {
                var str = xhr.responseText;
                obj.success(str);
            }
        } else {
            obj.error();
        }
    }
    if(obj.type=="get"){
        xhr.send(null);
    }
    else{
        var str=JSON.stringify(obj.data);
        xhr.send(str);
    }
}


var obj={
    type:"post",
    url:"/login",
    data:{
        name:"fgdfg",
        password:"sdfgfdgfd"
    },
    success:function(res){

    },
    error:function(){

    }
}

Install.ajax(obj);

发送请求直接把数据填进去然后调用ajax方法，就不用每次都按部就班地一个个写Ajax请求，就省代码又便捷。

所以说，以后要更加注意优化代码。