[发明专利]一种适用于手机的前端组件方法

摘要

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

主权项

一种适用于手机的前端组件方法，其特征在于包括如下步骤：步骤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、组件正常生成后，开发者通过调用相应的接口对组件进行操作或者捕捉组件的相应事件并进行处理。