傻瓜都能看懂的双向绑定原理

傻瓜都能看懂的双向绑定原理

想要理解这些概念最好是本身动手撸一个出来(感谢方方老师) 因此咱们先要从最开始的意大利面条式的代码一步一步过渡到MVC在到Vue 需求能够书籍的数量和名字进行计算和绑定

第一阶段:意大利面条式代码

https://github.com/Xia121/MVVM/tree/master/First

1.这种代码适用于2008年前那个jq统治天下的时间

换句或说 若是你还在写这种代码 这说明你 out 了

2.下一步咱们将会对这种老代码进行MVC封装

第二阶段:MVC式代码

1.首先咱们应该搞清楚什么是MVC或者说MVC表明了什么

2.咱们先从MVC模式这个概念的历史开始，MVC模式最先是起于smalltalk语言（据我了解）

后来渐渐被后台语言所应用与构建后台语言的架构好比ThinkPHP，SpringMVC，等等 为何会出现MVC模式呢

是由于一开始的意大利面条式代码乍看起来没有问题，可是一旦时间久了以后，这种代码想要维护和更新就像是在屎堆里面查找一快特定形状的屎，对开发人员的三观和头发是一种极大的挑战（亚马逊开发人员也有类似言论）

因此一些聪明的工程师在想为何咱们不把这些类似的代码套路总结一下造成业内的潜规则呢，因而各类设计模式就这样出现了今天咱们就从MVC开始提及（因此说前端的MVC模式就是从后台语言借鉴的）。
3. 下面 咱们介绍一下MVC究竟是表明了什么
M(Model)专门负责数据（好比前端从api接口获取到了数据）
V(View)专门负责表现（好比把梳理过的数据添加到HTML上）
C(Controller)负责其余逻辑（好比处理数据）
若是咱们来反思一下，会发现这个分类是无懈可击的：
每一个网页都有数据 每一个网页都有表现（具体为 HTML） 每一个网页都有其余逻辑 因而乎，MVC 成了经久不衰的设计模式
4. 如今咱们改进一下列子让她MVC起来 哈哈哈

github.com/Xia121/MVVM…

this[event.fnName].bind(this)
//做用是传递this 肯定this是let controller
复制代码

第三阶段:面向对象(模板代码)把重复的代码写到一个类

1.为何要用类或者也能够换成原型那是由于若是有n个页面须要按照上面那个代码其实要重复n次

若是写成类那么new一下就能够啦

github.com/Xia121/MVVM…

第四阶段:实现简单的观察者模式

1.这个问题解决「手动」调用 this.view.render(this.model.data),而出现的因此我改为 这个的方法说白了就是在跟节点上绑定一个change事件当数据出来时通知change事件自动进行更改 这样就不用手工调用了

github.com/Xia121/MVVM…

第五阶段:双向绑定和虚拟DOM的初步思想

1.在咱们写的例子中你会发现DOM更新其实就是直接.html() 这样特别粗暴的进行

2.若是咱们的例子里面有input并对根据input里面的数值进行计算的话 .html()这样就会把input

里面的数值覆盖掉除非咱们把数字记录到JS的data中进行储存(双向绑定初步思想)就这样出来了
3. 而虚拟DOM则是换了一种思想那就是我只改变有关于数字的部分DOM，先生成即将改变的DOM对象而后替换掉文档中的DOM(这样就是虚拟DOM的初步思想)

4.Angular 就是基于双向绑定而发明的，而 React 则是基于虚拟DOM思想。

5.如今咱们用Vue来替代代码中的View

github.com/Xia121/MVVM…

Vue 的双向绑定（也是 Angular 的双向绑定）有这些功能：

• 只要 JS 改变了 view.number 或 view.name 或 view.n （注意 Vue 把 data 里面的 number、name 和 n 放到了 view 上面，没有 view.data 这个东西）， HTML 就会局部更新
• 2.只要用户在 input 里输入了值，JS 里的 view.n 就会更新。

这就像双向绑定：JS 数据与页面元素互相绑定。

第六阶段:用vue完全替换掉MVC

由于Vue有不少功能 他的核心功能是双向绑定和虚拟DOM可是当他实现的View的数据绑定以后以为为何我不把Controller 和 model 的功能一块儿替换掉呢 因而咱们有了如今的 Vue 哈哈哈

github.com/Xia121/MVVM…

固然Vue确定不是这么简单的里面有不少的技术点在里面 这仅仅是一个入门归纳详细的我会再进行研究并发布的 请你们给我点个赞啊啊啊！！！