16 | 百花齐放，百家争鸣：前端MVC框架

1. 使用过 React，前端的 MVC 框架的出现带动了整个前端的发展，现在前端可以和后端分离开来设计与实现，对比之前，前端页面的聚合需要后端，这些框架的出现，在大的层面上看也算是进行了一次前后端的解耦吧；不好的地方就是前端的技术变得非常的多，而且杂，并且很多前端技术的生命周期都很短，这增加了普通工程师的学习难度的同时，前端在技术层面上也没有一个大的 “统一” 2. 这让我回想起了我们之前讲过的一个话题，就是 “MVC 框架的控制逻辑的配置是写在单一的文件中，还是利用注解的方式写在控制逻辑处？”，放在这里也是可以类比的，把行为从 HTML 里面分离出去，单独管理，可以使得行为和 HTML 显示分开，达到解耦，同样，以 Angular 这种方式，让行为跟着具体的 HTML 显示模块走，让行为和 HTML 显示对照起来，这也是解耦，只不过前者是代码横向分层解耦，后者是代码纵向分层解耦，不能完全说哪一个好，还是得具体场景，具体分析。 这里有一个小问题，就是上面提到说 “Reducer 是无状态的，它是一个纯函数”，我们上一篇文章中提到纯函数是安全的，也是幂等的，但是这里 Reducer 是会改变 store 的，而且对一个 Reducer 一次调用和多次调用会导致 store 里面的状态变得不一样，或者说我这里是不是误解了什么，还请老师指教 PS: 过滤器标题下面那句话有 typo，Angular 写成了 React

老师，有个问题没太想明白。为什么前端要引入状态管理这一概念呢？它解决了什么问题？为什么诸如iOS，Android 等移动端技术没有引入状态管理这一概念？

问题一：使用过backbone，spine，最大的好处是分层和复用，坏处是模型之间的通信会复杂一点，需要借助发布订阅模式。vue，react和angular，最大的好处是框架完成了数据和UI的同步。并且采用声明式的写法，写起来就像写配置文件一样，简洁清晰。坏处是debug更复杂，不清楚各个组件的状态，不过已经有插件辅助了。 问题二：作用域是不一样的。原始的写法：<img onclick="setImage()">，setImage是全局的。anglular的写法：<img ng-click="setImage()">，把setImage的作用域限制在了组件内，不会污染全局。angular的写法使代码结构变的更好，把逻辑单元封装在组件里。

1. 使用 MVC 的好处个人认为是思维模式的转变，现在思考的方式都是以数据为主，不用去考虑去操作 DOM，坏处是越来越依赖框架了，很多相对基础的都忘记了。 2. 感觉 angular 那样更好，因为像绑定事件这些，如果都放到 control 层 ，会更难理解和维护。之前用 jQuery 写的时候，一大堆事件放在一块，过一段时间再看代码就不太好看懂了。并且这样写是不是也是更像声明式的语法？

三驾马车没有讲vue，老师对这个框架没有什么想说的吗？

这部分 Angular 这一块的东西需要注意一下，Angular.js 和 Angular 不是同一个框架，按版本号算的话，Angular从2这个大版本之后，就不兼容 Angular 1 这个版本了。为了区分，现在前端社区里面通常用 Angular.js 表示 Angular 1 和之前的版本，官网是这个https://angularjs.org/，这个版本就是这篇文章的版本。从 Angular 2 开始的版本就叫做 Angular，官网就是 https://angular.cn/。 说这些并非是要咬文嚼字，Angular 2 确实和 Angular.js 不一样，是彻底的 breaking change，并没有 Controller 这样的概念了。前端现在的库、框架，都有一些共同点，比如组件化了，单向数据流。，双向绑定也只适合一个语法糖，其实还是单向数据流。

jquery现在已经不流行了，除非是维护老项目。开发比较大的新项目用不到，但是它的理念是很有启发性的，write less,do more.

按照文中的内容，react是V，redux可以是M，那C是指什么？

1.是直接用vue开始的 好处就是html跟逻辑代码分开更加清晰，更重要可以组件化页面增加复用，坏处嘛个人觉得就是觉得前端复杂了无论从环境还是搭建发布，但总体是利大于弊，自己也习惯了vue开发 2.如果是打算要发布兼容多平台的（同一份html代码），这种写法确实不好，但具体问题还是要具体分析

我是个后端，用过vue element ui 做后台用。 之前是jq + bootstrap 天生对前端没兴趣，会用够用就好，很明显同样超出本职的玩docker k8s 时兴趣更大。