动态生成响应式网页的方法及装置制造方法
【专利摘要】本发明提供了一种动态生成响应式网页的方法和一种动态生成响应式网页的装置，其中，所述动态生成响应式网页的方法，包括：加载HTML文件，对所述HTML文件进行解析，以得到多个XML文档对象；根据所述多个XML文档对象中每个XML文档对象的属性信息对所述多个XML文档对象进行分类；根据特殊对象的匹配方法在所述多个XML文档对象中匹配所述特殊对象，并将匹配到的所述特殊对象按照类型进行再次分类；根据所述多个XML文档对象的分类情况，对每类所述XML文档对象进行处理，以生成所述响应式网页。本发明的技术方案降低了响应式网页的开发门槛，提高了响应式网页的开发效率。
【专利说明】动态生成响应式网页的方法及装置
【技术领域】
[0001]本发明涉及计算机【技术领域】，具体而言，涉及一种动态生成响应式网页的方法和一种动态生成响应式网页的装置。
【背景技术】
[0002]随着手机、平板等各种具有不同屏幕尺寸的显示设备的发展，传统的固定宽度的静态网页由于不能适应屏幕的变化，导致用户体验效果不佳，因此能够针对各种终端和浏览器的不同显示样式进行自适应的响应式网页应运而生，但是开发一个支持响应式网页的应用程序的技术门槛很高，缺少有效的编程方法将多个普通的静态网页的HTML (HyperText Markup Language,超文本标记语言)文件转化为响应式网页,并且效率低下,不灵活。
[0003]因此，如何能够灵活地生成响应式网页，同时降低响应式网页的开发门槛，提高响应式网页的开发效率成为亟待解决的技术问题。
【发明内容】
[0004]本发明正是基于上述技术问题，提出了一种新的动态生成响应式网页的方案，降低了响应式网页的开发门槛，提高了响应式网页的开发效率。
[0005]有鉴于此，本发明提出了一种动态生成响应式网页的方法，包括:加载HTML文件，对所述HTML文件进行解析，以得到多个XML文档对象；根据所述多个XML文档对象中每个XML文档对象的属性信息对所述多个XML文档对象进行分类；根据特殊对象的匹配方法在所述多个XML文档对象中匹配所述特殊对象，并将匹配到的所述特殊对象按照类型进行再次分类；根据所述多个XML文档对象的分类情况，对每类所述XML文档对象进行处理，以生成所述响应式网页。
[0006]在该技术方案中，通过将所述HTML文件解析成多个XML(ExtensibIe MarkupLanguage，可扩展标记语言)文档对象，能够在XML文档下对文档对象进行分类，并实现其它程序对文档对象的搜索,通过每个XML文档对象的属性信息对所述多个XML文档对象进行分类，并按照类型对特殊对象再次分类，能够灵活地对不同属性、不同类型的XML文档对象进行不同的处理(如根据实际终端屏幕与浏览器的显示属性进行相应的处理)，进而使之生成的响应式网页能够适应具有不同显示属性的终端屏幕与浏览器，降低了响应式网页的开发门槛，提高了响应式网页的开发效率。
[0007]在上述技术方案中，优选地，生成所述响应式网页的步骤具体为:针对不同终端的显示属性，对每类所述XML文档对象进行相应的优化处理，以生成与每个所述终端的显示属性相对应的网页。
[0008]在该技术方案中，通过根据不同终端的显示属性，对每类XML对象进行优化，能够使得每类文档对象转换为适应于具有不同显示属性的终端的文档对象，从而使得最终生成的网页能够适应于具有不同显示属性的终端，进而带给用户最佳的视觉体验。其中，不同终端具有不同的显示属性包括终端系统平台、屏幕大小与长宽比例、显示方向等。
[0009]在上述技术方案中，优选地，针对不同终端的显示属性，对每类所述XML文档对象进行相应的优化处理的步骤具体为:根据每个所述终端的屏幕比例和显示方向，设定对应的网页内容区域的大小和每类所述XML文档对象的显示方式。
[0010]在该技术方案中，根据获取到的不同终端的屏幕比例和显示方向，对网页内容区域的大小和每类XML文档对象的显示方式进行设定，使得最终生成的响应式网页能够自适应于具有不同屏幕比例和显示方向的终端，进而提高用户的视觉体验。
[0011 ] 在上述技术方案中，优选地，对所述HTML文件进行解析，得到的所述多个XML文档对象的结构为树形结构；设定每类所述XML文档对象的显示方式的步骤具体为:根据每个所述终端的屏幕比例和显示方向，设定所述树形结构中根节点的显示尺寸；根据所述根节点的显示尺寸，依次遍历所述多个XML文档对象，以设置所述多个XML文档对象中每个XML文档对象的显示尺寸。
[0012]在该技术方案中，通过根据设定的所述树形结构中根节点的显示尺寸，遍历所述多个XML文档对象，以设置每个XML文档对象的显示尺寸，使得能够自动对每个XML文档对象的显示尺寸进行设置，进而提高响应式网页的生成效率，提高用户体验。
[0013]在上述技术方案中，还包括:检测浏览器支持的显示样式；根据所述浏览器支持的显示样式，对所述多个XML文档对象进行处理，以使处理后的所述多个XML文档对象的显示样式适应于所述浏览器支持的显示样式。
[0014]在该技术方案中，通过根据浏览器支持的显示样式对多个XML文档对象进行处理，使得XML文档对象的显示样式能够适应于不同的浏览器，同时也能够解决不同浏览器的兼容问题，提高了用户的使用体验。
[0015]根据本发明的第二方面，还提出了一种动态生成响应式网页的装置，包括:用于加载HTML文件；用于对所述HTML文件进行解析，以得到多个XML文档对象；用于根据所述多个XML文档对象中每个XML文档对象的属性信息对所述多个XML文档对象进行分类，并用于根据特殊对象的匹配方法在所述多个XML文档对象中匹配所述特殊对象，并将匹配到的所述特殊对象按照类型进行再次分类；用于根据所述多个XML文档对象的分类情况，对每类所述XML文档对象进行处理，以生成所述响应式网页。
[0016]在该技术方案中，通过将所述HTML文件解析成多个XML文档对象，能够在XML文档下对文档对象进行分类，并实现对文档对象的搜索，通过每个XML文档对象的属性信息对所述多个XML文档对象进行分类，并按照类型对特殊对象再次分类，能够灵活地对不同属性、不同类型的XML文档对象进行不同的处理(如根据实际终端屏幕与浏览器的显示属性进行相应的处理)，进而使之生成的响应式网页能够适应具有不同显示属性的终端屏幕与浏览器，降低了响应式网页的开发门槛，提高了响应式网页的开发效率。
[0017]在上述技术方案中，优选地，所述处理单元208具体用于:针对不同终端的显示属性，对每类所述XML文档对象进行相应的优化处理，以生成与每个所述终端的显示属性相对应的网页。
[0018]在该技术方案中，通过根据不同终端的显示属性，对每类XML对象进行优化，能够使得每类文档对象转换为适应于具有不同显示属性的终端的文档对象，从而使得最终生成的网页能够适应于具有不同显示属性的终端，从而带给用户最佳的视觉体验。其中，不同终端具有不同的显示属性包括终端系统平台、屏幕大小与长宽比例、显示方向等。
[0019]在上述技术方案中，优选地，所述处理单元208具体还用于:根据每个所述终端的屏幕比例和显示方向，设定对应的网页内容区域的大小和每类所述XML文档对象的显示方式。
[0020]在该技术方案中，根据获取到的不同终端的屏幕比例和显示方向，对网页内容区域的大小和每类XML文档对象的显示方式进行设定使得最终生成的响应式网页能够自适应于具有不同屏幕比例和显示方向的终端。
[0021 ] 在上述技术方案中，优选地，所述解析单元204具体用于，对所述HTML文件进行解析，得到的所述多个XML文档对象的结构为树形结构；所述处理单元具体还用于，根据每个所述终端的屏幕比例和显示方向，设定所述树形结构中根节点的显示尺寸，并用于根据所述根节点的显示尺寸，依次遍历所述多个XML文档对象，以设置所述多个XML文档对象中每个XML文档对象的显示尺寸。
[0022]在该技术方案中，通过根据设定的所述树形结构中根节点的显示尺寸，遍历所述多个XML文档对象，以设置每个XML文档对象的显示尺寸，使得能够自动对每个XML文档对象的显示尺寸进行设置，进而提高响应式网页的生成效率，提高用户体验。
[0023]在上述技术方案中，优选地，还包括:检测单元210，用于检测浏览器支持的显示样式；所述处理单元208具体还用于，根据所述浏览器支持的显示样式，对所述多个XML文档对象进行处理，以使处理后的所述多个XML文档对象的显示样式适应于所述浏览器支持的显示样式。
[0024]在该技术方案中，通过根据浏览器支持的显示样式对多个XML文档对象进行处理，使得XML文档对象的显示样式能够适应于不同的浏览器，同时也能够解决不同浏览器的兼容问题，进而提高了用户的使用体验。
[0025]通过以上技术方案，能够灵活地对不同属性、不同类型的XML文档对象进行不同的处理，进而使之生成的响应式网页能够适应具有不同显示属性的终端屏幕与浏览器，降低了响应式网页的开发门槛，提高了响应式网页的开发效率。
【专利附图】
【附图说明】
[0026]图1示出了根据本发明的一个实施例的动态生成响应式网页的方法的示意流程图；
[0027]图2示出了根据本发明的一个实施例的动态生成响应式网页的装置的示意框图；
[0028]图3示出了根据本发明的一个实施例的动态生成响应式网页的装置的总体架构示意图；
[0029]图4是根据本发明的一个实施例的动态生成响应式网页的装置的具体结构示意图；
[0030]图5示出了根据本发明的一个实施例的HTML文件解析过程示意图；
[0031]图6示出了根据本发明的一个实施例的响应式元素归集模块的结构示意图；
[0032]图7示出了根据本发明的一个实施例的动态转换与生成模块的结构示意图；
[0033]图8示出了根据本发明的一个实施例的流式布局转换的过程示意图。
【具体实施方式】
[0034]为了能够更清楚地理解本发明的上述目的、特征和优点，下面结合附图和【具体实施方式】对本发明进行进一步的详细描述。需要说明的是，在不冲突的情况下，本申请的实施例及实施例中的特征可以相互组合。
[0035]在下面的描述中阐述了很多具体细节以便于充分理解本发明，但是，本发明还可以采用其他不同于在此描述的其他方式来实施，因此，本发明的保护范围并不受下面公开的具体实施例的限制。
[0036]图1示出了根据本发明的一个实施例的动态生成响应式网页的方法的示意流程图。
[0037]如图1所示，根据本发明的一个实施例的动态生成响应式网页的方法，包括:步骤102，加载HTML文件，对所述HTML文件进行解析，以得到多个XML文档对象；步骤104，根据所述多个XML文档对象中每个XML文档对象的属性信息对所述多个XML文档对象进行分类；步骤106，根据特殊对象的匹配方法在所述多个XML文档对象中匹配所述特殊对象，并将匹配到的所述特殊对象按照类型进行再次分类；步骤108，根据所述多个XML文档对象的分类情况，对每类所述XML文档对象进行处理，以生成所述响应式网页。
[0038]在该技术方案中，通过将所述HTML文件解析成多个XML文档对象，能够在XML文档下对文档对象进行分类，并实现对文档对象的搜索，通过每个XML文档对象的属性信息对所述多个XML文档对象进行分类，并按照类型对特殊对象再次分类，能够灵活地对不同属性、不同类型的XML文档对象进行不同的处理(如根据实际终端屏幕与浏览器的显示属性进行相应的处理)，进而使之生成的响应式网页能够适应具有不同显示属性的终端屏幕与浏览器，降低了响应式网页的开发门槛，提高了响应式网页的开发效率。
[0039]在上述技术方案中，优选地，生成所述响应式网页的步骤具体为:针对不同终端的显示属性，对每类所述XML文档对象进行相应的优化处理，以生成与每个所述终端的显示属性相对应的网页。
[0040]在该技术方案中，通过根据不同终端的显示属性，对每类XML对象进行优化，能够使得每类文档对象转换为适应于具有不同显示属性的终端的文档对象，从而使得最终生成的网页能够适应于具有不同显示属性的终端，进而带给用户最佳的视觉体验。其中，不同终端具有不同的显示属性包括终端系统平台、屏幕大小与长宽比例、显示方向等。
[0041]在上述技术方案中，优选地，针对不同终端的显示属性，对每类所述XML文档对象进行相应的优化处理的步骤具体为:根据每个所述终端的屏幕比例和显示方向，设定对应的网页内容区域的大小和每类所述XML文档对象的显示方式。
[0042]在该技术方案中，根据获取到的不同终端的屏幕比例和显示方向，对网页内容区域的大小和每类XML文档对象的显示方式进行设定，使得最终生成的响应式网页能够自适应于具有不同屏幕比例和显示方向的终端，进而提高用户的视觉体验。
[0043]在上述技术方案中，优选地，对所述HTML文件进行解析，得到的所述多个XML文档对象的结构为树形结构；设定每类所述XML文档对象的显示方式的步骤具体为:根据每个所述终端的屏幕比例和显示方向，设定所述树形结构中根节点的显示尺寸；根据所述根节点的显示尺寸，依次遍历所述多个XML文档对象，以设置所述多个XML文档对象中每个XML文档对象的显示尺寸。
[0044]在该技术方案中，通过根据设定的所述树形结构中根节点的显示尺寸，遍历所述多个XML文档对象，以设置每个XML文档对象的显示尺寸，使得能够自动对每个XML文档对象的显示尺寸进行设置，进而提高响应式网页的生成效率，提高用户体验。
[0045]在上述技术方案中，还包括:检测浏览器支持的显示样式；根据所述浏览器支持的显示样式，对所述多个XML文档对象进行处理，以使处理后的所述多个XML文档对象的显示样式适应于所述浏览器支持的显示样式。
[0046]在该技术方案中，通过根据浏览器支持的显示样式对多个XML文档对象进行处理，进而使得XML文档对象的显示样式能够适应于不同的浏览器，同时也能够解决不同浏览器的兼容问题，提高了用户的使用体验。
[0047]图2示出了根据本发明的一个实施例的动态生成响应式网页的装置的示意框图。
[0048]如图2所示，根据本发明的一个实施例的动态生成响应式网页的装置200，包括:加载单元202，用于加载HTML文件；解析单元204，用于对所述HTML文件进行解析，以得到多个XML文档对象；分类单元206，用于根据所述多个XML文档对象中每个XML文档对象的属性信息对所述多个XML文档对象进行分类，并用于根据特殊对象的匹配方法在所述多个XML文档对象中匹配所述特殊对象，并将匹配到的所述特殊对象按照类型进行再次分类；处理单元208，用于根据所述多个XML文档对象的分类情况，对每类所述XML文档对象进行处理，以生成所述响应式网页。
[0049]在该技术方案中，通过将所述HTML文件解析成多个XML文档对象，能够在XML文档下对文档对象进行分类，并实现其它程序对文档对象的搜索，通过每个XML文档对象的属性信息对所述多个XML文档对象进行分类，并按照类型对特殊对象再次分类，能够灵活地对不同属性、不同类型的XML文档对象进行不同的处理(如根据实际终端屏幕与浏览器的显示属性机芯响应的处理)，进而使之生成的响应式网页能够适应具有不同显示属性的终端屏幕与浏览器，降低了响应式网页的开发门榲，提高了响应式网页的开发效率。
[0050]在上述技术方案中，优选地，所述处理单元208具体用于:针对不同终端的显示属性，对每类所述XML文档对象进行相应的优化处理，以生成与每个所述终端的显示属性相对应的网页。
[0051]在该技术方案中，通过根据不同终端的显示属性，对每类XML对象进行优化，能够使得每类文档对象转换为适应于具有不同显示属性的终端的文档对象，从而使得最终生成的网页能够适应于具有不同显示属性的终端，进而带给用户最佳的视觉体验。其中，不同终端具有不同的显示属性包括终端系统平台、屏幕大小与长宽比例、显示方向等。
[0052]在上述技术方案中，优选地，所述处理单元208具体还用于:根据每个所述终端的屏幕比例和显示方向，设定对应的网页内容区域的大小和每类所述XML文档对象的显示方式。
[0053]在该技术方案中，根据获取到的不同终端的屏幕比例和显示方向，对网页内容区域的大小和每类XML文档对象的显示方式进行设定，使得最终生成的响应式网页能够自适应于具有不同屏幕比例和显示方向的终端，进而提高用户的视觉体验。
[0054]在上述技术方案中，优选地，所述解析单元204具体用于，对所述HTML文件进行解析，得到的所述多个XML文档对象的结构为树形结构；所述处理单元具体还用于，根据每个所述终端的屏幕比例和显示方向，设定所述树形结构中根节点的显示尺寸，并用于根据所述根节点的显示尺寸，依次遍历所述多个XML文档对象，以设置所述多个XML文档对象中每个XML文档对象的显示尺寸。
[0055]在该技术方案中，通过根据设定的所述树形结构中根节点的显示尺寸，遍历所述多个XML文档对象，以设置每个XML文档对象的显示尺寸，使得能够对每个XML文档对象的显示尺寸进行设置的繁琐步骤，进而提高响应式网页的生成效率，提高用户体验。
[0056]在上述技术方案中，优选地，还包括:检测单元210，用于检测浏览器支持的显示样式；所述处理单元208具体还用于，根据所述浏览器支持的显示样式，对所述多个XML文档对象进行处理，以使处理后的所述多个XML文档对象的显示样式适应于所述浏览器支持的显示样式。
[0057]在该技术方案中，通过根据浏览器支持的显示样式对多个XML文档对象进行处理，使得XML文档对象的显示样式能够适应于不同的浏览器，同时也能够解决不同浏览器的兼容问题，提高了用户的使用体验。
[0058]图3示出了根据本发明的一个实施例的动态生成响应式网页的装置的总体架构示意图。
[0059]如图3所示，实现动态生成响应式网页，首先是通过内容获取模块302获取内容来源，内容既可以是空白文档也可以是既有传统网页。在此基础上文件解析模块304对内容进行读取和解析。通过文件解析模块304将文本字符串解析为XML对象，为后面的动态生成与转换做准备。
[0060]动态生成模块306在响应式元素归集模块3062中的响应式规则字典集的支持下，对元素进行归集，并通过动态转换与生成模块3064添加和转换为响应式元素。最后输出成响应式网页应用程序，如果是对于复杂的结构转换通过自定义解析和生成规则，以实现功能的扩展。
[0061]图4是根据本发明的一个实施例的动态生成响应式网页的装置的具体结构示意图。
[0062]如图4所示，针对动态生成响应式网页的装置的每一个模块进行详细说明:
[0063]内容获取模块302:
[0064]对于内容来源，提供了多种方式。既可以是空白文档也可以是既有传统网页。既支持本地文件，还可以是URL地址。
[0065]文件解析模块304:
[0066]内容通过文本流的方式读取到内存，通过关键字符判断和正则表达验证，循环分析HTML文本。将文本转换成对象，并转换成树形XML文档对象。
[0067]如果是空白文档，系统会自动生成标准HTML的结构，标准HTML结构包括:文档声明、根结构、头结构、主体结构；否则将对文本进行解析，在解析过程中生成元素的对象，对象类型包括:文件、元素、解释、文本。
[0068]文件解析模块304的处理流程如图5所示，包括:
[0069]步骤502，读取HTML文件为文本。
[0070]步骤504，判断HTML文件是否为空白文档，若是，执行步骤506，若否，执行步骤508。
[0071]步骤506，生成基本结构。
[0072]步骤508，通过关键字符判断和正则表达式验证，循环分析HTML文本。
[0073]步骤510，处理元素大小位置属性。
[0074]步骤512，将HTML文本转换为XML对象，并转换成树形XML。
[0075]步骤514，搜索XML文档对象，并进行分组。
[0076]在后续的流式布局转换中需要知道元素的大小位置，因此如果元素指定了大小位置属性，则在每个解析对象上添加记录元素的大小位置的属性。另外为了对元素进行响应式转换与生成，需要对元素进行分组，具体可参照图4所示。由于解析后的对象是XML文档对象，所以支持搜索。一个解析对象可表示为:
[0077]<对象类型>
[0078]<ID/>
[0079]< 属性 />
[0080]〈内容/>
[0081]〈分组/>
[0082]<大小位置/>
[0083]</对象类型>
[0084]动态生成模块306:
[0085]此模块包含响应式元素归集、动态转换与生成和响应式规则字典集三个部分。响应式规则字典集部分定义了解析的匹配条件、生成的响应式内容等。响应式元素归集部分根据响应式规则字典集对XML文档的解析对象再次进行归集，将特殊处理的图片、导航信息等内容归集为独立集合，供动态转换与生成部分处理。动态转换与生成部分搜索分组，重新动态生成响应式解析对象代替旧有的解析对象。
[0086]A、响应式规则字典集结构如下:
[0087]主集合:[关键字]，[元素类型]，[分组]，[查询条件]，[标准值]，[序号]
[0088]子集合:[关键字]，[属性名]，[内容]，[序号]
[0089]响应式规则字典集定义了所有响应式最佳实践的定义，包括媒体查询、网页样式处理、网页脚本处理等规则定义。
[0090]B、响应式元素归集模块3062的结构如图6所示，对于HTML解析过程中的分组，对生成响应式网页来说是不够的。还需要进行二次分组，分组内容包括视频、音频的媒体标签、图片集合、导航菜单与结构布局定义。由于导航和结构布局的生成方式多种多样，本装置系统预置支持了有限的几种典型模式。可以通过归集扩展模块来自定义扩展匹配条件及转换内容规则，提供更加灵活的方式满足个性化需求。
[0091]C、动态转换与生成模块3064的结构如图7所示，其中:
[0092](I)文档声明处理模块是给浏览器提供信息，告诉浏览器用“标准模式”渲染页面。通过“doctype声明”分组找到相应解析对象，将响应式规则字典集中的对应属性赋值，如果文档声明不存在则添加标准值。
[0093](2)媒体查询处理模块可以实现根据设备显示的特性为其设定显示样式。例如，可以仅使用几行代码，就可以根据诸如视口宽度、屏幕比例、设备方向(横向或纵向)等特性来改变页面内容的显示方式。通过视口配置表和网页样式处理模块，查询“Meta元信息”、“Style样式”分组，可以生成不同视口下链接的样式文件或者内联样式内容。
[0094]媒体查询目前的效果更像是一个自适应设计，而且过多的样式会造成页面加载变慢。因此接下来还需要网页脚本处理模块和流式布局转换模块来进一步完善。
[0095](3)使用百分比布局创建流动的弹性界面，同时使用媒体查询来限制元素的变动范围。将这两者组合到一起构成了响应式设计的核心。流式布局转换模块将遍历树形XML文档对象，将每个解析对象的大小属性从具体单位(如像素)转换为相对尺寸。如果是布局转换为百分比，如果是字体转换为em测量单位。公式如下:
[0096]目标元素大小+上下文元素大小=百分比(相对尺寸)
[0097]流式布局转换的整体流程如图8所示，具体包括:
[0098]步骤802，读取当前XML文档对象。
[0099]步骤804，判断当前XML文档对象是否为根对象，若是，则执行步骤806，若否，执行步骤808。
[0100]步骤806，默认以100%的百分比布局或Iem处理对象。
[0101]步骤808，获取父对象信息。
[0102]步骤810，生成当前对象的布局。
[0103]步骤812，判断XML文档对象是否为图片，若是，则执行步骤814;否则，执行步骤816。
[0104]步骤814，设置图片大小的阈值。
[0105]步骤816,更新当前对象。
[0106]步骤818，判断是否有下个对象，若是，则执行步骤802，若否，结束。
[0107]经过流式布局转换模块的处理，内容已能够基本自动适应视口的变化，随着用户增大或者减小字体，使用流式布局的元素的宽度也会等比例地变化。另外，只需要调整初始化时的基准，其余部分就会自动地进行调整，而且是按比例调整的。
[0108](4)跨浏览器处理模块是为了解决老版本浏览器不支持媒体查询等新特性，造成显示错误的问题。跨浏览器处理模块还利用腻子脚本(polyfill)来补平老版本浏览器的缺陷，使生成的响应式网页可以在多种设备和浏览器下获得相同的功能。跨浏览器处理模块与网页脚本处理模块一起处理相关脚本，通过检测机制，按需加载响应式网页所需要的样式和脚本内容。通过脚本获取视口实际大小加载样式，模拟媒体查询等。
[0109]通过这两个模块，可以让动态生成的网页可以在不同类型、不用版本的浏览器下，对媒体查询特征提供支持，并且可以对如媒体查询的样式文件，按需加载。
[0110]如:通过定义load方法，对特性进行test检测，如果满足条件则加载需要的内容。
[0111](5)通过流式布局转换模块，图片已经随着流动布局相应缩放。但是图片尺寸必须比其显示尺寸更大以保证渲染效果。另外在小设备上显示大图片也会带来性能的问题。为了解决该问题，可以为不同的屏幕尺寸提供不同的图片，这种解决方案允许基于一组屏幕尺寸断点，根据用户需要为其提供不同的图片。这就需要弹性图片处理模块。
[0112]将图片的来源抽离出来，使用关键字代替，再通过脚本统一调用服务端的处理逻辑。传递屏幕大小给服务器，服务器创建并缓存一张缩放后的图片。图片一旦被创建，就会被保存到服务器指定文件夹中，这样就不必在第二次用到它们时再次生成了。这里还有另外一个配置选项可以用来指定浏览器可以缓存多久图片。
[0113]尽管不可能在每一个图片大小都进行动态缩放给浏览器显示，但是，结合媒体查询、流式布局，生成某断点下最接近的尺寸图片，保证了图片的清晰度，同时带来最佳性能。
[0114](6)不是每一次生成都需要用到所有模块，通过生成配置表可以选择使用哪些模块来处理来源文档。导航处理模块和结构布局模块与其他模块类似处理逻辑，导航处理模块负责将页面导航转换为一个下拉菜单。在视口很小不足以显示完整导航内容或者显示体验不佳时，自动显示为下拉菜单。结构布局模块负责将元素类型进行转换，以符合全新的语义化。本装置对页面导航、结构布局预置了固定的转换类型，可以通过生成扩展模块，根据实际需求自定义扩展。
[0115]至此，通过以上模块的一系列处理，我们可以动态的将文档内容生成为响应式的网页应用程序。兼顾了可配置、可扩展性。大大提高了前端应用开发效率。
[0116]以上结合附图详细说明了本发明的技术方案，由于现有技术中，对于响应式网页的应用程序的开发技术门槛很高，且对于普通网页转换为响应式网页处理都是在原有网页的HTML程序之内进行操作的，因而不能实现对多个HTML程序进行统一转换，导致不能有效率地将大量的普通HTML文件转换成能够适应不同终端、不同浏览器的响应式网页。因此，本发明提出了一种动态生成响应式网页的方案，能够灵活地对不同属性、不同类型的XML文档对象进行不同的处理，进而使之生成的响应式网页能够适应具有不同显示属性的终端屏幕与浏览器，降低了响应式网页的开发门槛，提高了响应式网页的开发效率。
[0117]以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。
【权利要求】
1.一种动态生成响应式网页的方法，其特征在于，包括: 加载HTML文件，对所述HTML文件进行解析，以得到多个XML文档对象； 根据所述多个XML文档对象中每个XML文档对象的属性信息对所述多个XML文档对象进行分类； 根据特殊对象的匹配方法在所述多个XML文档对象中匹配所述特殊对象，并将匹配到的所述特殊对象按照类型进行再次分类； 根据所述多个XML文档对象的分类情况，对每类所述XML文档对象进行处理，以生成所述响应式网页。
2.根据权利要求1所述的动态生成响应式网页的方法，其特征在于，生成所述响应式网页的步骤具体为: 针对不同终端的显示属性，对每类所述XML文档对象进行相应的优化处理，以生成与每个所述终端的显示属性相对应的网页。
3.根据权利要求2所述的动态生成响应式网页的方法，其特征在于，针对不同终端的显示属性，对每类所述XML文档对象进行相应的优化处理的步骤具体为: 根据每个所述终端的屏幕比例和显示方向，设定对应的网页内容区域的大小和每类所述XML文档对象的显示方式。
4.根据权利要求3所述的动态生成响应式网页的方法，其特征在于，对所述HTML文件进行解析，得到的所述多个XML文档对象的结构为树形结构； 设定每类所述XML文档对象的显示方式的步骤具体为: 根据每个所述终端的屏幕比例和显示方向，设定所述树形结构中根节点的显示尺寸； 根据所述根节点的显示尺寸，依次遍历所述多个XML文档对象，以设置所述多个XML文档对象中每个XML文档对象的显示尺寸。
5.根据权利要求1至4中任一项所述的动态生成响应式网页的方法，其特征在于，还包括: 检测浏览器支持的显示样式； 根据所述浏览器支持的显示样式，对所述多个XML文档对象进行处理，以使处理后的所述多个XML文档对象的显示样式适应于所述浏览器支持的显示样式。
6.一种动态生成响应式网页的装置，其特征在于，包括: 加载单元，用于加载HTML文件； 解析单元，用于对所述HTML文件进行解析，以得到多个XML文档对象； 分类单元，用于根据所述多个XML文档对象中每个XML文档对象的属性信息对所述多个XML文档对象进行分类，并用于根据特殊对象的匹配方法在所述多个XML文档对象中匹配所述特殊对象，并将匹配到的所述特殊对象按照类型进行再次分类； 处理单元，用于根据所述多个XML文档对象的分类情况，对每类所述XML文档对象进行处理，以生成所述响应式网页。
7.根据权利要求6所述的动态生成响应式网页的装置，其特征在于，所述处理单元具体用于: 针对不同终端的显示属性，对每类所述XML文档对象进行相应的优化处理，以生成与每个所述终端的显示属性相对应的网页。
8.根据权利要求7所述的动态生成响应式网页的装置，其特征在于，所述处理单元具体还用于: 根据每个所述终端的屏幕比例和显示方向，设定对应的网页内容区域的大小和每类所述XML文档对象的显示方式。
9.根据权利要求8所述的动态生成响应式网页的装置，其特征在于，所述解析单元具体用于，对所述HTML文件进行解析，得到的所述多个XML文档对象的结构为树形结构； 所述处理单元具体还用于，根据每个所述终端的屏幕比例和显示方向，设定所述树形结构中根节点的显示尺寸，并用于根据所述根节点的显示尺寸，依次遍历所述多个XML文档对象，以设置所述多个XML文档对象中每个XML文档对象的显示尺寸。
10.根据权利要求6至9中任一项所述的动态生成响应式网页的装置，其特征在于，还包括: 检测单元，用于检测浏览器支持的显示样式； 所述处理单元具体还用于，根据所述浏览器支持的显示样式，对所述多个XML文档对象进行处理，以使处理后的所述多个XML文档对象的显示样式适应于所述浏览器支持的显示样式。
【文档编号】G06F9/44GK104267941SQ201410479018
【公开日】2015年1月7日 申请日期:2014年9月18日 优先权日:2014年9月18日
【发明者】包文哲 申请人:用友优普信息技术有限公司