架构师的成长之路的博客

更多干货 分布式实战（干货） spring cloud 实战（干货） mybatis 实战（干货） spring boot 实战（干货） React 入门实战（干货） 构建中小型互联网企业架构（干货） python 学习持续更新 ElasticSearch 笔记 kafka storm 实战 (干货) ...

Redux-Saga 学习笔记一、Redux-Saga介绍 redux-saga 旨在于更好、更易地解决异步操作（action） redux-saga相当于在Redux原有数据流中多了一层，对Action进行监听，捕获到监听的Action后可以派生一个新的任务对state进行维护 于 redux-thunk 比较：相同点： 可以处理异步操作和协调复杂的dispatch不同

基于React的登录第一种登录Login页面提交登录 handleSubmit(), 中直接调用API请求。请求登录成功后跳转 history.push(nextPathname, null);实现方式参照 http://blog.youkuaiyun.com/qq_27384769/article/details/78775835第二种登录Login页面提交登录

一、安装nodejs 官网下载node.js 安装 系统变量下新建”NODE_PATH”，输入”D:\Program Files\nodejs\node_modules” 在nodejs 安装目录下新建目录 node_global node_cache （用户变量”PATH”修改为“D:\Program Files\nodejs\node_global\”） npm co

在react-router4中进行代码拆分（基于webpack）前言随着前端项目的不断扩大，一个原本简单的网页应用所引用的js文件可能变得越来越庞大。尤其在近期流行的单页面应用中，越来越依赖一些打包工具（例如webpack），通过这些打包工具将需要处理、相互依赖的模块直接打包成一个单独的bundle文件，在页面第一次载入时，就会将所有的js全部载入。但是，往往有许多的场景，我们并不

react学习笔记总结做React需要会什么？react的功能其实很单一，主要负责渲染的功能，现有的框架，比如angular是一个大而全的框架，用了angular几乎就不需要用其他工具辅助配合，但是react不一样，他只负责ui渲染，想要做好一个项目，往往需要其他库和工具的配合，比如用redux来管理数据，react-router管理路由，react已经全面拥抱es6，所以es6也

Async/AwaitAsync/Await是尚未正式公布的ES7标准新特性。简而言之，就是让你以同步方法的思维编写异步代码。对于前端，异步任务代码的编写经历了 callback 到现在流行的 Promise ，最终会进化为 Async/Await 。虽然这个特性尚未正式发布，但是利用babel polyfill我们已经可以在应用中使用它了。简单的React/Redux例子。

