CN106446292B - 一种前端数据双向绑定的实现方法及装置 - Google Patents
一种前端数据双向绑定的实现方法及装置 Download PDFInfo
- Publication number
- CN106446292B CN106446292B CN201611021825.7A CN201611021825A CN106446292B CN 106446292 B CN106446292 B CN 106446292B CN 201611021825 A CN201611021825 A CN 201611021825A CN 106446292 B CN106446292 B CN 106446292B
- Authority
- CN
- China
- Prior art keywords
- event
- data
- model
- binding
- call back
- 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.)
- Active
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/23—Updating
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Databases & Information Systems (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
一种前端数据双向绑定的实现方法，包括：(1)构造用于生成发布/订阅对象实例的函数，其返回一个发布/订阅对象；(2)构造用于生成数据模型对象实例的函数，其返回一个数据模型对象；(3)具有自定义属性data‑twoWayBind‑id的HTML元素，其中id为模型id；(4)生成数据模型对象的一个实例，传入模型id；(5)使用实例的读取属性的方法和设置属性的方法，获取、设置对应数据。还有一种前端数据双向绑定的实现装置。
Description
技术领域
本发明涉及web前端和可视化的技术领域，尤其涉及一种前端数据双向绑定的实现方法，以及前端数据双向绑定的实现装置。
背景技术
前端数据绑定，指的是将数据和DOM元素进行绑定。主要分为单向数据绑定和双向数据绑定。
单向数据绑定，需要提前编辑好模板，并将数据与模板整合为DOM，插入文档流。当数据更新时，需要重新整合模板与数据，并更新文档。
双向数据绑定，是将数据模型与视图进行绑定。当数据模型改变时，视图也对应更新，当视图改变时，数据模型也会更新。无需进行和单向数据绑定的CRUD(Create创建，Retrieve恢复，Update更新，Delete删除)操作。
目前，实现双向数据绑定的前端框架主要有AngularJS，VueJS，Avalon等。
Angular对于数据双向绑定的实现，就是利用脏检查机制，保留两份数据，一份旧的、一份新的，然后做检查，更新发生改变的数据。Avalon和Vue都是使用的Object.defineProperty来实现的，然后定义的时候设置setget访问器，每次数据读取设置都需要通过访问器，然后检查是否改变。其中Avalon对于不支持Object.defineProperty的采用了VBScript模拟实现。
综上所述，现有技术缺陷为：不能只引入框架的数据双向绑定模块进行开发。
数据双向绑定并不适用于大多数项目。对于非数据密集型项目，使用AngularJS，VueJS，Avalon这样框架的来达到数据双向绑定的目的，不但体现不出框架对大量数据绑定采取的性能优化，而且会造成项目臃肿。例如，当项目只需要用户在表单输入内容的同时得到用户输入的数据放入模型，也需要引入整个框架，来满足不做任何其他操作就可以同步视图与模型的数据的要求。
发明内容
为克服现有技术的缺陷，本发明要解决的技术问题是提供了一种前端数据双向绑定的实现方法，其能够避免每次数据读取设置都需要通过访问器的问题，在一些场景下能够避免大型框架的引入。
本发明的技术方案是：这种前端数据双向绑定的实现方法，该方法包括以下步骤：
(1)构造用于生成发布/订阅对象实例的函数，其返回一个发布/订阅对象，该发布/订阅对象具有：
一个回调函数字典，用于存储事件及其回调方法，一个事件的多个回调按照订阅顺序存储于队列；
一个事件订阅方法，用于将订阅事件与时间发生后的回调函数存储于回调函数对象中；
一个事件发布方法，用于查找事件对应的回调函数队列，并调用；
(2)构造用于生成数据模型对象实例的函数，其返回一个数据模型对象，该数据模型对象具有：
属性字典，用于存储模型属性名及值；
设置属性的方法，用于设置该数据对象实例的某个属性值，并在设置成功后发布一个自定义事件，调用回调函数，同步绑定元素值；
读取属性的方法，返回对应属性值；
发布/订阅对象实例的引用；
(3)具有自定义属性data-twoWayBind-id的HTML元素，其中id为模型id；
(4)生成数据模型对象的一个实例，传入模型id；
(5)使用实例的读取属性的方法和设置属性的方法，获取、设置对应数据。
本发明通过构造用于生成发布/订阅对象实例的函数，用于生成数据模型对象实例的函数，具有自定义属性data-twoWayBind-id的HTML元素，生成数据模型对象的一个实例，传入模型id，使用实例的读取属性的方法和设置属性的方法，获取、设置对应数据，因此能够避免每次数据读取设置都需要通过访问器的问题，在一些场景下能够避免大型框架的引入。
还提供了一种前端数据双向绑定的实现装置，该装置包括：
生成发布/订阅对象实例的模块，其配置来构造用于生成发布/订阅对象实例的函数，其返回一个发布/订阅对象，该发布/订阅对象具有：
一个回调函数字典，用于存储事件及其回调方法，一个事件的多个回调按照订阅顺序存储于队列；
一个事件订阅方法，用于将订阅事件与时间发生后的回调函数存储于回调函数对象中；
一个事件发布方法，用于查找事件对应的回调函数队列，并调用；
该装置还包括，生成数据模型对象实例的模块，其配置来构造用于生成数据模型对象实例的函数，其返回一个数据模型对象，该数据模型对象具有：
属性字典，用于存储模型属性名及值；
设置属性的方法，用于设置该数据对象实例的某个属性值，并在设置成功后发布一个自定义事件，调用回调函数，同步绑定元素值；
读取属性的方法，返回对应属性值；
发布/订阅对象实例的引用；
该装置还包括HTML元素，其配置来具有自定义属性data-twoWayBind-id，其中id为模型id；
该装置还包括实例生成模块，其配置来生成数据模型对象的一个实例，传入模型id；
该装置还包括获取设置模块，其配置来使用实例的读取属性的方法和设置属性的方法，获取、设置对应数据。
附图说明
图1所示为根据本发明的前端数据双向绑定的实现方法的流程图。
具体实施方式
(1)如图1所示，构造用于生成发布/订阅对象实例的函数，其返回一个发布/订阅对象，该发布/订阅对象具有：
一个回调函数字典，用于存储事件及其回调方法，一个事件的多个回调按照订阅顺序存储于队列；
一个事件订阅方法，用于将订阅事件与时间发生后的回调函数存储于回调函数对象中；
一个事件发布方法，用于查找事件对应的回调函数队列，并调用；
(2)构造用于生成数据模型对象实例的函数，其返回一个数据模型对象，该数据模型对象具有：
属性字典，用于存储模型属性名及值；
设置属性的方法，用于设置该数据对象实例的某个属性值，并在设置成功后发布一个自定义事件，调用回调函数，同步绑定元素值；
读取属性的方法，返回对应属性值；
发布/订阅对象实例的引用；
(3)具有自定义属性data-twoWayBind-id的HTML元素，其中id为模型id；
(4)生成数据模型对象的一个实例，传入模型id；
(5)使用实例的读取属性的方法和设置属性的方法，获取、设置对应数据。
本发明通过构造用于生成发布/订阅对象实例的函数，用于生成数据模型对象实例的函数，具有自定义属性data-twoWayBind-id的HTML元素，生成数据模型对象的一个实例，传入模型id，使用实例的读取属性的方法和设置属性的方法，获取、设置对应数据，因此能够避免每次数据读取设置都需要通过访问器的问题，在一些场景下能够避免大型框架的引入。
另外，所述步骤(1)中，函数内部定义插件可识别的HTML自定义属性字符串，及message字符串；使用事件订阅方法，订阅自定义事件message，事件处理方法用于更新所有绑定的元素的内容；注册js事件，对应事件处理程序用于发布自定义事件message，同步视图中的修改至数据模板和其他绑定元素。
另外，所述步骤(1)中，使用setTimeout(f,0)，将任务放到浏览器最早可得空闲时段进行。
另外，所述步骤(2)中，订阅自定义事件，绑定于当前模型，其回调函数用于设置绑定模型的对应属性。
另外，所述步骤(4)中，传入模型id与绑定元素的自定义属性id一致。
本领域普通技术人员可以理解，实现上述实施例方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成，所述的程序可以存储于一计算机可读取存储介质中，该程序在执行时，包括上述实施例方法的各步骤，而所述的存储介质可以是：ROM/RAM、磁碟、光盘、存储卡等。因此，与本发明的方法相对应的，本发明还同时包括一种前端数据双向绑定的实现装置，该装置通常以与方法各步骤相对应的功能模块的形式表示。使用该方法的装置包括：
生成发布/订阅对象实例的模块，其配置来构造用于生成发布/订阅对象实例的函数，其返回一个发布/订阅对象，该发布/订阅对象具有：
一个回调函数字典，用于存储事件及其回调方法，一个事件的多个回调按照订阅顺序存储于队列；
一个事件订阅方法，用于将订阅事件与时间发生后的回调函数存储于回调函数对象中；
一个事件发布方法，用于查找事件对应的回调函数队列，并调用；
生成数据模型对象实例的模块，其配置来构造用于生成数据模型对象实例的函数，其返回一个数据模型对象，该数据模型对象具有：
属性字典，用于存储模型属性名及值；
设置属性的方法，用于设置该数据对象实例的某个属性值，并在设置成功后发布一个自定义事件，调用回调函数，同步绑定元素值；
读取属性的方法，返回对应属性值；
发布/订阅对象实例的引用；
该装置还包括HTML元素，其配置来具有自定义属性data-twoWayBind-id，其中id为模型id；
该装置还包括实例生成模块，其配置来生成数据模型对象的一个实例，传入模型id；
该装置还包括获取设置模块，其配置来使用实例的读取属性的方法和设置属性的方法，获取、设置对应数据。
另外，所述生成发布/订阅对象实例的模块中，函数内部定义插件可识别的HTML自定义属性字符串，及message字符串；使用事件订阅方法，订阅自定义事件message，事件处理方法用于更新所有绑定的元素的内容；注册js事件，对应事件处理程序用于发布自定义事件message，同步视图中的修改至数据模板和其他绑定元素。
另外，所述生成发布/订阅对象实例的模块中，使用setTimeout(f,0)，将任务放到浏览器最早可得空闲时段进行。
另外，所述生成数据模型对象实例的模块中，订阅自定义事件，绑定于当前模型，其回调函数用于设置绑定模型的对应属性。
另外，所述HTML元素中，传入模型id与绑定元素的自定义属性id一致。
以上所述，仅是本发明的较佳实施例，并非对本发明作任何形式上的限制，凡是依据本发明的技术实质对以上实施例所作的任何简单修改、等同变化与修饰，均仍属本发明技术方案的保护范围。
Claims (10)
1.一种前端数据双向绑定的实现方法，其特征在于：该方法包括以下步骤：
(1)构造用于生成发布/订阅对象实例的函数，其返回一个发布/订阅对象，该发布/订阅对象具有：
一个回调函数字典，用于存储事件及其回调方法，一个事件的多个回调按照订阅顺序存储于队列；
一个事件订阅方法，用于将订阅事件与时间发生后的回调函数存储于回调函数对象中；
一个事件发布方法，用于查找事件对应的回调函数队列，并调用；
(2)构造用于生成数据模型对象实例的函数，其返回一个数据模型对象，该数据模型对象具有：
属性字典，用于存储模型属性名及值；
设置属性的方法，用于设置该数据对象实例的某个属性值，并在设置成功后发布一个自定义事件，调用回调函数，同步绑定元素值；
读取属性的方法，返回对应属性值；
发布/订阅对象实例的引用；
(3)具有自定义属性data-twoWayBind-id的HTML元素，其中id为模型id；
(4)生成数据模型对象的一个实例，传入模型id；
(5)使用实例的读取属性的方法和设置属性的方法，获取、设置对应数据。
2.根据权利要求1所述的前端数据双向绑定的实现方法，其特征在于：所述步骤(1)中，函数内部定义插件可识别的HTML自定义属性字符串，及message字符串；使用事件订阅方法，订阅自定义事件message，事件处理方法用于更新所有绑定的元素的内容；注册js事件，对应事件处理程序用于发布自定义事件message，同步视图中的修改至数据模板和其他绑定元素。
3.根据权利要求2所述的前端数据双向绑定的实现方法，其特征在于：所述步骤(1)中，使用setTimeout(f,0)，将任务放到浏览器最早可得空闲时段进行。
4.根据权利要求3所述的前端数据双向绑定的实现方法，其特征在于：所述步骤(2)中，订阅自定义事件，绑定于当前模型，其回调函数用于设置绑定模型的对应属性。
5.根据权利要求4所述的前端数据双向绑定的实现方法，其特征在于：所述步骤(4)中，传入模型id与绑定元素的自定义属性id一致。
6.一种前端数据双向绑定的实现装置，其特征在于：该装置包括：
生成发布/订阅对象实例的模块，其配置来构造用于生成发布/订阅对象实例的函数，其返回一个发布/订阅对象，该发布/订阅对象具有：
一个回调函数字典，用于存储事件及其回调方法，一个事件的多个回调按照订阅顺序存储于队列；
一个事件订阅方法，用于将订阅事件与时间发生后的回调函数存储于回调函数对象中；
一个事件发布方法，用于查找事件对应的回调函数队列，并调用；
该装置还包括，生成数据模型对象实例的模块，其配置来构造用于生成数据模型对象实例的函数，其返回一个数据模型对象，该数据模型对象具有：
属性字典，用于存储模型属性名及值；
设置属性的方法，用于设置该数据对象实例的某个属性值，并在设置成功后发布一个自定义事件，调用回调函数，同步绑定元素值；
读取属性的方法，返回对应属性值；
发布/订阅对象实例的引用；
该装置还包括HTML元素，其配置来具有自定义属性data-twoWayBind-id，其中id为模型id；
该装置还包括实例生成模块，其配置来生成数据模型对象的一个实例，传入模型id；
该装置还包括获取设置模块，其配置来使用实例的读取属性的方法和设置属性的方法，获取、设置对应数据。
7.根据权利要求6所述的前端数据双向绑定的实现装置，其特征在于：所述生成发布/订阅对象实例的模块中，函数内部定义插件可识别的HTML自定义属性字符串，及message字符串；使用事件订阅方法，订阅自定义事件message，事件处理方法用于更新所有绑定的元素的内容；注册js事件，对应事件处理程序用于发布自定义事件message，同步视图中的修改至数据模板和其他绑定元素。
8.根据权利要求7所述的前端数据双向绑定的实现装置，其特征在于：所述生成发布/订阅对象实例的模块中，使用setTimeout(f,0)，将任务放到浏览器最早可得空闲时段进行。
9.根据权利要求8所述的前端数据双向绑定的实现装置，其特征在于：所述生成数据模型对象实例的模块中，订阅自定义事件，绑定于当前模型，其回调函数用于设置绑定模型的对应属性。
10.根据权利要求9所述的前端数据双向绑定的实现装置，其特征在于：所述HTML元素中，传入模型id与绑定元素的自定义属性id一致。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201611021825.7A CN106446292B (zh) | 2016-11-16 | 2016-11-16 | 一种前端数据双向绑定的实现方法及装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201611021825.7A CN106446292B (zh) | 2016-11-16 | 2016-11-16 | 一种前端数据双向绑定的实现方法及装置 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN106446292A CN106446292A (zh) | 2017-02-22 |
| CN106446292B true CN106446292B (zh) | 2019-11-05 |
Family
ID=58221134
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201611021825.7A Active CN106446292B (zh) | 2016-11-16 | 2016-11-16 | 一种前端数据双向绑定的实现方法及装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106446292B (zh) |
Families Citing this family (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108509395A (zh) * | 2017-02-24 | 2018-09-07 | 北京国双科技有限公司 | 数据绑定方法及装置 |
| US10394627B2 (en) * | 2017-12-28 | 2019-08-27 | Schneider Electric Software, Llc | Asynchronous C#-JS data binding bridge |
| CN108346002A (zh) * | 2018-02-12 | 2018-07-31 | 深圳云图智联技术有限公司 | 用于变电站风险控制分析的前端展现方法及其系统 |
| CN110413920A (zh) * | 2018-04-25 | 2019-11-05 | 北京京东尚科信息技术有限公司 | 用于生成页面的方法和装置 |
| CN108845856B (zh) * | 2018-06-11 | 2021-12-14 | 腾讯科技（深圳）有限公司 | 基于对象的同步更新方法、装置、存储介质及设备 |
| CN110598152A (zh) * | 2019-09-11 | 2019-12-20 | 成都安恒信息技术有限公司 | 一种基于JavaScript的Form表单的事件扩展方法 |
| CN110968318A (zh) * | 2019-12-20 | 2020-04-07 | 创盛视联数码科技（北京）有限公司 | 一种MVVM设计模式JavaScript库实现方法 |
| CN112507356B (zh) * | 2020-12-04 | 2023-01-03 | 上海易校信息科技有限公司 | 一种基于Angular的集中式前端ACL权限控制方法 |
| CN115718593A (zh) * | 2022-09-09 | 2023-02-28 | 金现代信息产业股份有限公司 | 基于低代码开发平台的数据获取方法及系统 |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101196813A (zh) * | 2007-12-26 | 2008-06-11 | 上海科泰世纪科技有限公司 | 计算机软件系统中基于构件接口实现事件回调的方法 |
| CN101364236A (zh) * | 2008-09-18 | 2009-02-11 | 中兴通讯股份有限公司 | 一种web页面的数据处理装置及处理方法 |
| CN105867919A (zh) * | 2016-03-28 | 2016-08-17 | 浙江大学 | 一种基于访问器劫持的前端数据双向绑定实现方法 |
-
2016
- 2016-11-16 CN CN201611021825.7A patent/CN106446292B/zh active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101196813A (zh) * | 2007-12-26 | 2008-06-11 | 上海科泰世纪科技有限公司 | 计算机软件系统中基于构件接口实现事件回调的方法 |
| CN101364236A (zh) * | 2008-09-18 | 2009-02-11 | 中兴通讯股份有限公司 | 一种web页面的数据处理装置及处理方法 |
| CN105867919A (zh) * | 2016-03-28 | 2016-08-17 | 浙江大学 | 一种基于访问器劫持的前端数据双向绑定实现方法 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN106446292A (zh) | 2017-02-22 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106446292B (zh) | 一种前端数据双向绑定的实现方法及装置 | |
| CN107544806B (zh) | 可视化表单绘制方法 | |
| CN106250128B (zh) | 用户界面的显示处理方法及装置 | |
| CN107229474B (zh) | 基于可视化界面快速配置Java接口和图表服务的方法及装置 | |
| CN107656914B (zh) | 可配置化的表格生成方法、装置、终端设备及存储介质 | |
| US20080028302A1 (en) | Method and apparatus for incrementally updating a web page | |
| CN106339226B (zh) | 一种网页页面的展示方法和页面展示装置 | |
| CN101697156B (zh) | 一种构造链式网页的方法及系统 | |
| WO2017028611A1 (zh) | 一种表单实现方法及装置 | |
| CN111126019B (zh) | 基于模式定制的报表生成方法、装置和电子设备 | |
| CN108052322A (zh) | 一种基于可视化布局系统的拖拽方法 | |
| CN109062567A (zh) | 基于b/s结构的信息管理系统快速开发平台 | |
| CN111079047A (zh) | 一种面向web的页面构建系统 | |
| CN103051652B (zh) | 一种移动终端云计算发布平台 | |
| CN110235122A (zh) | 用于将web内容转化为可重复使用的模板和组件的系统和方法 | |
| CN109284103A (zh) | 一种基于控件开发模式的Web应用开发及更新方法 | |
| CN101025738A (zh) | 一种免模板动态网站生成方法 | |
| CN105204860A (zh) | 一种快速生成自定义静态Web页面的方法及装置 | |
| CN109445775B (zh) | 一键活动内嵌代码方法、装置及计算机可读存储介质 | |
| CN107291736A (zh) | 一种编辑页面的方法和系统 | |
| CN108268615B (zh) | 一种数据处理方法、装置以及系统 | |
| CN106066757A (zh) | 一种移动终端app图文混排的方法及系统 | |
| CN109445794A (zh) | 一种页面构造方法及装置 | |
| CN100418086C (zh) | 一种文字的可变数据排版的方法 | |
| CN109213480A (zh) | 一种开发后台管理页面的方法、存储介质、设备及系统 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| TR01 | Transfer of patent right |
Effective date of registration: 20220422 Address after: 100000 room 116, building 3, Shuangqiao (Shuangqiao dairy factory), Chaoyang District, Beijing Patentee after: Beijing Xiaoxiang innovation Artificial Intelligence Technology Co.,Ltd. Address before: 100085 901, 9th floor, building 5, yard 1, Shangdi East Road, Haidian District, Beijing Patentee before: BEIJING GEO POLYMERIZATION TECHNOLOGY Co.,Ltd. |
|
| TR01 | Transfer of patent right |