摘要：前端与状态现在的前端开发中，对于状态的管理是重中之重。有限状态机那么如何更好的管理前端软件的复杂度的状态机思想给出了自己的答案。有限状态机并不是一个复杂的概念简单说，它有三个特征状态总数是有限的。
前提
在现在的前端社区，关于MVVM、Model driven view 之类的概念，已经算是非常普及了。React/Vue 这类框架可以算是代表。
而自己虽然有 React/Vue 的使用经验，也了解 MVVM，状态机等核心概念，但是却一直没有很好的应用。
直到前几天接手一个组件开发的需求，写之前尝试细细分析时，才突然想通这之间的联系。
Emmm……内容比较浅，并不是什么了不得的神兵利器。更多的是个人的感悟。
自己在前一段时间里，陷入了如何写好代码的困惑之中，在学习了《重构》、《代码整洁之道》等知识之后，确实有一些好转。但是写代码总是要重构才能好一些些，也是很麻烦的事情，于是就有了如下的思考。
前端与状态现在的前端开发中，对于状态的管理是重中之重。
而使用 React/Vue 这类 MVVM 框架，通过组件化、自动绑定等方式，能有效降低前端开发时的复杂度。
提到状态就不得不提到MVVM框架，而MVVM的框架的核心，并不是双向绑定或者依赖收集什么的，而是：状态决定视图。
用代码描述就是：
View = ViewModel(Model)
理想情况下，ViewModel是纯函数，给定相同的Model，产出相同的View。
随着前端的发展，Web应用的状态管理愈发复杂，然而由于前端的一些特性：
代码开源
请求透明
不保存用户数据
...
也决定了前端只负责整个Web应用上的视觉和交互层，凡是涉及到数据的，后端必然要做严谨的校验，不相信任何前端的请求。
所以前端的核心工作，就是提供一个友善的人机交互的操作界面。当然，这也符合广义上的前端定义。
而 MVVM 的出现，能有效的提高前端开发的效率和品质，从而得到了大规模的发展与应用。
复杂度在《代码大全2》这本书中，有句让我印象深刻的话：
软件工程的本质即是管理复杂度。
细细想来，也确实是如此。
前端开发自然也属于软件开发，管理复杂度恰恰也是前端目前的核心问题。
那么如何更好的管理前端软件的复杂度？ React 的状态机思想给出了自己的答案。
状态机是我在学习计算机中，时常听到的一个概念，比如学 React 时，会提到 React 就是个状态机，听团队关于编译原理的分享时，也会听到状态机。所以就去专门补习了这个概念。
有限状态机在维基百科上的描述如下：
有限状态机（英语：finite-state machine，缩写：FSM）又称有限状态自动机，简称状态机，是表示有限个状态以及在这些状态之间的转移和动作等行为的数学模型。
有限状态机并不是一个复杂的概念
启示简单说，它有三个特征：
状态总数（state）是有限的。
任一时刻，只处在一种状态之中。
某种条件下，会从一种状态转变（transition）到另一种状态。
它对JavaScript的意义在于，很多对象可以写成有限状态机。
随着对状态决定视图与状态机两个概念的学习与思考，于是有了新的思路：
状态决定视图，Action则负责完成状态间的转移，那么写好代码的核心在于，用最恰当的状态去描述界面，用最恰当的动作去完成状态间的转移。
Emmm……很简单的概念，但是自己之前一直没有想的很清楚。
总结随着对这个概念的了解，自己在开发时的思路也愈发的清晰化。
自己现在写代码之前，会思考一系列问题，想清楚再下手：
这个页面有几种状态（初始化状态？成功状态？失败状态？出错状态？）
描述这些状态需要什么参数
在什么时候转变状态，需要改变哪些部分
把这些问题想清楚了，剩下的工作就是跟着思路，完成数据与UI部分。
以上就是自己的思路了，如果各位有什么建议的话，欢迎和我交流呀 ? ~
有限状态机 - 维基百科
JavaScript与有限状态机
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/84416.html
摘要：在初步完成了在线流程图编辑工具之后又接到了在线搭建页面工具的需求刚开始其实并不想接项目因为从历史以及现实原因来看个性化及动态渲染都是很难解决的痛点各种页面搭建工具的不温不火早已说明了这条路并没有这么好走但从另一个方面来说既然有了这样的需求那 在初步完成了在线流程图编辑工具之后,又接到了在线搭建页面工具的需求,刚开始其实并不想接项目,因为从历史以及现实原因来看,个性化及动态渲染都是很难解决的痛...
摘要：相关状态父组件传递给子组件的状态。外部状态状态是可以从视图库中移出来的，然后可以使用提供者消费者模式把状态重新连接回视图库。重新设计在我看来，重写是有其必要性的，至少有以下个方面可以改进得更友好。 Redux 学习起来很困难？写起代码来很啰嗦？一起来看看 Rematch 的作者对 Redux 的思考和简化吧~ 原文：《Redesigning Redux》, Shawn McKay 都过...
摘要：在引起状态变化的时刻，框架自动触发脏检查，也可以手动执行脏检查，直接操作更新视图。最后，说了这么多，大家在具体选型时还是要首先分析自己的需求和现状，然后再做选择。 作为一个软件开发者，最大的挑战就是在不断涌现的新技术中进行取舍，持续学习是从事这一行业的必备技能。在这个领域里，技术更新最快地又非前端莫属了。各种框架的出现、版本的更新此起彼伏，呈现出一派欣欣向荣之景。 在项目中必不可少的便...
摘要：在引起状态变化的时刻，框架自动触发脏检查，也可以手动执行脏检查，直接操作更新视图。最后，说了这么多，大家在具体选型时还是要首先分析自己的需求和现状，然后再做选择。 作为一个软件开发者，最大的挑战就是在不断涌现的新技术中进行取舍，持续学习是从事这一行业的必备技能。在这个领域里，技术更新最快地又非前端莫属了。各种框架的出现、版本的更新此起彼伏，呈现出一派欣欣向荣之景。 在项目中必不可少的便...
阅读 1649·2021-09-07 10:24
阅读 1851·2019-08-30 15:55
阅读 1897·2019-08-30 15:43
阅读 555·2019-08-29 15:25
阅读 842·2019-08-29 12:19
阅读 1816·2019-08-23 18:32
阅读 1402·2019-08-23 17:59
阅读 854·2019-08-23 12:22
