忧郁的大能猫

好奇的探索者，理性的思考者，踏实的行动者。

Table of Contents:

我们所说的前端框架与库的区别？

在于代码控制权的区别

Library

库，本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者

• 代表：jQuery
• jQuery这个库的核心：DOM操作，即：封装DOM操作，简化DOM操作

Framework

框架，是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码
* 框架规定了自己的编程方式，是一套完整的解决方案
* 使用框架的时候，由框架控制一切，我们只需要按照规则写代码

主要区别

• You call Library, Framework calls you
• 核心点：谁起到主导作用（控制反转）
  • 框架中控制整个流程的是框架
  • 使用库，由开发人员决定如何调用库中提供的方法
• 好莱坞原则：Don’t call us, we’ll call you.
• 框架的侵入性很高（从头到尾）

MVVM的介绍

当业务复杂后分化分层是一种需求的必然结果

web中的分化出的层次
界面
数据
事件
业务

MVC的一般流程是这样的：View（界面）触发事件-->Controller（业务）处理了业务，然后触发了数据更新-->不知道谁更新了Model的数据-->Model（带着数据）回到了View-->View更新数据

Model-View-ViewModel（MVVM）
而View和ViewModel间是直接交互，用数据“绑定”的形式让数据更新的事件不需要开发人员手动去编写特殊用例，而是自动地双向同步。数据绑定你可以认为是Observer模式或者是Publish/Subscribe模式，原理都是为了用一种统一的集中的方式实现频繁需要被实现的数据更新问题。

实际上，现在Web MVVM主要并不是用在了Web或者Wap上，而是移动App上。

MVC

• M: Model 数据模型（专门用来操作数据，数据的CRUD）
• V：View 视图（对于前端来说，就是页面）
• C：Controller 控制器（是视图和数据模型沟通的桥梁，用于处理业务逻辑）

MVVM组成

• MVVM => M / V / VM
• M：model数据模型
• V：view视图
• VM：ViewModel 视图模型

优势对比

• MVC模式，将应用程序划分为三大部分，实现了职责分离
• 在前端中经常要通过 JS代码 来进行一些逻辑操作，最终还要把这些逻辑操作的结果现在页面中。也就是需要频繁的操作DOM
• MVVM通过数据双向绑定让数据自动地双向同步
  • V（修改数据） -> M
  • M（修改数据） -> V
  • 数据是核心
• Vue这种MVVM模式的框架，不推荐开发人员手动操作DOM

Vue中的MVVM

虽然没有完全遵循 MVVM 模型，Vue 的设计无疑受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的简称) 这个变量名表示 Vue 实例

学习Vue要转化思想
不要在想着怎么操作DOM，而是想着如何操作数据！！！

Vue开发入门看这篇文章就够了
Webpack 究竟解决了什么问题？