本发明涉及复杂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)利用ECMAScript262v5标准发布的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所示。代码如下：<divms-controller＝"hello"><h1gs-text＝"name"></h1></div>表1绑定属性表第二步，新建监听数据的所属的ViewModel对象，申明和初始化其下的监听数据。代码如下：varmodel＝gs.define('hello',function(vm){vm.name＝null；})；第三步，扫描界面标签上的绑定属性，当绑定属性绑定的监听数据名与该标签所属ViewModel下的与监听数据名相同时，将该标签对应的DOM对象和监听数据进行绑定。第四步，利用ECMAScript262v5标准发布的Object.defineProperty(定义标准属性)接口，为需要监听的数据设置writable属性为true；设置enumerable属性为true；设置configurable属性为true。主要代码为：第五步，利用Object.defineProperty接口，为需要监听的数据设置初始值。主要代码为：Object.defineProperty(vm,‘name‘,{"value":"GISLab"})；第六步，利用Object.defineProperty接口，为需要监听的数据设置属性的重写器(get方法)；为需要监听的数据设置属性的读取器(set方法)。主要代码为：本实施例的结果如图2所示，表明当输入框输入导致数据改变时，界面随之改变，完美地实现了前端数据双向绑定。由此可见，本发明能够确保当界面内容变化时，绑定的数据随之变化；而数据变化时，界面内容也同时发生变化，从而实现对web应用中数据、界面以及它们之间复杂相互依赖关系的管理。它利用先进的前端工程技术，简化了前端开发人员的工作，提高了前端开发和前端维护的效率。当前第1页1 2 3 当前第1页1 2 3