就目前而言,我用到的前端页面开发框架主要有两种:以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. 取消IDEA中代码重复的检测

  2. ubuntu安装rubyOnRails

    https://gorails.com/setup/ubuntu/16.04#ruby-rbenv 文章很详细

  3. oracle创建表空间、添加数据库文件

    创建表空间: create [undo|TEMPORARY]tablespace venn datafile '/opt/oracle/db01/app/oracle/oradata/OSSORCL/ ...

  4. 2019.01.08 bzoj3809: Gty的二逼妹子序列(莫队+权值分块)

    传送门 题意:多组询问,问区间[l,r]中权值在[a,b]间的数的种类数. 看了一眼大家应该都知道要莫队了吧. 然后很容易想到用树状数组优化修改和查询做到O(mnlogamax)O(m\sqrt nl ...

  5. 2018.10.29 bzoj4564: [Haoi2016]地图(仙人掌+莫队)

    传送门 根据原图建一棵新的树. 把原图每一个环上除了深度最浅的点以外的点全部向深度最浅的点连边. 然后可以搞出来一个dfsdfsdfs. 这个时候我们就成功把问题转换成了对子树的询问. 然后就可以对权 ...

  6. C++程序生成.exe文件,在文件夹中运行时闪现问题

    问题描述:在IDE(此为Dev-C++)中编写C++程序,运行时会产生如下文字 但我想取消这三行的显示. 解决方法:1:在IDE中运行时,“请按任意键继续”是消失不掉的,但在该程序的保存路径下可以消灭 ...

  7. Spring+mvc错误

    1.2016-11-13 16:49:22 原因:@ResponseBody注解没加

  8. Docker Compose demo 使用

    1.docker compose 安装 curl -L "https://github.com/docker/compose/releases/download/1.22.0/docker- ...

  9. linux系统配置参数修改

    一.永久修改主机名修改/etc/sysconfig/network,在里面指定主机名称HOSTNAME=然后执行命令hostname 主机名这个时候可以注销一下系统,再重登录之后就行了. 或者修改/e ...

  10. Python-类-dict

    class dict(object): """ dict() -> new empty dictionary dict(mapping) -> new dic ...