【原生js实现MVVM核心框架】

MVC是一种框架模式，也是在学习前端时最先接触的框架模式，而MVP与MVVM都是在MVC的基础之上演化而来，三者各有优劣，本文主要按照下面思维导图进行介绍。

一、mvc mvp mvvm设计理念

1.Model-View-Controller (MVC)

· Model —— 负责应用的业务逻辑。它管理着应用的状态。这还包括读取和写入数据，持久化应用程序状态，甚至可能包括与数据管理相关的任务，例如网络和数据验证。

· View —— 这部分有两个重要的任务：向用户展示数据和处理用户和应用的交互。

· Controller —— view 层和 model 层经由一个或多个 controller 绑定在一起。

2.Model-View-Presenter (MVP)

· Model —— model 代表一组描述业务逻辑和数据的类。它制定了更改和操作数据的规则。

· View —— view 负责与用户进行交互。它与流程中要实现的逻辑无关。

· Presenter —— presenter 从 View 获取输入，在 model 的帮助下处理数据，并在处理完成后将结果传递回 view。

3.Model-View-ViewModel (MVVM)

· Model —— MVVM 中的 model 层和 MVC 中的 model 层非常相似，包含了供应用正常运转所需的基本数据。

· View —— view 层是用户和设计模式之间的图形界面，类似于 MVC 中的 view 层。用来展示处理后的数据。

· View-Model —— view-model 既是视图层的抽象，又提供了要访问的模型数据的包装。 也就是说，它包含一个可以被转换为视图的模型，并且还包含了一些命令，视图层可以使用这些命令更改模型。

二、mvc mvp mvvm对比

性能上的评估 —— 当我们测试 UI 的性能时，就渲染帧而言，可以认为 MVP 是其中可靠性最高，阻塞最小的了。MVVM 中的数据绑定会产生额外的过载，很可能导致在执行复杂任务时性能严重下降。

兼容性 —— 当测试它们的兼容性时，MVVM 是其中最好的，这得益于它的数据绑定。MVP 的表现要好于 MVC，后者存在严重的重启问题。

拓展性 —— 说起设计模式，它们必须要有一定的拓展性，因此我们才可以在应用中不断添加新的功能和策略。由以上几点得知，MVP 和 MVVM 的区别较小，不过 MVVM 的可维护性略胜一筹。多数情况下，每次后续的拓展，采用 MVC 模式的应用需要改动更多的地方。

引用 —— 在 MVC 中，view 未直接引用 controller，而在 MVP 中，视图引用了 presenter，在 MVVM 中，view 引用了 view-model。

应用入口 —— 对于 MVC，应用程序的入口是 controller，而对于 MVP 和 MVVM，入口是 view。

三、原生js实现MVVM核心框架

1.基本定义
Object.defineProperty普通声明对象，定义和修改属性

语法：

Object.defineProperty(obj,prop,descriptor)

obj：要处理的目标对象

prop：要定义或修改的属性的名称

descriptor：将被定义或修改的属性描述符

描述符 descriptor有两种形式：数据描述符和存储描述符，他们两个共有属性：

configurable，是否可删除，默认为false，定义后无法修改

enumerable，是否可遍历，默认为false，定以后无法修改

数据描述符 value：该属性对应的值，默认为undefined。 writable：当且紧当为true时，value才能被赋值运算符改变。默认为false。

writable和configurable的区别是前者是value能否被修改，后者是value能否被删除。

存储描述符 get()：一个给属性提供getter的方法，默认为undefined。 set()：一个给属性提供setter的方法，默认为undefined。

共有属性 configurable设置为false时，其内部属性无法用delete删除；如要删除，需要把configurable设置为true。

注意：数据描述符和存储描述符不能同时存在，否则会报错

数据拦截 使用Object.defineProperty来实现数据拦截，从而实现数据监听。

换句话说，就是data内部的属性都被我们监控的，当调用属性时，就可以在上面做些手脚，使得返回的值变掉；当设置属性时，不给他设置。

当然这样做很无聊，只是想说明，我们可以在内部做手脚，实现我们想要的结果。

那observe这个函数应该怎么写呢？

2.观察者模式

观察者（Observer）模式的定义：指多个对象间存在一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。这种模式有时又称作发布-订阅模式、模型-视图模式，它是对象行为型模式

Subject 是构造函数，new Subject()创建一个主题对象，它维护订阅该主题的一个观察者数组数组，主题上有一些方法，如添加观察者addObserver、删除观察者removeObserver、通知观察者更新notify

Observer是构造函数，new Observer() 创建一个观察者对象，该对象有一个update方法，当调用notify时实际上调用全部观察者observer自身的update方法是构造函数

举例来说：Subject 是腾讯推出的公众号，new Subject() 是一个某个机构的公众号——新世相，它要维护订阅这个公众号的用户群体，新世相将用户分为两组，一组是忠粉就是 addObserver，一组是黑名单就是：removeObserver，它在忠粉组可以添加用户，可以在黑名单里拉黑一些杠精，如果有福利发放，它就会统治忠粉里的用户：notify。Observer 是忠粉用户群体，new Observer()是某个具体的用户——小王，他必须要打开流量才能收到新世相的福利推送：updata

主题添加观察者的方法subject.addObserver(observer)很繁琐，直接给观察者下方权限，给他们增加添加进忠粉组的权限

参考文献：

MVC，MVP，MVVM 对比

MVC，MVP 和 MVVM 的图示

用原生 JS 实现 MVVM 框架1——观察者模式和数据监控