一入前端深似海之如何实现一个双向数据绑定

前言

简单介绍一下双向数据绑定实现的是一个什么样的东西。首先有两个东西，他们分别是：
V-视图层
M-数据层
1、视图层传向数据层：V发生改变，M也发生改变
2、数据层传向视图层：M发生改变，V也发生改变

那么接下来我们也将自己书写代码实现这样两种功能，从而实现双向数据绑定。最终实现的效果如图：

修改input框里面的内容，p标签内容也实时相对应发生改变，data里面的数据也会发生改变

一、先奉献上自己完整的代码

这里我是基于jQuery进行的代码编写，其中的方法将在下面进行详细的解析

二、创建自己的绑定规则

这里关于指令，我没有做作用域的包裹，比较完善的是需要用一个controller指令讲需要展示的view视图层包裹起来的。如果有想法的小伙伴们可以在最后自行去思考，接下来先直接上html代码

这里我制定的双向指令是xq-model，内容的解析规则是{{}}。大家有自己喜欢的指令可以自行制定。

三、实现自己的绑定规则

我们现在需要做的就是一步一步去实现我们自己规定的一些绑定规则

首先我们需要做的第一步就是渲染出input中的xq-model指令指定的数据

实现inputChange方法

到这里，对于input框的渲染及data数据的双向算完成了第一个了，接下来我们需要实现的便是对于标签的渲染

实现labelChange方法

最后实现input框输入，实时修改对应的标签的值labelRender方法

最后我们调用一下实现好的VM

好了，属于我们自己的一个简单的双向数据绑定至此便算是完成了，大家也可以自己将这个进行不断的完善，自己去实现一个完整的双向数据绑定。