CN103955364B - 一种适用于手机的前端组件方法 - Google Patents

Abstract

本发明提供一种适用于手机的前端组件方法，包括定义组件的资源文件夹，该文件夹里包含有组件的样式信息、布局信息、主要的逻辑方法、资源文件；在配置文件中对需要的组件进行注册，根据配置信息和页面中的标签来对组件进行识别，并调用组件中的相关方法进行标签渲染及添加；允许用户自定义自己的组件，并加入到组件包中，且用户的自定义组件既可以是用户自己开发的全新组件，也可以是通过将旧的组件进行修改加工而得到；组件正常生成后通过对外提供接口与事件同外部资源进行交互。随着组件的增多，应用项目的增加，组件的复用频率也逐渐增加，当在开发中采用此技术后，开发成本将逐渐降低，开发效率也将逐步提高。

Description

一种适用于手机的前端组件方法

技术领域

本发明涉及一种适用于手机的前端组件方法。

背景技术

在手机终端实现跨系统的应用，最方便快捷的方法就是采用web app的方式进行应用软件开发。在web app的开发中，我们往往需要用到很多各种各样的HTML元素（复用代码）。随着手机应用项目的增多，我们可以发现有许多相似的功能在多个手机项目中都有需求（例如许多的应用软件都需要用到通选框或复选框对象），如果开发者为每个项目都重复编写类似的代码，那么既会造成重复的工作，增加开发成本，也不利于后期的维护。为了解决以上问题，本发明提出了一种适用于手机的前端组件方法，将手机前端的功能组件化，方便了用户的重复利用与二次开发，节省了开发成本，提高了工作效率。

发明内容

本发明要解决的技术问题，在于提供一种适用于手机的前端组件方法，将各种常用到的元素（复用代码）组成前端组件，以供开发人员复用。开发人员可以根据自己的需求，对当前组件进行修改，形成适用于本应用领域的新的组件；也可以将组件进行分类，按需要对组件进行加载，从而避免一次性引用太多的元素。

本发明是这样实现的：一种适用于手机的前端组件方法，包括如下步骤：

步骤10、加载基本页面框架，并配置组件资源目录，包括定义一个组件资源文件夹，文件夹内包含组件的资源文件和组件的配置文件，且组件的资源文件按照同一个组件中的所有资源放置在同一个文件夹的原则进行设置；

步骤20、选择需要的组件，根据配置在组件文件中读取相应的页面信息；

步骤30、利用底层解析库提供的支持，根据配置信息和页面中的标签来对组件进行自动解析，调用组件的初始化方法；

步骤40、用户根据需求自定义自己的组件；

步骤50、调用组件对象的渲染方法，根据初始化完成的函数对页面标签进行渲染；

步骤60、当组件内还有未初始化的组件时，将自动跳转到步骤30，并通过组件内的html布局文件实现组件之间的嵌套；

步骤70、组件正常生成后，开发者通过调用相应的接口对组件进行操作或者捕捉组件的相应事件并进行处理。

进一步的，所述步骤10中，配置文件对应的资源目录包括Style目录，用于保存组件相关的资源；Html目录，用于保存组件的布局文件；JS目录，用于保存组件相关的逻辑。

进一步的，所述步骤20中，读取页面信息时需先在页面的标签中写入要使用的组件类型，判断配置正确后将生成组件对象，并保存到页面的对象缓存中。

进一步的，所述步骤40用户自定义组件步骤主要如下：

步骤401、按照组件资源结构目录来编写或者修改需要的组件，并且在组件中提供让页面调用的渲染方法；

步骤402、根据实际的业务需要提供出相应的调用接口和相应的事件，并添加相应的资源；

步骤403、将组件的名称与目录注册到配置文件中以供使用。

进一步的，所述步骤60中，在组件内的html布局文件并非是必要的，但是当有组件嵌套时，组件内的渲染方法就调用html的布局文件来生成组件的布局；组件嵌套的时候，html的布局文件便将其他组件的标签写入到上级组件的布局文件中，以实现组件的嵌套；组件嵌套过程中，将首先渲染嵌套的组件内容，然后将嵌套的内容作为整体组件的一部分渲染到最终页面上。

