前端框架与类库

一直不能分别前端框架和类库（我这个前端也是假的吧？），结合各位前辈的思想，整理了一下：

前端框架与前端类库的区别

使用框架前，我觉得很重要的一点是弄清类库（诸如JQuery）和框架（诸如angularJS)的区别在何处。

简单而言，类库，解决的是代码或者是模块级别的复用或者对复杂度的封装问题，例如将一个解决复杂问题的功能模块封装成一个函数，提供一个简单的接口。库它是一种工具，它提供了很多封装好的方法，用与不用取决于我们自身，即使用了也不会影响我们呢的代码结构。

而框架，更多的是对模式级别的复用和对程序组织的规范。这里的模式是指比如MVC，为了实现M和V的解耦，把复杂的耦合关系由经常变化的业务代码转移到不经常变化的框架内部消化。是面向一个领域来提供一套解决方案，提高开发效率，如果我们选择了使用某框架，就应该遵循该框架所规定的规则。

二者最主要的区别是：JQuery以DOM操作为中心，框架，准确来说是MVC框架，是以模型（model）为中心，而DOM操作是附加的。所以，以模型为中心最终达到的目的是带来一整套工作流程的变更，使得后台工程师可以编写前端的模型代码，把后台与前端打通，交互设计师处理UI跟模型的互动关系，UI设计师可以专注、无障碍的处理HTML源码，把它们以界面模板的形式提交给交互工程师。这一整套协作机制能大大提高开发效率。使用MVC框架使得前端任务更好的被解耦。

前端MVC框架思想

我们知道，传统的MVC模式将一个应用划分为——模型层（model）、视图层（view）、控制层（controller）。他们在应用系统中担当不同的角色，完成不同的任务。

• Model：即数据模型，用来包装和应用程序的业务逻辑相关的数据或者对数据进行处理，模型可以直接访问数据。

• View：视图用来有目的显示数据，在视图中一般没有程序上的逻辑，为了实现视图上的最新功能，视图需要访问它监视的数据模型。

• Controller：控制器调控模型和视图的联系，它控制应用程序的流程，处理事件并作出响应，事件不仅仅包括用户的行为还有数据模型上的改变。通过捕获用户事件，通知模型层作出相应的更新处理，同时将模型层的更新和改变通知给视图，使得视图作出相应改变。因此控制器保证了视图和模型的一致性。

那么在前端中的表现。前端MVC中各部分的职责：

我对前端的View的理解是，与页面上元素直接相关的部分都属于View。包括html，CSS和一部分直接控制页面元素的JS。可以从Model中得到数据，并将其显示到页面上。而关于数据的变更与请求，则统统交给Controller处理。

那么Controller呢？作为Model和View的粘合剂，Controller将View方面的请求转发给合适的Model，在必要时也会去更新View。而Controller本身也可以作为Model的观察者，获取Model的变更。而作为Controller本身，就不应该有涉及到页面元素的代码了。

最后谈谈Model，与后端的沟通、AJAX请求以及对数据的处理都属于Model的工作。Model本身不知道谁是View，谁是Controller。它只提供一些方法供View和Controller调用，并且将变更通知给它的观察者View或Controller。显然，Model与页面元素之间也解耦了。

虽然基于MVC模型的框架之间也有很多不同之处，但是总体而言，Model负责保存vier需要的数据以及数据处理逻辑，例如读写，更新，删除，验证，转换等。View负责接收并显示Model提供的数据以及接收用户的输入，并且响应事件，Model更新后及时将更新反馈回用户。Controller处理业务逻辑和事件逻辑。

 原文地址（https://www.cnblogs.com/coco1s/p/4040108.html）