《京保养》基于Vue+Vuex的单页面应用实践

接到《京保养》项目需求,了解到是移动端项目,运用于微信公众号及京东 APP 。通过与后端研发沟通,后端将提供所有的数据展示接口,这样最终商定使用前后端分离技术,而作为前端这边就非常适合选择基于 webpack + Vue 的单页面应用来实现。 前期组内也有基于单页面应用的项目总结,他们的总结的确让我在本项目中少走了很多弯路,但是不同的项目又遇到了不同的新问题,本文将会介绍我所遇到的新问题及解决方案。 感兴趣的同学可以通过以下两个入口先去体验下京保养应用,然后回来接着看文章: 微信公众号搜索“京东汽车用品” – 关注公众号 – 菜单栏“京保养”,见图1; 京东 APP – 我的 – 我的爱车 – 京保养,见图2。 图1 图2 如果你在 APP 中找不到“我的爱车”入口,你得先在京东 APP – 我的 – 设置 – 添加档案 – 我的爱车 – 绑定自己的爱车,然后才会有入口。 为什么要使用 Vuex 初拟技术选型,项目开始了,而开发过程中发现,项目中有不同的表单视图需要大量数据的共享。而仅使用单页面的路由来传参并不能满足需求,因为数据量过大,导致路由传参过于复杂。如此,项目中引进 Vuex 技术来实现数据共享。 拿项目中需要数据共享的地方举例 —— 绑定车辆模块。先来看下该模块的操作流程: 绑定车辆页面填写车牌号码; 填写车系,包含选择品牌、选择车系、选择年款; 回到了绑定车辆页面继续填写车辆绑定信息。 如果上字描述还不清楚,我也录了个小视频,点击查看交互流程: 可以看到这几个步骤中已经有多个视图的跳转了,但最终目的是将绑定车辆的信息填写完整。每一次跳转都需要将已经操作过的页面交互数据(比如:车牌号、车系信息、电话号码等)记录下来,最后回填到绑定车辆页面。这些数据如果没有一个可以由多个视图都能取得的地方存储,绑定车辆的信息永远也填写不完整,此时 Vuex 就可以派上了用场。 Vuex 的使用 Vuex 的具体使用,有几个核心概念: state —— 定义存储状态; getter —— 对数据进行过滤; mutation —— 更改 Vuex 的 […]

【译】如何在生产环境中部署ES2015+

原文:https://philipwalton.com/articles/deploying-es2015-code-in-production-today/ 大部分前端开发人员热衷于使用新的 JavaScript 语言特性来书写 JS 代码,例如 async 、 await 、 classes 、 arrow functions 等。然而,尽管目前所有的前沿浏览器都能运行 ES2015+ 代码(译注:ES2015及俗称的ES6),自然也能够支持我刚刚列举的新特性,但是为了兼容占有小比例的低版本浏览器用户,大部分的开发者仍然使用 polyfills 将代码编译成 ES5 语法。 这种情况无疑糟透了,在理想的世界里,我们将无需输送不必要的代码! 使用新的 JavaScript 和 DOM APIs ,我们可以有条件的加载 ployfills,因为我们能够在运行时使用特性检测判断浏览器是否支持这些语法。但是随着一些新的 JavaScript 语法的出现,由于任何未知的语法都会导致代码解析错误,并且不再执行之后的代码,导致单凭特性检测来检查新语法的支持程度很是棘手。 尽管对于新的语法特性检测还没有一个好的解决方案,但目前对于 ES2015 的基本语法特性检测我们还是有办法的。解决之道便是 <script type="module">。 大部分开发者认为 <script type="module">是用来加载 ES 模块的(事实的确如此),但是 <script type="module">也拥有更直接且实用的功能——加载浏览器可以处理的、使用 ES2015+ 语法的 JavaScript 文件。 换句话说,每个支持 <script type="module">的浏览器都支持你所熟知的大部分 ES2015+ 语法,例如: 支持 <script type="module"> 的浏览器也支持 async 和 await 函数。 支持 <script type="module"> 的浏览器也支持 Class 类。 支持 <script type="module"> 的浏览器也支持 arrow functions。 […]