进一步的，所述步骤50中，标签渲染的过程如下：

步骤501、加载组件对象的样式文件及相关的资源；

步骤502、根据组件的配置信息，生成相应的DOM对象；

步骤503、将生成的DOM对象添加到页面上的相应标签之上。

本发明具有如下有益效果：

1.手机前端常用界面功能的组件化，便于用户的重复利用与二次开发，节省开发成本，提高工作效率。

2.随着用户使用的项目增多，使用的组件也将增多，用户节省的成本越多，维护越方便。

3.在自定义时，用户可以根据自己的业务需求，创建属于自己的组件；也可以在自己的组件中引用其他原有的组件，实现功能的扩展和增强。

4.由于规定了统一的组件接口，组件之间可以简单的互相调用，但是不能干涉到组件内的子组件的执行。

附图说明

下面参照附图结合实施例对本发明作进一步的说明。

图1为本发明的流程框图。

图2为本发明中组件目录逻辑结构示意图。

具体实施方式

请参照图1所示，一种适用于手机的前端组件方法，包括如下步骤:

步骤10、加载基本页面框架，并配置组件文件，包括定义一个组件资源文件夹，内含组件的资源文件和组件的配置文件，且组件的资源文件按照同一个组件中的所有资源放置在同一文件夹的原则进行设置。如图2所示，在配置文件中，配置组件对应的资源目录包括Style目录、Html目录和JS目录三个目录。其中：Style目录下保存组件相关的资源，包括页面的样式文件(CSS文件)和图片资源等；Html目录下保存组件的布局文件(html文件)；JS目录下保存组件相关的逻辑。

步骤20、选择需要使用到的组件，根据配置在组件文件中读取相应的页面信息。当用户需要在页面中使用组件时，先在页面的标签中写入要使用的组件类型，在读取页面标签的时候，如果某个标签带有组件属性，将首先生成组件对象，并保存到页面的对象缓存中。

步骤30、利用底层解析库提供的支持，根据配置的信息和页面中的标签来对组件进行自动解析，调用组件的初始化方法。

步骤40、用户根据需求自定义自己的组件。如果组件的功能不足够支持用户的业务需求，用户可以自定义自己的组件。用户可以简单的将组件复制出来，修改一些组件细节，以适应自己行业的需求，然后将组件重新封装，作为一个新的组件归并到组件库中，以便于下次复用；用户也可以完全从头开始开发一个全新的组件，赋予自己需要的功能。自定义组件步骤主要如下：

步骤401、按照组件资源结构目录来编写或者修改需要的组件，并且在组件中提供让页面调用的渲染方法；

步骤402、根据实际的业务需要提供出相应的调用接口和相应的事件，并添加相应的资源；

步骤403、将组件的名称与目录注册到配置文件中以供使用。

步骤50、调用组件对象的渲染方法，根据初始化完成的函数对页面标签进行渲染，标签渲染的过程如下：

步骤501、加载组件对象的样式文件及相关的资源；

步骤502、根据组件的配置信息，生成相应的DOM对象；

步骤503、将生成的DOM对象添加到页面上的相应标签之上。

所述组件配置信息通过请求远程服务器的信息或者将所需要的配置数据作为对象直接传输到组件之中得到。如果配置了组件的数据源信息，组件将自动根据信息请求远程服务器资源，如果资源格式不符合组件的需要，或者远程服务器不能正常访问，那么组件将无法被正常渲染出来。

步骤60、当组件内还有未初始化的组件时，将自动跳转到步骤30，并通过组件内的html布局文件实现组件之间的嵌套。

所述组件内的html布局文件并非是必要的，但是在组件嵌套的时候，html布局文件通过将其他组件标签写入到上级组件的布局文件中，以实现组件的嵌套。在组件嵌套过程中，将首先渲染嵌套的组件内容，然后将嵌套的内容作为整体组件的一部分渲染到最终页面上。

