future_challenger-CSDN博客

原创 Mongoose轻松搞定MongoDB，不要回调！

Mongoose是一个MongoDB下非常好用的ORM库，而且简单易学。是开发的好帮手。另外还有bluebird加成。处理mongodb的时候就更加的得心应手了。

2016-06-25 18:51:14 6345

原创踏破铁鞋无觅处，从AsyncTask学Android线程池

android对于主线程的响应时间限制的非常严格，稍有不慎就会遇到Application Not Responding（ANR）的弹框。用户可以轻点手指关掉你的APP。官方文档写的非常明确！同时，保持应用随时响应用户的操作也是良好用户体验的前提。线程的开始和结束要做到以上多线程是必不可少的。课本会告诉你什么时候开辟一个线程，但是很少说的一个很重要的问题是结束。比如，我现在在Activity里有一个工

2016-05-18 18:29:40 4253

原创属性动画和Activity、Fragment过渡动画等

属性动画拯救了android动画和用户体验

2016-04-28 15:03:04 6924

翻译 Golang里的Future/Promise

现如今，应用执行时最普遍存在的瓶颈就是网络请求了。网络请求只要几毫秒，但是等到返回却要百倍的时间。所以，如果你执行多个网络请求，让他们都并行执行就是减少延迟最好的选择了。Future/Promise就是实现这一目的的手段之一。一个Future就是说“将来”你需要某些东西（一般就是一个网络请求的结果），但是你现在就要发起这样的请求，并且这个请求会异步执行。或者换一个说法，你需要在后台执行一个异步请求。

2017-04-09 22:16:45 2397

原创 React Native填坑之旅--与Android模块通信

使用Toast作为例子。实现的功能是可以在JavaScript里写ToastAndroid.show('Awesome', ToastAndroid.SHORT)来显示一个Toast通知。代码：https://github.com/future-challenger/react-native-gaode-map创建一个原生模块创建一个类，继承ReactContextBaseJavaModule。pu

2017-03-19 22:24:11 1846

翻译打造Redux中间件

