前端双向绑定的简单实现

最新推荐文章于 2024-07-02 10:28:56 发布
最新推荐文章于 2024-07-02 10:28:56 发布
阅读量622 收藏
点赞数
分类专栏： js 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h1311454244/article/details/107339923
版权

 

    本文学习了https://www.cnblogs.com/wjyz/p/11419073.html，完整的代码在最下面会展示

     有关于图形化的编程，我们往往会采用MVVM的模式来进行编程，将页面抽象成数据可以让编程变得更好把握，网页前端也是如此，频繁的dom操作势必造成逻辑上的混乱，当项目特别庞大的时候，比如开发前端Excel时，一个单元格合并操作会造成大量dom元素的变更,删除行和添加行也会造成dom的大量变更，造成逻辑上的混乱，维护和开发就会变得非常困难，因此，我们程序员只要修改和页面UI绑定的数据 (对象，数组，list一类的存在于内存中的数据结构)，然后通过程序去映射在界面上，这样的开发才能更好的维护。

    首先先看个案例。

var student = {"name":"hzy","age":20};
observe(student);
student.age = 24;
console.log('student.age is '+student.age);

我们定义了一个对象，调用了一个js函数，并且修改了age的值，但是在打印时并没有改变，这证明js是通过get,set方法来修改值的，js提供了一层包装，而提供编写get,set函数的方法我这里采用 Object.defineProperty(data, item , {｝）;

用法如下；

var student = {"name":"hzy","age":20};
Object.defineProperty(student,"proxyName",{
    get: function(){
        console.log("before get value");
        return student.name;
    },
    set: function(newVal){
        console.log("before set value");
        this["name"] = newVal;
    }
})
console.log(student.proxyName);
student.proxyName = "proxyNameHzy";
console.log(student.name);

MDN解释

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

这样我们就知道在set的时候是可以调用我们自定义方法的，这就为 js 对象的值改变时去更改界面样式提供了支持。

当然，用户是不会用proxyName来操作name的，用户的写法肯定还是student.name = newValue;但如果把Object.defineProperty的第二个参数换成name,是会造成栈溢出的，代码如下。

var student = {"name":"hzy","age":20};
Object.defineProperty(student,"name",{
    get: function(){
        return this[name];
    },
    set: function(newVal){
        this["name"] = newVal;
    }
})
student.name = "newNameHzy";

原因是无限递归了。

我们的目标自然也不是给某一个特定的对象的特定的值加set,而是任意对象的全部Object属性添加set。(function属性是不需要添加set的。)

代码如下

function observe(data) {
    if(typeof data !== 'object' || !data) return;
    Object.keys(data).forEach(item =>{
        let val = data[item];
        Object.defineProperty(data, item , {
                get: function(){
                    return val;
                },
                set: function(newVal){
                    console.log('before set');
                    val = newVal;
                }

        })
    })
}

var student = {"name":"hzy","age":20};
var cat = {"color":"orange","type":"orange cat"};
observe(student);
observe(cat);
student.name = "newName";
cat.color = "black";

这样用户在用自己的对象时不会有任何的不一样，但是在修改时可以加入我们的逻辑，我们可以在set时做脏值检查来修改前端的UI界面。

接下来我们思考用户至少需要提供给我们什么数据，经过思考得知用户至少给一个dom元素和一个值，这就够了。如下所示

 <div id="app">
        <div>{{inputData}}</div>
        <input type="text" id="input" v-model="inputData">
 </div>


function MyMVVM(options) {
    this.$options = options;
    this.$el = options.el;
    this.$data = options.data;
    new Compile(this);
}


let appData = {val: 123};

new MyMVVM({
      el: document.getElementById('app'),
      data: appData
})

接下来编写脏值检查逻辑，脏值的存储应该是一个数组，数组中放着一个对象的全部属性的脏值，也就是一个键值对的形式来表示脏值。脏值就是dom元素的value,新值就是js对象的值。watch就是用于脏值检查的对象。

option就是用户传递给我们的数据对象，也就是上面的new MyMVV(),nodeValue就是绑定的值这里是val，node就是和nodeValue绑定的dom元素了就是上面的<input>

function Watcher(option, nodeValue ,node){
    this.option = option;
    this.node = node;
    //利用这种方式可以和observe监听器的sub对象产生关联，应该可以采取更加巧妙的方法
    Sub.target = this;
    this.oldValue = this.option.$data[nodeValue];
    Sub.target = null;
}

Watcher.prototype.dirtyValueCheck = function(newVal){
    if(this.oldValue !== newVal){
        this.value = newVal;
        this.oldValue = newVal;
        this.node.value = newVal;
        this.node.textContent = newVal;
    }
}
function Sub(){
    this.subs = [];
}

Sub.prototype = {
    add: function(watch){
        this.subs.push(watch);
    },
    trigger: function(newVal) {
        this.subs.forEach(watch => {
            watch.dirtyValueCheck(newVal);
        })
    }
};

Sub.target = null;

Sub就是容器，循环遍历检查脏值，这个逻辑应该在observe中去调用,并且是在set中去使用。

function observe(data) {
    if(typeof data !== 'object' || !data) return;
    let sub = new Sub();
    Object.keys(data).forEach(item =>{
        let val = data[item];
        Object.defineProperty(data, item , {
                get: function(){
                    if(Sub.target){
                        sub.add(Sub.target);
                    }
                    return val;
                },
                set: function(newVal){
                    sub.trigger(newVal);
                    val = newVal;
                }

        })
    })
}

总的来说就是当用户传递的数据发生了修改会调用set,set调用sub的trigger然后遍历里面的watch,如果出现脏值就要利用dom去修改UI界面，这就完成了模型绑定view的能力。

那么接下来就是如何添加watch了，watch就是提供node和value的一个容器，node的来源自然是html中的document,而value的来源就是用户提供的一个对象了。那就需要去遍历dom树了，然后把和用户提供的数据有绑定关系的node添加到sub中就可以了。对于插值表达式来说也是一样的。

 

//compile
function Compile(option){
    this.option = option;
    this.el = option.$el;
    this.init();
}

Compile.prototype.init = function () {
    observe(this.option.$data);
    let fragment = document.createDocumentFragment();
    let child = this.el.firstChild;
    while(child) {
        fragment.append(child);
        child = this.el.firstChild;
    }
    let childNodes = fragment.childNodes;
    Array.from(childNodes).forEach(node => {
        if (node.nodeType === Node.ELEMENT_NODE) {
            let attrs = node.attributes;
            Array.from(attrs).forEach(attr => {
                let name = attr.nodeName;
                if (name === 'v-model') {
                   //双向绑定
                   bingModelView(node,attr,this);
                }
            })
        }
        //实现插值表达式
        interpolationRender(node,this);
    })
    //经过转化后的界面添加到节点下面就可以了
    this.el.appendChild(fragment);
}

function bingModelView(node,attr,bindData){
    let nodeValue = attr.nodeValue;
    let bindValue = bindData.option.$data[nodeValue];
    node.value = bindValue;
    new Watcher(bindData.option, nodeValue, node);
    node.addEventListener('input', e => {
        let newVal = e.target.value;
        if (bindValue !== newVal) {
            bindData.option.$data[nodeValue] = newVal;
        }
    })
}

function interpolationRender(node,bindData){
    let reg = /\{\{(.*)\}\}/;
    let text = node.textContent;
    if (reg.test(text)) {
        let nodeValue = RegExp.$1;
        let val = bindData.option.$data[nodeValue];
        node.textContent = val;
        new Watcher(bindData.option, nodeValue, node);
    }
}

这样就完成了双向绑定最为基础的功能，还有很多功能没有实现，也有非常多的细节没有考虑到，以后会逐渐的完善。

下面附上完整的代码

MVVM.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src = "./winston_mvvm.js"></script>
    <title>Document</title>
</head>
<body>
    
    <div id="app">
        <div>{{inputData}}</div>
        <input type="text" id="input" v-model="inputData">
    </div>
    <script>
        function MyMVVM(options) {
            this.$options = options;
            this.$el = options.el;
            this.$data = options.data;
            new Compile(this);
        }
        let appData = {"inputData": 123};
        new MyMVVM({
            el: document.getElementById('app'),
            data: appData
        })

    </script>
</body>
</html>

winston_mvvm.js

function Sub(){
    this.subs = [];
}

Sub.prototype = {
    add: function(watch){
        this.subs.push(watch);
    },
    trigger: function(newVal) {
        this.subs.forEach(watch => {
            watch.dirtyValueCheck(newVal);
        })
    }
};

Sub.target = null;

function observe(data) {
    if(typeof data !== 'object' || !data) return;
    let sub = new Sub();
    Object.keys(data).forEach(item =>{
        let val = data[item];
        Object.defineProperty(data, item , {
                get: function(){
                    if(Sub.target){
                        sub.add(Sub.target);
                    }
                    return val;
                },
                set: function(newVal){
                    sub.trigger(newVal);
                    val = newVal;
                }

        })
    })
}

//watcher
function Watcher(option, nodeValue ,node){
    this.option = option;
    this.node = node;
    //利用这种方式可以和observe监听器的sub对象产生关联
    Sub.target = this;
    this.oldValue = this.option.$data[nodeValue];
    Sub.target = null;
}

Watcher.prototype.dirtyValueCheck = function(newVal){
    if(this.oldValue !== newVal){
        this.value = newVal;
        this.oldValue = newVal;
        this.node.value = newVal;
        this.node.textContent = newVal;
    }
}

//compile
function Compile(option){
    this.option = option;
    this.el = option.$el;
    this.init();
}

Compile.prototype.init = function () {
    observe(this.option.$data);
    let fragment = document.createDocumentFragment();
    let child = this.el.firstChild;
    while(child) {
        fragment.append(child);
        child = this.el.firstChild;
    }
    let childNodes = fragment.childNodes;
    Array.from(childNodes).forEach(node => {
        if (node.nodeType === Node.ELEMENT_NODE) {
            let attrs = node.attributes;
            Array.from(attrs).forEach(attr => {
                let name = attr.nodeName;
                if (name === 'v-model') {
                   //双向绑定
                   bingModelView(node,attr,this);
                }
            })
        }
        //实现插值表达式
        interpolationRender(node,this);
    })
    //经过转化后的界面添加到节点下面就可以了
    this.el.appendChild(fragment);
}

function bingModelView(node,attr,bindData){
    let nodeValue = attr.nodeValue;
    let bindValue = bindData.option.$data[nodeValue];
    node.value = bindValue;
    new Watcher(bindData.option, nodeValue, node);
    node.addEventListener('input', e => {
        let newVal = e.target.value;
        if (bindValue !== newVal) {
            bindData.option.$data[nodeValue] = newVal;
        }
    })
}

function interpolationRender(node,bindData){
    let reg = /\{\{(.*)\}\}/;
    let text = node.textContent;
    if (reg.test(text)) {
        let nodeValue = RegExp.$1;
        let val = bindData.option.$data[nodeValue];
        node.textContent = val;
        new Watcher(bindData.option, nodeValue, node);
    }
}

一见无始全剧终
关注
专栏目录
前端面试准备（框架原理）--- 双向绑定的实现
dreamer_sen的博客
06-21 994
简单介绍 我的理解，所谓的双向绑定，其实就是将Model和View绑定在一起，任何一方改变的同时，改变另外一方。 在流行框架中，react是单向绑定（只支持Model改变=>View改变），要实现双向绑定得加value和onChange事件从而实现（View改变=>调起事件=>改变Model）。 而vue是双向绑定的，因为它事先已经帮我们绑定好了事件。 什么是Model 我理解为Model就是一个JS对象，用来存储页面中的数据。 什么是View 我理解是页面中所显示的DOM对象的集合。 怎
Nuxt.js 数据双向绑定的实现
10-17
在了解Nuxt.js中数据双向绑定的实现之前，首先需要理解什么是数据双向绑定。数据双向绑定是前端开发中的一种概念，当数据模型发生变化时，视图会自动更新；当用户在视图界面上作出操作时，数据模型也会相应地进行...
Strve.js实现简单的数据双向绑定
主要领域：前端开发
05-23 321
用过Vue的小伙伴都知道，v-model指令可以实现数据双向绑定。双向绑定除了数据驱动 DOM 外， DOM 的变化反过来影响数据，是一个双向关系。 那么我们今天来用Strve.js来实现一下，不到30行代码。 源码： 效果： Github https://github.com/maomincoding/strve ...
js双向绑定数据
sinat_38992528的博客
05-17 325
转自：http://www.jb51.net/article/107917.htm前端数据的双向绑定方法前端的视图层和数据层有时需要实现双向绑定(two-way-binding)，例如mvvm框架，数据驱动视图，视图状态机等，研究了几个目前主流的数据双向绑定框架，总结了下。目前实现数据双向绑定主要有以下三种。1、手动绑定比较老的实现方式，有点像观察者编程模式，主要思路是通过在数据对象上定义get和...
前端_双向绑定
qq_39707849的博客
10-11 223
html> html ng-app="myapp"> head> meta charset="UTF-8"> title>Titletitle> script src="../angular-1.5.5/angular.min.js">script> script> //声明主模块 var myapp = angular.module
JS双向数据绑定的原理介绍
坤小的专栏
11-08 1573
Document 您输入的文本是：{{ msg }} 点我修改文本 <script> function hmVue(obj) { //querySelector默认只会获取满足选择器条件的第一个元素 // vue的挂载点el...
深入理解vue.js双向绑定的实现原理
10-20
一个简单的双向绑定示例： ```html <span>{{ message }} ``` ```javascript var vm = new Vue({ data: { message: 'Hello' } }); ``` Vue.js 实现了以下功能： 1. 输入框与 `message` 绑定，输入内容改变时，...
Vue 3.0双向绑定原理的实现方法
10-16
Vue.js作为前端开发中广泛应用的JavaScript框架，其核心功能之一便是实现了数据的双向绑定。Vue3.0相较于Vue2.0在双向绑定的数据劫持方式上做了改进，使用了Proxy代理代替了Object.defineProperty来实现数据响应式...
详解vue的双向绑定原理及实现
10-17
了解Vue双向绑定的原理及实现不仅有助于使用Vue框架，更可以提升对前端框架设计思路的理解。 Vue双向绑定原理主要依赖于数据劫持和发布者-订阅者模式。数据劫持是通过JavaScript内置的Object.defineProperty()方法...
Vue数据双向绑定底层实现原理
10-15
Vue.js 是一款流行的前端框架，它的核心特性之一就是数据双向绑定。这个特性使得开发者在操作数据时，视图能够自动同步更新，反之亦然。Vue 实现这一功能的关键在于其响应式系统，它通过深入 JavaScript 的内部机制...
js实现左右双向选择器
10-10
js非常简单的实现了左右双向选择器，非常简单，拿过去就能用，希望能帮助到你
（前端）1.vue的双向绑定的原理是什么？
wgf1997的博客
01-12 217
vue的双向绑定的原理是什么？（2020/01/12） 前台UI数据改变实时反应在ViewModel上，后会通过ajax传到后台model上 后台改变的也会通过ViewModel响应到前台UI上 当data 有变化的时候它通过Object.defineProperty(）方法中的set方法进行监控，并调用在此之前已经定义好data 和view的关系了的回调函数，来通知view进行数据的改变 而view 发生改变则是通过底层的input 事件来进行data的响应更改 ...
双向绑定
想搞全栈的前端
06-17 905
前言 单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新。 有单向绑定，就有双向绑定。如果用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定。 双向绑定 什么情况下用户可以更新View呢？填写表单就是一个最直接的例子。当用户填写表单时，View的状态就被更新了，如果此时MVVM框架可以自动更新Model的状...
Vue的双向数据绑定原理（极简版）
热门推荐
田兴的博客
01-03 1万+
答： vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。 具体步骤： 第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter 这样的话，给这个对象的某个值赋值，就会触发setter，那么...
前端如何实现数据双向绑定
weixin_34008805的博客
11-30 1146
Object.defineProperty是ES5中的方法，它可以直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。 语法： Object.defineProperty(obj, prop, descriptor) 参数： obj 要在其上定义属性的对象。 prop 要定义或修改的属性的名称。 descriptor 将被定义或修改的属性描述符。 descriptor 可...
03数据绑定
baidu_41922918的博客
07-23 431
Vue中有2种数据绑定的方式： 1.单向绑定(v-bind)：数据只能从data流向页面。 2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。 备注： 1.双向绑定一般都应用在表单类元素上（如：input、select等） 2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。 3.v-bind:可以简写为: <!DOCTYPE html> <html> <head> &l
Vue.js 双向绑定原理：深入解析 v-model
最新发布
My_wife_QBL的博客
07-02 2219
Vue.js 是一个流行的前端框架，以其简洁的语法和强大的功能受到开发者的喜爱。其中，双向绑定是 Vue.js 的核心特性之一，通过 v-model 指令实现。本文将深入探讨 v-model 的原理，包括其背后的数据流、实现机制以及在不同场景下的应用。
Javascript实现双向绑定
qq_40043424的博客
02-21 112
     此方法借助Object.defineProperty进行数据劫持，利用了对象属性描述符中的存取描述符实现的数据双向绑定： <body> <div class="content"> <input type="text" name="txt" id="txt" value="" /> <h1...
JS实现一下双向绑定
web_Leeleon的博客
04-25 546
<div id="app"> <input type="text" id="txt"/> <p id="show-text"></p> </div> var obj = {}; Object.defineProperty(obj,"txt",{ get:function(){ ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值