[发明专利]一种基于组件的网站模块化渲染方法

摘要

一种基于组件的网站模块化渲染方法，通过将网站页面内容全部组件化，每个页面由多个组件构成，每个组件以JSON数据格式文件按照页面布局规则独立存储；页面全局依赖的JavaScript/css资源，每个组件依赖的JavaScript/css资源，都可以通过定义JSON数据格式的配置文件，灵活配置依赖资源；当页面渲染时，通过解析页面组件JSON格式数据文件、全局资源依赖JSON格式数据、组件资源依赖JSON格式数据，生成页面HTML代码，保证网页页面渲染能按需加载资源。

主权项

1.一种基于组件的网站模块化渲染方法，其特征在于，通过将网站页面内容全部组件化，每个页面由多个组件构成，每个组件以JSON数据格式文件按照页面布局规则独立存储；页面全局依赖的JavaScript/css资源，每个组件依赖的 JavaScript/css资源，都可以通过定义JSON数据格式的配置文件，灵活配置依赖资源；当页面渲染时，通过解析页面组件JSON格式数据文件、全局资源依赖JSON格式数据、组件资源依赖JSON格式数据，生成页面HTML代码，保证网页页面渲染能按需加载资源，具体步骤有：步骤1：将页面展示的内容全部抽象为独立的组件，每一个组件有一个组件名称，并配有唯一的组件ID；其中，所述页面展示内容是指包含页头及页头内的图片、页面中的文字及按钮、页脚备案说明在内的任意一个显示在页面内的内容形态；通过组件ID能在数据库中查询到与组件相关的所有设置数据；步骤2：页面的制作及保存，具体为：以组件的形式构建及组织网站页面内容；当保存页面内容时，将当前页面内所有组件的位置信息解析为JSON格式数据，并保存在数据库中；同时，组件的属性数据也一并被保存在数据库中；步骤3：编制用于操控JSON格式数据的JSON配置文件，配置文件中包含有页面内应加载的JavaScript资源和CSS资源；步骤4：通过解析页面内所有组件的JSON数据文件、页面全局依赖资源的JSON配置文件、组件依赖资源的JSON文件，生成页面的HTML代码，并基于页面布局结构按需加载组件资源；步骤5：浏览器端按照步骤4中最终合成的HTML内容，加载显示各个组件内容；所述每一个页面由多个组件组成；页面中的内容增加、删除代表着组件的增减；所述步骤2中，数据库中组件数据文件相互独立存储，且按照组件在页面内的布局结构进行分类存储；所述JSON配置文件根据操控对象的不同，分为配置全局依赖资源的JSON配置文件和配置组件依赖资源的JSON文件；所述步骤4中经过对组件JSON数据文件和JSON配置文件解析形成页面的HTML代码，具体步骤有：步骤4‑1：从数据库中查询页面内所有组件的JSON格式数据，并解析已查询到的JSON格式数据，获取所有组件的ID；步骤4‑2：根据组件ID，在数据库中查询组件属性设置项及具体的属性数据；并基于设置项及属性数据生成有关每一个组件的HTML内容；步骤4‑3：合成每一个组件的HTML内容，形成整个网页页面主体的HTML内容；步骤4‑4：利用组件ID在数据库中查询对应的组件名称，并根据组件名称获取对应的组件依赖资源JSON文件；步骤4‑5：解析页面全局依赖资源JSON配置文件和组件依赖资源JSON文件，提取当前组件和页面全局需要加载的JavaScript资源及CSS资源，并自动形成相应的HTML内容；步骤4‑6：组合步骤4‑3生成的HTML内容和步骤4‑5生成的HTML内容，形成有关于当前页面完整的HTML内容。