本发明涉及计算机网络
技术领域：
：，具体涉及一种面向json的网页模块化设计及其异步加载方法。
背景技术：
：：javascriptobjectnotation(即json)是javascript编程语言中定义的一种语法单元，目前常被用做一种轻量级的数据交换格式。json可被表示成一组文本格式的名称-值对的集合，其独立于具体编程语言，可被大多数常用编程语言解析和自动生成；json语法简洁，不存在数据冗余，可以大大提高传输与响应速度。json使用方便，特别是在进行web前端开发时，json格式的数据经过javascript的eval方法即可转换成javascript内部对象供程序调用，其转换方法在不同内核的浏览器内部是定义好的而且统一的，不需要手工编写，也不需要考虑不同内核浏览器的差异性。web服务器端常用的语言也都提供相应的json解析器，可以很方便的解析客户端传过来的json格式的数据，而不需要借助于其它的api工具。在一个典型的web应用中，根据web客户端的请求报文，web服务器端通常需要动态生成html网页代码作为响应报文并通过网络返回给web客户端。然而，传统方式生成html网页代码被当作一个长字符串处理，字符串的解析相对繁琐，当需要修改某个网页元素时，仅仅在字符串中定位相应的html标签以及标签属性就会非常困难；同时，在以字符串形式表示的html代码中修改网页布局或网页结构也会非常困难；另外，以字符串形式表示的html代码存在大量数据冗余，例如每个网页元素均需要包括起始标签和终止标签，将字符串形式的html代码直接在网络中传输，会降低网络通信的传输和响应速度。因此，web应用开发领域迫切需要一种更加高效的网页表示及设计方式。技术实现要素：针对上述现有技术中存在的问题，本发明的目的在于，提供一种面向json的网页模块化设计及其异步加载方法，以克服现有网页设计方法中生成的html代码解析困难、修改困难和数据冗余等缺陷，实现了利用json对象的方式对网页进行模块化设计并进行异步加载。为了实现上述任务，本发明采用以下技术方案：一种面向json的网页模块化设计及其异步加载方法，包括以下步骤：步骤一，确定网页的布局结构，以及布局结构中各个部分所需要包含的网页元素；步骤二，根据步骤一确定的网页布局结构和网页元素，使用json对象的形式定义网页布局模板以及相应的网页元素；所述的网页布局模板中包括网页布局容器以及网页布局条目这两类组件；步骤三，将定义的网页布局容器、网页布局条目和网页元素组装成网页json对象；步骤四，创建一个htmldom对象类型的全局等待队列；步骤五，遍历json对象的template.childs属性中的所有对象，在遍历过程中判断当前对象是网页布局模板还是网页元素，然后根据判断结果执行步骤六或步骤七；当遍历完成时，转向步骤十；步骤六，如果是网页布局模板，则继续遍历其childs属性中的所有对象，并保存遍历每个对象时所生成的htmldom对象，直到遍历完成时，根据返回的所有htmldom对象，以及当前网页布局模板的component属性，生成网页布局模板对应的htmldom对象，然后返回步骤五；步骤七，如果是网页元素，则检测该网页元素scriptaddr属性对应的脚本代码是否加载完成，如果加载完成，则执行该脚本代码，创建该网页元素对应的htmldom对象并返回给它的上一级网页布局模板，并返回步骤六；否则，执行步骤八；步骤八，判断是否已经创建和当前网页元素对应的script对象，如果是则返回一个空的htmldom对象给它的上一级网页布局模板，并返回步骤六；否则，执行步骤九；步骤九，创建和当前网页元素对应的script对象，并将当前网页元素scriptaddr属性的值赋值给该script对象的src属性，将该script对象加入步骤四中创建的全局等待队列中，然后返回一个空的htmldom对象给它的上一级网页布局模板，并返回步骤六；步骤十，调用web浏览器提供的网页渲染引擎接口，渲染步骤六中已创建的网页布局模板及其中包含的htmldom对象；步骤十一，检测所述的全局等待队列是否为空，如果是则网页所有内容加载完成，则退出本方法；否则执行步骤十二；步骤十二，检测全局等待队列中是否存在已完成加载的script对象，如果有，则从队列中删除该script对象，并返回步骤十一；否则，执行步骤十三；步骤十三，监听全局等待队列中位于队列首部的script对象的onload事件发生，当该script对象的onload事件发生后，则返回步骤五。进一步地，所述的步骤二中，网页的各个板块的布局模板用网页布局条目定义，网页布局条目必须定义在网页布局容器中。进一步地，所述的步骤三中，组装的规则是：网页布局条目必须定义在网页布局容器的childs属性中，一个网页布局容器中可定义多个网页布局条目；网页元素必须定义在网页布局条目的childs属性中，一个网页元素对应一个网页布局条目；在网页布局条目的childs属性中还可以进一步嵌套定义网页布局容器。本发明与现有技术相比具有以下技术特点：1.本发明使用json对象表示html网页布局和网页元素，网页布局模板及网页元素被封装成不同的json对象，这些json对象相对独立又可以嵌套定义，从而可以方便实现网页的动态修改；2.使用json对象表示html网页布局和网页元素可以进一步降低数据冗余，提高网页代码的网络传输和响应速度。本发明的方法适用于web软件设计，在软件开发领域有重要的应用价值。附图说明图1为本发明方法的流程图；具体实施方式本发明使用json对象表示html网页布局和网页元素，利用javascript程序设计语言自带的解析功能，可以将网页json对象直接转化成javascript语言的内部对象，从而降低了网页代码的解析难度；面向json进行网页设计时，采用模块化设计思想，网页布局模板及网页元素被封装成不同的json对象，这些json对象相对独立又可以嵌套定义，从而可以方便实现网页的动态修改；html网页采用json对象的形式表示可以进一步降低数据冗余，提高网页代码的网络传输和响应速度。本发明的详细步骤如下：步骤一，设计人员确定网页布局结构，以及网页布局结构中各个部分所包含的网页元素。网页布局结构是指html网页被划分的各个版块、各个板块的尺寸和各个板块之间的相对位置，常见的网页布局结构包括上下布局结构、左右布局结构、田字形布局结构等等。所述的网页元素是指在html网页的某个版块中使用到的html标签元素，常见的有div、span和table等html标签。步骤二，根据步骤一确定的网页布局结构以及确定的网页元素，使用json对象的形式定义网页布局模板，并使用json对象的形式定义相应的网页元素；网页布局模板中包括了template-container和template-item两类组件，其中template-container为网页布局容器，template-item为网页布局条目；网页的各个版块的布局模板用template-item定义，template-item必须定义在template-container中；根据网页布局结构，一个template-container中可定义多个template-item。所述的网页布局模板以json对象的方式表示，如下式所示：{"name":"","version":"","template":object{...}}(1)其中，name为string类型，表示布局模板名称；version为string类型，表示网页布局模板的版本号；template为json对象类型，表示网页布局模板中的对象，template-container被定义在该属性中。所述的网页布局容器template-container以json对象的方式表示，如下式所示：其中，component为string类型，表示布局容器使用的html标签名，如div、span等；props为json对象类型，其中定义了classname属性，classname为string类型，表示该布局模板组件的类型，此处定义为"template-container"；childs为数组类型，数组元素中的template属性为json对象类型，网页布局条目template-item被定义在该属性中。所述的网页布局条目template-item以json对象的方式表示，如下式所示：其中，component为string类型，表示布局条目使用的html标签名，如div、span等；props为json对象类型，其中定义了classname和style属性，classname为string类型，表示该布局模板组件的类型，此处定义为"template-item"，style为string类型，表示该布局条目在网页上显示式的渲染属性，可用css样式规则的方式进行定义；childs为数组类型，其中保存在该布局条目中的网页元素json对象。所述的网页元素以json对象的方式表示，如下式所示：其中，name为string类型，表示网页元素名称；version为string类型，表示网页元素的版本号；scriptaddr为string类型，表示解析网页元素的javascript脚本代码的url地址，该代码根据网页元素的props属性数据动态生成htmldom对象；props为json对象类型，表示网页元素属性，包括src和text等内部成员，其中src为string类型，表示网页元素引用资源的url地址，text为string类型，表示对网页元素的文字描述；hashname为string类型，表示网页元素的hash值。步骤三，将定义的网页布局容器、网页布局条目和网页元素组装成网页json对象；组装的规则是：网页布局条目必须定义在网页布局容器的childs属性中，一个网页布局容器中可定义多个网页布局条目；网页元素必须定义在网页布局条目的childs属性中，一个网页元素对应一个网页布局条目；在网页布局条目的childs属性中还可以进一步嵌套定义网页布局容器。组装过程通过下面的示例进行进一步说明。例如，对于一个上下结构的网页，其上部和下部分别包含一个网页元素。上述网页对应的json对象如下所示：所述的网页中，上下两个网页布局条目的相对位置分别由网页布局条目中的props属性中的style属性中定义的css样式规则控制。网页元素scriptaddr属性中定义的javascript脚本代码主要是利用web浏览器提供的接口生成网页元素对应的htmldom对象。步骤四，从本步骤开始将实现对上述网页json对象的异步加载过程。首先创建一个htmldom对象类型的全局等待队列，全局等待队列为javascript的array类型，array中的元素均为htmldom对象。利用javascript语言的特性，所述的全局等待队列中元素的索引可以用string表示。步骤五，遍历json对象的template.childs属性中的所有对象，在遍历过程中判断当前对象是网页布局模板还是网页元素，然后根据判断结果执行步骤六或步骤七；当遍历完成时，转向步骤十；步骤六，如果是网页布局模板，则继续遍历其childs属性中的所有对象，并保存遍历每个对象时所生成的htmldom对象，直到遍历完成时，根据返回的所有htmldom对象，以及当前网页布局模板的component属性，生成网页布局模板对应的htmldom对象，然后返回步骤五；所述的生成网页布局模板对应的htmldom对象是通过web浏览器的dom接口函数document.createdocumentfragment()创建，该网页布局模板中包含了遍历其childs属性中所有对象时所返回的所有htmldom对象，以及该网页布局模板的component属性所指定的htmldom对象。所述的遍历网页布局模板的childs属性中的所有对象所生成的htmldom对象，通过web浏览器的dom接口函数document.createdocumentfragment().appendchild()添加到网页布局模板对应的htmldom对象中。步骤七，如果是网页元素，则检测该网页元素scriptaddr属性对应的脚本代码是否加载完成，如果加载完成，则执行该脚本代码，创建该网页元素对应的htmldom对象并返回给它的上一级网页布局模板，并返回步骤六；否则，执行步骤八；所述的创建网页元素对应的htmldom对象，是通过调用web浏览器的dom接口函数document.createelement()实现的，其中所创建的网页元素对应的htmldom对象以网页元素hashname属性值命名。检测网页元素scriptaddr属性对应的脚本代码是否加载完成是通过如下方式完成的：检测web浏览器的window对象包含的dom对象集合中是否已经包含名称为网页元素hashname属性值的dom对象；如已包含该dom对象，则相应的脚本代码已经加载完成；否则，未加载完成。步骤八，判断是否已经创建和当前网页元素对应的script对象，如果是则返回一个空的htmldom对象给它的上一级网页布局模板，并返回步骤六；否则，执行步骤九；所述的网页元素对应的script对象是指一种标准的htmldom对象，该对象包含了创建网页元素的javascript代码，script对象可由web浏览器提供的dom接口函数document.createelement()进行创建。步骤九，创建和当前网页元素对应的script对象，并将当前网页元素scriptaddr属性的值赋值给该script对象的src属性，将该script对象加入步骤四中创建的全局等待队列中，然后返回一个空的htmldom对象给它的上一级网页布局模板，并返回步骤六；所述的script对象加入步骤五中创建的全局等待队列时，以该script对象对应的网页元素的hashname属性值作为全局等待队列的元素索引，以该script对象作为全局等待队列的元素。空的htmldom对象是通过web浏览器的dom接口函数document.createtextnode()创建了一个空的文本节点。步骤十，调用web浏览器提供的网页渲染引擎接口，渲染步骤六中已创建的网页布局模板及其中包含的htmldom对象；所述的web浏览器提供的网页渲染引擎接口是指web浏览器的dom接口函数document.body.appendchild()，该函数被调用时需要把步骤七中已创建的网页布局模板作为参数。通过调用document.body.appendchild()实现对已创建的网页布局模板及其中包含的htmldom对象进行渲染。步骤十一，检测所述的全局等待队列是否为空，如果是则网页所有内容加载完成，则退出本方法；否则执行步骤十二；步骤十二，检测全局等待队列中是否存在已完成加载的script对象，如果有，则从队列中删除该script对象，并返回步骤十一；否则，执行步骤十三；所述的检测script对象是否加载完成是通过检测全局等待队列中script对象的索引值所对应的dom对象是否出现在web浏览器的window对象包含的dom对象集合中来实现的。步骤十三，监听全局等待队列中位于队列首部的script对象的onload事件发生，当该script对象的onload事件发生后，则返回步骤五。所述的监听全局等待队列中位于队列首部的script对象的onload事件发生是指利用javascript语言的html事件监听机制实现对script对象的onload事件的监听。当前第1页12当前第1页12