初探 WAI-ARIA

文章背景 近期开发的一个项目,运行ESLINT某行提示报错 出错行代码

jsx-a11y/no-static-element-interactions 查找文档出现关键词 WAI-ARIA WAI-ARIA是什么? WAI-ARIA (Web Accessibility Initiative-Accessible Rich Internet Applications),指无障碍网页应用。主要针对的是视觉缺陷、失聪、行动不便的残疾人以及假装残疾的测试人员。 比如盲人眼睛看不到,其浏览网页则需要借助辅助设备一般都是使用读屏软件。 常见的读屏软件有: 移动端: Android: TalkBack Android: Funtouch iPhone: VoiceOver PC端: Windows: NVDA, JAWS Chrome: ChromeVox OSX: VoiceOver 条件有限,本人只研究了下ChromeVox和VoiceOver的使用,VoiceOver最简单的开启是是使用siri,语音“VoiceOver”或手动打开 “设置-通用-辅助功能-VoiceOver”。 当然在开启之前最好学几个简单的VoiceOver手势 现状 我们知道在美国他们有无障碍标准的相关法律,比如美国残疾人法案(The Americans with Disabilities Act ),1973年的康复法案 Rehabilitation Act (504 节和第508节 )国际法 international laws。 我国信息无障碍构建起步较晚,从2003年“大连通信残疾人信息无障碍论坛”开始才进入公众视野。 来源于2016年4月《中国互联网视障用户基本情况报告》数据显示,目前国内预估有至少600万视障人士在使用智能手机,借助智能手机的读屏功能,他们可以跟普通用户一样看新闻、社交、打车、购物。不过调查也显示,66%的视障者认为目前国内信息无障碍水平一般,另有20%的视障者认为信息无障碍水平不好。 那怎样能让读屏软件能更好的读出我们的代码? ARIA就是可以让屏幕阅读器准确识别网页中的内容,变化,状态的技术规范,可以让盲人用户也能无障碍阅读! ARIA (Accessible […]

《京东E维》基于VUE+Webpack的单页面实践

本篇文章和大家聊一聊我们近期的项目——京东E维平台,这是一个专门为运维工程师设计的工单处理系统。它所要肩负的任务是,针对公司内部所有员工在办公时遇到的有关计算机、网络、软件方面等问题,通过E维平台发起问题上报请求。工程师通过该系统可以根据上报工单的紧急程度进行抢单、解决事件单、流转事件单、退回请求广场、挂起事件单等操作,这个系统一定程度上起到了提高办公效率的作用。 在与产品和研发沟通过后,我们发现,这个项目基本上所有交互部分都放在前端这里,研发只提供接口,可以做到前后端分离。因此经过小组讨论后,决定用 Vue 去实现。基于京东 E 维平台视觉稿的统一性,且页面较少,关联性较强,加上之前在会员PLUS项目中使用 Vue + Webpack 的经验教训,对该项目我们决定尝试着用vue的单页面开发模式进行开发。 初试Vue单文件组件开发页面,我们遇到了一些问题,也总结了一些经验,以下是我们的一些总结 (下图为界面总览): 请求广场页面: 我的事件页面: 事件单详情页: 本篇文章适合具有 Vue 和 webpack 基础的同学,里面的具体配置和vue用法并未写的过于详细。 Vue+Webpack 单页面的文档结构与构建方法 项目构建的目录结构如下: 先和大家介绍下我们的思路,进入项目的第一层,是src文件夹以及各种配置文件。 接下来src目录下的文件功能如下: ♦  component 用来存放功能组件 ♦  css 存放所有样式文件 ♦  image 用于存放图片 ♦  view 存放业务上的各个单文件 vue 页面组件 ♦  app.js 是入口文件 ♦  app.vue 渲染最高级路由匹配到的组件用的出口 vue 文件 ♦  index.html 页面模板 ♦  router.js 为配置各种跳转信息的路由文件 1、首先是 package.json […]

[译] 使用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 […]

© 2018 JDC. All Rights Reserved.