## jQuery 和框架的区别
- 数据和视图的分离,解耦(开放封闭原则)
- 以数据驱动视图,只关心数据变化,DOM 操作被封装
## MVC
全称是 Model View Controller,是模型 (model)-视图 (view)-控制器 (controller) 的缩写。它表示的是一种客户端软件开发框架。
**特点:单项通讯**
![](https://images2015.cnblogs.com/blog/1017946/201707/1017946-20170708120349925-613338932.png)
- 视图(View):用户界面。View 传送指令到 Controller
- 控制器(Controller):业务逻辑。Controller 完成业务逻辑后,要求 Model 改变状态
- 模型(Model):数据保存。Model将新的数据发送到 View,用户得到反馈
**MVC 的缺点**
虽然 View 和 View Controller 是技术上不同的组件,但它们几乎总是手牵手在一起,成对的。在典型的 MVC 应用里,许多逻辑被放在 View Controller 里。它们中的一些确实属于 View Controller,但更多的是所谓的“表示逻辑(presentation logic)”,以 MVVM 属术语来说,就是那些将 Model 数据转换为 View 可以呈现的东西的事情,例如将一个 `NSDate` 转换为一个格式化过的 `NSString`。
我们的图解里缺少某些东西,那些使我们可以把所有表示逻辑放进去的东西。我们打算将其称为 “View Model” —— 它位于 View/Controller 与 Model 之间:
![](https://objccn.io/images/issues//issue-13/mvvm.png)
这个图解准确地描述了什么是 MVVM:一个 MVC 的增强版,我们正式连接了视图和控制器,并将表示逻辑从 Controller 移出放到一个新的对象里,即 View Model。MVVM 听起来很复杂,但它本质上就是一个精心优化的 MVC 架构
## MVP
MVP 是从经典的模式MVC演变而来,它们的基本思想有相通的地方:Controller/Presenter负责逻辑的处理,Model提供数据,View负 责显示。
MVP与MVC有着一个重大的区别:在MVP中View并不直接使用Model,它们之间的通信是通过Presenter (MVC中的Controller)来进行的,所有的交互都发生在Presenter内部,而在MVC中View会从直接Model中读取数据而不是通过 Controller。
![](https://images0.cnblogs.com/blog/118538/201401/02135353-876ec115294b4d59a8641f7606d75c28.x-png)
在MVP里,Presenter完全把Model和View进行了分离,主要的程序逻辑在Presenter里实现。而且,Presenter与具体的 View是没有直接关联的,而是通过定义好的接口进行交互,从而使得在变更View时候可以保持Presenter的不变,即重用!
## MVVM
### 概念
是 Model-View-ViewModel 的简写,MVVM 是一个相当新的架构。
MVVM 在使用当中,通常还会利用双向绑定技术,使得 Model 变化时,ViewModel 会自动更新,而 ViewModel 变化时,View 也会自动变化。
MVVM 基本上就是 MVC 的改进版,所以很容易就能看到它如何被整合到现有使用典型 MVC 架构的应用中。
### 优缺点
优点:
1. 方便测试。在MVC下,Controller基本是无法测试的,里面混杂了个各种逻辑,而且分散在不同的地方。有了MVVM我们就可以测试里面的viewModel,来验证我们的处理结果对不对。
2. 便于代码的移植。可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑。
3. 独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计
缺点:
1. 对于交互很少的webapp,MVVM略显沉重
2. 对于大型webapp,所有逻辑和数据都在ViewModel里,ViewModel会越来越复杂。
### MVVM 框架的三大要素
- 响应式:vue如何监听到 data 的每个属性变化?
- 模板引擎:vue 的模板如何被解析,指令如何处理?
- 渲染:vue 的模板如何被渲染成 html ?以及渲染过程
- 说明
- CSS与HTML
- BFC的特性及其常见应用
- CSS深入理解之margin
- CSS深入理解之line-height
- CSS盒模型相关知识
- CSS知识总结
- HTML知识总结
- 三栏布局五种方式
- JavaScript内置对象
- 1.循环
- 2.数组方法对比
- 3.字符串实用常操纪要
- JavaScript核心
- var、let、const定义变量
- this 的指向问题详解
- 箭头函数
- ES6部分知识归纳
- ES6的Class
- Promise和Async/await
- 面向对象的概念及JS中的表现
- 创建对象的九种方式
- JS的继承
- 闭包总结
- 构造函数与作用域
- 原型与原型链
- 函数的四种调用模式
- apply、call、bind详解
- JavaScript应用
- 1.JavaScript实现深拷贝与浅拷贝
- 2.函数防抖与节流
- 3.无阻塞脚本加载技术
- DOM
- 如何写出高性能DOM?
- 事件探秘
- 事件委托
- 操作DOM常用API详解
- 重排和重绘
- 运行机制与V8
- 浏览器的线程和进程
- Vue.js
- Vue.js知识点总结
- Vue-Router知识点总结
- 父子组件之间通信的十种方式
- 优化首屏加载
- 关于Vuex
- 前端路由原理及实现
- 在Vue.js编写更好的v-for循环的6种技巧
- 12个Vue.js开发技巧和窍门
- 网络协议
- HTTP缓存机制
- UDP协议
- TCP协议
- HTTPS协议
- HTTPS的背景知识、协议的需求、设计的难点
- HTTPS与HTTP的区别
- 框架与架构
- MVC、MVP、MVVM
- Gulp与Webpack的区别
- Angular React 和 Vue的比较
- 虚拟DOM和实际的DOM有何不同?
- 架构问题
- 工程化
- npm link命令
- npm scripts 使用指南
- 前端工程简史
- 常见的构建工具及其对比
- Webpack基本配置与概念
- 设计模式
- 工厂设计模式
- 单例设计模式
- 适配器模式
- 装饰器模式