简单的基本中间件：const customMiddleware = store => next => action => { if(action.type !== 'CUSTOM_ACT_TYPE') { return next(action) // 其他代码 }}使用：import {createStore, applyMiddleware} fr

2017-03-01 22:31:14 1032

原创 React Native填坑之旅 -- 使用iOS原生视图（高德地图）

在开发React Native的App的时候，你会遇到很多情况是原生的视图组件已经开发好了的。有的是系统的SDK提供的，有的是第三方试图组件，总之你的APP可以直接使用的原生视图是很多的。React Native提供了一套完善的机制，你可以非常简单的用来包装已有的原生视图。代码地址：https://github.com/future-challenger/react-native-gaode-map

2017-02-27 09:15:59 1472

翻译 React Native桥接器初探

本文假设你已经有一定的React Native基础，并且想要了解React Native的JS和原生代码之间是如何交互的。React Native的工作线程shadow queue：布局在这个线程工作main thread：UIKit在这里工作Javascript thread：Js代码在这里工作另外每一个原生模块都有自己的一个工作GCD queue，除非你明确指定它的工作队列*shadow

2017-02-25 00:35:27 3260 1

翻译理解React组件的生命周期

理解React组件的生命周期本文作者写作的时间较早，所以里面会出现很多的旧版ES5的时代的方法。不过，虽然如此并不影响读者理解组件的生命周期。反而是作者分为几种不同的触发机制来解释生命周期的各个方法，让读者更加容易理解涉及到的概念。以下是正文。简介React在创建组件的时候会触发组件生命周期各个方法的调用。这篇文章就分别介绍其中的各种不同的绘制触发之后调用的各个生命周期的方法。理解组件的生命周期，你

2017-02-15 15:52:04 550

原创 GraphQL入门

Graphql入门GraphQL是一个查询语言，由Facebook开发，用于替换RESTful API。服务端可以用任何的语言实现。具体的你可以查看Facebook关于GraphQL的文档和各种语言的实现GraphQL的小历史早在2012年，Facebook认为人们只有在离开PC的时候才会用智能手机，很快他们就发现这个认识是多么的错误！于是Facebook把注意力从Web移到了智能终端上。在那个时候

2017-01-29 17:39:26 16470 1

原创如何在NodeJS项目中优雅的使用ES6

如何在NodeJS项目中优雅的使用ES6NodeJs最近的版本都开始支持ES6（ES2015）的新特性了，设置已经支持了async／await这样的更高级的特性。只是在使用的时候需要在node后面加上参数：--harmony。但是，即使如此node也还是没有支持全部的ES6特性。所以这个时候就需要用到Babel了。现在开始Babel在开始使用Babel之前，假设 1. 你已经安装了nodejs，并

2017-01-21 22:28:48 20127 1

原创 Fetch API

Fetch API一个隐藏最深的秘密就是AJAX的实现底层的XMLHttpRequest，这个方法本来并不是造出来干这事的。现在有很多优雅的API包装XHR，但是这远远不够。于是有了fetch API。我们来看看这个API的基本用法。最新的浏览器都已经支持这个方法了。XMLHttpRequestXHR对于我来说太过复杂，用起来大概是这样的：// 开始XHR这些if (window.XMLHttpR

2017-01-15 09:27:40 797

原创 React Native填坑之旅--与Native通信之iOS篇

终于开始新一篇的填坑之旅了。RN厉害的一个地方就是RN可以和Native组件通信。这个Native组件包括native的库和自定义视图，我们今天主要设计的内容是native库方面的只是。自定义视图的使用会在后面讲到。坑是什么样的坑主要的是遇到一个业务需求，需要检测当前应用的版本是什么。需要返回当前的版本号和build数。主要的需求在native来说非常简单： NSString * versio

2016-12-07 15:27:30 4254

原创 React Native填坑之旅--组件生命周期

这次我们来填React Native生命周期的坑。这一点非常重要，需要有一个清晰的认识。如果你了解Android或者iOS的话，你会非常熟悉我们今天要说的的内容。基本上一个React Native的组件会经历三个阶段最终渲染在界面上，他们分别是：开始渲染、更新、卸载。开始渲染：componentWillMountcomponentWillMount(): void组件开始渲染的时候调用这个方法com

2016-11-22 14:08:58 616

原创 React Native填坑之旅--ListView的Section Header

React Native自己实现的ListView还有一个隐藏功能那就是Section。Section在文档里连一句话都没有给足，但确确实实的是内置的。使用Section可以给数据分组，并且每一个Section都有一个Header。Section Header可以像iOS的TableView的Section Header一样在滑动的时候保持当前的Section Header浮动在Table View

2016-11-14 10:33:12 4802

原创 GCD in Swfit 3.0

主要是嘚瑟一下英文。其实代码都在，什么文都无所谓。代码在这里：https://github.com/future-challenger/Swift3.0/tree/master/GCDThis project is “forked” from raywenderlich GCD tutorial. It’s really a good tutorial where I learned what I

2016-10-25 22:12:47 881

原创 React Native填坑之旅--重新认识RN（番外篇）

如同黑夜里的一道光一样，就这么知道了F8. F8是每年一次Facebook每年一次的开发者大会。每次大会都会release相应的APP，iOS、Android都有。之前都是用Native开发的，但是2016的这一次是用React Native开发的。FB开源了RN的App这次fb不仅开源了纯RN写的App，而且一同发布的还有开发这个App的教程。FB承诺会不断的更新这个app。教程放在make it

2016-10-25 14:13:19 661

原创 [swift 3]iOS10下使用UIViewPropertyAnimator写动画

在iOS 10中带入了一种“全新的，面向对象的，完全可交互和停止的动画。你可以掌控你的动画并且和手势操作相关联”。简单点说，就是在iOS 10下开发者可以更加容易的取消、反转、暂停、重启动画，并且可以修改动画的时序和执行时间。而且以上功能在view controller转场动画上也可以使用。开始项目首先，准备好我们要做动画的视图。创建一个新的项目，只是用默认的配置即可。import UIKitcla

2016-10-23 09:44:13 805

原创 React Native填坑之旅--布局篇

回头看看RN的填坑之旅系列，发现一路写下来都是我在开发中遇到的问题如何解决的。兴之所至，不问顺序。于是出现一个问题，填坑系列和学习知识的顺序不是很一致。比如今天要说的布局问题。其实在一个app开发之前，就应该有所了解。否则的话每次看到的<View style={{flex: 1}} />代表的是什么呢？上来就是一个疑问。在这个系列进行到一定程度的时候，我会花时间重新整理全系列的文章，让各位可以按照知

2016-10-21 00:22:17 1290

原创 React Native填坑之旅--class（番外篇）

无论React还是RN都已经迈入了ES6的时代，甚至凭借Babel的支持都进入了ES7。ES6内容很多，本文主要讲解类相关的内容。构造函数定义侦探类作为例子。ES5的“类”是如何定义的。function ES5Detective() { console.log('##ES5Detective contructor');}ES6定义类：class ES6Detective { constru

2016-10-15 22:48:16 478

原创 React Native填坑之旅--Navigation篇

React Native的导航有两种，一种是iOS和Android通用的叫做Navigator，一种是支持iOS的叫做NavigatorIOS。我们这里只讨论通用的Navigator。会了Navigator，NavigatorIOS也就不是什么难事了。本文所使用的是React Native 0.34。FB团队更新的太快了，我会在后续出现大的改动的时候更新本文以及代码。Navigator基础Navig

2016-10-13 20:30:33 1539

原创 React面试必会--React的Diff算法

使用React或者RN开发APP如果不知道Diff算法的话简直是说不过去啊。毕竟“知其然，知其所以然”这句老话从远古喊到现代了。以下内容基本是官网文章的一个总结、压缩。这次要谦虚一下，毕竟深入研究RN的时间不多，如果有什么理解的不对的地方还请各位读者指正。React的组件在渲染之后组成了一个树形结构。在React绘制的时候，会在内存里对应每一个组件建立一个节点，并最终形成一个和组件树结构一样的树。我

2016-10-11 20:20:56 17649

原创 React Native填坑之旅--Flow篇（番外）

flow不是React Native必会的技能，但是作为正式的产品开发优势很有必要掌握的技能之一。所以，算是RN填坑之旅系列的番外篇。Flow是一个静态的检查类型检查工具，设计之初的目的就是为了可以发现JavaScript脚本里不容易被发现的错误。在js开发的过程中，总会遇到一些问题。小的还可以，比如用alert或者console等输出一些信息可以debug，并解决。但是如果项目比较大的时候，这些手

2016-10-09 20:40:28 1343

原创 React Native填坑之旅--LayoutAnimation篇

比较精细的动画可以用Animated来控制。但是，在一些简单的界面切换、更新的时候所做的动画里再去计算开始值、结束值和插值器如何运作绝对是浪费时间。RN正好给我们提供了LayoutAnimation来解决这个问题。按照官方的说法：LayoutAnimation就是用于在下一个绘制或者布局周期（render/layout cycle)里处理界面中全部视图的动画的。下面看一个例子：export defa

2016-10-07 20:27:37 1581 1

原创 React Native填坑之旅--ListView篇

列表显示数据，基本什么应用都是必须。今天就来从浅到深的看看React Native的ListView怎么使用。笔者写作的时候RN版本是0.34。最简单的//@flowimport React from 'react';import { Text, View, ListView} from 'react-native';export default class DemoList ext

2016-10-05 15:16:32 8408

原创 React Native填坑之旅--HTTP请求篇

React Native填坑之旅–Button篇 React Native填坑之旅–动画 React Native填坑之旅–HTTP请求篇如果不能从头到尾的建立一个RN应用，那么RN将失色不少。本以为HTTP请求部分需要使用Native的实现，Android和iOS各回各家，各调各库了。Google了一下之后居然RN可以使用fetch库。这个库是用来代替流传已久的XHR的。下面看看如何使用fet

2016-10-03 21:40:17 5559

原创 React Native填坑之旅--动画篇

动画是提高用户体验不可缺少的一个元素。恰如其分的动画可以让用户更明确的感知当前的操作是什么。无疑在使用React Native开发应用的时候也需要动画。这就需要知道RN都给我们提供了那些动画，和每个动画可以处理的功能有哪些。填坑材料Animated动画API提供了一些现成的组件：Animated.View，Animated.Text和Animated.Image默认支持动画。动画API会调用iOS或

2016-09-27 20:41:46 3898

原创 React Native填坑之旅--Button篇

从React过来，发现React Native（以下简称RN）居然没有Button。隔壁的iOS是有UIButton的，隔壁的隔壁的Android里也是有的。没有Button，就没有点击效果啊。这还真是让人郁闷了。坑什么叫Button。略去各种细节可以得出一个定义：可以处理用户点击，在用户按下的时候有按下的效果，松开之后立即回复到原来的效果上。在React里，可以使用直接使用HTML的元素。比如，<

2016-09-25 15:12:36 3125 1

翻译 React与ES6（四）ES6如何处理React mixins

在使用React.createClass()的时候你也许使用过一个所谓的mixin的东西。使用它，你可以给React组件天剑很多其他的功能。这个概念不止用在React上，也用在很多其他的编程语言或者框架上。在ES6中不能够在使用React的mixin机制。本文不会纠结于原因为何。我们只关注ES6中的替代方法。High-Order Component或者可以叫做高阶组件。我们使用前文中使用的CartI

2016-09-20 11:37:43 4123

翻译 React与ES6（三）ES6类和方法绑定

如果你看到前篇里CartItem的render方法里的这一句：{this.increaseQty.bind(this)}你可能会很意外为什么要bind。如果把bind删掉的话会怎么样呢？会报错Uncaught TypeError: Cannot read property ‘setState’ of undeined。这是因为this.increaseQty的this指向的不是类，而是undefin

2016-09-19 21:00:08 3213

翻译 React和ES6（二）ES6的类和ES7的property initializer

前一篇的内容太简单了，会不会很失望。这次就来一个接近实际应用的例子，对应的React的组件也会更加复杂。这次开发一个购物车的页面。在这个页面中你会看到某个产品的信息，比如：图片、名称和价格。另外，一个用户可以增加和减少该商品的数量。创建cart_item.html<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8">

2016-09-15 20:38:57 1739

翻译 React与ES6（一）开篇介绍

ES2015（也就是ES6）带来了很多新的语言特性。比如：类、箭头方法、rest参数、promise、generator等很多。如果你对ES6还不是很熟悉的话可以看这里。但是浏览器对于ES6的支持还不是很好。你可以看看这个ES6兼容表。显而易见的是不同浏览器对于ES6的兼容参差不齐。于是就有人想把ES6的代码转成ES5的不就可以兼容了吗。这其中做的最好的就是Babel, 一个非常棒的工具。后面会详细

2016-09-13 11:33:07 2747

原创玩转React样式

很久很久以前，就有人用CSS来时给HTML内容添加样式。CSS可以最大限度的分离样式和内容，选择器也可以很方便的给某些元素添加样式。你根本找不到任何不用CSS的理由。但是在React这里就是另外一回事了，虽然React不是不用CSS。但是，它在给元素添加样式的时候方式不同。React的核心哲学之一就是让可视化的组件自包含，并且可复用。这就是为什么HTML元素和Javascript放在一起组成了Com

2016-09-09 23:44:43 13390

翻译配置React的Babel 6和Webpack 2环境

Facebook的一帮子工程师在忙碌之余开发除了一套前段UI框架React。这个框架最大的有点就在于让UI的开发都基于组件，这样View都是根据props和state变化的。虽然学React比起来其他的前端框架要容易不少，但是其生态的各种工具（Babel, Webpack）却着实让人费一番功夫。事实上，这些工具不只适用于React。但是为了发挥ES2015和JSX的威力需要它们。这里，我们主要讨论如

2016-08-31 22:42:24 4639 3

原创老树新芽，在ES6下使用Express

要让Express在ES6下跑起来就不得不用转码器Babel了。首先新建一个在某目录下新建一个项目。然后跳转到这个目录下开始下面的操作。简单走起安装babel-cli$ npm install --save-dev babel-cli然后，可以安装一些presets$ npm install --save-dev babel-preset-es2015 babel-preset-stage-2现在就

2016-08-23 16:35:42 2410

原创异步javascript，callback、Promise？我们用Generator！

ES6提供了两个处理异步Js的特性：Promise和Generator。我们这里会介绍这两个新特性，并在最后讲解如何使用Generator。为了使本文更加贴近实际，我们使用一个网络请求库request来作为异步任务的实例使用。request库是一个强大而简单易用的网络请求库。她支持http和https，也支持redirect。以后在新的工作里也许就会用得着。基本概念如果你使用过其他的编程语言，那么一

2016-08-16 22:13:58 2322

原创用Promise让Node的异步任务顺序执行

Node的机制导很多的任务执行是异步的，一般用回调处理任务的结果。多任务就会导致多层嵌套。于是Promise就被用来处理这个事情。尤其是bluebird的Promise实现功能丰富。如果需要一大串的任务全部执行完成之后继续后面的，那么就用Promise.all方法，如果要任务顺序执行，并把每次的结果单独处理就用Promise.reduce方法。这两个方法组合起来就可以发挥更加大的威力：/** *

2016-07-31 13:56:33 7647

原创 Swift3翻天覆地的改变

swift已经发展到一定的程度，语言本身已经基本定型。所以从这个版本开始swift社区把代码的兼容放在一个比较靠前的位置来考虑了。至少按照官方的说法是不到万不得已不破坏代码的向前兼容（最前也就到swift3.0了）。可以考虑在在团队中引入swift了。

2016-07-24 21:58:01 2150

原创 NodeJs回调操作Promise化

mongoose是一个NodeJs下MongoDB的ORM库。mongoose已经开启了对Promise的支持，只需要指定明确的Promise库。同时，对于已经存在的对象和方法如何Promise化他们？情况文中详细内容。

2016-07-08 17:27:05 2073

原创 NodeJs 关系数据库ORM库：Bookshelf.js

bookshelf.js是基于knex的一个关系型数据库的ORM库。简单易用，内置了Promise的支持。这里主要罗列一些使用的例子，例子就是最好的教程。下面就是用mysql作为实例数据库表明bookshelf如何使用。其他的几个关系型数据库使用上基本一致，只是配置等地方需要使用的名称各自不同。为了更加贴近实际全部的例子都会放在Express打造的RESTful服务里。安装bookshelf和kne

2016-07-05 11:14:03 3018

SwiftWeather

MyBeacon代码包

空空如也