数据字段防卫探索

数据字段防卫探索

这个标题不知道怎么取,估计没人看得懂,还是直接看背景吧 -_-!!

背景

某天,小Y借到一个需求:页面这里要展示一个列表,cgi数据字段是xxxlist

太简单了,几分钟的事情:

DB.getData({
    // ...
    succ: function(data) {
        for (var i = 0, l = data.result.xxxlist.length; i < l; ++i) {
            showItem(data.result.xxxlist[i]);
        }
    }
});

自测,免测发布,完美!

但是,没过多久,客服接到一堆的用户投诉,xxx页面打开白屏!

小Y吓了一跳,怎么可能,刚刚那个代码那么简单,绝对不会出错的!

用用户投诉的页面,打开控制台一看:

发现报了一个错:

排查之后发现,原因是data.result.xxxlistundefined

顿时一万匹草泥马在心里奔腾而过,不是说好是个列表吗,没有列表应该返回[]

没办法,小Y只能紧急修复代码:

DB.getData({
    // ...
    succ: function(data) {
        if (data && data.result && data.result.xxxlist) {
            for (var i = 0, l = data.result.xxxlist.length; i < l; ++i) {
                showItem(data.result.xxxlist[i]);
            }
        }
    }
});

分析

上面的背景案例中,小Y忽略了一个很重要的原则:

永远不要相信输入!

还记得老师曾经这样教导我们:

在编写函数的时候,一定要检测参数是否合理

对于前端来说,cgi数据也是一样的,永远不能相信cgi传过来的数据

有人会说,这只是小Y不够严谨,当需要用某些字段的时候,就应该先检测

那就又疏忽了,人也是不可信的,当bugfix很紧急的时候还记得吗?别人写的代码能控制吗?再细心的人也会有疏忽的时候

另外,如果都加上防卫代码的时候,代码可能会长成这样:

DB.getData({
    // ...
    succ: function(data) {
        if (!data) return;
        if (!data.a) return;
        if (data.b) {
            // ...
        }

        if (data.c) {
            // ...
        }

        if (data.d && data.d.e) {
            // ...
        }

        // 你就一直if下去吧,我不拦你!

    }
});

通过背景案例以及分析,现在终于可以解释数据字段防卫是什么东东了

在访问object.key时,防止object可能是undefined或者null时抛错

方案

对于这个问题,这里抛几个方案,希望可以引出各位读者的玉!

方案一:抽象cgi数据

类似orm那样,预先定义model(cgi数据)的schema,如果定义了schema,那我们就可以添加默认值机制

这个方案的本质就是对cgi数据添加了一层加工层,让cgi数据变得可信

优点:抽象cgi数据不仅可以做数据字段防卫,还可以做很多事情 缺点:太重,毫无疑问的

方案二:重定义undefined

比如我们可以这样:

window.undefined = { length: 0 };

优点:简单 缺点:某些浏览器不支持,见下图;typeof 会出问题

在浏览器不支持的情况下,这个方案可以被枪毙了 -_-!!

方案三:封装获取数据字段的接口

获取数据字段不是原生的object.key,而是util.get(object, key),在get方法里面进行防卫处理

优点:实现统一简单 缺点:改变了原来的编程习惯;原有代码需要改动

方案四:让工具帮你

让工具透明的解决这个问题,直接看例子吧

function test(obj) {
    var T;
    T = require('tools');
    var name = T.cookie.get('name');
    if (!obj) {
        obj = {
            count: {
                count: 5
            }
        };
    }
    obj.count.count = 6;
}

经过工具之后:

function test(obj) {
    var T;
    T = require('tools');
    T.cookie= T.cookie|| T.cookie=== '' ? T.cookie: {};
    var name = T.cookie.get('name');
    if (!obj) {
        obj = { count: { count: 5 } };
    }
    obj.count = obj.count || obj.count === '' ? obj.count : {};
    obj.count.count = 6;
}

通过工具保证,在访问object.key之前,object不会是undefined或者是null

优点:透明 缺点:依赖工具的智能与强大;会添加一些多余代码(因为工具无法识别哪些变量才是真正需要的)

感兴趣的话可以看下作者编写的工具data-member-defender

该工具还需要完善,欢迎提 issue !

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏更流畅、简洁的软件开发方式

【自然框架】之通用权限(八):权限到字段(列表、表单、查询)

 通用权限想要写的文章目录:(这是第八章) 1、 简介、数据库的总体结构 2、 介绍人员表组 3、 介绍组织结构表组 4、 介绍角色表组 5、 介绍“项目自我描...

2067
来自专栏腾讯移动品质中心TMQ的专栏

腾讯TMQ在线沙龙回顾|UI自动化中阶思考与实践

UI自动化中阶思考与实践 活动时间:2017年4月17日 QQ群视频交流 活动介绍:TMQ在线沙龙第十九期分享活动 本次分享的主题是:UI自动化中阶思考与实践 ...

2439
来自专栏IT派

前端UI框架小汇总

IT派 - {技术青年圈} 持续关注互联网、大数据、人工智能领域 移动端UI框架 Mint UI(饿了么团队) 中文官网:http://mint-ui....

5034
来自专栏Youngxj

emlog插件微信推送最新文章

2042
来自专栏微信小程序开发

零基础入门小程序 &实战经验分享

讲师介绍:连胜老师曾经就职于点心移动 & 百度,折腾小程序也有段时间了,参与开发的“小小签到”小程序,在2017年荣获阿拉丁神灯奖。我公司开发了多个工具类小程序...

48013
来自专栏IT笔记

微服务化的基石——持续集成

在很多微服务化的文章中,很少会把持续集成放在第一篇,因为大多数的文章都会将如何拆的问题,例如拆的粒度,拆的时机,拆的方式。

3978
来自专栏web编程技术分享

【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)说明

本教程是,原文章发布系统教程的精编重制版,会包含每一节的源码,以及修正之前的一些错误。因为之前的教程只做到了评论模块,很多地方还不完美,因此重制版会修复之前的一...

261
来自专栏IMWeb前端团队

SEO优化实战

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 seo本身涉及范围非常广,所包含的知识也是非常值得深入研究的一个方向,本文仅...

22911
来自专栏编程微刊

仿百度排列图片预览插件-Simple Lightbox

很久以前遇到过这样的一个面试题,要求手写代码,实现百度图片的排列预览,并且可以左右点击查看下一张照片,当时没有做出来,这个问题也就一直放在了脑后,工作之后,遇到...

1222
来自专栏软件开发

CSS3与页面布局学习总结(五)——Web Font与Sprite

一、web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体。先了解操作系统中的字体: a)、安装好操作系...

2795

扫码关注云+社区