异步加载数据 async一、页面二、state数据结构state.selectedReddit{selectedReddit: "reactjs"}请求获取数据 state.postsByRedditreactjs: {isFetching: false, didInvalidate: false, items: Array(26),

后台管理系统学习笔记SearchBar 组件：查询字段： fields={this.searchFields()}点击查询： onSubmit={this.onSearch}Table 组件：操作事件 onCtrlClick={ this.tableAction }是否分页 pagination={ true }每页显示 pageSize={10

树一、初始化数据generateTree.jsexport default function generateTree() { let tree = { 0: { id: 0, counter: 0, childIds: [] } } for (

购物车一、商品列表1.初始化加载商品列表异步加载 需要引入中间件 thunkstore.dispatch(getAllProducts())const middleware = [thunk];const store = createStore( reducer, applyMiddleware(...middleware))sto

React Devtools 2.5.2 chrome 谷歌 插件

js跨域访问得到 headers 中的Authorization更多干货React 入门实战（干货）分布式实战（干货）spring cloud 实战（干货）mybatis 实战（干货）spring boot 实战（干货）构建中小型互联网企业架构（干货）1. js 代码const authorization = () => { const user = loginUser(); ...

跨域技术跨域SSO原理跨域读写Cookie跨域AJAX请求SSO 原理业务资源请求，判断Token是否存在，如果存在这判断Token是否有效。有效者访问业务系统。Token不存在或者Token失效。1。提供登录页面 2.用户登录通过后，生成Token 3.将tokenuser 存入redis 4.将token写入所有域的Cookie中 5.页面重定向回原始请

在window上测试安装cnpm私有仓库更多干货 分布式实战（干货） spring cloud 实战（干货） mybatis 实战（干货） spring boot 实战（干货） React 入门实战（干货） 构建中小型互联网企业架构（干货） python 学习持续更新 ElasticSearch 笔记 kaf...

Redux store 的动态注入reducer更多干货React 入门实战（干货）分布式实战（干货）spring cloud 实战（干货）mybatis 实战（干货）spring boot 实战（干货）构建中小型互联网企业架构（干货）在 React + Redux + React-Router 的单页应用架构中,我们将 UI 层（ React 组件）和数据层（ Redux store ）分离开来...

常用组件axios(http请求模块，可用于前端任何场景，很强大)echarts-for-react(可视化图表，别人基于react对echarts的封装，足够用了)recharts(另一个基于react封装的图表，个人觉得是没有echarts好用)nprogress(顶部加载条，蛮好用)react-draft-wysiwyg(别人基于react的富文本封装，如果找到其他更好的可以替换)react

基于Cookie的登录认证更多干货 分布式实战（干货） spring cloud 实战（干货） mybatis 实战（干货） spring boot 实战（干货） React 入门实战（干货） 构建中小型互联网企业架构（干货） python 学习持续更新 ElasticSearch 笔记 kafka stor...

从create-react-app学习webpack更多干货React 入门实战（干货）分布式实战（干货）spring cloud 实战（干货）mybatis 实战（干货）spring boot 实战（干货）构建中小型互联网企业架构（干货）1.没有配置的现代化构建Create React App is a new officially supported way to create single-...

生成环境配置更多干货分布式实战（干货）spring cloud 实战（干货）mybatis 实战（干货）spring boot 实战（干货）React 入门实战（干货）构建中小型互联网企业架构（干货）python 学习（干货）nginx 安装build 。 将build的antd文件上传到nginx对应的目录下安装docker安装percona mysql安装redis安装tomcatend一、安...

更多干货 分布式实战（干货） spring cloud 实战（干货） mybatis 实战（干货） spring boot 实战（干货） React 入门实战（干货） 构建中小型互联网企业架构（干货） python 学习持续更新 ElasticSearch 笔记 kafka storm 实战 (干货) ...

export和import总结一、 ES6的模块化的基本规则或特点 每一个模块只加载一次， 每一个JS只执行一次， 如果下次再去加载同目录下同文件，直接从内存中读取。 一个模块就是一个单例，或者说就是一个对象； 每一个模块内声明的变量都是局部变量， 不会污染全局作用域 模块内部的变量或者函数可以通过export导出 一个模块可以导入别的模块 lib.js//导出常量ex

apidoc使用教程更多干货React 入门实战（干货）分布式实战（干货）spring cloud 实战（干货）mybatis 实战（干货）spring boot 实战（干货）构建中小型互联网企业架构（干货）在开发后台接口的过程中，我们肯定要提供一份api接口文档给终端app。 目前大多数的app的接口请求应该都是http+json的方式。 但是一直苦于做不出份漂亮的api文档，用word写，也太...

让react antd 支持 css module 和 less moduel问题配置了less module 会和 antd 的less 冲突。解决方式 使用module的less 文件命名规则。index.module.less一、配置css 支持 css module设置css-loader的optionsimportLoaders: 1,mo

cookie跨域读写一、SSO原理1.业务资源请求，判断Token是否存在，如果存在这判断Token是否有效。有效者访问业务系统。 2.Token不存在或者Token失效。1。提供登录页面 2.用户登录通过后，生成Token 3.将tokenuser 存入redis 4.将token写入所有域的Cookie中 5.页面重定向回原始请求URL 3.Token 验证时从redis中获取

es6 javascript对象的扩展运算符目前， ES7 有一个提案，将 Rest 解构赋值 / 扩展运算符（ ... ）引入对象。 Babel 转码器已经支持这项功能。Rest 解构赋值对象的 Rest 解构赋值用于从一个对象取值，相当于将所有可遍历的、但尚未被读取的属性，分配到指定的对象上面。所有的键和它们的值，都会拷贝到新对象上面。let { x, y,

sagas例子引入sagasimport createSagaMiddleware from 'redux-saga'import rootSaga from './example/saga/sagas'const sagaMiddleware = createSagaMiddleware()const store = createStore( reducer,

javascript模块写法一、原始写法模块就是实现特定功能的一组方法。 只要把不同的函数（以及记录状态的变量）简单地放在一起，就算是一个模块function m1(){　　　　//...　　}　　function m2(){　　　　//...　　}上面的函数m1()和m2()，组成一个模块。使用的时候，直接调用就行了。 这种做法的缺点很明显："污染"

一、什么是"非构造函数"的继承比如，现在有一个对象，叫做"中国人"。　var Chinese = {　　　　nation:'中国'　　};还有一个对象，叫做"医生"。　var Doctor ={　　　　career:'医生'　　}请问怎样才能让"医生"去继承"中国人"，也就是说，我怎样才能生成一个"中国医生"的对象？ 这里要注意，这两个对象都

构造函数的继承现在有一个"动物"对象的构造函数function Animal(){　　　　this.species = "动物";　　}还有一个"猫"对象的构造函数　　function Cat(name,color){　　　　this.name = name;　　　　this.color = color;　　}怎样才能使"猫"继承"动物"呢

react-redux原理分析更多干货分布式实战（干货）spring cloud 实战（干货）mybatis 实战（干货）spring boot 实战（干货）React 入门实战（干货）构建中小型互联网企业架构（干货）写在前面之前写了一篇分析Redux中Store实现的文章（详见：Redux原理（一）：Store实现分析），突然意识到，其实React与Redux并没有什么直接的联系。Redux作为...

异步模式1. 回调function f1(callback){　　　　setTimeout(function () { 　　　　　　// f1的任务代码 　　　　　　callback(); 　　　　}, 1000); } /br>f1(f2);2. 事件监听f1.on('done', f2);function f1(){ 　　setT

箭头函数1. 一般使用箭头函数时，代码块部分只有一条语句时，不使用大括号var sum = (num1, num2) => num1 + num2 同样的写法var sum = (num1, num2) => { return num1 + num2 }等同于var sum = function(num1, num2) { retur

一、 ReduxRedux 的设计思想很简单，就两句话Web 应用是一个状态机，视图与状态是一一对应的。所有的状态，保存在一个对象里面。1. state一个 State 对应一个 View。只要 State 相同，View 就相同。import { createStore } from 'redux';const store = createS

一、 Redux 中间件与异步操作Action 发出以后，Reducer 立即算出 State，这叫做同步；Action 发出以后，过一段时间再执行 Reducer，这就是异步。 使用中间件（middleware）达到异步一、中间件的概念Reducer：纯函数，只承担计算 State 的功能，不合适承担其他功能，也承担不了，因为理论上，纯函数不能进行读写操作。View：

面向对象编程-封装Javascript是一种基于对象（object-based）的语言，你遇到的所有东西几乎都是对象。但是，它又不是一种真正的面向对象编程（OOP）语言，因为它的语法中没有class（类）。 那么，如果我们要把"属性"（property）和"方法"（method），封装成一个对象，甚至要从原型对象生成一个实例对象1、生成实例对象的原始模式假定我们把猫看成一个

React-Redux 的用法1、UI 组件React-Redux 将所有组件分成两大类：UI 组件（presentational component）和容器组件（container component）。 UI 组件有以下几个特征。 只负责 UI 的呈现，不带有任何业务逻辑 没有状态（即不使用this.state这个变量） 所有数据都由参数（this.props）提供 不使

详解JS数组Reduce()方法详解及高级技巧reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素基本概念reduce() 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素

AMD规范一、CommonJS2009年，美国程序员Ryan Dahl创造了node.js项目，将javascript语言用于服务器端编程。node.js的模块系统，就是参照CommonJS规范实现的。在CommonJS中，有一个全局性方法require()，用于加载模块。假定有一个数学模块math.js，就可以像下面这样加载。var math = requir

尾调用优化一、什么是尾调用尾调用的概念非常简单，一句话就能说清楚，就是指某个函数的最后一步是调用另一个函数。function f(x){ return g(x);}上面代码中，函数f的最后一步是调用函数g，这就叫尾调用。 以下两种情况，都不属于尾调用。// 情况一function f(x){ let y = g(x); return y;