[发明专利]一种基于Html的模块封装加载方法

说明书

技术领域

本发明涉及网络技术领域，尤其涉及一种基于Html的模块封装加载方法。

背景技术

在基于浏览器的程序开发中，页面元素的呈现、客户端(在浏览器中)逻辑处理、服务端逻辑调用等是必需要进行设计和开发内容。众多的HTML基本元素构成(如：div、input、label等)构成了一个完整的页面布局，而且只有完整的HTML页面才能在浏览器中正常显示。当需要这些元素响应用户的页面操作，以执行处理逻辑时，还需要HTML页面中直接编写JavaScript代码或引用JavaScript代码文件(*.js)。从设计角度来讲代码(页面元素构成、布局及JavaScript代码)要能够最大程度的复用，使得相同的局部页面构成能够在其他页面使用，并有着一样的呈现和逻辑处理方式。

发明内容

本发明的目的在于克服现有技术的缺点，提供一种基于Html的模块封装加载方法。

为解决以上技术问题，本发明的技术方案为：一种基于Html的模块封装加载方法，其不同之处在于，其步骤包括：

1)初始化HTML模块定义的局部变量；

2)对由不同HTML元素组成的HTML片段中的基本元素进行状态初始化；

3)将初始化完毕的HTML元素添加到HTML页面中，并完成在浏览器中的呈现；

4)当响应到用户操作的时候，程序通过逻辑处理函数执行js中定义的属性和方法。

按以上方案，所述HTML模块由HTML片段与JavaScript代码逻辑处理文件构成，所述JavaScript代码逻辑处理文件用于执行HTML片段在HTML中的呈现、逻辑处理、服务端逻辑调用。

按以上方案，所述HTML片段和JavaScript代码逻辑处理文件一一对应。

对比现有技术，本发明的有益特点为：可以使得HTML模块得到最大程度的复用，达到软件设计的目的。

附图说明

图1为本发明实施例中的HTML模块引用框架图；

图2为本发明实施例中的HTML模块加载流程图。

具体实施方式

下面通过具体实施方式结合附图对本发明作进一步详细说明。

请参考图1，本发明基于浏览器的多实例大文件上传的处理方法，基于Html的模块封装加载方法，其步骤包括：

1)初始化HTML模块定义的局部变量(调用constructor函数)；

2)对由不同HTML元素组成的HTML片段中的基本元素进行状态(如：背景颜色、显示内容等)初始化(调用rendering函数)；

3)将初始化完毕的HTML元素添加到HTML页面中，并完成在浏览器中的呈现(调用postCreate函数)；

4)当响应到用户操作的时候，程序通过逻辑处理函数执行js中定义的属性和方法(调用事件响应函数)。

具体的，所述HTML模块由HTML片段与JavaScript代码逻辑处理文件构成，所述JavaScript代码逻辑处理文件用于执行HTML片段在HTML中的呈现、逻辑处理、服务端逻辑调用。

具体的，所述HTML片段和JavaScript代码逻辑处理文件一一对应。

传统的设计模式下，如果多个HTML页面需要实现引用同一业务逻辑需要将相同的代码复制多份。使用本发明的方案可以使得HTML模块得到最大层度的复用，使HTML片段能够在不同HTML页面中使用。

HTML片段与JavaScript代码逻辑处理文件是一对一的关系。HTML片段负责页面元素的基本布局，JavaScript代码逻辑处理文件负责控制这些元素。

HTML页面通过引用JavaScript代码逻辑处理文件来确定HTML模块在页面中呈现的位置。

HTML模块中的JavaScript代码逻辑处理文件中，会定义HTML片段的实际物理文件路径。

HTML模块中的HTML片段会定义模块的基本元素构成和布局。

在HTML页面通过引用JavaScript代码逻辑处理文件来加载HTML模块。当HTML页面加载时，浏览器会执行JavaScript代码文件定义的逻辑，以加载HTML模块。

代码示例：

HTML片段：

HTML引用模块：

<！DOCTYPE html>