2018年09月_蜗牛不会跑~

原创 RxJS——函数式编程

本篇通过RxJS的实现原理、基础实现以及实例来一步步分析，提供RxJS较为全面的指引，感受一波使用RxJS编码是怎样的体验常规方式实现搜索功能搜索功能是前端开发经常做的，一般的实现方式是：监听文本框的输入事件，将输入的内容发送到后台，最终将后台返回的数据(搜索结果)在前端页面渲染处理上面的代码实现了我们要的搜索功能，但存在两个较大的问题：1.多余的请求当我们想要搜索...

2018-09-20 11:42:22 506

转载 Reflux详解

ReFlux细说Flux作为一种应用架构（application architecture）或是设计模式（pattern），阐述的是单向数据流（a unidirectional data flow）的思想，并不是一个框架（framework）或者库（library）。前言在细说Flux之前，还是得提一下React ，毕竟Flux这个名字，是因为它才逐渐进入到大众视野。React...

2018-09-19 17:18:52 950

转载 js网络请求性能优化之防抖与节流

一丶基本概念防抖(debounce)：在函数需要频繁触发时，只有当有足够空闲的时间时，才执行一次。就好像在百度搜索时，每次输入之后都有联想词弹出，这个控制联想词的方法就不可能是输入框内容一改变就触发的，他一定是当你结束输入一段时间之后才会触发。节流(thorttle)：预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行。就好像你在淘宝抢购某一件限量热卖商品时，你不断点刷新点购买，...

2018-09-14 10:13:13 630

Redux 的第一次代码提交是在 2015 年 5 月底（也就是一年多前的样子），那个时候 React 的最佳实践还不是明晰，作为一个 View 层，有人会用 backbone 甚至是 angular 和它搭配，也有人觉得这层 View 功能已经足够强大，简单地搭配一些 utils 就直接上。后来便有了 FLUX 的演讲，React 社区开始注意到这种新的类似函数式编程的理念，Redux 也作为 ...

2018-09-11 11:46:39 332

原创探索Redux的最佳实践

一、前言广发证券金钥匙是一个连接用户和投资顾问、为用户提供专业投资咨询服务的的产品。基于Angular 1.x和Ionic，我们为用户和投顾分别提供了覆盖PC Web、Mobile Web和Android/iOS客户端的系列产品。前端的发展日新月异，React Native/Weex/微信小程序等技术方案进一步扩展了前端技术的应用范围。在金钥匙项目中，我们相继推出了小程序版金钥匙有问必答...

2018-09-11 10:35:22 797

原创从redux-thunk到redux-saga实践

简介本质都是为了解决异步action的问题Redux Saga可以理解为一个和系统交互的常驻进程，其中，Saga可简单定义如下：Saga = Worker + Watchersaga特点：saga的应用场景是复杂异步，如长时事务LLT(long live transcation)等业务场景。方便测试，可以使用takeEvery打印logger。提供takeLat...

2018-09-10 10:59:49 690

原创 roadhog

Roadhog 是一个包含 dev、build 和 test 的命令行工具，他基于 react-dev-utils，和 create-react-app 的体验保持一致。你可以想象他为可配置版的 create-react-app。Features

2018-09-10 10:04:40 1075

原创 redux 异步流之 redux-saga

1. 介绍对于从来没有听说过 redux-saga 的人，作者会如何描述它呢？It is a Redux middleware for handling side effects. —— Yassine Elouafi这里包含了两个信息：首先，redux-saga 是一个 redux 的中间件，而中间件的作用是为 redux 提供额外的功能。其次，我们都知道，在 ...

2018-09-07 18:29:26 665

转载 dva框架使用详解及Demo教程

dva框架的使用详解及Demo教程在前段时间，我们也学习讲解过Redux框架的基本使用，但是有很多同学在交流群里给我的反馈信息说，redux框架理解上有难度，看了之后还是一脸懵逼不知道如何下手，很多同学就转向选择使用dva框架。其实dva框架就是一个redux框架与redux-saga等框架的一个集大成者，把几个常用的数据处理框架进行了再次封装，在使用方式上给使用者带来了便利，下面我们就来简单...

2018-09-07 17:40:05 2747

转载 dva.js学习梳理集

不知大家学 react 或 dva 时会不会有这样的疑惑：es6 特性那么多，我需要全部学会吗? react component 有 3 种写法，我需要全部学会吗? reducer 的增删改应该怎么写? 怎么做全局/局部的错误处理? 怎么发异步请求? 怎么处理复杂的异步业务逻辑? 怎么配置路由? ...这篇文档梳理了基于dva-cli使用dva的最小知识集，让你可以用最少的时间...

2018-09-07 16:46:06 2603

转载一起玩react 10分钟带你入门ant-design-pro

前言这篇文章主要根据自己最近一个月从学习react到最近实际使用ant-design-pro，谈一谈自己的使用心得，个人见解有误的地方望大家指正！1、为什么要选择ant-design-pro？其实我来目前公司之前，公司前端技术栈是vue+vuex+elementui+axios，但是奈何公司前端利用vue做出来东西表现确实一般，更重要的是代码有点乱，用我自己的话说就是野路子太多（当然野...

2018-09-07 15:51:50 1018

原创关于dva实际应用的一些经验以及疑惑

从开始学习dva到引入到实际项目中也有几个月的时间，下面分享一下实际的经验，另外也有一些比较含糊或者疑惑的地方，看看大家有没有有些好的思路。dva整体构架比较清晰，但是实际使用的时候，还是需要做很多处理。dva model扩展在我们的基础库中，实现了Model.extend方法，所有的model都通过这个方法来创建, extend具体对以下几个方面进行了扩展.state根据我们的...

2018-09-07 15:26:42 1468

原创 Ant Design Pro 上手备忘录

Ant Design Pro 是蚂蚁金服团队在 Ant Design 的设计规范与组件库基础上推出的一套 React 实现的企业级中后台前端/设计解决方案。上手使用方法是直接 clone 其 GitHub 仓库然后执行 npm install，或是安装官方提供的 cli 工具创建项目（但在这过程中也会涉及到 clone 其 GitHub 仓库）。新项目创建后，自带模板页面和工具链，可以快速...

2018-09-07 15:15:36 437

原创 dva.js 上手

初始化安装 dva-cli 用于初始化项目：npm install -g dva-cli# 或yarn global add dva-cli创建项目目录，并进入该目录：mkdir your-projectcd your-project初始化项目：dva init然后运行 npm start 或 yarn start 即可运行项目。目录结构项目初...

2018-09-07 14:52:26 729

转载 Mock.js使用

Mock.js 是一款前端开发中拦截Ajax请求再生成随机数据响应的工具.可以用来模拟服务器响应. 优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型.大概记录下使用过程, 详细使用可以参见Mock文档 Mock Wiki安装使用npm安装: npm install mockjs; 或直接<script src="http://mockjs.com/dist/mock...

2018-09-06 14:40:58 141

蜗牛不会跑