关于前端知识中框架概念部分的详细介绍

1、为什么要学习流行框架？

1. 企业：为了提高效率，因为时间就是金钱。
2. 开发人员：提高了开发效率
3. 发展进程：
   • JS=>JQuery=>模板引擎=>框架时代（Angular(2+)、React、Vue）
   • 好处：不用直接操作DOM，更多关注业务逻辑

2、前端框架与库的区别？

1. 功能层面
   • 框架：提供全方位功能，是比较齐全的
   • 库：以提供API为主，像JQuery提供了大量的API，[框架]是提供基础性的服务为主，vue有虚拟Dom的支持，有双向数据绑定的支撑，像这些呢，都会一些基础性的服务，可以提升开发效率。
     • jquery库：操作DOM+网络请求 => 比如获取按钮，给按钮绑定事件…等
2. 代码层面
   • 库：是为了实现某个功能，而调用某个函数 => 如：使用轮播图时，引入轮播图的库放置到代码中使用
   • 框架：帮助我们运行编写好的代码
     • 步骤1：初始化框架自身的一些行为 => 框架要运行，必须要先跑起来
     • 步骤2：执行你编写好的代码 => 由框架来帮助执行
     • 步骤3：释放一些资源；
3. 总结
   • 库：单一某个层面，可以任何地方调用库，也是可以替代的，在pc端使用jquery库，在移动端可以使用更轻量级的zepto来实现dom操作
   • 框架：大而沉，把代码给框架去执行。是一套完整的解决方案；对项目的侵入性较大，我们的代码是只写代码段的，不会写完整的页面，会把自己写的代码段交给框架，让框架帮我们跑起来，项目如果需要更换框架，则需要重新架构整个项目，因为它不如库这么灵活

3、MV*架构模式是什么？

1. 解释：MV是指好几种架构模式，这里的*是泛指，是指mv开头的一系列架构模式，而vue框架就属于这种框架模式(MVVM)的一种
2. 核心思想：都是将应用分层。
3. 拆解名词：MV系列架构中，M和V分别指Model层和View层，但其功能会因为框架的不同而变化。
   • Model层是数据模型，用来存储数据；
   • View层是视图，展示Model层的数据。
   • 总结：虽然在不同的框架中，Model层和View层的内容可能会有所差别，但是其基础功能不变，变的只是 数据的传输方式

4、Web1.0时代

1. Web1.0时代 ：
   • 前/后端未分离阶段，在Web1.0时代，并没有前端的概念。
   • 开发一个应用多数采用ASP.NET/Java/PHP编写，项目通常由多个.aspx/.jsp/.php文件构成，每个文件同时包含了HTML、CSS、JavaScript、C#/Java/PHP代码。
2. 服务端比较重：
   • 有些内容横跨服务端和客户端。
   • JSP在服务端生成，调用server获取数据，在jsp页面中进行封装，把前端的代码混成一个，返给前端。
3. 优势及劣势：
   • 这种架构的好处是简单快捷，但是，缺点也非常明显：JSP代码难以维护，前后端未分离，混合在一起，没有前端的概念，后端人员责任较重。

4.1、后端MVC

1. 为了让开发更加便捷，代码更容易维护，前后端职责更清晰，便衍生出了MVC开发模式和框架。
2. 典型的框架就是Java(Spring、 Structs、 Hibernate)、.Net（ASP.NET MVC）。
3. 这时的MVC仅限于服务端
   

4.1、存在问题

1. 前端页面开发效率不高 => 后端人员兼顾前端开发，页面效果又不是很完美
2. 前后端职责不清 => 一定的分离，未彻底分离，view层，依赖jsp实现模板文件的渲染

5、Web2.0时代—当前时代

• 自从Gmail的出现，Ajax技术风靡全球。
• 有了Ajax技术之后，前/后端的职责更加清晰了，因为前端可以通过Ajax与后端进行数据交互。

1

6、前端MVC(Model-View-Controller)

1. 前端的MVC与后端类似，M（Model）模型，V（View）视图，C（controller）控制器。
2. 它是MVC、MVP、MVVM这三者中最早产生的架构，其他两个架构模式是以它为基础发展而来的。
   

