精华内容
下载资源
问答
  • Blast 是一个用 JavaScript 编写的小巧而强大的双向数据绑定框架 它支持: 视图模型和 DOM 之间的双向数据绑定 将您的模型序列化为 JSON 绑定对任意事件(keyup、change 等)的更改 观察已经存在的 javascript ...
  • 这里介绍下双向数据绑定好处: View.textField 跟 ViewModel.text 绑定,用户在输入框textField输入"Hello World",text也会响应式更新,此时text = @"Hello World", 我们只要对text进行处理 如果我们从网络获取Model...
  • 主要介绍了AngularJS框架中的双向数据绑定机制,结合实例形式分析了AngularJS双向数据绑定机制的原理及实现方法,以及减少需要重复开发代码量的优势,需要的朋友可以参考下
  • 主要介绍了Vue 框架之键盘事件、健值修饰符、双向数据绑定问题,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 双向数据绑定原理(vue) 如何设计搭建自己的框架 代码暂略,详见,github [地址]https://github.com/yyccmmkk/Bi-directionalDataBindingDemo 什么是单向什么是双向? 单向指是数据从model流向view 双向是在...

    本文章信息点

    1. 双向数据绑定原理(vue)
    2. 如何设计搭建自己的框架
    3. 代码暂略,详见,github [地址]https://github.com/yyccmmkk/Bi-directionalDataBindingDemo

    什么是单向什么是双向?

    单向指是数据从model流向view

    双向是在单向的基础上数据再从view 流向model。

    双向数据绑定原理

    相信很多人看过很多双向数据绑定原理相关文章,多半看的一头雾水,看完仍然写不出一个简单的demo 框架,根本不知道为什么要这样做?主要原因是因为没有整理清楚双向数据绑定的需求,因为所有的代码逻辑实现都是围绕需求展开,所以下面会围绕需求展开,再细解如何实现这些需求,从整体逻辑上打通每一环最终实现双向数据绑定框架。所谓万剑归宗、殊途同归,需求是一样的,所以最终的实现也都将大同小异,原理自然而然显现。

    简单的说是这样的,

    初次模板与数据渲染时,监听数据每个属性的每次调用(通过getter实现),并给其属性添加观察者。监听数据的每个属性变更(通过setter实现),并通知与其相关的观察者,观察者调用自身的更新方法更新view。扫描模板时,找到双向绑定指令,并绑上指定事件,事件触发后更新数据,数据更新触发单向绑定逻辑 view  更新。

    说的太简单很多人对细节不清楚,说的细了就是后面的长篇大论了。

    相信很多人的疑问有像下面这些的:

    观察者只是抽象概念,

    1. 它具体实现是什么?
    2. 为什么同一个属性不只一个观察者?
    3. 又在什么时候添加的?
    4. 观察者添加到哪了?
    5. 每个观察者的更新方法又是怎么确定的?

     

     

    如何设计实现

    单向、双向数据绑定是如何实现的呢?假如现在要写一个双向绑定框架要如何设计呢?

    单向数据绑定需求可以简单的抽象为:将数据和模板进行某种绑定,数据中的某个属性值发生变化时,属性对应的模板和新值进行处理更新UI(移除旧的UI插入新的UI)。

    双向数据绑定需求可以简单的抽象为:在单向的基础上,给特定元素(input 、textarea等)绑定指定事件,并将新值更新到数据,数据更改触发单向数据绑定逻辑,更新UI中相关属性绑定。

    通过上面的简单分析,就可以发现"模板"相关需求需要用节点操作来实现,因为需要给特定元素绑定事件,要处理元素中的指令,必定要对模板中每一个节点进行遍历,并对每个节点的属性进行遍历。

    下面会逐步分析需求,再将每个需求再细化就可以得到完整的需求,最后实现这些需求。

    需求点分析

    1. 将数据的每一个属性与相对应的模板建立联系,数据属性值变更时view进行更新
      • 监听数据所有属性的修改包括值的属性的修改
      • 如何找到属性对应的模板
      • 如何将数据属性与其对应模板建立链接
      • 将数据新值更新到view
    2. 将特定元素的指定事件回馈到数据,数据被修改,同时与些数据相关view更新
      • 监听指定元素的指定事件,并将新值赋值给数据,数据被修改触发view更新逻辑

    【1.1解决思路】

    数据属性的读写可以通过设置getter setter实现,通过Object.defineProperty()方法设置。 写一个方法递归的处理数据的每个属性不是什么难事。代码暂略,详见,github [地址]https://github.com/yyccmmkk/Bi-directionalDataBindingDemo

    【1.2解决思路】

    我们需要一个compiler 对模板的每一个节点进行扫描分析,分板当前节点是否有指令(插值表达式、单向数据绑定、双向数据绑定,事件绑定等)。如果有指令,找到当前指令相关的数据属性,当前节点即为'模板'(ps:数据更新时更样的节点)。

    【1.3解决思路】

    当compiler 对节点分析时如果找到指令,则给该指令相关的属性的更新列表,添加一个watcher实例,该实例包含渲染相关‘模板’(ps:当前扫描到的节点) 

    【1.4解决思路】

    在1.1中对所有数据属性进行监听时,为每一个属性挂载一个对象(实际上是闭包),该对象拥有一个notify方法,还拥有一个值为数组的list 属性,list 中存放的是当前属性相关的 watcher实例,该实例在1.3(模板解析) 时生成并添加进来,该实例拥有一个update 方法,用来更新view; 当属性值变化时,调用相关必包中的notify 方法,该方法遍历list 中的每一个watcher 实例,并调用该实例的update 方法,upadate方法会在1.3(模板解析)时根据指令生成相关update 方法。本demo 中闭包对象是watcher 类来构造,也可以分开。

    以上只是粗枝大叶的整个逻辑分析,细节还有很多,比如:指令解析,管道符解析,指令表达式解析,插槽(用以标记更新时插入点),需要销毁节点等,后续整理出来,计划搞一个系列文章,比如模板指令解析如何进行等,本demo 也有点粗造有时间吧整理一下,以后像虚拟dom的可以搞一搞,像生命周期钩子有了大框架要加也不是很困难,等以后细化再更新。

    因精力有限。。。今日到此(未完待续)

     

     

     

     

     

    展开全文
  • vue.js的一大功能便是实现数据双向绑定。这篇文章主要介绍了vue自定v-model实现 表单数据双向绑定的相关知识,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 最近看到有些人说vue是双向数据绑定的,有些人说vue是单向数据流的,我认为这两种说法都是错误的,vue是一款具有响应式更新机制的框架,既可以实现单向数据流也可以实现数据的双向绑定。 2 单向数据流与数据双向绑定...
  • Vue 双向数据绑定原理

    万次阅读 2019-03-07 14:20:57
    vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来...vue实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set...

          vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的settergetter,在数据变动时发布消息给订阅者,触发相应的监听回调。

          

     

     

     vue实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。它接收三个参数,要操作的对象,要定义或修改的对象属性名,属性描述符。重点就是最后的属性描述符。属性描述符是一个对象,主要有两种形式:数据描述符和存取描述符。这两种对象只能选择一种使用,不能混合两种描述符的属性同时使用。上面说的get和set就是属于存取描述符对象的属性。在面试中如何应对?面试官:说一下VUE双向绑定的原理?答:VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。代码演示:defineProperty的用法var obj = { };var name;//第一个参数:定义属性的对象。//第二个参数:要定义或修改的属性的名称。//第三个参数:将被定义或修改的属性描述符。

    Object.defineProperty(obj, "data", {

    //获取值

    get: function ()

    {  return name;  },

    //设置值

    set: function (val) {

    name = val;console.log(val)}})

    //赋值调用

    setobj.data = 'aaa';

    //取值调用

    getconsole.log(obj.data);

    代码演示:defineProperty的双向绑定var obj={};Object.defineProperty(obj, 'val',{set:function (newVal) {document.getElementById("a").value =newVal==undefined?'':newVal;document.getElementById("b").innerHTML=newVal==undefined?'':newVal;}});document.getElementById("a").addEventListener("keyup",function (e) {obj.val = e.target.value;})

     

     

    展开全文
  • 双向数据绑定指的是将对象...但是这并不意味着从零开始实现双向数据绑定就很困难,同样的当我们需要双向数据绑定时并不是只能够选择这些框架其中的一个。双向数据绑定底层的思想非常的基本,它可以被压缩成为三个步骤:
  • 数据双向绑定是指js部分数据发生变化是html部分的数据也会发生变化,当然html部分数据发生变化js部分数据也会发生变化,从而使界面很方便的实现动态数据显示,一般拥有数据双向绑定的前端框架都为mvvm结构。数据双向...
  • 在react中是单向数据绑定,而在vue中的特色是双向数据绑定。但是其实就我个人的理解是: 其实无论是vue还是react其实还是提倡单向数据流去管理状态,这一点在vuex和redux状态管理器上体现的很明显。只是vue为UI控件...

    在react中是单向数据绑定,而在vue中的特色是双向数据绑定。但是其实就我个人的理解是:
    其实无论是vue还是react其实还是提倡单向数据流去管理状态,这一点在vuex和redux状态管理器上体现的很明显。只是vue为UI控件提供了双向数据绑定的方式,在一些需要实时反应用户输入的场合会非常方便。但通常认为复杂应用中这种便利比不上引入状态管理带来的优势。

    1.单向数据流

    示意图:
    在这里插入图片描述
    state:驱动应用的数据源。view:以声明方式将 state 映射到视图 。 actions:响应在 view 上的用户输入导致的状态变化

    单向数据流指只能从一个方向修改数据,姑且我们可以这样理解,如下图所示。一个父组件下有两个子组件1和子组件2,父组件可以向子组件传递数据。假如子组件都获取到了父组件的name,在子组件1中对name重新修改之后,子组件2和父组件中的值并不会发生改变,这正是因为Vue中的机制是单向数据流,子组件不能直接改变父组件的状态。但反过来,如果是父组件中的name修改了,当然两个子组件中的name也就改变了。

    1.1 单向数据流过程:

    简单的单向数据流(unidirectional data flow)是指用户访问View,View发出用户交互的Action,在Action里对state进行相应更新。state更新后会触发View更新页面的过程。这样数据总是清晰的单向进行流动,便于维护并且可以预测。

    1.2 vuex和redux解决什么问题:

    虽然vue和react框架本身有自己状态管理,当我们的应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏:

    (1)多个视图依赖于同一状态
    (2)来自不同视图的行为需要变更同一状态
    

    对于问题一,传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。
    对于问题二,我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱,通常会导致无法维护的代码。
    因此,我们为什么不把组件的共享状态抽取出来,以一个全局单例模式管理呢?在这种模式下,我们的组件树构成了一个巨大的“视图”,不管在树的哪个位置,任何组件都能获取状态或者触发行为!
    另外,通过定义和隔离状态管理中的各种概念并强制遵守一定的规则,我们的代码将会变得更结构化且易维护。
    1.3 特点:
    (1) 所有状态的改变可记录、可跟踪,源头易追溯;
    (2) 所有数据只有一份,组件数据只有唯一的入口和出口,使得程序更直观更容易理解,有利于应用的可维护性;
    (3) 一旦数据变化,就去更新页面(data-页面),但是没有(页面-data);
    (4) 如果用户在页面上做了变动,那么就手动收集起来(双向是自动),合并到原有的数据中。

    2.双向数据绑定

    主要是由MVVM框架实现:

    在这里插入图片描述

    • Model与ViewModel之间的双向关系
      Model通过Ajax通信,发送数据给ViewModel。
      ViewModel也可以通过Ajax通信,发送请求给Model。
    • ViewModel与View之间的双向关系
      ViewModel中的数据改变,可以同时改变View上的显示内容。
      View上的内容改变(比如输入框中的内容),也可以同时改变ViewModel中对应的数据。

    双向数据绑定,带来双向数据流。ViewModel中的data部分和View之间的双向关系。。

    ng 里的 ng-model 和 vue 里的 v-model。
    

    双向数据流/双向数据绑定:

    1)js内存属性改变,影响页面变化
    
    2)页面的改变硬性js 内存属性的改变
    

    当数据发生变化的时候,用户界面发生相应的变化,开发者不需要手动的去修改dom。

    文章参考博客:https://www.jianshu.com/p/810464f1a576
    参考 mvvm的介绍: https://www.jianshu.com/p/e4e3519a58a6

    展开全文
  • 想要改变model数据,直接vm.property = xxx就好,不用去model.set(‘property’,xxx)了! 实现 今次主要借鉴avalon“劫持”setter,getter的方法,链接: avalon简化版解读 虽说是简化过的avalon,还是挺...

    初衷

    之前我们要在js域更新model,需要这样:

    model.set('name', 'sub');

    这实在太土了。。。
    我们希望像angularjs一样,直接:

    $scope.name = 'sub';

    然后bong, 视图就会更新!这样的黑科技必定是极好的。

    目标

    1. 完成model更新黑科技
    2. 200行以内完成
      我们希望html长成这样:
    <head>
        <title>avalon like mvvm framework</title>
        <script src="frame.js"></script>
        <script src="app.js"></script>
      </head>
      <body isi-controller="MainController">
        <h1> avalon lik mvvm framework </h1>
        <p id="my-p">{{width}}</p>
      </body>

    {{width}}即绑到p里面,又绑到isi-css-width里面,又绑了个isi-click
    不用写data-bind=xxx属性了,很像angularjs有没有!
    js我们希望长这样:

    var model = MVVM.define("MainController", function(vm) {
        vm.width = 150;
        vm.click = function() {
            vm.width = parseFloat(vm.w) + 10;
        };
    });
    
    MVVM.scanTag();

    想要改变model数据,直接vm.property = xxx就好,不用去model.set(‘property’,xxx)了!

    实现

    今次主要借鉴avalon“劫持”setter,getter的方法,链接:avalon简化版解读

    虽说是简化过的avalon,还是挺难读的。
    整理下思路,主要两大点:
    1. vm对象 –> vModel对象,劫持vm各个属性的set,get方法
    2. scanTag() –> 遍历dom树找关键字,去vModel找求值函数,注册到订阅者列表

    其中去vModel这一点不是很清楚,这几天一定要搞清,自己mock一个出来

    第一版,劫持getter, setter

    之前提到,关键步骤有两个,
    1. 劫持vm中各个属性的getter, setter
    2. scanTag,在这个过程中对vm对象求值,对vm对象handler(一般是去改视图)

    贴一下关键代码和注释:

        /*----------- define ------------------*/
        var MVVM = function() {};
        MVVM.define = function(name, factory) {
            var scope = {};
            factory(scope);
            var model = modelFactory(scope);
            factory(model);
            model.$id = name;
            return vModels[name] = model;
        }
        /* @param scope {object}: vm工厂方法生成的对象
         * @return vModel {object}: scope各property的set,get方法被劫持了后的对象。
         */
        function modelFactory(scope) {
            var vModel = {},
                originalModel = {},
                accessingProperties = {};
            // originalModel保存vm的属性, accessingProperties保存属性的accessor(及属性的订阅者)
            for(var prop in scope) {
                resolveAccess(prop, scope[prop], originalModel, accessingProperties);
            }
            // 关键!劫持需要access的属性的set,get方法!
            vModel = Object.defineProperties(vModel,withValue(accessingProperties));
            //
            vModel.$id = generateId();
            vModel.$accessors = accessingProperties;
            vModel.$originalModel = originalModel;
            vModel[SUB_NAME] = [];
            return vModel;
        }
        MVVM.scanTag = function(element, vModel) {
            // 假使通过parse, 取到了包含{{}}的元素<p>
            var myP = document.getElementById('my-p');
            executeBindings([{
                filters: undefined,
                element: myP,
                nodeType: 3,
                type: "text",
                value: "width"
            }], vModels["MainController"]);
        };
        /* @param bindings {array} : bindings
         * @param vModel {object} : vModel
         * @func: exec bindingHandlers of text
         */
        function executeBindings(bindings, vModel) {
            bindings.forEach( function(data){
                bindingHandlers[data.type](data,vModel); 
                //bindingHandlers往下较长,就不贴了
                //主要功能是生成binding object的求值函数,handler函数,注册事件
            });
        }    

    第二版

    第一版有问题,没有事件啊,click不支持的话就太土了。
    所以第二版引入事件注册。
    简单的说,给每个vm的属性的setter,getter里,都搞一个subscriber数组,记录set这个属性时得通知哪些人,同时,在get这个属性时,收集订阅者。
    这个过程有点绕,我也是一步步设断点才知道怎么运行的:
    scanTag的时候,要生成每个属性的求值函数和handler函数,生成完之后,做注册。
    注册的时候,是对整个binding object操作,首先去调用求值函数,这样有两个作用:
    1. 调用了get方法,从而把这个binding object加到这个属性的subscribers数组里了
    2. get到值之后去set, 从而在scanTag的过程中把vm里的property搞到各个html里去

    理清这些思路后,我们来重构avalon的代码,因为原码命名实在太乱了,词不达意,导致读码的时候思路也很乱。 代码写完我会上传到github

    代码写完了,主要是以binding object和accessor为中心,accessor保有有关的bindings,setter,getter里用到binding.evaluter与binding.handler来处理view更新。binding.evalutor, handler有scanTag()过程获取

    代码: github.com/victorisildur/javascript

    展开全文
  • 在Vue.js开发过程中,数据处理是一个很重要的部分,尤其是Vue是一个MVVM的框架,也就是Vue经常谈到的双向数据绑定双向数据绑定的大概原理就是:当数据发生改变变化的时候,视图也跟着发生变化;当视图发生改变变化...
  • Vue介绍 Vue是当前很火的一款MVVM的轻量级框架,它是以数据驱动和...脏值检测 : 这是AngularJS实现双向数据绑定的方式。 原理是 当数据进行变更的时候对所有Model和View的绑定关系进行一次检查,识别是否有数据进行了
  • MVVM和Unity3d的数据绑定(C#和XLua) 由Clark开发 需要Unity 2018.4或更高版本。 LoxodonFramework是专门针对Unity3D构建的轻量级MVVM(Model-View-ViewModel)框架。 支持数据绑定和本地化,具有非常灵活的...
  • 很多热门的JS框架客户端如Ember.js,Angular.js 或者KnockoutJS ,都在最新特性上刊登了双向数据绑定。这并不意味着从零实现它很难,也不是说需要这些功能的时候,采用这些框架是唯一的选择。下面的想法实际上很基础...
  • Cola UI是支持双向数据绑定的一站式前端UI框架。采用了精简的MVVM架构,在确保灵活性的同时尽可能降低对开发者的技术要求。 Cola UI遵循Mobile First的策略,特别适合于移动设备应用开发。 Cola UI整合了jQuery和...
  • 单向数据绑定:指的是我们先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HTML代码,然后把这段HTML代码插入到...双向数据绑定:数据模型(Module)和视图(View)之间的双向绑定。 用户在视图...
  • 虽然是基于 react 的框架,但是在 nautil 中可以使用双向数据绑定,这得益于基于观察者模式的开发思路。在 react 中使用双向绑定并非没有需求,react 严格的单向数据流,严重影响了开发者的发挥空间,特别是在表单...
  • 详解单向数据流与双向数据绑定

    千次阅读 多人点赞 2019-06-06 17:54:58
    在学习和接触 Vue 的过程中,接触到 Vue 的两个特性,单向数据流与双向数据绑定,他们是什么,特点如何,以及彼此之间的关系和联系又有什么,接下来,我们深入的探究一下它们。 单向数据流 数据流,表明的是数据...
  • 微信小程序双向数据绑定 单向绑定语法 在微信小程序的规则中,input标签中的数据为单向绑定,无法像Vue框架中的v-model直接进行input的双向绑定。 例子: <input value="{{value}}" /> 解析: 如果使用 ...
  • 单向数据绑定:指的是我们先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HTML代码,然后把这段HTML代码插入到文档流里面。单向数据绑定:指的是我们先把模板写好,然后把模板和数据(数据可能...
  • 原生js模拟vue实现双向数据绑定 写在前面 vue.js是mvvm模式的框架,如图: 通过和传统mvc模式的对比,我们发现多了个ViewModel,没有控制器(controller)了。ViewModel是mvvm模式的精髓所在它连接了view(视图层)与...
  • 主要介绍了MVVM 框架解析之双向绑定,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • AngularJS中的双向数据绑定

    千次阅读 2018-12-18 09:33:37
    双向数据绑定 双向数据绑定是指两个方向:从数据模型到视图,从视图到数据模型。AngularJS是一个MVC框架,控制器去修改数据模型,数据模型的变更会反应到视图上。视图上发生了数据的变化,是否能够自动同步到数据...
  • 这两天学习了vue.js数据绑定这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记。 前言 感觉 vue 的很多方面的内容,都参考了 angular 的东西,数据绑定方面,更是赤裸裸的“抄袭”。对照来看,更有助于...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 46,846
精华内容 18,738
关键字:

双向数据绑定框架