就目前而言,我用到的前端页面开发框架主要有两种:以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中定义数据修改和操作的业务逻辑. ...
-
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 ...
-
[Cycle.js] Hyperscript as our alternative to template languages
Usually we use template languages like Handlebars, JSX, and Jade to create. One simple way we can cr ...
-
vue jsx 使用指南
vue jsx 使用指南 vue jsx 语法与 react jsx 还是有些不一样,在这里记录下. let component = null // if 语句 if (true) { compone ...
随机推荐
-
AngularJS事件绑定的使用详解
本文和大家分享的主要是AngularJS中事件绑定相关知识点,希望通过本文的分享,对大家学习和使用AngularJS有所帮助. 1.绑定事件:表达式.事件方法名: 2.绑定点击事件实例:显示.隐藏页面 ...
-
C语言 指针与字符串
C语言可以在栈区 or 堆区 or 全局区 存放字符串,字符串不单单是存储在全局区的. //字符串与指针 #include<stdio.h> #include<stdlib.h> ...
-
git托管代码随笔--运用ssh传输,不用每次提交频繁输入github账号密码
遇到问题:在使用git bash的时候 每次git push均要输入账号密码. 问题原因:使用的是http传输,需用ssh传输. 解决方法: 1.设置密钥 ssh-keygen -t rsa -C & ...
-
delphi 05 图片和超链接
超链接 /取消超链接 插入/取消 书签 插入图片 粘贴图上CTRL+v 截图 插入表情GIF WEB背景色 WEB背景图片 WebBrowser1.OleObject.document.ge ...
-
uva 816 - Abbott&;#39;s Revenge(有点困难bfs迷宫称号)
是典型的bfs,但是,这个问题的目的在于读取条件的困难,而不是简单地推断,需要找到一种方法来读取条件.还需要想办法去推断每一点不能满足条件,继续往下走. #include<cstdio> ...
-
XML数据读取方式性能比较(一)
原文:XML数据读取方式性能比较(一) 几个月来,疑被SOA,一直在和XML操作打交道,SQL差不多又忘光了.现在已经知道,至少有四种常用人XML数据操作方式(好像Java差不多),不过还没有实际比较 ...
-
Android -- Annotation(注解)原理详解及常见框架应用
1,我们在上一篇讲到了EventBus源码及3.0版本的简单使用,知道了我们3.0版本是使用注解方式标记事件响应方法的,这里我们就有一个疑问了,为什么在一个方法加上类似于"@Subscrib ...
-
学习笔记TF009:对数几率回归
logistic函数,也称sigmoid函数,概率分布函数.给定特定输入,计算输出"success"的概率,对回题回答"Yes"的概率.接受单个输入.多维数据或 ...
-
ABP Zero示例项目问题总结
1.ABP Zero项目,登录时出现如图“Empty or invalid anti forgery header token.”错误提示 ABP Zero项目,登录时出现如图“Empty or in ...
-
ElasticSearch(八)Elasticsearch-head 连接不上Elasticsearch的原因和解决方案
在上篇博文里ElasticSearch(七) Elasticsearch在Centos下搭建可视化服务中已经访问到了可视化界面.然后兴奋地进行了数据提交测试,提交啊,刷新啊,就是看不到数据变化,仔细一 ...