与JDReact的第一次亲密接触 ——加油卡项目总结

JDReact 平台是在 Facebook ReactNative 开源框架基础上,进行了深度二次开发和功能扩展。不仅打通了 Android/iOS/Web 三端平台,而且对京东移动端基础业务能力进行了 SDK 级别的封装,提供了统一、易于开发的 API 。基于以上种种优势,加油卡壳牌业务决定使用 JDReact 技术进行开发。 由于这是我们团队首次使用 JDReact ,在开发过程中遇到了很多问题:不熟悉 JDReact 提供的 API 、如何调用后台数据接口?怎样切换测试、预发环境?开发完后怎样打包?如何上线?等等每个流程都不熟悉。因此,在完成项目之后,很想做一个总结,从前期准备到最终项目上线的整个流程做一个分享,希望能为初次使用 JDReact 的同事有所帮助!如有错误,还请多多指教! 1 前期准备 1.1 项目背景 加油卡壳牌业务是京东APP中的一个项目,可以从首页的「充值缴费」入口进去,如下视频演示: 1.2 项目环境配置 1.2.1 开发分支以及文件结构 初始项目中只包含一个 dev 分支,最后打包 APP 时会从该分支中抽取代码,所以我们新建了一个 trunk 分支,平时在该分支上进行开发,最后打包 APP 的时候再切换到 dev 分支,合并代码。 对于文件结构,如上图所示,其中 Navigation.js 设置页面路由信息,以及打开项目时进入的默认页面;pages 文件夹下存放项目的每个页面代码;images 存放项目开发中使用到的图片;components 文件夹下存放页面中用到的各个组件。 1.2.2 安装依赖环境 按照 JDReact 团队给出的安装依赖环境的步骤,当执行 npm start […]

【译】如何使用ES6箭头函数使JavaScript代码更易读

原文:https://medium.freecodecamp.org/arrow-functions-in-javascript-2f8bf7df5077 箭头函数是搭建现代 Web 应用程序中一种新的基础构件。在本文中,你将会学习箭头函数如何使代码更简洁、使“this”关键字更易于管理;还将学习隐式返回、使用箭头函数记录日志以及隐式返回结合对象一起使用的方法。 如果你喜欢通过视频而不是文本学习,这是视频链接:https://youtu.be/dB1KA-yz65s 。 与常规函数相比,使用箭头函数有两个优点。首先,箭头函数使代码更简洁。其次,使用箭头函数使得管理“this”关键字更容易。 我见过那些初次学习箭头函数的开发者,对于他们来说箭头函数本身的概念并不是很难理解。你可能已经熟悉函数、函数特性、函数用例等内容,但是当你第一次接触箭头函数语法时还是比较容易困惑的。因此,我们要慢慢来,首先介绍一下与常用函数相比,箭头函数的语法是怎样的。 下面是一个基本函数声明和函数表达式的范例:

现在,如果我们想要将函数表达式改为一个箭头函数,我们可以这样做:

使用箭头函数最难的是习惯它的语法形式,一旦你适应了并坚持下去,相信你将会深入的理解并掌握它。 现在,你可能想知道使用箭头函数带来的所有好处。其实,上面的例子并没有充分显示出箭头函数的优势,我发现当使用匿名函数时,箭头函数的优势发挥的最为明显。通过查看另一个使用 .map  的基本例子,可以让我们对箭头函数的语法更为熟悉。

好了,熟悉的差不多了,接下来让我们进行深入的学习。 假设我们有一个函数:getTweets ,该函数接收用户 id 作为入参,通过访问一个简单的 API 接口后,返回所有星数和转发次数超过 50 的 Twitter 用户。 使用 promise 构造函数定义,这个函数看起来是这样的:

是的,功能虽然实现了,但是这个函数还不是最完美的。尽管具体的实现步骤是紧凑的,但是想法有点过于平常了。根据上述对箭头函数的理解,我们来看一下可以怎样改进 getTweets 函数。

好的,酷极了。但是除了不需要写 function 之外,和上面的写法几乎是一致的。虽然这种写法是有益的,却没有什么值得炫耀的。还是让我们来看一下使用箭头函数带来的下一个优点:“隐式返回”。 使用箭头函数时,如果你的函数是一个“简单的函数体”(对于单行函数的称呼),那么你可以省略“return”关键字,该值会自动(隐式)返回。 所以,前面的 add 示例修改后如下:

更重要的是,修改后的 getTweets 函数示例如下:

该代码不仅容易编写,更重要的是,它更容易阅读。 如果箭头函数只有一个入参,那么我们可以做的进一步的修改是省略该参数周围的 ()。考虑到这一点, getTweets 函数可以这样写:

总的来说,我认为上面做的每一种改变都是巨大的进步。 箭头函数的另一个优点就是如何管理“this”关键字。如果你对“this […]

《京保养》基于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 […]

© 2017 JDC. All Rights Reserved.