现象描述
在JS开发过程中，经常出现一种错误：即读取一个值为null或者undefined变量的属性时，出现错误提示。例如hello.ux中有如下错误代码：
<!-- a = {}; -->
<text>{{ a.b.c }}</text>
<!-- Error: Cannot read property 'c' of undefined -->
解决方法
可以通过如下两种方案进行处理：
【方案一】使用&&，通过逻辑运算的执行顺序来规避错误。修改的代码如下：
<text>{{ a && a.b && a.b.c }}</text>
【方案二】推荐使用此方案。在ViewModel上增加函数方法，例如增加一个checkEmpty的函数，示例代码如下：
export default {
checkEmpty(...args) {
let ret
if (args.length > 0) {
ret = args.shift()
let tmp
while (ret && args.length > 0) {
tmp = args.shift()
ret = ret[tmp]
}
}
return ret || false
}
}
这样在获取属性的地方就可以方便的调用此方法，修改后代码如下：
<text>{{checkEmpty(a, 'b', 'c')}}</text>
hello.ux代码：
<template>
<!-- Only one root node is allowed in template. -->
<div class="container">
<text>{{ checkEmpty(a, "b", "c") }}</text>
</div>
</template>
<style>
.container {
flex-direction: column;
justify-content: center;
align-items: center;
}
.body {
font-size: 35px;
}
</style>
<script>
module.exports = {
data: {
componentData: {},
url: ''
},
checkEmpty(...args) {
let ret
if (args.length > 0) {
ret = args.shift()
let tmp
while (ret && args.length > 0) {
tmp = args.shift()
ret = ret[tmp]
}
}
return ret || false
}
}
</script>