CN109376163A - 一种数据双向绑定的方法、装置、终端及存储介质 - Google Patents
一种数据双向绑定的方法、装置、终端及存储介质 Download PDFInfo
- Publication number
- CN109376163A CN109376163A CN201811090054.6A CN201811090054A CN109376163A CN 109376163 A CN109376163 A CN 109376163A CN 201811090054 A CN201811090054 A CN 201811090054A CN 109376163 A CN109376163 A CN 109376163A
- Authority
- CN
- China
- Prior art keywords
- view
- data
- value
- update
- updated
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000009739 binding Methods 0.000 title claims abstract description 67
- 230000027455 binding Effects 0.000 title claims abstract description 66
- 238000000034 method Methods 0.000 title claims abstract description 51
- 230000002457 bidirectional effect Effects 0.000 title abstract 3
- 230000008859 change Effects 0.000 claims abstract description 38
- 238000012544 monitoring process Methods 0.000 claims abstract description 31
- 230000001960 triggered effect Effects 0.000 claims abstract description 11
- 238000004590 computer program Methods 0.000 claims description 11
- 230000005540 biological transmission Effects 0.000 claims description 7
- 230000003993 interaction Effects 0.000 abstract 3
- 238000013499 data model Methods 0.000 description 12
- 230000006870 function Effects 0.000 description 11
- 238000010586 diagram Methods 0.000 description 8
- 230000004048 modification Effects 0.000 description 8
- 238000012986 modification Methods 0.000 description 8
- 230000001360 synchronised effect Effects 0.000 description 7
- 230000000694 effects Effects 0.000 description 3
- 230000007246 mechanism Effects 0.000 description 3
- 238000007792 addition Methods 0.000 description 2
- 238000007689 inspection Methods 0.000 description 2
- 230000008569 process Effects 0.000 description 2
- 241000208340 Araliaceae Species 0.000 description 1
- 235000005035 Panax pseudoginseng ssp. pseudoginseng Nutrition 0.000 description 1
- 235000003140 Panax quinquefolius Nutrition 0.000 description 1
- 230000009471 action Effects 0.000 description 1
- 235000013399 edible fruits Nutrition 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 239000000686 essence Substances 0.000 description 1
- 235000008434 ginseng Nutrition 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 230000004044 response Effects 0.000 description 1
- 238000000926 separation method Methods 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Landscapes
- Information Transfer Between Computers (AREA)
Abstract
本申请提供一种数据双向绑定的方法、装置、终端及存储介质，处理模块接收订阅模块发送的数据变化通知，根据所述数据变化通知更新所述数据并发送视图更新指令给视图更新模块，视图更新模块根据所述视图更新指令更新与所述数据有关的视图；监听模块监听用户交互事件并将所述交互事件触发的数据变化发送给处理模块，处理模块根据所述交互事件触发的数据变化更新所述数据并发送视图更新指令给视图更新模块，视图更新模块根据所述视图更新指令更新与所述数据有关的视图，通过所述方法可以实现IE8及以下版本的浏览器的数据双向绑定。
Description
技术领域
本申请涉及web前端和可视化的技术领域，尤其涉及一种数据双向绑定的方法、装置、终端及存储介质。
背景技术
双向绑定，即数据模型(Model)和UI视图(View)之间的双向绑定，具体表现为用户在视图上的修改会自动同步到数据模型中去，同样的，如果数据模型中的值发生了变化，也会立刻同步到视图中去。最常见的应用场景就是表单的操作，当用户在前端页面完成输入或点击后，不需要任何操作，数据就已经自动存放到数据模型中。目前，数据双向的绑定常用的方法有脏检机制和数据劫持，脏检机制用于Angular框架，但Angular引用较大，在处理大量数据时易卡顿，性能较差。而数据劫持则是利用浏览程序提供的接口object.defineProperty，来劫持各个属性的设置程序和访问程序，在数据变动时，发布消息给订阅者，触发相应的回调。一般在只是某些页面想使用双向绑定时，会优先选择数据劫持的方法。但是，由于IE8及IE8以下版本的浏览器不支持object.defineProperty属性，故不能监听变量的get/set属性，也就不能通过常规的‘＝’给变量赋值以达到改变视图的效果，因此，无法实现IE8及IE8以下版本的浏览器的数据双向性绑定。
发明内容
有鉴于此，本申请提供一种数据双向绑定的方法、装置、终端及存储介质。
首先，本申请的第一方面提供了一种数据双向绑定的方法，具体包括：
处理模块接收订阅模块发送的数据变化通知，根据所述数据变化通知更新所述数据并发送视图更新指令给视图更新模块，视图更新模块根据所述视图更新指令更新与所述数据有关的视图；
监听模块监听用户交互事件并将所述交互事件触发的数据变化发送给处理模块，处理模块根据所述交互事件触发的数据变化更新所述数据并发送视图更新指令给视图更新模块，视图更新模块根据所述视图更新指令更新与所述数据有关的视图。
进一步地，处理模块更新所述数据具体包括：处理模块接收订阅模块发送的数据中变量的待更新值，用所述待更新值给所述变量赋值。
可选地，所述用户交互事件包括：Change事件、Click事件、Mouse事件、Scroll事件和/或Key事件。
可选地，所述监听模块封装了与所述数据绑定的Change事件，所述Change事件包括：Input事件、Select事件和/或Textarea事件。
可选地，所述视图更新模块根据所述视图更新指令更新与所述数据有关的视图的步骤包括：
根据所述视图更新指令得到变量的待更新值；
判断所述变量是否存在上一次更新值；
若所述变量不存在上一次更新值，则遍历所有绑定所述变量的视图元素并将所述视图元素更新，然后将待更新值作为上一次更新值；
若所述变量存在上一次更新值，则比较待更新值与上一次更新值；
若待更新值与上一次更新值相同，则无需重新更新视图，若待更新值与上一次更新值不同，则遍历所有绑定所述变量的视图元素并将所述视图元素更新，然后将待更新值作为上一次更新值。
本申请的第二方面提供一种数据双向绑定的装置，所述装置包括：
监听模块，用于监听用户交互事件并将所述用户交互事件触发的数据变化发送给处理程序；
处理模块，用于接收订阅程序发送的数据变化通知，更新所述数据并发送视图更新指令给视图更新程序；接收监听程序发送的用户交互事件，根据所述用户交互事件触发的数据变化更新所述数据并发送视图更新指令给视图更新程序；
视图更新模块，用于根据所述视图更新指令更新与所述数据有关的视图。
本申请的第三方面提供了一种终端，所述终端包括：
存储器，用于存储计算机程序；
处理器，用于执行所述计算机程序时实现以下步骤：
处理模块接收订阅模块发送的数据变化通知，根据所述数据变化通知更新所述数据并发送视图更新指令给视图更新模块，视图更新模块根据所述视图更新指令更新与所述数据有关的视图；
监听模块监听用户交互事件并将所述交互事件触发的数据变化发送给处理模块，处理模块根据所述交互事件触发的数据变化更新所述数据并发送视图更新指令给视图更新模块，视图更新模块根据所述视图更新指令更新与所述数据有关的视图。
本申请的第四方面提供了一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现以下步骤：
处理模块接收订阅模块发送的数据变化通知，根据所述数据变化通知更新所述数据并发送视图更新指令给视图更新模块，视图更新模块根据所述视图更新指令更新与所述数据有关的视图；
监听模块监听用户交互事件并将所述交互事件触发的数据变化发送给处理模块，处理模块根据所述交互事件触发的数据变化更新所述数据并发送视图更新指令给视图更新模块，视图更新模块根据所述视图更新指令更新与所述数据有关的视图。
本申请通过处理模块接收订阅程序发送的数据变化通知后更新数据并发送视图更新指令给视图更新模块以使视图更新模块更新视图；监听模块监听用户交互事件并将所述交互事件触发的数据变化发送给处理模块，处理模块更新数据并发送视图更新指令给视图更新模块以使更新模块更新视图。通过这种方法可以给数据中的变量赋值并同步更新视图，且适用于IE8及以下版本的浏览器，使IE8及以下版本的浏览器实现数据双向绑定。
附图说明
图1是本申请一示例性实施例示出的数据双向绑定示意图；
图2是本申请一示例性实施例示出的一种数据双向绑定方法示意图；
图3是本申请一示例性实施例示出的一种数据双向绑定方法中实现ModelTo View的示意图；
图4是本申请一示例性实施例示出的一种数据双向绑定方法中实现View ToModel的示意图；
图5是本申请一示例性实施例示出的视图更新模块更新视图的方法流程图；
图6是本申请一示例性实施例示出的视图更新模块更新视图的方法流程图；
图7是本申请一示例性实施例示出的一种数据双向绑定应用实例的效果演示图；
图8是本申请一示例性实施例示出的一种数据双向绑定装置的结构框图；
图9是本申请一示例性实施例示出的可以实现数据双向绑定的终端的结构框图。
具体实施方式
这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。
在本申请使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本申请。在本申请和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。还应当理解，本文中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。
应当理解，尽管在本申请可能采用术语第一、第二、第三等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离本申请范围的情况下，第一信息也可以被称为第二信息，类似地，第二信息也可以被称为第一信息。取决于语境，如在此所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”。
目前，前端主流框架AngularJS，VueJS，Avalon等的一大特性就是实现数据双向绑定，数据双向绑定即数据模型(Model)和UI视图(View)之间的双向绑定，具体表现为用户在视图上的修改会自动同步到数据模型中去(View To Model)，同样的，如果数据模型中的值发生了变化，也会立刻同步到视图中去(Model ToView)，如图1所示。最常见的应用场景就是表单的操作，当用户在前端页面完成输入或点击后，不需要任何操作，数据就已经自动存放到数据模型中。AngularJS主要通过脏检查机制去实现数据双向绑定，但是AngularJS引用较大，但数据量大的时候容易卡顿，性能较差。VueJS，Avalon等都是通过数据劫持的方式去实现数据绑定，使用Object.defineProperty对数据模型做属性get和set的监听，当有数据读取和赋值操作时则调用节点的指令，这样使用最通用的＝等号赋值就可以了。目前，全球IE8及IE8以下版本还有10％左右用户量，由于IE8及IE8以下版本的浏览器不支持Object.defineProperty属性，故不能监听变量的get/set属性，也就不能通过常规的‘＝’给变量赋值来实现数据双向绑定。
本申请的第一方面提供了一种数据双向绑定的方法，可以兼容IE8及IE8以下版本的浏览器，实现IE8及IE8以下版本的浏览器的数据双向绑定。
请参考图2，具体的，所述数据双向绑定的方法包括：
处理模块接收订阅模块发送的数据变化通知，根据所述数据变化通知更新所述数据并发送视图更新指令给视图更新模块，视图更新模块根据所述视图更新指令更新与所述数据有关的视图；
监听模块监听用户交互事件并将所述交互事件触发的数据变化发送给处理模块，处理模块根据所述交互事件触发的数据变化更新所述数据并发送视图更新指令给视图更新模块，视图更新模块根据所述视图更新指令更新与所述数据有关的视图。
实现数据双向绑定需要实现以下两个步骤：一个是数据模型中的值发生了变化，会同步到视图(Model To View)，另一个是视图修改会同步到数据模型中(View ToModel)。
本申请中Model To View是通过如下方式实现：处理模块接收订阅模块发送的数据变化通知，根据所述数据变化通知更新所述数据并发送视图更新指令给视图更新模块，视图更新模块根据所述视图更新指令更新与所述数据有关的视图。进一步地，处理模块更新数据的具体步骤包括：处理模块接收订阅模块发送的数据中变量的待更新值，用所述待更新值给所述变量赋值，以实现数据的更新。当服务器传回新的数据后，订阅模块会接收到服务器需要更新数据的需求，并将所述更新数据的需求发送给处理模块，处理模块会更新数据，并发送一个视图更新指令给视图更新模块，视图更新模块接收到视图更新指令后，从指令中得到要更新的变量及变量的待更新值，然后将所有跟需要更新的变量有关的视图更新一遍。
以下用一个具体的例子来详细说明Model To View的实现步骤，如图3所示，当数据模型中的某个变量a的值发生变化，变成5。服务器传回最新数据给订阅模块(301)，其中变量a的最新值为5,订阅模块会给处理模块发送一个通知，告诉处理模块服务器要求将数据模型中变量a的值更新成5(304)，处理模块收到通知后将数值5赋值给变量a以更新变量a(308)。同时处理模块发送一个视图更新指令给视图更新模块(306)，要求视图更新模块更新所有与a有关的视图(309)，从而实现视图的更新。
本申请中View To Model是通过如下方式实现：监听模块监听用户交互事件并将所述交互事件触发的数据变化发送给处理模块，处理模块根据所述交互事件触发的数据变化更新所述数据并发送视图更新指令给视图更新模块，视图更新模块根据所述视图更新指令更新与所述数据有关的视图。可选地，所述用户交互事件包括：Change事件、Click事件、Mouse事件、Scroll事件和/或Key事件。
可选地，所述监听模块封装了与所述数据绑定的Change事件，所述Change事件包括：Input事件、Select事件和/或Textarea事件。一般浏览器都具备监听原生元素的change事件的功能，可以通过监听模块将绑定了Model数据的Input、Select、Textarea等用户可输入元素的所有change事件封装起来，只要有用户输入事件即可自动监听到其变化。
当用户在浏览器中输入文本或点击鼠标时，监听模块可以监听到用户输入文本或点击鼠标的事件，并分析所述事件触发的数据变化，数据变化包括哪些变量的值需要更新，待更新值是什么。监听模块把这些数据变化发送给处理模块，处理模块可以使用待更新值给变量赋值，以实现数据的同步更新，同时，处理模块再给视图更新模块发送一个视图更新指令，视图更新模块根据这个更新指令将所有与变量相关的视图更新。
以下用一个具体的例子来详细说明View To Model的实现步骤，如图4所示，当用户在文本框中输入文本(401)，监听模块监听到这个Change事件，然后分析这个事件会触发变量a发生变化，需要将a更新成5，监听模块将变量a需要更新成5的需求发送给处理模块(403)，处理模块会用数值5给变量a赋值(407)，并给视图更新模块发送视图更新指令(405)，告诉视图更新模块需要更新与a有关的视图，视图模块更新与a有关的视图(408)，从而实现视图更新。
一般视图更新都是通过操作DOM元素去实现的，为了减少视图的DOM操作，可选地，视图更新模块更新视图的步骤可以如图5所示，具体包括：
S501、根据所述视图更新指令得到变量的待更新值；
S502、判断所述变量是否存在上一次更新值；
S503、若所述变量不存在上一次更新值，则遍历所有绑定所述变量的视图元素并将所述视图元素更新，然后将待更新值作为上一次更新值；
S504、若所述变量存在上一次更新值，则比较待更新值与上一次更新值；
S505、若待更新值与上一次更新值相同，则无需重新更新视图，若待更新值与上一次更新值不同，则则遍历所有绑定所述变量的视图元素并将所述视图元素更新，然后将待更新值作为上一次更新值。
一般视图更新都是通过操作DOM元素去实现的，只要数据发生变化，则将与数据有关的视图重新更新一次，因而更新视图需要大量的DOM操作，为了减少DOM操作，我们在更新视图之前先将各变量的待更新值与上一次更新值进行比较，在待更新值与上一次更新值相同时，则不需要重新更新视图，这样可以减少大量视图的DOM操作。在待更新值与上一次值不同时，则采用自定义的方法遍历所有跟变量绑定的视图元素，并对这些视图元素进行更新，以更新视图。
以下用一个具体的例子来详细说明视图模块更新视图的实现步骤，如图6所示，视图更新新模块接收到视图更新指令后，从视图更新指令中获取变量a需要更新的值，且待更新值为a-new的信息(S601)，视图更新模块会先判断变量a是否存在上一次更新值a-old(S602)，若变量a不存在a-old，则遍历所有与变量a绑定的视图元素，更新这些视图元素，以更新与a有关的视图(S604),并将a-new赋值给a-old,使a-new作为上一次更新值(S605)，然后返回到更新完成的状态(S606)。若变量a存在a-old，则将a-old与a-new进行比较(S603)，若a-old与a-new相同，则无需再重新更新视图，直接返回视图更新完成的状态(S606)；若a-old与a-new不同，则遍历所有与变量a绑定的视图元素，更新这些视图元素，以更新与a有关的视图(S604),然后将a-new赋值给a-old,使a-new作为上一次更新值(S605)，再返回到视图更新完成的状态(S606)。
为了进一步的解释本申请的数据双向绑定方法，下面再用一个实例对本申请提供的数据双向绑定的方法进行说明。如图7所示，当点击选择器“点击改变abc的值为20”时，数据模型中的值会变成20，视图文本框中的值也会变成20，同样在视图文本框中输入123后，数据模型中的值也会同步更新成123。具体的实现方法包含以下步骤：
步骤一：创建一个input文本框元素，添加一个属性d-model值为abc，表示该input双向绑定abc变量
步骤二：创建一个button按钮元素，添加点击事件为changeABC并传入20，用于当用户点击该按钮改变abc的值为20，设置innerHtml为“修改abc值”。
步骤三：创建一个div元素，添加一个属性d-single值为abc，表示该div单向绑定abc变量
步骤四：创建一个构造函数MVVM，接收一个type为object的参数。
步骤五：给构造函数MVVM定义变量data，存储所有的双向绑定、单向绑定有关的变量集对象，初始值为传入参数的key为data的value值
步骤六：给构造函数MVVM定义变量data_old，存储上一次视图更新后的data值，初始值为传入参数的key为data的value值
步骤七：给构造函数MVVM定义一个方法render，用于视图更新视图。方法render接收两个变量name，value。name为变量名，value为变量的最新值。方法内部执行步骤如下：
1、判断data_old是否存在name值的变量，如果存在执行步骤2，不存在则执行步骤3。
2、判断data_old的name值的变量与value的值是否相等，如果相等，则执行步骤5，不相等则执行步骤3。
3、改变相应的视图。具体为以下，然后执行步骤4。
3.1、查询存在d-single属性且该属性值为name值的所有元素，如果查询到的元素数量大于0，则循环遍历查询到的元素，给每个元素的innerText赋值value值。
3.2、查询存在d-model属性且该属性值为name值的所有元素，如果查询到的元素数量大于0，则循环遍历查询到的元素，给每个元素的属性value赋值value值。
4、给data_old的name值的变量赋值为value的值，执行步骤5。
5、函数结束。
步骤八：给构造函数MVVM定义一个方法setValue，用于给双向绑定或单向绑定有关的变量执行赋值操作并渲染相关视图。方法setValue接收两个变量name，value。name为变量名，value为变量的最新值。方法内部执行步骤如下：
1、判断最新值是否与旧值相等，相等则退出方法体，否则执行步骤2。
2、给name值的变量赋最新值value，执行步骤3。
3、执行视图更新函数render，传入两个变量name，value。
4、函数结束。
步骤九、给构造函数MVVM定义一个初始化方法init。用于新建一个构造函数MVVM实例时立即执行的函数。函数主要是对使用双向绑定的元素启动事件监听，监听其值得变化。以及初始化视图。具体逻辑为：
1、查询存在d-model属性的所有元素，如果查询到的元素数量大于0，则循环遍历查询到的元素，给每个元素添加change事件监听函数，监听函数主要是调用setValue方法，传入发生change的元素的d-model属性的值以及最新的value属性的值。
2、循环遍历构造函数的data变量，给data变量里的每一个键值对执行render方法，初始化视图。
步骤十、新建一个构造函数MVVM，传参为{data:{abc:‘hello world’}}，赋值给全局变量dome。
步骤十一、新建一个方法changeABC，接收一个参数value。方法内执行dome.setValue(‘abc’,value)；
结果：
刷新页面，视图为：
一个值为hello world的input文本框，一个文本为hello world的div元素，一个文本为“点击修改abc值”的按钮。
点击按钮，视图为：
一个值20的input文本框，一个文本为20的div元素，一个文本为“点击修改abc值”的按钮。
修改input文本框的值为“1”，视图为：
一个值1的input文本框，一个文本为1的div元素，一个文本为“点击修改abc值”的按钮。
需要说明的是，上述实现方法中的d-model为自定义属性，凡可输入的元素添加该属性，则表示该元素使用双向绑定，绑定的变量为该属性的值。
d-single为自定义属性，任何元素都可添加该属性，表示该元素使用单向绑定，绑定的变量为该属性的值。
与前述的一种数据双向绑定的方法相对应，本申请的第二方面还提供了一种数据双向绑定的装置，如图8所示，所述装置具体包括：
监听模块801，监听用户交互事件并将所述用户交互事件触发的数据变化发送给处理程序。
处理模块802，用于接收订阅程序发送的数据变化通知，更新所述数据并发送视图更新指令给视图更新程序；接收监听程序发送的用户交互事件，根据所述用户交互事件触发的数据变化更新所述数据并发送视图更新指令给视图更新程序；
视图更新模块803，根据所述视图更新指令更新与所述数据有关的视图。
进一步地，处理模块更新数据的具体步骤包括：处理模块接收订阅模块发送的数据中变量的待更新值，用所述待更新值给所述变量赋值，以实现数据的更新。
可选地，用户交互事件包括：Change事件、Click事件、Mouse事件、Scroll事件和/或Key事件。
可选地，为了实现自动监听用户输入的事件，监听模块封装了与所述数据绑定的Change事件，所述Change事件包括：Input事件、Select事件和/或Textarea事件。一般浏览器都具备监听原生元素的change事件的功能，可以通过监听模块将绑定了Model数据的Input、Select、Textarea等用户可输入元素的所有change事件封装起来，只要有用户输入事件即可自动监听到其变化。
一般视图更新都是通过操作DOM元素去实现的，为了减少视图的DOM操作，可选地，视图更新模块更新视图的步骤具体包括：根据所述视图更新指令得到变量的待更新值；判断所述变量是否存在上一次更新值；若所述变量不存在上一次更新值，则遍历所有绑定所述变量的视图元素并将所述视图元素更新，然后将待更新值作为上一次更新值；若所述变量存在上一次更新值，则比较待更新值与上一次更新值；若待更新值与上一次更新值相同，则无需重新更新视图，若待更新值与上一次更新值不同，则遍历所有绑定所述变量的视图元素并将所述视图元素更新，然后将待更新值作为上一次更新值。
上述装置中各个单元的功能和作用的实现过程具体详见上述方法中对应步骤的实现过程，在此不再赘述。
对于装置实施例而言，由于其基本对应于方法实施例，所以相关之处参见方法实施例的部分说明即可。以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本申请方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。
本申请的第三方面还提供了一种终端，如图9所示，所述终端包括：
存储器，用于存储计算机程序；
处理器，用于执行所述计算机程序时实现以下步骤：
处理模块接收订阅模块发送的数据变化通知，根据所述数据变化通知更新所述数据并发送视图更新指令给视图更新模块，视图更新模块根据所述视图更新指令更新与所述数据有关的视图；
监听模块监听用户交互事件并将所述交互事件触发的数据变化发送给处理模块，处理模块根据所述交互事件触发的数据变化更新所述数据并发送视图更新指令给视图更新模块，视图更新模块根据所述视图更新指令更新与所述数据有关的视图。
进一步地，处理模块更新数据的具体步骤包括：处理模块接收订阅模块发送的数据中变量的待更新值，用所述待更新值给所述变量赋值，以实现数据的更新。当服务器传回新的数据后，订阅模块会接收到服务器需要更新数据的需求，并将所述更新数据的需求发送给处理模块，处理模块会更新数据，并发送一个视图更新指令给视图更新模块，视图更新模块接收到视图更新指令后，从指令中得到要更新的变量及变量的待更新值，然后将所有跟需要更新的变量有关的视图更新一遍。
可选地，用户交互事件包括：Change事件、Click事件、Mouse事件、Scroll事件和/或Key事件。
可选地，为了实现自动监听用户输入的事件，监听模块封装了与所述数据绑定的Change事件，所述Change事件包括：Input事件、Select事件和/或Textarea事件。一般浏览器都具备监听原生元素的change事件的功能，可以通过监听模块将绑定了Model数据的Input、Select、Textarea等用户可输入元素的所有change事件封装起来，只要有用户输入事件即可自动监听到其变化。
一般视图更新都是通过操作DOM元素去实现的，为了减少视图的DOM操作，可选地，视图更新模块更新视图的步骤具体包括：根据所述视图更新指令得到变量的待更新值；判断所述变量是否存在上一次更新值；若所述变量不存在上一次更新值，则遍历所有绑定所述变量的视图元素并将所述视图元素更新，然后将待更新值作为上一次更新值；若所述变量存在上一次更新值，则比较待更新值与上一次更新值；若待更新值与上一次更新值相同，则无需重新更新视图，若待更新值与上一次更新值不同，则遍历所有绑定所述变量的视图元素并将所述视图元素更新，然后将待更新值作为上一次更新值。
本申请的第四方面还提供了一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现以下步骤：
处理模块接收订阅模块发送的数据变化通知，根据所述数据变化通知更新所述数据并发送视图更新指令给视图更新模块，视图更新模块根据所述视图更新指令更新与所述数据有关的视图；
监听模块监听用户交互事件并将所述交互事件触发的数据变化发送给处理模块，处理模块根据所述交互事件触发的数据变化更新所述数据并发送视图更新指令给视图更新模块，视图更新模块根据所述视图更新指令更新与所述数据有关的视图。
本申请对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台终端设备执行本申请各个实施例方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read-Only Memory，ROM)、随机存取存储器(Random AccessMemory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述仅为本申请的较佳实施例而已，并不用以限制本申请，凡在本申请的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本申请保护的范围之内。
Claims (10)
1.一种数据双向绑定的方法，其特征在于，所述方法包括：
处理模块接收订阅模块发送的数据变化通知，根据所述数据变化通知更新所述数据并发送视图更新指令给视图更新模块，视图更新模块根据所述视图更新指令更新与所述数据有关的视图；
监听模块监听用户交互事件并将所述交互事件触发的数据变化发送给处理模块，处理模块根据所述交互事件触发的数据变化更新所述数据并发送视图更新指令给视图更新模块，视图更新模块根据所述视图更新指令更新与所述数据有关的视图。
2.如权利要求1所述的一种数据双向绑定的方法，其特征在于，所述更新所述数据具体包括：处理模块接收订阅模块发送的数据中变量的待更新值，用所述待更新值给所述变量赋值。
3.如权利要求1所述的一种数据双向绑定的方法，其特征在于，所述用户交互事件包括：Change事件、Click事件、Mouse事件、Scroll事件和/或Key事件。
4.如权利要求3所述的一种数据双向绑定的方法，其特征在于，所述监听模块封装了与所述数据绑定的Change事件，所述Change事件包括：Input事件、Select事件和/或Textarea事件。
5.如权利要求1所述的一种数据双向绑定的方法，其特征在于，所述视图更新模块根据所述视图更新指令更新与所述数据有关的视图的步骤包括：
根据所述视图更新指令得到变量的待更新值；
判断所述变量是否存在上一次更新值；
若所述变量不存在上一次更新值，则遍历所有绑定所述变量的视图元素并将所述视图元素更新，然后将待更新值作为上一次更新值；
若所述变量存在上一次更新值，则比较待更新值与上一次更新值；
若待更新值与上一次更新值相同，则无需重新更新视图，若待更新值与上一次更新值不同，则遍历所有绑定所述变量的视图元素并将所述视图元素更新，然后将待更新值作为上一次更新值。
6.一种数据双向绑定的装置，其特征在于，所述装置包括：
处理模块，用于接收订阅程序发送的数据变化通知，更新所述数据并发送视图更新指令给视图更新程序；接收监听程序发送的用户交互事件，根据所述用户交互事件触发的数据变化更新所述数据并发送视图更新指令给视图更新程序；
视图更新模块，用于根据所述视图更新指令更新与所述数据有关的视图；
监听模块，用于监听用户交互事件并将所述用户交互事件触发的数据变化发送给处理程序。
7.如权利要求6所述的一种数据双向绑定的装置，其特征在于，所述更新所述数据具体包括：处理模块接收订阅模块发送的数据中变量的待更新值，用所述待更新值给所述变量赋值。
8.如权利要求6所述的一种数据双向绑定的装置，其特征在于，所述视图更新模块根据所述视图更新指令更新与所述数据有关的视图的步骤包括：
根据所述视图更新指令得到变量的待更新值；
判断所述变量是否存在上一次更新值；
若所述变量不存在上一次更新值，则遍历所有绑定所述变量的视图元素并将所述视图元素更新，然后将待更新值作为上一次更新值；
若所述变量存在上一次更新值，则比较待更新值与上一次更新值；
若待更新值与上一次更新值相同，则无需重新更新视图，若待更新值与上一次更新值不同，则遍历所有绑定所述变量的视图元素并将所述视图元素更新，然后将待更新值作为上一次更新值。
9.一种终端，其特征在于，包括：
存储器，用于存储计算机程序；
处理器，用于执行所述计算机程序时实现如权利要求1至5任一项所述数据双向绑定的方法的步骤。
10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1至5任一项所述数据双向绑定的方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811090054.6A CN109376163A (zh) | 2018-09-18 | 2018-09-18 | 一种数据双向绑定的方法、装置、终端及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811090054.6A CN109376163A (zh) | 2018-09-18 | 2018-09-18 | 一种数据双向绑定的方法、装置、终端及存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN109376163A true CN109376163A (zh) | 2019-02-22 |
Family
ID=65405241
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201811090054.6A Pending CN109376163A (zh) | 2018-09-18 | 2018-09-18 | 一种数据双向绑定的方法、装置、终端及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109376163A (zh) |
Cited By (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110308901A (zh) * | 2019-05-21 | 2019-10-08 | 平安普惠企业管理有限公司 | 处理前端页面中数据变量方法、装置、设备和存储介质 |
| CN110968318A (zh) * | 2019-12-20 | 2020-04-07 | 创盛视联数码科技（北京）有限公司 | 一种MVVM设计模式JavaScript库实现方法 |
| CN111796577A (zh) * | 2020-06-29 | 2020-10-20 | 中国第一汽车股份有限公司 | 一种数据指令处理方法、装置、车辆及存储介质 |
| CN112100187A (zh) * | 2020-08-31 | 2020-12-18 | 湖北美和易思教育科技有限公司 | 一种基于VueJS的学生学习数据存储方法及装置 |
| CN112527294A (zh) * | 2020-12-18 | 2021-03-19 | 吉林亿联银行股份有限公司 | 一种vue的双向绑定方法及相关装置 |
| CN113849141A (zh) * | 2020-06-28 | 2021-12-28 | 华为技术有限公司 | 更新界面的方法和装置 |
| WO2022017458A1 (zh) * | 2020-07-23 | 2022-01-27 | 北京字节跳动网络技术有限公司 | 同步数据方法、装置、电子设备和介质 |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2017077544A1 (en) * | 2015-11-05 | 2017-05-11 | Vishal Shah | G-mvc architecture by providing view rules to handle the action events of controller and states of model |
| CN107832350A (zh) * | 2017-10-20 | 2018-03-23 | 金蝶软件（中国）有限公司 | 一种web数据双向绑定的方法、装置、终端及存储介质 |
| CN107885497A (zh) * | 2017-11-08 | 2018-04-06 | 北京锐安科技有限公司 | 一种基于表格框架的网页前端数据展示方法及装置 |
-
2018
- 2018-09-18 CN CN201811090054.6A patent/CN109376163A/zh active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2017077544A1 (en) * | 2015-11-05 | 2017-05-11 | Vishal Shah | G-mvc architecture by providing view rules to handle the action events of controller and states of model |
| CN107832350A (zh) * | 2017-10-20 | 2018-03-23 | 金蝶软件（中国）有限公司 | 一种web数据双向绑定的方法、装置、终端及存储介质 |
| CN107885497A (zh) * | 2017-11-08 | 2018-04-06 | 北京锐安科技有限公司 | 一种基于表格框架的网页前端数据展示方法及装置 |
Non-Patent Citations (1)
| Title |
|---|
| TONYZHENG1: "JavaScript实现双向绑定的三种方式", 《简书 HTTPS://WWW.JIANSHU.COM/P/64AD3B2DD161》 * |
Cited By (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110308901A (zh) * | 2019-05-21 | 2019-10-08 | 平安普惠企业管理有限公司 | 处理前端页面中数据变量方法、装置、设备和存储介质 |
| CN110968318A (zh) * | 2019-12-20 | 2020-04-07 | 创盛视联数码科技（北京）有限公司 | 一种MVVM设计模式JavaScript库实现方法 |
| CN113849141A (zh) * | 2020-06-28 | 2021-12-28 | 华为技术有限公司 | 更新界面的方法和装置 |
| CN111796577A (zh) * | 2020-06-29 | 2020-10-20 | 中国第一汽车股份有限公司 | 一种数据指令处理方法、装置、车辆及存储介质 |
| WO2022017458A1 (zh) * | 2020-07-23 | 2022-01-27 | 北京字节跳动网络技术有限公司 | 同步数据方法、装置、电子设备和介质 |
| CN112100187A (zh) * | 2020-08-31 | 2020-12-18 | 湖北美和易思教育科技有限公司 | 一种基于VueJS的学生学习数据存储方法及装置 |
| CN112100187B (zh) * | 2020-08-31 | 2024-01-26 | 武汉美和易思数字科技有限公司 | 一种基于VueJS的学生学习数据存储方法及装置 |
| CN112527294A (zh) * | 2020-12-18 | 2021-03-19 | 吉林亿联银行股份有限公司 | 一种vue的双向绑定方法及相关装置 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109376163A (zh) | 一种数据双向绑定的方法、装置、终端及存储介质 | |
| EP2284701B1 (en) | Transparently stateful execution of stateless applications | |
| JP5822238B2 (ja) | インスタントメッセージアプリケーションにおける情報の提示 | |
| US7779419B2 (en) | Method and apparatus for creating templates | |
| KR101693229B1 (ko) | 데이터 저장 시스템과의 통신 | |
| CA2627270C (en) | System and method for displaying data on a thin client | |
| CN109446570B (zh) | 业务流程展示方法、装置、计算机设备以及存储介质 | |
| US20110154226A1 (en) | Chip model of an extensible plug-in architecture for enterprise mashups | |
| JP2004507818A (ja) | オンラインサービスを作成するためのシステムおよび方法 | |
| CN109992354A (zh) | 容器处理方法、装置、主体服务器、系统和存储介质 | |
| JP7254975B2 (ja) | 実行可能論理を用いて構造化データアイテムを処理するためのキーベースのロギング | |
| CN109840303A (zh) | 列表页面定制方法、装置、设备及计算机可读存储介质 | |
| CN108733496A (zh) | 事件处理方法和装置 | |
| CN111949832A (zh) | 批量作业依赖关系的解析方法及装置 | |
| US20050149952A1 (en) | Persisting state across navigations in a navigation-based application and responding to navigation-related events throughout an application | |
| JP2017507419A (ja) | カスタム化可能なユーザ・インターフェースの生成および実装 | |
| US7275250B1 (en) | Method and apparatus for correlating events | |
| CN111294377A (zh) | 一种依赖关系的网络请求发送方法、终端装置及存储介质 | |
| US7861219B2 (en) | Script application framework | |
| JP5840892B2 (ja) | ソフトウェア配信システムおよびソフトウェア配信用プログラム | |
| CN107180107B (zh) | Ionic框架下的手机附件上传选择文件的方法及系统 | |
| JP4889953B2 (ja) | 情報処理装置及び方法 | |
| CN110673801A (zh) | 一种依赖对象的初始化操作方法及相关装置 | |
| KR102667931B1 (ko) | 애플리케이션 프로그램 구성 방법, 실행 방법, 컴퓨팅 디바이스, 및 저장 매체 | |
| US20160078008A1 (en) | Integrating user interface experiences from multiple applications |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20190222 |