也决定了前端只负责全部Web应用上的视觉和交互层，凡是涉及到数据的，后端必定要做严谨的校验，不信赖任何前端的请求。

跟着前端的成长，Web应用的状况治理愈发复杂，然而因为前端的一些特点：

• 代码开源
• 请求透明
• 不保存用户数据

在如今的前端社区，关于MVVM、Model driven view 之类的概念，已经算是异常普及了。React/Vue 这类框架可以算是代表。

而本身固然有 React/Vue 的应用经验，也懂得 MVVM，状况机等核心概念，然则却一向没有很好的应用。

直到前几天接办一个组件开辟的需求，写之前测验测验细细分析时，才忽然想通这之间的接洽。

Emmm……内容比较浅，并不是什么了不得的神兵利器。更多的是小我的感悟。

小我困惑

本身在前一段时光里，陷入了若何写好代码的困惑之中，在进修了《重构》、《代码整洁之道》等常识之后，确切有一些好转。然则写代码老是要重构才能好一些些，也是很麻烦的工作，于是就有了如下的思虑。

前端与状况

如今的前端开辟中，对于状况的治理是重中之重。

而应用 React/Vue 这类 MVVM 框架，经由过程组件化、主动绑定等方法，能有效降低前端开辟时的复杂度。

MVVM

用代码描述就是：

View = ViewModel(Model)

幻想情况下，ViewModel是纯函数，给定雷同的Model，产出雷同的View。

所以前端的核心工作，就是供给一个友善的人机交互的操作界面。当然，这也相符广义上的前端定义。

而 MVVM 的出现，能有效的进步前端开辟的效力和品德，大年夜而获得了大年夜范围的成长与应用。

复杂度

软件工程的本质等于治理复杂度。

细细鲜攀来，也确切是如斯。

前端开辟天然也属于软件开辟，治理复杂度恰好也是前端今朝的核心问题。

有限状况机

那么若何更好的治理前端软件的复杂度？ React 的状况机思惟给出了本身的谜底。

状况机是我在进修计算机中，时常听到的一个概念，比如学 React 时，会提到 React 就是个状况机，听团队关于编译道理的分享时，也会听到状况机。所以就去专门补习了这个概念。

有限状况机在维诽谤科上的描述如下：

有限状况机（英语：finite-state machine，缩写：FSM）又称有限状况自念头，简称状况机，是表示有限个状况以及在这些状况之间的转移和动作等行动的数学模型。

有限状况机并不是一个复杂的概念

在《代码大年夜全2》这本书中，有句让我印象深刻的话：

简单说，它有三个特点：

• 状况总数（state）是有限的。
• 任一时刻，只处在一种状况之中。
• 某种前提下，会大年夜一种状况改变（transition）到另一种状况。
  它对JavaScript的意义在于，很多对象可以写成有限状况机。

启发

跟着对状况决定视图与状况机两个概念的进修与思虑，于是有了新的思路：

提到状况就不得不提到MVVM框架，而MVVM的框架的核心，并不是双向绑定或者依附收集什么的，而是： 状况决定视图 。

状况决定视图，Action则负责完成状况间的转移，那么写好代码的核心在于，用最恰当的状况去描述界面，用最恰当的动作去完成状况间的转移。

Emmm……很简单的概念，然则本身之前一向没有想的很清跋扈。

总结

跟着对这个概念的懂得，本身在开辟时的思路也愈发的清楚化。

本身如今写代码之前，会思虑一系列问题，想清跋扈再下手：

• 这个页面有几种状况（初始化状况？成功状况？掉败状况？掉足状况？）
• 描述这些状况须要什么参数
• 在什么时刻改变状况，须要改变哪些部分

把这些问题想清跋扈了，剩下的工作就是跟着思路，完成数据与UI部分。

【编辑推荐】

1. Web前端开辟与iOS终端开辟的异同
2. 移动前端开辟之viewport的深刻懂得
3. 天猫高手来教你！零基本若何体系地进修前端开辟？
4. 移动前端开辟须要留意的20个要点
5. 深度进修成了前端开辟神器：根据UI设计图主动生成代码

【义务编辑：张子龙 TEL：（010）68476606】

　　推荐阅读

　　首席信息官可以利用对话式商务获得洞察

供给实际的客户办事体验是商务的关键。下面来看看为什么。人工智能驱动的聊天机械人已经光降。当然，还有一些做作的例子：中国的聊天机械人小冰，她在上海电视台的气象申报中第一句话就是>>>详细阅读

本文标题：状态决定视图——基于状态的前端开发思考

地址：http://www.17bianji.com/lsqh/36121.html

 1/2    1