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
就会被识别粗来。
从此不必在担惊受怕。
JSX 和 template 随想的更多相关文章
- 谈谈 Vue 模板和 JSX
工具链 从学习曲线角度来讲,结合我个人体会,React 学习路线是比 Vue 陡峭的,这个和 JSX.Template 有关吗?当然有.在 React 中使用 JSX,众所周知, JSX 需要经过 T ...
- 在Vue中使用JSX,很easy的
摘要:JSX 是一种 Javascript 的语法扩展,JSX = Javascript + XML,即在 Javascript 里面写 XML,因为 JSX 的这个特性,所以他即具备了 Javasc ...
- Vue相关,Vue JSX
JSX简介 JSX是一种Javascript的语法扩展,JSX = Javascript + XML,即在Javascript里面写XML,因为JSX的这个特性,所以他即具备了Javascript的灵 ...
- Vue3.0 Function API---------引用
1.了解 Vue 3.0 是否有 break change,就像 Python 3 / Angular 2 一样? 不,100% 兼容 Vue 2.0,且暂未打算废弃任何 API(未来也不).之前有草 ...
- 【前端芝士树】Vue.js面试题整理 / 知识点梳理
[前端芝士树] Vue.js 面试题整理 MVVM是什么? MVVM 是 Model-View-ViewModel 的缩写. Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑. ...
- 虚拟 DOM 与 DOM Diff
虚拟 DOM 与 DOM Diff 本文写于 2020 年 9 月 12 日 虚拟 DOM 在今天已经是前端离不开的东西了,因为他的好处实在是太多了. 在<高性能 JavaScript>一 ...
- 京东云开发者|关于“React 和 Vue 该用哪个”我真的栓Q
一.前言:我全都要 面对当今前端界两座大山一样的主流框架,React和Vue,相信很多小伙伴都或多或少都产生过这样疑问,而这样的问题也往往很让人头疼和犹豫不决: 业务场景中是不是团队用什么我就用什么? ...
- vue用template还是JSX?
各自特点 template 模板语法(HTML的扩展) 数据绑定使用Mustache语法(双大括号) <span>{{title}}<span> JSX JavaScript的 ...
- 学习 React(jsx语法) + es2015 + babel + webpack
视频学习地址: http://www.jtthink.com/course/play/575 官方地址 https://facebook.github.io/react/ 神坑: 1.每次this.s ...
随机推荐
- 树状数组训练题1:弱弱的战壕(vijos1066)
题目链接:弱弱的战壕 这道题似乎是vijos上能找到的最简单的树状数组题了. 原来,我有一个错误的思想,我的设计是维护两个树状数组,一个是横坐标,一个是纵坐标,然后读入每个点的坐标,扔进对应的树状数组 ...
- 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 ...
- kbmmw 的HTTPSmartService中的跨域访问
有同学在使用kbmmw 与extjs 结合的时候,涉及到了跨域访问,这个在 kbmmw 里面已经完全解决. extjs 在访问跨域的时候,首先会使用OPIONS 调用,服务端要根据浏览器请求的 he ...
- Java语法基础课 动手动脑
1.枚举类型 它的每个具体值都引用一个特定的对象.相同的值则引用同一个对象. 枚举类型不是java原有数据类型 2.为什么double类型的数值进行运算得不到“数学上精确”的结果? 我们给出的数值,在 ...
- Mybatis-Plus 实战完整学习笔记(十一)------条件构造器删除,修改,conditon
1.修改功能--其他过滤方式跟select一样 /** * 修改条件构造器 * @throws SQLException */ @Test public void selectUpdate() thr ...
- if结构和逻辑运算符
一 :if选择结构 语法结构: 01.单个if if(表达式){ 如果满足表达式 则执行的代码 } 02.if(表达式) else if(表达式){ 如果满足表达式 则执行的代码 }else{ 不满足 ...
- WordPaster-CuteEditor6.7整合教程
CuteEditor6.7下载地址:http://yunpan.cn/QzvjC5iaH5HJm 1.添加CuteEditor.dll的引用 2.在编辑器页面,为编辑器工具栏增加控件按钮 3.在前台增 ...
- doc.getElementById(id); null
Open Declaration Element org.w3c.dom.Document.getElementById(String elementId) Returns the Element t ...
- 20180705 fragment
https://www.cnblogs.com/chaowang/p/6180825.html https://blog.csdn.net/xxkalychen/article/details/537 ...
- HTML5表单新属性
HTML5表单新属性 autofocus 自动聚焦 <input type="text" autofocus> placeholder占位文本 tel ...