一种前端数据双向绑定的实现方法及装置制造方法及图纸

一种前端数据双向绑定的实现方法，包括：(1)构造用于生成发布/订阅对象实例的函数，其返回一个发布/订阅对象；(2)构造用于生成数据模型对象实例的函数，其返回一个数据模型对象；(3)具有自定义属性data‑twoWayBind‑id的HTML元素，其中id为模型id；(4)生成数据模型对象的一个实例，传入模型id；(5)使用实例的读取属性的方法和设置属性的方法，获取、设置对应数据。还有一种前端数据双向绑定的实现装置。

【技术实现步骤摘要】

本专利技术涉及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、磁碟、光盘、存储卡等。因此，与本专利技术的方法相对应的，本专利技术还同时包括一种前端数据双向绑定的实现装置，该装置通常以与方法各步骤相对应的功能模块的形式表示。使用该方法的装置包本文档来自技高网...

【技术保护点】
一种前端数据双向绑定的实现方法，其特征在于：该方法包括以下步骤：(1)构造用于生成发布/订阅对象实例的函数，其返回一个发布/订阅对象，该对象具有：一个回调函数字典，用于存储事件及其回调方法，一个事件的多个回调按照订阅顺序存储于队列；一个事件订阅方法，用于将订阅事件与时间发生后的回调函数存储于回调函数对象中；一个事件发布方法，用于查找事件对应的回调函数队列，并调用；(2)构造用于生成数据模型对象实例的函数，其返回一个数据模型对象，该对象具有：属性字典，用于存储模型属性名及值；设置属性的方法，用于设置该数据对象实例的某个属性值，并在设置成功后发布一个自定义事件，调用回调函数，同步绑定元素值；读取属性的方法，返回对应属性值；发布/订阅对象实例的引用；(3)具有自定义属性data‑twoWayBind‑id的HTML元素，其中id为模型id；(4)生成数据模型对象的一个实例，传入模型id；(5)使用实例的读取属性的方法和设置属性的方法，获取、设置对应数据。

【技术特征摘要】
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.一种前端数据双向绑定的实现装置，其特征在于：该装置包括：生成发布/订...

【专利技术属性】
技术研发人员：赵一帆，张翼，温宗臣，赵志华，
申请(专利权)人：北京集奥聚合科技有限公司，
类型：发明
国别省市：北京;11