数据字段防卫探索
数据字段防卫探索
这个标题不知道怎么取，估计没人看得懂，还是直接看背景吧 -_-!!
背景
某天，小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.xxxlist是undefined
顿时一万匹草泥马在心里奔腾而过，不是说好是个列表吗，没有列表应该返回[]呀
没办法，小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 ！