[原]前端框架们

我司打算搞个地图应用，领导发给我一份ppt，里面有个前端的技术架构图：

what！前端技术都进化得这么复杂啦？就搞一个前端，至于用到这么多框架？就问你晕不晕！

底部的es6，fetch是基础的语法，这个没什么好讲的。arcgis jsapi，是地图服务接口，也没什么好说的。webpack，打包工具，还行吧。

顶部的echarts，经常用，很好用，不错。但ant design是蚂蚁金服的东东，与react有关，我没什么认识。

中间那些个，redux，dva啥的，都是做什么的？我感到一阵被时代抛弃的恐惧，赶紧在谷歌上寻寻觅觅，忙碌了快一天。

先说结论：

1）堆砌这么多的框架，我认为过了，只会让系统变得复杂无比；
2）我不看好react，原因是虚拟DOM的概念。没必要再封装一层，html + css + js，是个 程序员 都懂，还用得着搞个虚拟的DOM?
3）前端框架满天飞，弄得本来最简单的前端晦涩难懂，我估计，最后还是会回归纯净的html + css + js，就像 java 中，有个简单对象POJO一样。

笔记如下：

1、【umi】

UmiJS，乌米。是一个可插拔的企业级 react 应用框架。umi 以路由为基础，然后配以完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。umi 是蚂蚁金服的底层前端框架。

2、【dva】

DvaJS。是一个基于 redux 和 redux-saga 的数据流方案。类似MVVM这种机制吧。然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。

3、【redux】

Redux 是 JavaScript 状态容器，提供可预测化的状态管理，常与React 一起用，也可以支持其它界面库。可以构建一致化的应用，运行于不同的环境，并且易于测试。

它体小精悍（只有 2kB，包括依赖）。

Redux 试图让 state 的变化变得可预测。这些限制条件反映在 Redux 的三大原则中。所谓可预测，是它能管理这些由于数据状态变化而引起的一系列连锁变化。

Redux三大原则：单一数据源，State只读，纯函数执行修改。

4、【redux-saga】

redux-saga 是一个 redux 的中间件。用于处理复杂异步问题。

5、【redux-middleware】

middleware 提供了一个分类处理 action 的机会，在 middleware 中你可以检阅每一个流过的 action，挑选出特定类型的 action 进行相应操作，给你一次改变 action 的机会。

6、【Promise】

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。

有没有更好的写法？比如写成这样：

var ajax = ajaxGet('http://...');
ajax.ifSuccess(success).ifFail(fail);

这种链式写法的好处在于，先统一执行AJAX逻辑，不关心如何处理结果，然后，根据结果是成功还是失败，在将来的某个时候调用success函数或fail函数。古人云：“君子一诺千金”，这种“承诺将来会执行”的对象在JavaScript中称为Promise对象。

doSomething1(function(value1) {
		doSomething2(function(value2) {
			doSomething3(function(value3) {
				console.log("done! The values are: " + [value1, value2, value3].join(','));
			})
		})
	})

	doSomething1().then(function() {
		return value1;
	}).then(function(tempValue1) {
		return [tempValue1, value2].join(',');		
	}).then(function(tempValue2) {
		console.log("done! ", [tempValue2, value3].join(','));
	});

Promise实际上是把回调函数从doSomething函数中提取到了后面的then方法里面，从而防止多重嵌套的问题。

7、【whatwg-fetch】

关注点分离（又称为职责分离？）：

关注点混合在一起导致复杂度大大增加，将不同的关注点分离开来，分别处理是处理复杂性的一个原则，一种方法。

Fetch 规范 的API明确了用户代理获取资源的语义。与jQuery相比， fetch 方法与 jQuery.ajax() 的主要区别在于：

fetch()方法返回的Promise对象并不会在HTTP状态码为404或者500的时候自动抛出异常，而需要用户进行手动处理

默认情况下，fetch并不会发送任何的本地的cookie到服务端，注意，如果服务端依靠Session进行用户控制的话要默认开启Cookie

8、【Ant Design】

蚂蚁金服的UI框架