项目中前端开发碰到的问题小结

前端规范很重要,养成一个良好的代码规范对日后的维护非常方便,这里总结下碰到的问题,写在这里。

我自己想到的几点关于代码规范

  • 必要的注释,方便自己方便他人。

  • 命名尽量要有意义,无论是变量还是函数,尽量用英文单词,多个单词使用【动词+名词】格式,驼峰写法。

  • 代码缩进,既美观,又方便快捷。

  • 捕捉接口返回数据是否成功,若成功则处理,否则提示错误。不要不管返回的数据是否正确就处理,导致一些方法报错,如join()、split()。

  • 理清逻辑之后,按顺序在js中写要用的方法。

  • 变量、常量初始化、全局函数尽量放在最上层。

新版v6调用接口规范

之前调用接口相对来说繁琐了点,v6版本之后,调用接口,只需要serciceId和相关参数即可,十分方便,以调用获取租户信息接口为例:

 //获取当前登陆账户的租户名、类型
            self.getCustomerName = function(){
                var eiInfo = new EiInfo();
                eiInfo.set("serviceId","OC00_GETTENANTBYID");
                //eiInfo.set("tenantID",self.currentCustomerId);
                eiInfo.set("tenantID",_user.customerId);
                eiInfo.set("showCount",true);
                eihttp.send({service: 'BC20',method: 'invokeBWService',eiinfo: eiInfo}, getCustomerNameByIDSuccess, error);
            }
            function getCustomerNameByIDSuccess(eiInfo){
                //console.log("获取租户名-------->",JSON.stringify(eiInfo));
                //var status = eiInfo.status;
                // 获取最外层的status使用 eiInfo.getStatus() 或eiInfo.status;
                // 内层的是eiInfo.get("status");

                var status = eiInfo.getStatus();
                if(status=='0'){
                    // 展示当前租户名、资源组类型
                    self.currentCustomerName = eiInfo.get("tenantName");
                    self.currentCustomerGroupType = eiInfo.get("tenantGroupType");
                    self.showDefaultInfo = self.currentCustomerName + "  " + "("+  self.currentCustomerGroupType +")";
                }else{
                    toaster.error({title: "失败" , body: "获取当前登陆租户名称失败!"} );
                    console.log("获取当前登陆租户名失败---->",eiInfo.msg);
                }
            }
            function error(){
                console.log("eihttp error---->");
            }
            self.getCustomerName();

eihttp.send({service: 'BC20',method: 'invokeBWService',eiinfo: eiInfo}, onSuccess, onError);接口即使错误,也并不会进入onError回掉函数中

前期我以为eihttp发送请求的时候,后面跟的是两个回掉函数,一个成功回掉,一个失败回掉。

  • 如果成功就会执行onSuccess这个成功回掉函数中,

  • 如果失败就会执行onError函数中。

理论上是没有问题的,但是后期我发现,只要是接口异常的,它都不会进入onError函数中,这也是后台问我前台报了什么错,我只能说出来现象,却说不出来具体的报错信息。

因为即使我在onErrpr中做了捕捉错误,但是它并不会进到onError,onError里面做的操作都是白搭。

  • 后来发现,无论成功与否,接口都会返回给我数据,只是我要通过判断其状态,如果status为0,则成功,否则则失败。

代码如下:

function onSuccess(eiInfo){
                // 先看一下完整的数据
                console.log("接口返回outInfo数据-------->",JSON.stringify(eiInfo));
                // 拿到状态值
                var status = eiInfo.getStatus();
                
                // 状态为0则成功,否则失败
                if(status=='0'){
                    // 成功拿到数据,做的操作
                  
                }else{
                    //失败,提示错误,失败时的操作
                    toaster.error({title: "失败" , body: "接口掉用失败!"} );
                    console.log("errorMsg---->",eiInfo.msg);
                }
            }
  • 通过打印eiInfo中的msg属性,就可以捕获到后台报错的详细信息了,然后你懂的,改bug!

在取状态status时要注意的问题

一般后台返回的status属性是与block块放在平级的,两者是平行关系。

如果外层评级中有status,同时block块中也有status,这样就不能直接使用get("status")方法。

【注意】:

  • eiInfo.get("status");取到的是内层block中的status属性。
  • eiInfo.status; 取到的是外层平级status
  • eiInfo.getStatus(); 取到的是外层平级中的status

所以取外层的status状态值,使用以下两种写法:

            var status = eiInfo.status;
             // 获取最外层的status使用 eiInfo.getStatus() 或eiInfo.status;
             // 内层的是eiInfo.get("status");
            var status = eiInfo.getStatus();

未完待续...

你可能感兴趣的:(项目中前端开发碰到的问题小结)