步骤70、组件正常生成后，开发者通过调用相应的接口对组件进行操作或者捕捉组件的相应事件并进行处理。前端组件封装了一系列常见的业务需求要用到的功能，比如数据列表、菜单等，在组件中也包含了元素结构、样式、组件内的交互逻辑，为外部提供了相应的组件接口和事件。

综上所述，本发明具有以下优点：

1.将手机前端常用的界面功能组件化，方便了用户的重复利用与二次开发，节省了开发成本，提高了工作效率。

2.随着用户使用的项目增多，使用的组件也将增多，用户节省的成本越多，维护越方便。

3.开发过程中，用户可以根据自己的业务需求，创建属于自己的组件；也可以在自己的组件中引用其他原有的组件，实现功能的扩展和增强。

4.由于规定了统一的组件接口，组件之间可以进行简单的相互调用，但又不会干涉到组件内的子组件的执行，为操作带来了很多方便。

以上所述仅为本发明的具体实施方式，我们所描述的具体实施例也只是说明性的，凡依本发明申请专利范围所做的均等变化与修饰，皆应属本发明的涵盖范围。

Claims (1)

1.一种适用于手机的前端组件方法，其特征在于包括如下步骤：

步骤10、加载基本页面框架，并配置组件资源目录，包括定义一个组件资源文件夹，文件夹内包含组件的资源文件和组件的配置文件，且组件的资源文件按照同一个组件中的所有资源放置在同一个文件夹的原则进行设置；在配置文件中，配置组件对应的资源目录包括Style目录、Html目录和JS目录三个目录，其中：Style目录下保存组件相关的资源，包括页面的样式文件和图片资源；Html目录下保存组件的html布局文件；JS目录下保存组件相关的逻辑；

步骤20、选择需要的组件，根据配置在组件文件中读取相应的页面信息，当用户需要在页面中使用组件时，先在页面标签中写入要使用的组件类型，在读取页面标签的时候，如果某个标签带有组件属性，将首先生成组件对象，并保存到页面的对象缓存中；

步骤30、利用底层解析库提供的支持，根据配置信息和页面中的标签来对组件进行自动解析，调用组件的初始化方法；

步骤40、用户根据需求自定义自己的组件：用户将组件复制出来，根据需要修改组件细节，然后将组件重新封装，作为一个新的组件归并到组件库中，以便于下次复用；或者，用户重新开发一个全新的组件，赋予自己需要的功能，自定义组件步骤主要如下：

步骤401、按照组件资源目录来编写或者修改需要的组件，并且在组件中提供让页面调用的渲染方法；

步骤402、根据实际的业务需要提供出相应的调用接口和相应的事件，并添加相应的资源；

步骤403、将组件的名称与目录注册到配置文件中以供使用；

步骤50、调用组件对象的渲染方法，根据初始化完成的函数对页面标签进行渲染，标签渲染的过程如下：

步骤501、加载组件对象的样式文件及相关的资源；

步骤502、根据组件的配置信息，生成相应的DOM对象；

步骤503、将生成的DOM对象添加到页面上的相应标签之上；

所述组件配置信息通过请求远程服务器的信息或者将所需要的配置数据作为对象直接传输到组件之中得到，如果配置了组件的数据源信息，组件将自动根据信息请求远程服务器资源，如果资源格式不符合组件的需要，或者远程服务器不能正常访问，那么组件将无法被正常渲染出来；

步骤60、当组件内还有未初始化的组件时，将自动跳转到步骤30，并通过组件内的html布局文件实现组件之间的嵌套；所述组件内的html布局文件并非是必要的，但是在组件嵌套的时候，html布局文件通过将其他组件标签写入到上级组件的布局文件中，以实现组件的嵌套,在组件嵌套过程中，将首先渲染嵌套的组件内容，然后将嵌套的内容作为整体组件的一部分渲染到最终页面上；

步骤70、组件正常生成后，开发者通过调用相应的接口对组件进行操作或者捕捉组件的相应事件并进行处理。