[发明专利]一种面向JSON的网页模块化设计及其异步加载方法

摘要

本发明公开了一种面向JSON的网页模块化设计及其异步加载方法，HTML网页布局及网页元素被封装成不同的JSON对象，这些JSON对象相对独立又可以嵌套定义，从而可以方便实现网页的模块化设计及动态修改；使用JSON对象表示HTML网页布局和网页元素可以进一步降低数据冗余，提高网页代码的网络传输和响应速度。本发明的方法适用于Web软件设计，在软件开发领域有重要的应用价值。

主权项

1.一种面向JSON的网页模块化设计及其异步加载方法，其特征在于，包括以下步骤：步骤一，确定网页的布局结构，以及布局结构中各个部分所需要包含的网页元素；步骤二，根据步骤一确定的网页布局结构和网页元素，使用JSON对象的形式定义网页布局模板以及相应的网页元素；所述的网页布局模板中包括网页布局容器以及网页布局条目这两类组件；步骤三，将定义的网页布局容器、网页布局条目和网页元素组装成网页JSON对象；步骤四，创建一个HTML DOM对象类型的全局等待队列；步骤五，遍历JSON对象的template.childs属性中的所有对象，在遍历过程中判断当前对象是网页布局模板还是网页元素，然后根据判断结果执行步骤六或步骤七；当遍历完成时，转向步骤十；步骤六，如果是网页布局模板，则继续遍历其childs属性中的所有对象，并保存遍历每个对象时所生成的HTML DOM对象，直到遍历完成时，根据返回的所有HTML DOM对象，以及当前网页布局模板的component属性，生成网页布局模板对应的HTML DOM对象，然后返回步骤五；步骤七，如果是网页元素，则检测该网页元素scriptAddr属性对应的脚本代码是否加载完成，如果加载完成，则执行该脚本代码，创建该网页元素对应的HTML DOM对象并返回给它的上一级网页布局模板，并返回步骤六；否则，执行步骤八；步骤八，判断是否已经创建和当前网页元素对应的script对象，如果是则返回一个空的HTML DOM对象给它的上一级网页布局模板，并返回步骤六；否则，执行步骤九；步骤九，创建和当前网页元素对应的script对象，并将当前网页元素scriptAddr属性的值赋值给该script对象的src属性，将该script对象加入步骤四中创建的全局等待队列中，然后返回一个空的HTML DOM对象给它的上一级网页布局模板，并返回步骤六；步骤十，调用Web浏览器提供的网页渲染引擎接口，渲染步骤六中已创建的网页布局模板及其中包含的HTML DOM对象；步骤十一，检测所述的全局等待队列是否为空，如果是则网页所有内容加载完成，则退出本方法；否则执行步骤十二；步骤十二，检测全局等待队列中是否存在已完成加载的script对象，如果有，则从队列中删除该script对象，并返回步骤十一；否则，执行步骤十三；步骤十三，监听全局等待队列中位于队列首部的script对象的onload事件发生，当该script对象的onload事件发生后，则返回步骤五。