前端开发中的设计模式

1、MVC开发模式

MVC将应用划分为3个部分：数据（模型）、展现层（视图）和用户交互（控制器）。换句话说，一个事件的发生是这样的过程：
（1）用户和应用产生交互。
（2）控制器的事件处理器被触发。
（3）控制器从模型中请求数据，并将其交给视图。
（4）视图将数据呈现给用户。

V层是视图层，控制界面显示，将界面与数据连接。M层存放数据，处理逻辑，比如处理从数据库调用的数据，还有业务逻辑处理。C层用于连接M和V，Controller 负责显示界面、响应用户的操作以及与 Model 交互，比如操作DOM、对事件的监听。这就导致了Controller和 View 紧耦合、逻辑复杂，难以维护。

MVC不属于设计模式，而是一组用于构建用户界面的类集合，更多是一种设计理念，现在来说无论java还是. Net，mvc是一种框架，它其实是其它三个经典的设计模式的演变：观察者模式(Observer)(Pub/Sub), 策略模式(Strategy)和组合模式(Composite), 当然根据不同需求还会用到别的设计模式！

2、MVVM开发模式

 MVVM与MVC最大的区别就是：它实现了View和Model的自动同步，也就是当Model的属性改变时，我们不用再自己手动操作Dom元素，来改变View的显示，而是改变属性后该属性对应View层显示会自动改变。

由此和view层分开来，只是注重数据的改动即可。MVVM开发模式中最重要的就是实现了View和Model的自动同步，所以可以不用频繁地手动操作DOM元素。

 比如说Vue框架，Vue实例中的data相当于Model层，而ViewModel层的核心是Vue中的双向数据绑定，即Model变化时VIew可以实时更新，View变化也能让Model发生变化。 整体看来，MVVM比MVC精简很多，不仅简化了业务与界面的依赖，还解决了数据频繁更新的问题，不用再用选择器操作DOM元素。

 

3、事件驱动

JS是事件驱动的编程语言。业务逻辑主要是靠Dom元素上的事件绑定来驱动。

事件是业务逻辑的推动者也是与对象交互的入口。每个事件都会有一个event对象，对象里面包含了各种你所想得到的信息。

 

4、数据驱动

数据驱动的意思就是由数据来驱动业务逻辑，重点关注数据的变动，当数据发生发生改变时，DOM元素也会随之发生变化。

数据驱动的前提是事先将DOM与数据绑定，像vue这种就是将一个vue对象与一个DOM节点模板关联起来，这个DOM节点里所有子节点、所有节点属性，全都可以和vue对象中的data绑定，做到data中某个属性值变化时，相应DOM节点中对应的某个属性就变化。

如此一来，关注点完全分离。分开设计页面DOM结构和数据结构，然后将DOM与数据结构做关联，之后所有的事件触发的都只是数据的变化，DOM会自动根据数据的变化做相应改变。