[发明专利]一种html页面上内容的同步模块化加载方法

说明书

技术领域

本发明涉及web开发技术领域技术领域，具体涉及一种html页面上内容的同步模块化加载方法。

背景技术

在html页面上，模块化动态加载内容的实现一般都是采用ajax的方式，这种方式的内容加载可以分解为两步，第一步是在用户打开页面时，先行加载页面基本html和脚本，不包含主要的数据内容；第二步是在页面基本html加载完成后，由页面上的脚本向服务器端发送请求，获取到数据后，再动态显示到第一步加载的dom元素里面，这种方式通常被称作“ajax”。在这种方式下，第二步请求返回的数据在页面上对人眼是可见的，但是在请求得到的页面源码中却是不可见的。然而，搜索引擎对页面进行索引时的依据就是请求得到的页面源码，所以ajax的方式将会导致无法对需要索引的内容编制索引，html页面上动态内容无法索引，对SEO是不友好的。

故，针对上述现有技术存在的缺陷，实有必要进行开发研究，以提供一种方案，通过引入动态向请求中附加内容的方法，解决html页面上动态内容无法索引的问题。

发明内容

为解决上述问题，本发明的目的在于提供一种html页面上内容的同步模块化加载方法，以解决html页面上动态内容无法索引的问题。

为实现上述目的，本发明的技术方案为：

一种html页面上内容的同步模块化加载方法，包括如下步骤：

步骤一、根据内容显示的需要，规划每个模块化内容的服务器端数据获取接口；

步骤二、注册数据获取接口到配置文件；

步骤三、进行html页面上模块化内容显示区域的标识和描述；

步骤四、于系统服务器端提供一个部件引擎，当配置完成后的html页面被用户访问时，部件引擎会对用户请求进行拦截，并分析其请求的html页面代码结构，从中过滤出有标记data_render的dom元素。

进一步地，步骤一中，进行数据接口描述，约定模块化内容区域数据接口的基本形式和结构。

进一步地，步骤三中，对html页面上所有在运行时动态从服务器端获取数据并显示内容的动态内容区域进行标识，标识方式为在该区域的dom元素上添加标记data_render并为其赋值，其值是服务器端数据获取接口的name。

进一步地，步骤四中，在客户端发起请求时，服务器端对请求进行拦截，并分析所请求的html页面，使用data_render对页面dom元素进行过滤，对于过滤到的dom元素，通过其data_render的值，在服务器端动态反射其所需数据接口的实例，并通过调用GetData方法获得所需数据，然后附加到这个dom元素中。

相较于现有技术，本发明html页面上内容的同步模块化加载方法能够在html类型的页面中，实现动态内容的模块化加载，解决了html页面下动态内容对SEO不友好的问题。同一个服务器端数据结构，通过传入不同的参数，可以加载不同的数据，形成对数据接口的复用。

附图说明

图1为本发明的方法流程图示。

图2为本发明架构图示。

具体实施方式

本发明实施例提供了一种html页面上内容的同步模块化加载方法能够在html类型的页面中，实现动态内容的模块化加载，解决了html页面下动态内容对SEO不友好的问题。同一个服务器端数据结构，通过传入不同的参数，可以加载不同的数据，形成对数据接口的复用。

为使得本发明的发明目的、特征、优点能够更加的明显和易懂，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，下面所描述的实施例仅仅是本发明一部分实施例，而非全部实施例。基于本发明中的实施例，本领域的技术人员所获得的所有其他实施例，都属于本发明保护的范围。

本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的术语在适当情况下可以互换，这仅仅是描述本发明的实施例中对相同属性的对象在描述时所采用的区分方式。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，以便包含一系列单元的过程、方法、系统、产品或设备不必限于那些单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它单元。

以下分别进行详细说明。

请参照图1、图2所示，本发明html页面上内容的同步模块化加载方法，包括如下步骤：

步骤一、根据内容显示的需要，规划每个模块化内容的服务器端数据获取接口；