CN106484412A - 一种基于访问器劫持的前端数据双向绑定实现方法 - Google Patents
一种基于访问器劫持的前端数据双向绑定实现方法 Download PDFInfo
- Publication number
- CN106484412A CN106484412A CN201610873287.8A CN201610873287A CN106484412A CN 106484412 A CN106484412 A CN 106484412A CN 201610873287 A CN201610873287 A CN 201610873287A CN 106484412 A CN106484412 A CN 106484412A
- Authority
- CN
- China
- Prior art keywords
- data
- attribute
- monitored
- interface
- binding
- 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.)
- Withdrawn
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/20—Software design
- G06F8/24—Object-oriented
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Document Processing Apparatus (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本发明一种电子地图图例内容的交互式自动更新方法。它包括以下步骤：1)在界面模板的标签内添加各类必要的绑定属性，并指明与该属性绑定的监听数据名。2)新建监听数据的所属的ViewModel对象，申明和初始化其下的监听数据。3)扫描界面标签上的绑定属性，当绑定属性绑定的监听数据名与该标签所属ViewModel下的与监听数据名相同时，将该标签对应的DOM对象和监听数据进行绑定。4)利用Object.defineProperty接口，为需要监听的数据设置writable属性为true；设置enumerable属性为true；设置configurable属性为true。5)利用Object.defineProperty接口，为需监听的数据设置初始值；6)利用Object.defineProperty接口，为需监听的数据设置属性的重写器；为需监听的数据设置属性的读取器。本方法充分利用了计算机的高效处理性能，提高了电子地图的易读性。
Description
技术领域
本发明涉及复杂web应用中大量前端元素数据、业务逻辑以及界面之间的管理，尤其涉及一种双向数据绑定的特性。
背景技术
早期的web应用以浏览为主，业务逻辑基本上仅限于表单的提交，javascript的作用体现在对表单的控制上，复杂度较低。90年代末，ajax横空出世，意味着浏览器已经可以承载更复杂的应用功能，2010年后，伴随着“web3.0”的浪潮，facebook、微博等各类大型web应用走向成熟，其程序的框架插件众多、体系繁复，复杂度达到了一个新的水准，往往让开发维护无所适从。为了更好地在前端进行模块化开发，合理组织业务数据，让界面和业务数据之间高效交互，MVVM框架应运而生，而双向数据绑定是MVVM框架的核心特性，也是管理web应用中复杂对象、数据、界面及其之间依赖关系的关键所在。
现有MVVM框架的双向数据绑定特性主要使用数据循环脏检测的方式实现，代表性的有AngularJs、Backbone等。数据循环脏检测实现方式在每次事件触发中都将对所有监听器进行遍历，页面上的指令和监听数据越多，遍历时间越长，页面可能由于循环时间过长而出现假死情况。而且，单个页面中能够承载的监听数据量也十分有限。本发明提出一种基于访问器劫持方法的双向数据绑定特性实现方法，相比传统方法，效率更高，逻辑更清晰直观，且单页面支持监听数据量也更多。
本发明中涉及到的名词解释。
web应用：Web应用程序是一种可以通过Web访问的应用程序。Web应用程序的一个最大好处是用户很容易访问应用程序。用户只需要有浏览器即可，不需要再安装其他软件。
MVVM框架：MVVM是Model-ViewModel-View的简写，被认为是前端开发领域最先进的设计模式，能够做到关注点分离，降低数据、用户界面与业务逻辑之间的耦合程度。MVVM框架就是符合MVVM思想的前端框架。
双向数据绑定：双向数据绑定是MVVM框架的核心特性，其内涵是：界面的改变能够反应在数据上，而数据改变后同时能够更新页面。
发明内容
本发明的目的是克服现有技术的不足，提供一种效率更高，更易于使用的数据双向绑定实现方法。
基于访问器劫持的前端数据双向绑定实现方法，包括如下步骤：
1)在界面模板的标签内添加各类必要的绑定属性，并指定与该属性绑定的监听数据名；
2)新建监听数据的所属的ViewModel对象，初始化其下的监听数据；
3)扫描界面标签上的绑定属性，当绑定属性绑定的监听数据名与该标签所属ViewModel下的与监听数据名相同时，将该标签对应的DOM对象和监听数据进行绑定；
4)利用Object.defineProperty接口，为需要监听的数据设置writable属性为true；设置enumerable属性为true；设置configurable属性为true；
5)利用Object.defineProperty接口，为需要监听的数据设置初始值；
6)利用Object.defineProperty接口，为需要监听的数据设置属性的重写器；为需要监听的数据设置属性的读取器，实现前端数据双向绑定。
以上方案中，各步骤可采用如下具体方法：
步骤1)中绑定属性以“gs”作为前缀，以“-”作为连接符，具体分类包括：1)作用域属性：以“gs-controller-”开头，后接用户自定义的ViewModel类名称，用于和具体的ViewModel对象相互绑定；2)数据填充属性：用于将数据打印到页面上；3)插入移除属性：用于控制不同情况下数据的显示与否；4)特性属性：用于控制各种html标签支持的特性；5)样式属性：用于控制CSS样式；6)事件属性：以“gs-event-”开头，后接W3C标准事件名称，用于进行事件绑定；7)循环属性：用于根据可供循环操作的数据，在界面中重复输出内容。
步骤2)中，ViewModel对象为设定作用域下，MVVM设计模式中的ViewModel对象，用于联结View对象和Model对象，在该作用域下的所有监听数据都作为该对象的子对象存在，作用域的划分根据用户的标记来确定，并且作用域互相嵌套。
步骤3)中绑定过程包括：
1)扫描：在得到文档树后，由顶向下，先找到元素节点，然后优先处理skip、important、controller三个绑定标记，继而扫描特性标记、最后扫描文本节点，并递归这一过程，直至扫描结束，最终得到一个包含绑定节点所有必要信息的对象；
2)转换求值函数：通过对特性标记的分析，得到具体的求值对象和求值逻辑，生成求值函数；
3)订阅：采用观察者模式，将上一步转换生成的求值函数纳入监听数据的观察列表，当数据改变时，观察列表中的所有求值函数都将被顺序调用。
步骤6)中，所述的重写器在监听数据被读取时被调用，用于数据的规范化处理，包括去空格、去回车、去特殊符号、空位补完；所述的读取器含有能够访问订阅列表的回调方法，当监听数据改变时，由该方法主动执行订阅列表中保存的所有求值函数。
本发明与现有技术相比具有的有益效果是：
1)前端双向数据绑定特性能够有效地管理数据、界面和业务之间的复杂逻辑和依赖响应关系，能够做到关注点分离，简化前端复杂度，提高前端开发人员的开发效率和维护效率。
2)在现有技术下(数值循环脏检测)，每次事件触发都将对所有监听器进行遍历，页面上的指令和监听数据越多，遍历时间越长，页面可能由于循环时间过长而出现假死情况。本发明克服了这一问题，大大提升了监听效率，并将单页面最大监听数据数从2000个上升到12000个。
附图说明
图1是一种实现本发明的技术流程图示意图；
图2是本发明的应用实例，表明当输入框输入导致数据改变时，界面随之改变；
具体实施方式
下面结合附图和实施例对本发明做进一步阐述。
如图1所示，基于访问器劫持的前端数据双向绑定实现方法具体步骤如下：
1)在界面模板的标签内添加各类必要的绑定属性，并指明与该属性绑定的监听数据名。具体包括：(1)设定作用域属性：以“gs-controller-”开头，后接用户自定义的ViewModel类名称，用于和具体的ViewModel对象相互绑定。(2)设定数据填充属性：用于将数据打印到页面上。(3)设定插入移除属性：用于控制不同情况下数据的显示与否。(4)设定特性属性：用于控制各种html标签支持的特性。(5)设定样式属性：用于控制CSS样式。(6)设定事件属性：以“gs-event-”开头，后接各种W3C标准事件名称，用于进行事件绑定。(7)设定循环属性：用于根据数组等可供循环操作的数据，在界面中重复输出内容。
2)新建监听数据的所属的ViewModel对象，申明和初始化其下的监听数据。其中，该对象即为设定作用域下，MVVM设计模式中的ViewModel对象，用于联结View对象(界面)和Model对象(数据)，在该作用域下的所有监听数据都作为该对象的子对象存在，作用域的划分根据用户的标记来确定，并且作用域可以互相嵌套。
3)扫描界面标签上的绑定属性，当绑定属性绑定的监听数据名与该标签所属ViewModel下的与监听数据名相同时，将该标签对应的DOM对象和监听数据进行绑定。具体包括三个子步骤：
(1)扫描：在得到文档树后，由顶向下，先找到元素节点，然后优先处理skip、important、controller等三个绑定标记，继而扫描特性标记、最后扫描文本节点，并递归这一过程，直至扫描结束，最终得到一个包含绑定节点所有必要信息的对象。
(2)转换求值函数：求值函数就是指监听数据改变时，对决定界面显示效果的某一个值(属性、样式、文本)进行修改的函数，这一步骤通过对特性标记的分析，得到具体的求值对象和求值逻辑，生成求值函数。
(3)订阅：采用观察者模式，将上一步转换生成的求值函数纳入监听数据的观察列表，当数据改变时，观察列表中的所有求值函数都将被顺序调用。
4)利用ECMAScript 262v5标准发布的Object.defineProperty(定义标准属性)接口，为需要监听的数据设置writable属性为true；设置enumerable属性为true；设置configurable属性为true。该步骤本质上包含三方面的内容：(1)writable属性描述符用于描述该属性是否可写，如果设置成false，则任何对该属性改写的操作都无效(2)enumerable属性描述符用于描述该属性是否可以遍历，如果设置成false，就不能在for-in循环中遍历出来或在Object.keys接口中被列举出来。(3)configurable属性描述符用于描述该属性是否可删除，如果为false，则任何尝试删除目标属性或修改属性以下特性(包括writable、enumerable和configurable本身)的行为都将被无效化。(4)由于双向数据绑定要求满足对监听数据的修改和遍历，所以以上三个属性描述符均要设置为true。
5)利用Object.defineProperty接口，为需要监听的数据设置初始值。
6)利用Object.defineProperty接口，为需要监听的数据设置属性的重写器(get方法)；为需要监听的数据设置属性的读取器(set方法)。步骤6)实际包含两方面内容：(1)重写器(get方法)：重写器会在监听数据被读取时被调用，其目的主要在于数据的规范化处理，包括去空格、去回车、去特殊符号、空位补完等。(2)读取器(set方法)：读取器是该发明实现的核心，当数据修改时，读取器会被调用。在本发明中，读取器被赋予一个能够访问订阅列表的回调方法，当监听数据改变时，该方法就会主动执行订阅列表中保存的所有求值函数。
下面基于上述方法，结合实施例进行进一步说明，实施例中部分具体参数和结果如下：
第一步，在界面模板的标签内添加各类必要的绑定属性，并指明与该属性绑定的监听数据名。各类绑定属性如表1所示。代码如下：
<div ms-controller＝"hello">
<h1 gs-text＝"name"></h1>
</div>
表1绑定属性表
第二步，新建监听数据的所属的ViewModel对象，申明和初始化其下的监听数据。代码如下：
var model＝gs.define('hello',function(vm){
vm.name＝null；
})；
第三步，扫描界面标签上的绑定属性，当绑定属性绑定的监听数据名与该标签所属ViewModel下的与监听数据名相同时，将该标签对应的DOM对象和监听数据进行绑定。
第四步，利用ECMAScript 262v5标准发布的Object.defineProperty(定义标准属性)接口，为需要监听的数据设置writable属性为true；设置enumerable属性为true；设置configurable属性为true。主要代码为：
第五步，利用Object.defineProperty接口，为需要监听的数据设置初始值。主要代码为：
Object.defineProperty(vm,‘name‘,{
"value":"GISLab"
})；
第六步，利用Object.defineProperty接口，为需要监听的数据设置属性的重写器(get方法)；为需要监听的数据设置属性的读取器(set方法)。主要代码为：
本实施例的结果如图2所示，表明当输入框输入导致数据改变时，界面随之改变，完美地实现了前端数据双向绑定。
由此可见，本发明能够确保当界面内容变化时，绑定的数据随之变化；而数据变化时，界面内容也同时发生变化，从而实现对web应用中数据、界面以及它们之间复杂相互依赖关系的管理。它利用先进的前端工程技术，简化了前端开发人员的工作，提高了前端开发和前端维护的效率。
Claims (5)
1.一种基于访问器劫持的前端数据双向绑定实现方法，其特征在于包括如下步骤：
1)在界面模板的标签内添加各类必要的绑定属性，并指定与该属性绑定的监听数据名；
2)新建监听数据的所属的ViewModel对象，初始化其下的监听数据；
3)扫描界面标签上的绑定属性，当绑定属性绑定的监听数据名与该标签所属ViewModel下的与监听数据名相同时，将该标签对应的DOM对象和监听数据进行绑定；
4)利用Object.defineProperty接口，为需要监听的数据设置writable属性为true；设置enumerable属性为true；设置configurable属性为true；
5)利用Object.defineProperty接口，为需要监听的数据设置初始值；
6)利用Object.defineProperty接口，为需要监听的数据设置属性的重写器；为需要监听的数据设置属性的读取器，实现前端数据双向绑定。
2.根据权利要求1所述的方法，其特征在于所述的步骤1)中绑定属性以“gs”作为前缀，以“-”作为连接符，具体分类包括：1)作用域属性：以“gs-controller-”开头，后接用户自定义的ViewModel类名称，用于和具体的ViewModel对象相互绑定；2)数据填充属性：用于将数据打印到页面上；3)插入移除属性：用于控制不同情况下数据的显示与否；4)特性属性：用于控制各种html标签支持的特性；5)样式属性：用于控制CSS样式；6)事件属性：以“gs-event-”开头，后接W3C标准事件名称，用于进行事件绑定；7)循环属性：用于根据可供循环操作的数据，在界面中重复输出内容。
3.根据权利要求1所述的方法，其特征在于步骤2)中，ViewModel对象为设定作用域下，MVVM设计模式中的ViewModel对象，用于联结View对象和Model对象，在该作用域下的所有监听数据都作为该对象的子对象存在，作用域的划分根据用户的标记来确定，并且作用域互相嵌套。
4.根据权利要求1所述的方法，其特征在于步骤3)中绑定过程包括：
1)扫描：在得到文档树后，由顶向下，先找到元素节点，然后优先处理skip、important、controller三个绑定标记，继而扫描特性标记、最后扫描文本节点，并递归这一过程，直至扫描结束，最终得到一个包含绑定节点所有必要信息的对象；
2)转换求值函数：通过对特性标记的分析，得到具体的求值对象和求值逻辑，生成求值函数；
3)订阅：采用观察者模式，将上一步转换生成的求值函数纳入监听数据的观察列表，当数据改变时，观察列表中的所有求值函数都将被顺序调用。
5.根据权利要求1所述的方法，其特征在于步骤6)中，所述的重写器在监听数据被读取时被调用，用于数据的规范化处理，包括去空格、去回车、去特殊符号、空位补完；所述的读取器含有能够访问订阅列表的回调方法，当监听数据改变时，由该方法主动执行订阅列表中保存的所有求值函数。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610873287.8A CN106484412A (zh) | 2016-09-30 | 2016-09-30 | 一种基于访问器劫持的前端数据双向绑定实现方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610873287.8A CN106484412A (zh) | 2016-09-30 | 2016-09-30 | 一种基于访问器劫持的前端数据双向绑定实现方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN106484412A true CN106484412A (zh) | 2017-03-08 |
Family
ID=58268389
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201610873287.8A Withdrawn CN106484412A (zh) | 2016-09-30 | 2016-09-30 | 一种基于访问器劫持的前端数据双向绑定实现方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106484412A (zh) |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107832350A (zh) * | 2017-10-20 | 2018-03-23 | 金蝶软件（中国）有限公司 | 一种web数据双向绑定的方法、装置、终端及存储介质 |
| CN108845856A (zh) * | 2018-06-11 | 2018-11-20 | 腾讯科技（深圳）有限公司 | 数据绑定方法、装置、存储介质及设备 |
| CN109032587A (zh) * | 2018-07-19 | 2018-12-18 | 武汉斗鱼网络科技有限公司 | 一种数据流管理框架、方法、终端设备及存储介质 |
| CN110968318A (zh) * | 2019-12-20 | 2020-04-07 | 创盛视联数码科技（北京）有限公司 | 一种MVVM设计模式JavaScript库实现方法 |
| CN111124712A (zh) * | 2019-12-20 | 2020-05-08 | 北京奇艺世纪科技有限公司 | 一种事件通知方法、装置、服务器及存储介质 |
-
2016
- 2016-09-30 CN CN201610873287.8A patent/CN106484412A/zh not_active Withdrawn
Cited By (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107832350A (zh) * | 2017-10-20 | 2018-03-23 | 金蝶软件（中国）有限公司 | 一种web数据双向绑定的方法、装置、终端及存储介质 |
| CN107832350B (zh) * | 2017-10-20 | 2021-02-02 | 金蝶软件（中国）有限公司 | 一种web数据双向绑定的方法、装置、终端及存储介质 |
| CN108845856A (zh) * | 2018-06-11 | 2018-11-20 | 腾讯科技（深圳）有限公司 | 数据绑定方法、装置、存储介质及设备 |
| CN108845856B (zh) * | 2018-06-11 | 2021-12-14 | 腾讯科技（深圳）有限公司 | 基于对象的同步更新方法、装置、存储介质及设备 |
| CN109032587A (zh) * | 2018-07-19 | 2018-12-18 | 武汉斗鱼网络科技有限公司 | 一种数据流管理框架、方法、终端设备及存储介质 |
| CN109032587B (zh) * | 2018-07-19 | 2021-11-26 | 武汉斗鱼网络科技有限公司 | 一种数据流管理框架、方法、终端设备及存储介质 |
| CN110968318A (zh) * | 2019-12-20 | 2020-04-07 | 创盛视联数码科技（北京）有限公司 | 一种MVVM设计模式JavaScript库实现方法 |
| CN111124712A (zh) * | 2019-12-20 | 2020-05-08 | 北京奇艺世纪科技有限公司 | 一种事件通知方法、装置、服务器及存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106484412A (zh) | 一种基于访问器劫持的前端数据双向绑定实现方法 | |
| CN105867919A (zh) | 一种基于访问器劫持的前端数据双向绑定实现方法 | |
| CN101771681B (zh) | 一种页面显示控制方法、服务器及系统 | |
| CN1838111B (zh) | 一种编辑文档并记录修改痕迹的方法 | |
| CN107766309B (zh) | 数据表格生成方法、装置以及存储介质、电子装置 | |
| CN105339932A (zh) | 浏览器驱动的功率节省 | |
| US20130041904A1 (en) | Computer indexes with multiple representations | |
| CN103365852A (zh) | 一种文档库系统中的并发控制方法及系统 | |
| CN103279455A (zh) | 电子表格的样式处理方法和装置 | |
| CN103810173A (zh) | 分页数据处理方法和系统 | |
| CN105550354A (zh) | 一种配置文件管理的方法和系统 | |
| CN108334508A (zh) | 网页信息的提取方法和装置 | |
| CN103309879A (zh) | 一种管理word文档中的标记的方法及装置 | |
| EP2933731A1 (en) | Method for configuring browser bookmarks, device and terminal thereof | |
| CN103365877B (zh) | 对网页进行转码后建立目录的方法以及服务器 | |
| CN102117205B (zh) | 一种生成窗口资源文件的方法及装置 | |
| CN108874934A (zh) | 页面正文提取方法和装置 | |
| CN115525580A (zh) | 一种namespace设置方法、装置及可读存储介质 | |
| CN111291022A (zh) | 一种基于区块链的数据存储系统 | |
| CN100462973C (zh) | Xml文件预处理方法、装置、读取方法和装置 | |
| CN101996190B (zh) | 一种从网页中抽取信息的方法及装置 | |
| CN110020279B (zh) | 页面数据处理方法、装置及存储介质 | |
| WO2023231760A1 (zh) | 用于管理电子书籍中的元素的方法、装置、设备和介质 | |
| US20170097990A1 (en) | Text-sql relational database | |
| CN116384347A (zh) | 一种富文本编辑方法 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| WW01 | Invention patent application withdrawn after publication | ||
| WW01 | Invention patent application withdrawn after publication |
Application publication date: 20170308 |