zoukankan      html  css  js  c++  java
  • 封装方法示例

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

    例一

    选择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请求,就省代码又便捷。

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

  • 相关阅读:
    bat批处理脚本学习系列(一)
    遇到的bug
    util.js 积累的一些基础函数代码
    session过期跳转到登陆页面并解决跳出iframe问题
    Centos7下的rabbitmq-server-3.8.11安装配置
    简单梳理 ES6 函数
    博客目录与学习计划
    DDD中聚合、聚合根的含义以及作用
    DDD中实体与值对象是干什么的
    DDD中限界上下文与通用语言的作用
  • 原文地址:https://www.cnblogs.com/xiaoluoli/p/5917298.html
Copyright © 2011-2022 走看看