React Router 4.x 开发,这些雷区我们都帮你踩过了

前言 在前端框架层出不穷的今天,React 以其虚拟 DOM 、组件化开发思想等特性迅速占据了主流位置,成为前端开发工程师热衷的 Javascript 库。作为 React 体系中的重要组成部分:React Router 也成为开发者首选的路由库,其主要功能是通过管理 url 实现组件的切换和状态的变化。 正文 在 React Router 4.x 发布之前,我们在项目中使用的是 React Router 3.x。随着第四版 React Router 的正式亮相,其精简的 API 、语义化的路由匹配方案以及动态路由等变化,都彰显着此次升级的颠覆性。所以,我们决定在新的 React 项目中使用 4.x(React Router 4.x)开发,亲身实践之后发现: 4.x 不仅是 API 的简单改变,还有整个设计理念的变化;初次使用确实有一些别扭,更可怕的是按照 API 文档写出的代码,有时运行时会出现一些莫名其妙的红色错误(此刻的心情 down 到谷底~)。为了避免大家在使用时遇到同样的问题多绕弯子,我们把开发过程中遇到的问题以及相应的解决方法做了汇总。 4.x 使用问题汇总 1. 包引用方式 在之前的 3.x 中,在入口文件中定义路由时,我们会这么写:

但是保存后运行发现页面报错了,如下图所示: 解决方法:

页面显示正常,问题解决。接下来我们对该解决方法进行详细的解释: 4.x 中采用了单代码仓库模型架构,所以里面包含了若干个相互独立的包,如下所示: react-router  […]

【译】如何使用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 […]

智慧出行—班车项目羁绊点剖析

“小张,角门西地铁站附近有咱们公司班车吗?早上几点啊?”“有吧,具体时间不知道,你要不打师傅电话问问?”“电话多少?”“额,你找找看……”咳咳,还记得那些与班车纠结的日子吗?哈哈,不怕不怕,智慧班车 APP 的诞生已将那种生活停留在过去啦~现在,请拿起手机打开京东 ME –应用—智慧班车 点击进入,即可定制属于自己的班车旅行,班车路线、发车时间、站点查询…一起来体验下吧! 1、 打开 APP — 搜索班车 — 选择班车,查看班车详情,点击关注;    2、回退至首页可以看到已关注班车,通过下方的推拉按钮查看更加详细信息(包含班车路线、师傅个人信息、班车余位等,可以直接点击联系按钮拨打师傅电话);点击 home icon 添加家庭位置;       3、点击首页搜索按钮,进入搜索页面(搜索内容包含班车线、站点、地铁);点击首页右侧展开按钮滑出侧边栏,查看更多类目信息(再次点击或者点击左侧白色区域可关闭侧边栏); 4、 点击我的班车,可以看到家庭信息(可以删除家庭信息),已关注的班车路线(可以修改默认路线、删除路线);班车路线部分可以选择班车出发地,目前包含总部、朝林广场、北辰、成都、东北、宿迁,班车类型多样(通勤车、摆渡车、加班线班车、培训日班车),是不是很丰富呀,点击感兴趣的路线尽情查看吧~    5、站点地图模块显示所选地点通往四面八方的班车,一片京东红有木有~ 6、 总部很大,迷路的小伙伴们有福啦,快点击总部停车场找班车吧! 以上是简单介绍下智慧班车的使用方法,更多用法等待你去开启。接下来跟大家分享下在项目前端开发过程中遇到的坑点: 公共头部 因为智慧班车 APP 是内嵌到京 ME 中,而且不使用京 ME 的公共头部,所以需要开发一套兼容 Android 、 iOS 手机的头部,效果如下(图 1-1)所示: 该头部分为两个部分:状态栏、导航栏/动作栏。状态栏是指高度为 20 个点,显示电池、时间的最顶部的一个窄条;导航栏(/动作栏)是紧接着状态栏的横条,高度为 44 个点,一般用于显示 APP 标题,返回按钮等操作按钮。( PS:  iOS 中高度为 44 点的横条称为导航栏,而 Android 中称为动作栏)。 […]

© 2018 JDC. All Rights Reserved.