[译] 使用Vue.js创建自定义输入框

原文:https://www.smashingmagazine.com/2017/08/creating-custom-inputs-vue-js/ 基于组件的库或者框架(例如 Vue)给我们在开发可复用的组件带来了极大的方便。这些组件可以非常简单的在独立的应用程序中被使用,并且最终呈现的效果一致。 比如,在表单输入的场景,在功能上往往会比较复杂,通常我们的做法是希望使用组件将表单中自定义的设计、标签、验证、帮助信息等进行封装,以确保这些能被依次正确的渲染。 Vue 有一个特别且重要的指令 v-model,它通过绑定和捕获输入事件来实现数据的双向绑定。如果你要构建自定义输入组件,那么该组件毫无疑问的需要支持 v-model 指令了。 遗憾的是,当我查阅 Vue 单选按钮或者复选框的自定义的示例时,发现他们要么没有考虑到 v-model 指令,要么没有正确的实现。有一些自定义输入框的使用文档,但它没有解释自定义单选按钮和复选框如何使用,我将在下面给出一些例子和说明。 本文意在帮助你理解以下几点内容: 理解 v-model 指令在原生输入框上是如何实现的,主要侧重于单选按钮和复选框。 理解 v-model 指令一般在自定义组件是如何实现的。 学习如何创建具有类似 v-model 指令功能的自定义单选按钮和复选框。 本文涉及到的代码示例,我将采用ES2015+。在使用 vue.component 或者 new Vue 来编写代码时,我更倾向于使用单文件组件的语法,这样能使项目结构更为清晰。 v-model通常是如何工作的? 官方的 vue 文档在这个主题上已经讲的很清晰了,但是仍然有一些遗漏点。总之,我都会从头讲解这块的内容。v-model 实质上只是为我们提供双向数据绑定功能的语法糖。其会随着不同类型的表单控件而不同。具体例子如下:

当使用文本输入框(包括 email,number 类型等)或 textarea 类型时,v-model =”varName”等同于:value =”varName” @input =”e => varName = e.target.value”。这意味着每次在文本框输入时,input 事件通过输入事件将 value 值传给 varName,每次输入时使用这种方式更新 varName。同样,除了含有 multiple […]

京东火车票项目思考总结

京东火车票项目是一个不断迭代优化的项目。一想到要参与一个 GMV 很大的项目,内心抑制不住的兴奋。随着业务和需求的深入,兴奋感渐渐转变为压力。因为一直忙于完成业务需求,也就没有认真总结和反思存在的问题。借着写博客的机会,对项目进行简单的回顾和总结。 一开始接触项目是对当时存在的一些 bug 进行集中处理优化,对原有组件进行版本更新。然后到车次列表页进行前后端分离的尝试,还有对退改签业务的更新和重构。还有后来的学生票、儿童票丰富了火车票的业务场景。在这个过程中,遇到了形形色色的问题。有的问题很快解决了,有的就会耗费较多的时间精力。我遇到的问题有的是个例的,小概率的,有的可能是很多人都会犯的错误。我希望将一些自己认为有用的东西写出来。 学生票的特殊业务及其带来的问题 1、学生乘车时间为每年的6月1日到9月30日及每年的12月1日到第二年3月31日,可提前30天购买学生票,不能购买学生票的时候,学生票勾选不能点击。 看上去很简单的业务,做起来的时候发现还是不那么简单。因为它并不是简单的数字的比较。首先,要找出学生票可点击的区间范围,具体时间节点及范围如下: 1月1日到3月31日 6月1日到9月30日 12月1日到12月31日 然后,重点来了,出发日期日历范围的控制。正常推算,这个范围就是从当天到30天后结束嘛,但是细想一下,这30天的区间跨度可能会包含了某个时间节点,就是说有可能30天后,学生票不在可购买的范围内。那么,日历的可勾选范围就并不是简单的从当天到30天后,就出现以下如图所示的几种特殊情况。 思路理清晰了,转换为如下代码即可。

2、购买学生票填单页面需要输入学校和优惠区间城市,页面引入了学校和优惠区间城市的相应数据文件,但是学校和城市数据 JS 太大,导致页面第一次加载完成时间超级长,甚至加载到最后,直接失败,整个页面功能基本不能用。 解决方案: 因文件过大而导致的页面加载失败,最直接的解决方案就是缩小文件。 优化第一步:改变数据格式,删除冗余字段名,减小文件大小。具体修改如下图,改完后文件大小缩小了大概300多KB。 本以为这样就万事大吉了, BUT 问题来了,文件还有400多KB,网速稍稍不好的时候,刚进入页面时依旧会加载失败,导致页面功能无法使用。 优化第二步:按需加载。具体方式是,鼠标移动到需要该数据的区域时再请求数据。 这么做表面上看上去是解决问题了,初次进入页面超级快。BUT问题又来了,当鼠标移动到要操作的区域的时候,数据还没加载完了,用户就要操作了,来不及啊! 优化第三步:延时加载。具体操作办法是等待页面其他资源全部加载完毕,再加载学校的数据文件,这样利用用户在做不需要此数据的操作时,加载学校数据文件。如此,来不及加载数据的问题得到缓解,不浪费任何时间加载数据,同时也不影响用户的其他操作。 按照以上三不优化做完后,页面加载过慢问题有了很大的改善。 车次列表页前后端分离重构 起初是后端将数据直接输出到页面,可是有一个很奇葩的问题。就是在IE9下 table 代码段不能有换行,否则页面就会错乱掉。解决方法简单粗暴,后端将页面的换行回车都去掉。这样看似解决了问题,但引发了新的问题。就是 HTML 文件是一大坨难以名状的怪物,维护起来简直想去死。于是提出了前后端分离的实现思路。 后端只输出数据,渲染页面由前端处理。我使用的是 art-template 来进行数据渲染。 当时普通车次列表页和改签车次列表页同时开发。我对接了两个不同的开发同学,他们对业务有不同的理解,于是给出不同的数据结构。可是两个列表页只是业务场景不同, View 层的展示大同小异。最简单的解决方法就是开发同学统一数据结构,那我就只需要维护一套模板来渲染数据了。要不我维护两套渲染模板,这样带来的问题就是之后的维护成本会很高。就在前两种都不满足的情况下,想出了如下图新的解决方案。 数据处理函数,对不同的入口数据进行处理,输出需要的目标数据,我称之为是一种中间件模式。经过这层处理之后,对于后期开发同学数据结构需要变化的情况,只需要对数据处理函数进行修改,确保始终维护一份渲染模板代码。这样代码的稳健性和可维护性就提高了很多。 列表页会有很多个数据接口,有的是基本不会变动的,有的是需要开发人员更新的。将公用并且基本不会变动的接口放在公共接口对象里(前端控制)。可配置接口及可能变化的接口放在页面里,后台开发同学只需要将 HTML 本地开发的文件注释掉就可以了。 在使用 art-template 时出现一个问题,如何循环一个数字长度来显示大量重复控件。需要实现的效果图如下: 对应的数据结构如下图 需要实现的是根据 star 的不同数字展示不同的效果,10、20、30、40、50展示不同数目的星号,25、35、45展示对应的文字信息。

边界容错(undefined、try catch) 一开始约定好,拿到服务器返回的数据,返回了个 […]

© 2017 JDC. All Rights Reserved.