6.1、存在问题

1. 数据流混乱，可维护性太差。控制器可以修改模型，模型变了，会修改视图；但是也会有视图变了，修改模型。最后是视图修改的模型，还是控制器该的模型，不确定。
2. 由于很多开发者会在view层写逻辑代码，导致view层庞大，而控制层Controller变得单薄（就是简单的数据监听，再调用model层的更改逻辑）。
3. 在前端开发中，缺少MVP开发模式，是因为AngularJS早早的将MVVM架构模式带入了前端。MVP模式在前端开发中并不常见，但是在安卓、IOS等原生开发中，比较常见。

7、MVP（Model-View-Presenter）

1. 传统的MVC模式虽然可以管理页面系统中的数据，视图，控制器，但是在视图层创建界面时常常会用到模型层内的数据，使模型层和视图层耦合在一起，降低了复用性和灵活性。
2. MVP与MVC很接近，P指的是Presenter, Presenter可以理解为一 个中间人，它负责着View和Model之间的数据流动，防止View和Model之间直接交流。

7.1、存在问题

1. 由于View层和Model层都需要经过Presenter层，导致Presenter层比较复杂，维护起来也会有一定的问题；
2. 而且，因为没有绑定数据，所有数据都需要Presenter层进行“手动同步”，代码量较大，虽然比起MVC框架好很多，但还是有比较多冗余部分。

8、MVVM模式

• 为了让View层和Model层的数据始终保持一致，MVVM框架出现了。
• MVVM是前端视图层的概念，主要关注于 视图层分离，也就是说：MVVM把前端的视图层，分为了 三部分 Model, View , VM ViewModel(视图模型)

1. MVVM是这样分割的：M、V、VM。
2. 上图中最右边的就是M—>model，最左边就是V—>View，中间就是VM—>ViewModel，VM起到连接HTML和JSON数据的桥梁作用。
3. 如果JSON数据层改变，那么就通过VM在内存中维护的 虚拟 DOM 重新点对点刷新 View 界面，点对点起到提高效率作用；
4. 然后，如果View的某个地方有数据改变，比如用户在input标签里输入内容，有数据变动，那么就映射到Model里面，这就是VM的监听作用。

8.1、特性

1. 数据驱动视图
   • 好处：当Model层发生数据变化时，页面会自动重新渲染。开发人员只维护好数据的变化，页面结构会被VM会自动渲染出来。
   • ViewModel通过实现一套数据响应式机制自动响应ModeI中数据变化，同时，Viewmodel会实现一套更新策略自动将数据变化转换为视图更新。
   • 注意：数据驱动视图是单向的数据绑定
2. 双向数据绑定
   • 前面学习原生JS时，表单收集用户输入，通过ajax提交数据。
   • 用户在填写表单时，双向数据绑定可以帮助开发人员在不操作DOM的前提下，自动把用户填写的内容同步到数据源中
   • 页面中的input值发生变化，vm会自动把最新的值取出来，更新到数据。
   • 好处：开发人员不再需要手动操作DOM元素，来获取表单元素输入的最新值；js数据的变化，会被自动渲染到页面上。

9、总结

1. 这三个架构模式，反应了前端领域的发展进程，共同目标都是职责划分（分层），解决model层和view的耦合度问题，切分成功能鲜明的各个层，提高可读性和可维护性。
2. MVC模式出现较早主要应用在后端，如Spring MVC、ASP.NET MVC等，随着Ajax出现，有了纯粹的前端。它的优点是分层清晰，缺点是数据流混乱，灵活性不高，带来维护性问题。
3. MVP模式在是MVC的进化形式，Presenter作为中间层负责MV通信, 解决了两者耦合问题,但P层过于臃肿会导致维护问题。
4. MVVM模式在前端领域有广泛应用。 跟 MVP 架构对比：MVVM中ViewModel层把Model层和View 层的数据同步自动化了，解决了 MVP 架构中数据同步比较麻烦的问题，不仅减轻了 ViewModel 层的压力，同时使得数据处理更加方便，只需告诉 View 层展示的数据是 Model 层中的哪一部分即可。
5. Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层，它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。