一种基于组件的网站模块化渲染方法技术

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

A component based modular rendering method for web sites

A modular web rendering method based on component, through the web page content of all components, each page consists of several components, each component in the file format of JSON data in accordance with the rules of the layout of the page page independent storage; global dependency of JavaScript/css resources, each component dependent JavaScript/css resources can be defined by the JSON data format the configuration file, flexible configuration of resource dependent; when the page is rendered, by parsing the page component data file of JSON, global resource dependent JSON format data, component resource dependent JSON format data, generate HTML code page, web page rendering can ensure on-demand loading resources.

【技术实现步骤摘要】
一种基于组件的网站模块化渲染方法
本专利技术隶属于互联网
，主要涉及网站构建领域,具体为一种基于组件的网站页面模块化渲染方法。
技术介绍
每个网页页面在通过浏览器打开时，都要经过浏览器渲染生成。通常，网页页面有HTML(HyperTextMarkupLanguage，超级文本标记语言)、CSS(CascadingStyleSheets，层叠样式表)、JavaScript、图片等文件构成，当在浏览器中输入相应页面网址或点击相应页面链接时，浏览器从服务器获取相应页面的文件后，对网页页面需显示的内容进行渲染，以显示页面。所述页面渲染，是指浏览器将请求返回的页面资源(HTML文本，图像，动画，视频，音频等)基于一定的规则(CSS语句，JS语句，浏览器本身的一些规则等)完成页面布局及绘制的过程，简而言之，就是将HTML变成人眼看到的图像的全过程。页面渲染大致分为两部分，一部分是排版，另一部分是绘制；其中，排版是指根据文档流，加上浮动、定位等属性，确定各展示资源的位置及尺寸；绘制是指将css属性例如字体、背景色、圆角等等按指定方式呈现出来。在传统的项目中，前端渲染技术多数采用传统的渲染机制，而这种机制带来的弊端是每当用户与网页交互或者通过脚本程序修改网页时，渲染树包括(DOM文档对象)渲染模型和(CSS层叠样式)渲染模型都会进行Repaint(重绘)或者Reflow(重排)，产生这种现象是因为网页的内部结构已经发生了改变，这种改变该给浏览器的是性能损耗、资源占用，带给用户的是响应时间过长。在快速构建网站过程中，很多网站单个页面内容相对固定、单一，多个页面内容之间相对独立，每个页面内容大多是单独编辑、更新，没有太多公用部分可以被程序统一处理；页面在引用依赖JavaScript/css资源时，页面全局统一的JavaScript/css资源会被加载，其它无效资源也被加载，这是贪婪加载，A页面可能加载了B页面所需的JavaScript/css资源，又可能同时也加载了C页面所需的JavaScript/css资源，又或者是加载了D页面的JavaScript/css资源。
技术实现思路
为克服在以往网站构建技术中存在的“页面内容相对单一、不便修改、加载资源不够灵活、可配置性不高页面内容相对单一”等诸多不足，本专利技术提供一种基于组件的网站模块化渲染方法，通过将网站内容全部组件化，每个页面由多个组件构成，每个组件以JSON数据格式按照页面布局规则独立存储；页面全局依赖的JavaScript/css资源，每个组件依赖的JavaScript/css资源，都可以通过定义JSON文件配置，灵活配置依赖资源；当页面渲染时，通过解析页面组件JSON格式数据、全局资源依赖JSON格式数据、组件资源依赖JSON格式数据，生成页面HTML代码，保证网页页面渲染能按需加载资源，减少无效资源的重复加载，实现每个网页元素的灵活组建及网页页面的快速构建，提高页面渲染效率。本专利技术的技术方案如下：一种基于组件的网站模块化渲染方法，通过将网站页面内容全部组件化，每个页面由多个组件构成，每个组件以JSON数据格式文件按照页面布局规则独立存储；页面全局依赖的JavaScript/css资源，每个组件依赖的JavaScript/css资源，都可以通过定义JSON数据格式的配置文件，灵活配置依赖资源；当页面渲染时，通过解析页面组件JSON格式数据文件、全局资源依赖JSON格式数据、组件资源依赖JSON格式数据，生成页面HTML代码，保证网页页面渲染能按需加载资源，具体步骤有：步骤1：将页面展示的内容全部抽象为独立的组件，每一个组件有一个组件名称，并配有唯一的组件ID；其中，所述页面展示内容是指包含页头及页头内的图片、页面中的文字及按钮、页脚备案说明在内的任意一个显示在页面内的内容形态；特别地，通过组件ID能在数据库中查询到与组件相关的所有设置数据；通过组件ID在数据库中查询到组件所有数据；步骤2：页面的制作及保存，具体为：以组件的形式构建及组织网站页面内容；当保存页面内容时，将当前页面内所有组件的位置信息解析为JSON格式的数据，并保存在数据库中；同时，组件的属性数据也一并被保存在数据库中；步骤3：编制用于操控JOSN数据的JSON配置文件，配置文件中包含有页面内应加载的JavaScript资源和CSS资源；所述JSON配置文件根据操控对象的不同，分为配置全局依赖资源的JSON文件和配置组件依赖资源的JSON文件；步骤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文件；接着，解析页面全局依赖资源JSON文件，提取当前组件和页面全局需要加载的JavaScript资源及CSS资源，并自动形成相应的HTML内容；步骤4-5：组合步骤4-3生成的HTML内容和步骤4-4生成的HTML内容，形成有关于当前页面完整的HTML内容。每个组件数据均独立存储在数据库中，并按照组件在页面内的布局结构进行分类存储；与现有技术相比，其显著优点以及形成的效果(1)本专利技术通过将页面内各内容进行组件化，每个组件有唯一的ID和名称，每个页面由多个组件构成，网站内各个页面的布局和构建都能依赖组织和组合组件来完成，简化网站建设的操作，提高网站页面制作的速度和灵活性；(2)本专利技术通过将每个组件以JSON数据格式按照页面布局规则进行分类存储，每一个页面内的组件属性数据以组件为单位独立存储，页面渲染呈现时自动提取JSON数据组成HTML代码，减少代码编制数量，提高页面编制工作效率；(3)本专利技术通过按照全局和组件编制不同的资源加载文件，并通过组件ID在文件中定位和获取预加载的资源，保证网站内各页面的渲染是按照当前页面内的组件需求加载资源，同时利于网站内容高度定制，网站组件资源高度可配置；附图说明图1是本专利技术实施例中页面组件存储时的json数据文件示意图；图2是组件可配置加载JavaScript/css资源json文件；图3是本专利技术实施例中页面存储时形成的JSON数据结示意图；图4是为本专利技术实施例中一种基于组件的网站模块化渲染方法实现本文档来自技高网...

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

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

【专利技术属性】
技术研发人员：杨开森，任睿，
申请(专利权)人：南京焦点领动云计算技术有限公司，
类型：发明
国别省市：江苏,32