JSX 和 template 随想
就目前而言,我用到的前端页面开发框架主要有两种:以JSX
为主的react
和以template
为主的vue
。
虽然这两种方式各有千秋,但我其实更偏爱template
多一些。为什么?
相较于灵活的JSX
,template
显得有些呆滞,但我认为它更符合我们的书写习惯(想想我们最开始是如何编写html的),简单、直观、更好维护是我偏爱模板的三大理由。
直到某天一个bug
的出现,让我对template
有了新的思考。
// 出现 bug 的代码片段
<template v-if="oitem.show">
<div class="a-text-light" v-for="(oitem, j) in item.content" :key="j">
{{ooitem.date}} {{oitem.week}}
</div>
</template >
注意上面的代码,由于手误手残,在第一个oitem
前多写了一个o
。eslint
没有发现,编译过程也没报错,由于对应业务的特殊性,测试中也没有触发错误。
于是上线,boom!
多一个字母,让整个应用崩溃掉了。该死!
这种错误不应该犯,但却又不能完全避免,怎么办?人总会犯错,但机器不会。所以,应该把错误检查交给机器执行。
有没有一种方法使得再编码或者编译过程中就能识别这个错误呢?
JSX
将拯救你我于水火。
用JSX
重构上面的代码:
let dateDiv = item.show
? item.content.map(oitem => (<div className="a-text-light">{ooitem.date} {oitem.week}</div>) )
: '';
由于JSX
是类型安全的,在编译过程中就能发现错误,所以上面的ooitem
就会被识别粗来。
从此不必在担惊受怕。