一种面向JSON的网页模块化设计及其异步加载方法技术

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

A web oriented modular design for JSON and its asynchronous loading method

The invention discloses a JSON oriented web modular design and asynchronous loading method, HTML page layout and page elements are encapsulated into different JSON objects, these JSON objects are relatively independent and can be nested definition, which can facilitate the implementation of modular design and dynamic web page change; use the JSON object HTML and web page layout the element can further reduce data redundancy, improve the network transmission code and response speed. The method is suitable for Web software design, and has important application value in the field of software development.

【技术实现步骤摘要】
一种面向JSON的网页模块化设计及其异步加载方法
本专利技术涉及计算机网络
，具体涉及一种面向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中；根据网页布本文档来自技高网...

【技术保护点】
一种面向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事件发生后，则返回步骤五。...

【技术特征摘要】
1.一种面向JSON的网页模块化设计及其异步加载方法，其特征在于，包括以下步骤：步骤一，确定网页的布局结构，以及布局结构中各个部分所需要包含的网页元素；步骤二，根据步骤一确定的网页布局结构和网页元素，使用JSON对象的形式定义网页布局模板以及相应的网页元素；所述的网页布局模板中包括网页布局容器以及网页布局条目这两类组件；步骤三，将定义的网页布局容器、网页布局条目和网页元素组装成网页JSON对象；步骤四，创建一个HTMLDOM对象类型的全局等待队列；步骤五，遍历JSON对象的template.childs属性中的所有对象，在遍历过程中判断当前对象是网页布局模板还是网页元素，然后根据判断结果执行步骤六或步骤七；当遍历完成时，转向步骤十；步骤六，如果是网页布局模板，则继续遍历其childs属性中的所有对象，并保存遍历每个对象时所生成的HTMLDOM对象，直到遍历完成时，根据返回的所有HTMLDOM对象，以及当前网页布局模板的component属性，生成网页布局模板对应的HTMLDOM对象，然后返回步骤五；步骤七，如果是网页元素，则检测该网页元素scriptAddr属性对应的脚本代码是否加载完成，如果加载完成，则执行该脚本代码，创建该网页元素对应的HTMLDOM对象并返回给它的上一级网页布局模板，并返回步骤六；否则，执行步骤八；步骤八，判断是否已经创建和当前网页元素对应的script对象，如果是则返回一个空的HTMLDOM对象给它的上一级网页布局模板，并返回步骤六；否则，执行步骤九；步骤...

【专利技术属性】
技术研发人员：康军，高阳，段宗涛，李都厚，葛建东，江华，黄凯，颜建强，李威，
申请(专利权)人：长安大学，
类型：发明
国别省市：陕西,61