就目前而言,我用到的前端页面开发框架主要有两种:以JSX为主的react和以template为主的vue

虽然这两种方式各有千秋,但我其实更偏爱template多一些。为什么?

相较于灵活的JSXtemplate显得有些呆滞,但我认为它更符合我们的书写习惯(想想我们最开始是如何编写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前多写了一个oeslint没有发现,编译过程也没报错,由于对应业务的特殊性,测试中也没有触发错误。

于是上线,boom!

多一个字母,让整个应用崩溃掉了。该死!

这种错误不应该犯,但却又不能完全避免,怎么办?人总会犯错,但机器不会。所以,应该把错误检查交给机器执行。

有没有一种方法使得再编码或者编译过程中就能识别这个错误呢?


JSX将拯救你我于水火。

JSX重构上面的代码:

let dateDiv = item.show
? item.content.map(oitem => (<div className="a-text-light">{ooitem.date} {oitem.week}</div>) )
: '';

由于JSX是类型安全的,在编译过程中就能发现错误,所以上面的ooitem就会被识别粗来。

从此不必在担惊受怕。

JSX 和 template 随想的更多相关文章

  1. 谈谈 Vue 模板和 JSX

    工具链 从学习曲线角度来讲,结合我个人体会,React 学习路线是比 Vue 陡峭的,这个和 JSX.Template 有关吗?当然有.在 React 中使用 JSX,众所周知, JSX 需要经过 T ...

  2. 在Vue中使用JSX,很easy的

    摘要:JSX 是一种 Javascript 的语法扩展,JSX = Javascript + XML,即在 Javascript 里面写 XML,因为 JSX 的这个特性,所以他即具备了 Javasc ...

  3. Vue相关,Vue JSX

    JSX简介 JSX是一种Javascript的语法扩展,JSX = Javascript + XML,即在Javascript里面写XML,因为JSX的这个特性,所以他即具备了Javascript的灵 ...

  4. Vue3.0 Function API---------引用

    1.了解 Vue 3.0 是否有 break change,就像 Python 3 / Angular 2 一样? 不,100% 兼容 Vue 2.0,且暂未打算废弃任何 API(未来也不).之前有草 ...

  5. 【前端芝士树】Vue.js面试题整理 / 知识点梳理

    [前端芝士树] Vue.js 面试题整理 MVVM是什么? MVVM 是 Model-View-ViewModel 的缩写. Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑. ...

  6. 虚拟 DOM 与 DOM Diff

    虚拟 DOM 与 DOM Diff 本文写于 2020 年 9 月 12 日 虚拟 DOM 在今天已经是前端离不开的东西了,因为他的好处实在是太多了. 在<高性能 JavaScript>一 ...

  7. 京东云开发者|关于“React 和 Vue 该用哪个”我真的栓Q

    一.前言:我全都要 面对当今前端界两座大山一样的主流框架,React和Vue,相信很多小伙伴都或多或少都产生过这样疑问,而这样的问题也往往很让人头疼和犹豫不决: 业务场景中是不是团队用什么我就用什么? ...

  8. vue用template还是JSX?

    各自特点 template 模板语法(HTML的扩展) 数据绑定使用Mustache语法(双大括号) <span>{{title}}<span> JSX JavaScript的 ...

  9. 学习 React(jsx语法) + es2015 + babel + webpack

    视频学习地址: http://www.jtthink.com/course/play/575 官方地址 https://facebook.github.io/react/ 神坑: 1.每次this.s ...

随机推荐

  1. 树状数组训练题1:弱弱的战壕(vijos1066)

    题目链接:弱弱的战壕 这道题似乎是vijos上能找到的最简单的树状数组题了. 原来,我有一个错误的思想,我的设计是维护两个树状数组,一个是横坐标,一个是纵坐标,然后读入每个点的坐标,扔进对应的树状数组 ...

  2. C# 单例模式的五种写法

    1.简单实现           C#   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 public sealed c ...

  3. kbmmw 的HTTPSmartService中的跨域访问

    有同学在使用kbmmw 与extjs 结合的时候,涉及到了跨域访问,这个在 kbmmw 里面已经完全解决. extjs 在访问跨域的时候,首先会使用OPIONS  调用,服务端要根据浏览器请求的 he ...

  4. Java语法基础课 动手动脑

    1.枚举类型 它的每个具体值都引用一个特定的对象.相同的值则引用同一个对象. 枚举类型不是java原有数据类型 2.为什么double类型的数值进行运算得不到“数学上精确”的结果? 我们给出的数值,在 ...

  5. Mybatis-Plus 实战完整学习笔记(十一)------条件构造器删除,修改,conditon

    1.修改功能--其他过滤方式跟select一样 /** * 修改条件构造器 * @throws SQLException */ @Test public void selectUpdate() thr ...

  6. if结构和逻辑运算符

    一 :if选择结构 语法结构: 01.单个if if(表达式){ 如果满足表达式 则执行的代码 } 02.if(表达式) else if(表达式){ 如果满足表达式 则执行的代码 }else{ 不满足 ...

  7. WordPaster-CuteEditor6.7整合教程

    CuteEditor6.7下载地址:http://yunpan.cn/QzvjC5iaH5HJm 1.添加CuteEditor.dll的引用 2.在编辑器页面,为编辑器工具栏增加控件按钮 3.在前台增 ...

  8. doc.getElementById(id); null

    Open Declaration Element org.w3c.dom.Document.getElementById(String elementId) Returns the Element t ...

  9. 20180705 fragment

    https://www.cnblogs.com/chaowang/p/6180825.html https://blog.csdn.net/xxkalychen/article/details/537 ...

  10. HTML5表单新属性

    HTML5表单新属性 autofocus  自动聚焦 <input type="text" autofocus> placeholder占位文本 tel         ...