CN109508191A - 一种代码生成方法及系统 - Google Patents

Abstract

本发明公开了一种代码生成方法，适于在服务器中执行，该方法包括：将用户界面配置文件发送给客户端，以便在客户端呈现可视化用户界面；接收用户在客户端上呈现的可视化用户界面上的操作信息，操作信息包括被操作的组件信息、页面信息以及组件在页面的布局信息；向数据库发送访问请求，以便获取组件对应的代码片段和页面源代码文件；以及基于组件在页面的布局信息，将组件对应的代码片段集成到页面源代码文件中相应的位置。本方案能够对结构化的代码片段自动整合，解决代码复用的灵活性，提高前端开发效率。

Description

一种代码生成方法及系统

技术领域

本发明涉及前端开发技术领域，尤其涉及一种代码生成方法及系统。

背景技术

Web前端开发是创建网页页面或浏览器应用等前端界面呈现给用户的过程。通过javascript脚本语言、html超文本标记语言、css样式语言以及衍生出来的各种框架，来实现用户界面交互。框架是整个或部分系统中可复用的组件，目前主流的web框架有angular，vue，react等，可以提高web开发效率。

为了进一步提高前端开发效率，需要增加代码复用性、规范性以及灵活性。提高代码复用性的方法有很多，如继承、构造代码块、循环等。目前解决代码复用性的方法，一种是使用视图层的组件库，如extjs，jquery-ui，yui，antdesign的angular组件库，iview等：将一个复杂的场景分解后单独开发和维护。但是组件库不够灵活，不能满足定制的需求，这时，要么花费大量的精力去修改组件库的源码，要么等待组件库有新版本支持需求。而项目的实际应用场景多种多样，组件库很难满足所有的场景。一种是使用基础脚手架工具，例如vue-cli，yeoman：可用于生成基础代码，能够快速搭建一个完整的项目结构，但是基础脚手架工具只能生成很基础的功能，不能做到灵活定制，而且难以满足行业使用习惯和使用场景。

因此，需要一种自动化的代码片段集成方法，能够提高代码片段的复用性和灵活性，提高前端开发效率。

发明内容

为此，本发明提供了一种能够进行代码片段自动化整合的代码生成方法及系统。

根据本发明的一个方面，提供了一种代码生成方法，该方法可以在服务器中执行。在该方法中，可以首先将包含组件和页面的用户界面配置文件信息发送给客户端，以便在客户端呈现可视化用户界面。然后，接收用户在客户端上呈现的可视化用户界面上的操作信息，其中，操作信息包括被操作的组件信息、页面信息以及组件在页面的布局信息。随后，向数据库发送访问请求，以便获取组件对应的代码片段和页面源代码文件。最后，基于组件在页面的布局信息，将组件对应的代码片段集成到页面源代码文件中相应的位置。

可选地，在上述方法中，可视化用户界面包括组件列表和页面编辑区，在页面编辑区中，可以调整组件在页面中的布局位置以及编辑组件。

可选地，在上述方法中，数据库为关系型数据库，可以结构化存储组件的代码片段和页面源代码文件。

可选地，在上述方法中，可以解析源代码文件，基于组件标识信息，查找定位到相应的节点。然后，确定追加所述节点的方式，将代码片段集成到源代码文件中相应的位置。

可选地，在上述方法中，追加节点的方式包括在节点内部添加新元素、在节点的尾部添加新元素以及删除节点。

可选地，在上述方法中，可以基于源代码文件中的注释节点，扫描定位出不同类别的代码块。然后基于代码块中的注释信息，定位到代码片段相应的节点，注释信息至少包括组件标识信息。

可选地，在上述方法中，代码块的类别包括属性类、方法类、全局状态类。注释信息可以记录组件对应的代码片段的信息，包括组件标识信息、组件版本、写入时间、变量名、方法名中的一项或多项。

可选地，在上述方法中，可以通过加入实例化标识后缀，对代码片段中的变量名和方法名进行重命名，来区分不同的代码片段。或者通过在外层标签中加入类名来区分不同的代码片段。

可选地，在上述方法中，可以定义事件的订阅/发布消息，以便集成后的代码片段相互调用。

根据本发明的另一个方面，提供一种代码生成系统，该系统可以包括客户端、服务器和数据库。其中，客户端可以采集可视化用户界面的操作信息，以便将操作信息发送给服务器，操作信息包括组件标识信息、页面信息以及组件在页面的布局信息。服务器可以基于上述的代码生成方法将组件对应的代码片段集成到页面源代码文件中相应的位置。数据库可以存储组件的代码片段和页面源代码文件。

本方案可以将可视化界面的操作直接保存到源代码，对于开发组件没有框架和技术栈的限制，只要代码片段与运行时的环境匹配即可。能够减少开发人员为了修改组件样式，查找源代码并进行调试的工作。

附图说明

为了实现上述以及相关目的，本文结合下面的描述和附图来描述某些说明性方面，这些方面指示了可以实践本文所公开的原理的各种方式，并且所有方面及其等效方面旨在落入所要求保护的主题的范围内。通过结合附图阅读下面的详细描述，本公开的上述以及其它目的、特征和优势将变得更加明显。遍及本公开，相同的附图标记通常指代相同的部件或元素。

图1示出了根据本发明的一个实施例的代码生成系统100的示意性结构图；

图2示出了根据本发明的一个实施例的可视化用户界面的示意图；

图3示出了根据本发明的一个实施例的组件的示意图；

图4示出了根据本发明的一个实施例的代码生成方法的示意性流程图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

组件是封装了一个或多个程序模块的实体，有自己的属性和方法。组件的核心意义在于代码复用，功能相对单一或独立，在整个系统的代码层次上位于最底层，被其他代码所依赖。代码复用就是对代码的一部分甚至全部重新加以利用，从而构建新的程序。前端开发过程中，在页面布局时一般使用html对元素进行定义，使用css样式语言对展示的元素进行定位，再通过JavaScript脚本语言实现相应的效果和交互。本方案通过提供一种代码生成方法对代码片段进行自动化整合，以提高代码的复用性、规范性和灵活性。

图1示出了根据本发明的一个实施例的代码生成系统100的示意性结构图。如图1所示，代码生成系统100可以包括客户端、服务器和数据库。客户端与服务器相对应，可以为用户提供本地服务。客户端与服务器可以位于一台计算设备上也可以位于不同的计算设备上。客户端可以接收服务器发送的可视化界面的配置文件，以便呈现可视化用户界面。可视化用户界面是指以图形方式现实的操作界面，即前端，前端是通过浏览器与用户交互的部分，可以包含组件、属性、事件、方法等。其中，组件是组成程序运行界面的各种部件，如命令按钮、复选框、单选框、滚动条等。属性就是组件的性质，能够说明组件在程序运行中如何显示、组件大小、显示在何处、是否可见、是否有效等。事件就是对一个组件的操作，如用鼠标点击一个命令按钮。方法就是某个事件发生时要执行的具体操作。

图2示出了根据本发明的一个实施例的可视化用户界面的示意图。如图2所示，可视化用户界面可以包含上部组件栏，左侧页面导航栏，中部页面编辑区，右侧属性区。例如，在页面编辑区中可以调整组件在页面中的布局位置，属性区可以编辑组件的属性，页面导航栏可以通过iframe嵌套的方式嵌套需要编辑的页面。例如，有时需要把其他地方的页面嵌套到当前网站的某个模块中，可以使用iframe嵌套。图3示出了根据本发明的一个实施例的组件的示意图。如图3所示，组件可以是按钮、图标、多选钮、单选钮、标签、分隔线等。用户可以通过拖拽方式，将组件拖拽到页面编辑区相应的位置，可以对组件进行添加、删除、样式修改等可视化操作。客户端可以采集可视化用户界面的操作信息，以便将操作信息发送给服务器。例如，可以在JavaScript代码中加入监听方法，拖拽动作可以触发浏览器内置事件。拖拽动作开始时采集一个组件信息，拖拽动作落下时，指向一个页面中的一个节点。用户点击保存后，将拖拽动作产生的信息作为参数发送到服务器。操作信息可以包括组件标识信息、页面信息以及组件在页面的布局信息。

服务器可以通过Node运行环境运行JavaScript脚本语言程序、操作源代码文件。例如，可以使用require指令来载入Node.js模块，服务器可以监听客户端的请求，客户端可以使用浏览器或终端发送http请求，服务器接收请求后返回响应数据。Node.js作为一个前端框架、后台语言，通过事件循环来实现并发操作。Node中的express框架可以提供HTTP服务，以便接收可视化界面传递的参数。其中，express框架可以设置中间件来响应前端的HTTP请求，定义路由表用于执行不同的HTTP请求动作。可以通过向模板传递参数来动态渲染HTML页面。前端采集到用户界面的操作信息传递给node服务器，Node服务器可以根据操作信息将代码片段集成到页面源代码文件中相应的位置。

数据库可以存储所述组件的代码片段和页面源代码文件，将源代码文件和代码片段进行持久化、结构化存储。例如服务器可以提供数据库接口服务，可以使用MySQL关系型数据库，当服务器接收到前端发送的http请求后，可以通过node环境的数据库客户端访问MySQL数据库，获得代码片段的完整信息和源代码文件。

图4示出了根据本发明的一个实施例的代码生成方法的示意性流程图。如图4所示，首先在步骤S410中，可以用户界面配置文件发送给客户端，以便在客户端呈现可视化用户界面。

可以使用html、JavaScript、css等前端开发语言创建可视化界面，html超文本标记语言可以说明文字、图形、动画、声音、表格、链接等，html文件的结构包括头部和主体，其中，头部可以描述浏览器所需的信息，主体可以包含所要说明的具体内容。Css级联样式表可以设置页面样式，通过设置样式表，可以统一控制html中各标志的显示属性，控制页面的外观。JavaScript脚本语言可以为html页面添加交互行为、增加动态功能，还可以对浏览器事件做出响应。

随后在步骤S420中，可以接收用户在客户端上呈现的可视化用户界面上的操作信息，其中操作信息包括被操作的组件标识信息、页面信息以及组件在页面的布局信息。

例如，图3所示的每一个组件都是可复用的，可以将组件拖拽到不同的页面使用。通过可视化界面，用户可以将组件拖拽到页面编辑区，在页面编辑区调整组件在页面中的布局位置。布局是指拖拽动作落点的位置，当页面被加载时，浏览器会创建页面的文档对象模型DOM。由于页面是以DOM形式展现的，操作的布局信息可以是指向一个页面的DOM节点。组件标识信息可以是组件名称，可以唯一标识一个组件。页面信息可以包括页面的文本内容、源代码、URL网址等。

附图中图2和图3示出的可视化用户界面和组件，仅仅是示意性地用于进一步理解本发明方案，用户界面上的内容并不造成本方案的保护范围不清楚。

随后在步骤S430中，可以向数据库发送访问请求，以便获取组件对应的代码片段和页面源代码文件。

其中，数据库为MySQL等关系型数据库，适于结构化存储组件代码片段和页面源代码文件，并存储生成的代码。可以将MySQL数据库部署在服务器上服务器响应于客户端发送的http请求和请求参数，通过访问数据库获取请求参数的完整信息，包括组件对应的代码片段和页面源代码文件。

最后在步骤S440中，可以基于组件在页面的布局信息，将组件对应的代码片段集成到页面源代码文件中相应的位置。

根据本发明的一个实施例，可以解析源代码文件。例如，可以通过cheerio框架解析html文件，在内存中生成DOM对象，可使用jQuery原生接口操作html文件。其中，jQuery可以提供DOM操作接口，cheerio框架能够快速灵活地对JQuery核心进行实现。它工作于DOM模型上，可以解析几乎所有的HTML文档，且解析、操作、呈送都很高效。DOM文档对象模型是给HTML文件使用的一组API。定义了访问HTML文档对象的一套属性、方法和事件。

可以基于组件标识信息查找定位到相应的节点，然后确定追加节点的方式，以便将代码片段集成到源代码文件中相应的位置。例如，可以通过如下代码将html代码片段集成到源代码文件相应的位置：

//引入文件操作类

letfs_1＝require(″fs″)；

//引入cheerio框架

let cheerio＝require(′cheerio′)；

//读取html代码文件

let data＝fs_1.readFileSync(htmlFileName，{encoding：′utf-8′})；

//用cheerio解析代码文件数据

let$＝cheerio.load(data，{

decodeEntities：false，

_useHtmlParser2：true，

lowerCaseAttributeNames：false

})；

//查找html中的某个节点(使用的是和jquery一样的api)

let container＝$(″[editable-id＝″′+compId+″′]″)；

//在节点内部追加DOM元素

container.append(′<span>标题</span>′)；

//在节点后面添加DOM元素

container.after(′<span>标题</span>′)；

//删除选中的节点

container.remove()；

//由文件操作类将新数据写入到文件

fs_1.writeFileSync(htmlFileName，$.html())；

HTML文档中的所有内容都是节点，可以是文档节点、元素节点、文本节点、属性节点和注释节点。DOM树中的所有节点均可通过JavaScript进行访问。所有HTML元素(节点)均可被修改，也可以创建或删除节点。其中，追加所述节点的方式包括在节点内部添加、在节点的尾部添加以及删除节点。

根据本发明的一个实施例，可以基于源代码文件中的注释节点，扫描定位到不同类别的代码块。由于在创建页面的时候，程序会生成源代码文件，并在生成文件的同时，在文件内的可执行代码区域加入注释代码。注释的内容包含对一个代码块的描述，例如，属性域的起止行、属性域内部是否已经有已经集成的组件代码块。每一个组件的属性代码块都会有独立的起止行注释标注在源代码文件中，包括属性域，方法域，全局状态域等。

然后，基于代码块中的注释信息，定位到代码片段相应的节点，其中，注释信息至少包括组件标识信息。例如，程序会按行进行扫描，通过注释信息定义的关键字，可以确定代码大块的起止行，例如属性快，在属性块内部通过标记的组件描述的注释行起止信息，可以确定哪几行是某个组件的属性代码。可以在文档中设置锚点，通过锚点链接可快速将访问者带到指定位置。源代码中的注释信息可以如下：

//----attribute_start----

//----attribute_end----

//----function_start----

//----轧nction_end----

//----global_start----

//----global_end----

根据本发明的一个实施例，注释信息可以记录组件对应的代码片段的元信息，包括组件标识信息、组件版本、写入时间、变量名、方法名中的一项或多项。由于注释信息紧挨着代码，作为代码的一种补充描述，通常情况，注释信息是人工编写的，非结构化的，为增强代码可读性。但是，注释信息也可以由程序自动写入。在程序添加代码片段的同时，在代码片段的前后行写入注释信息，就可以将写入代码时能获取到的描述信息同时写入，以备下次程序读取时，可以解析。比如注释信息可以记录写入代码的组件标识信息，组件名称，组件版本，写入时间等。以下代码为一个集成后的代码片段：

在面向对象的编程中，通常把用类创建对象的过程称为实例化。实例化时会将变量名和方法名重命名，通过加入实例化标识后缀，来防止出现代码中属性和方法名称重复的问题。同时，会在数据库记录实例化的组件标识信息。这样就保证了每次实例化时的组件标识ID唯一。根据本发明的一个实施例，可以通过加入实例化标识后缀，对所述代码片段中的变量名和方法名进行重命名，来区分不同的代码片段。以一个属性为例，为了防止多次插入时，属性名称重复，每次插入会为属性重命名。可以在名称之后加入一个随即生成的编码为后缀，此后缀极为实例化标识ID，此标识ID会同时写入相应的注释信息中。

在对代码进行编辑或删除前，可以进行代码检测。程序可以通过注释信息查找被标记的代码片段，可以先读取要编辑代码的注释信息中的实例化标识后缀，并读取此代码块的组件源码，加入实例化标识后缀后重新执行一次插入逻辑。只是将要插入的数据暂时放在内存中，并读取已经插入的代码数据。用程序进行文本对比，通过代码行数、字符数以及二进制码的对比，即可确定当前代码是否曾经在程序之外被人工编辑过。可以将组件的属性和方法名称的实例化标识后缀去除，将代码片段保存成新的组件，相当于另存为的功能，同时，组件代码内部被编辑过的逻辑代码也可以被一起保存起来。

对于样式文件代码，可以不用加入实例化标识后缀。由于一个组件在同一个页面第一次引入，样式代码第一次插入。当第二次引入，样式信息可以不用再次插入，自动复用第一次引入的样式代码。可以通过在外层标签中加入类名来区分不同的代码片段。例如A组件里面有个标签class名称为user，样式文件中有个样式定义为.user{...}。B组件里面同样有个标签class名称为user，样式文件中同样有个样式定义为.user{...}。若在同一页面，同时集成A组件和B组件，样式文件中就会有两个样式定义为.user{...}，就会造成冲突。可以在集成A组件时，最外层div标签加入class类名comp-a，同时css样式定义为(.comp-a.user{...})，集成B组件时，最外层div标签加入class类名comp-b，同时css样式定义为(.comp-b.user{...})，这样就会避免样式冲突。

为了解决不同组件集成后需要互相进行调用触发的操作，可统一定义一个事件订阅/发布消息，通过消息来实现组件间逻辑的解耦。例如，每个组件在与其他组件交互的过程中，通常是通过方法调用的方式传递参数和动作。但为了对组件进行解耦，减少组件间的依赖关系，可以将方法调用改为消息通信。代码实现发布者/订阅者模式，通常需要两个步骤：首先初始化发布者、订阅者。订阅者需要注册到发布者，发布者发布消息时，依次向订阅者发布消息。组件可以发送一个消息到一个全局的消息处理对象中，由消息处理对象触发对另一个组件的调用。另一个组件只要在消息处理对象中订阅对于此消息的响应函数。这样就变成了所有组件只依赖于全局消息处理对象。

本发明的方案通过对html格式、JavaScript脚本格式、css样式格式代码的集成方法，能够对结构化的代码片段进行自动化整合。可以通过可视化界面直接修改组件样式，并直接将修改后的组件代码保存到源代码中。能够解决代码的复用性、规范性和灵活性，从而达到提高前端开发效率。

B11、一种代码生成系统，其中，所述系统包括：客户端，适于采集可视化用户界面的操作信息，以便将所述操作信息发送给服务器，所述操作信息包括组件标识信息、页面信息以及组件在页面的布局信息；服务器，适于使用如A1-10任意一项中所述的方法将组件对应的代码片段集成到页面源代码文件中相应的位置；以及数据库，适于存储所述组件的代码片段和页面源代码文件。

应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。

本领域那些技术人员应当理解在本文所公开的示例中的设备的模块或单元或组件可以布置在如该实施例中所描述的设备中，或者可替换地可以定位在与该示例中的设备不同的一个或多个设备中。前述示例中的模块可以组合为一个模块或者此外可以分成多个子模块。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。

此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。

这里描述的各种技术可结合硬件或软件，或者它们的组合一起实现。从而，本发明的方法和设备，或者本发明的方法和设备的某些方面或部分可采取嵌入有形媒介，例如软盘、CD-ROM、硬盘驱动器或者其它任意机器可读的存储介质中的程序代码(即指令)的形式，其中当程序被载入诸如计算机之类的机器，并被所述机器执行时，所述机器变成实践本发明的设备。

在程序代码在可编程计算机上执行的情况下，计算设备一般包括处理器、处理器可读的存储介质(包括易失性和非易失性存储器和/或存储元件)，至少一个输入装置，和至少一个输出装置。其中，存储器被配置用于存储程序代码；处理器被配置用于根据该存储器中存储的所述程序代码中的指令，执行本发明所述的方法。

以示例而非限制的方式，计算机可读介质包括计算机存储介质和通信介质。计算机可读介质包括计算机存储介质和通信介质。计算机存储介质存储诸如计算机可读指令、数据结构、程序模块或其它数据等信息。通信介质一般以诸如载波或其它传输机制等已调制数据信号来体现计算机可读指令、数据结构、程序模块或其它数据，并且包括任何信息传递介质。以上的任一种的组合也包括在计算机可读介质的范围之内。

此外，所述实施例中的一些在此被描述成可以由计算机系统的处理器或者由执行所述功能的其它装置实施的方法或方法元素的组合。因此，具有用于实施所述方法或方法元素的必要指令的处理器形成用于实施该方法或方法元素的装置。此外，装置实施例的在此所述的元素是如下装置的例子：该装置用于实施由为了实施该发明的目的的元素所执行的功能。

如在此所使用的那样，除非另行规定，使用序数词“第一”、“第二”、“第三”等等来描述普通对象仅仅表示涉及类似对象的不同实例，并且并不意图暗示这样被描述的对象必须具有时间上、空间上、排序方面或者以任意其它方式的给定顺序。

尽管根据有限数量的实施例描述了本发明，但是受益于上面的描述，本技术领域内的技术人员明白，在由此描述的本发明的范围内，可以设想其它实施例。此外，应当注意，本说明书中使用的语言主要是为了可读性和教导的目的而选择的，而不是为了解释或者限定本发明的主题而选择的。因此，在不偏离所附权利要求书的范围和精神的情况下，对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。对于本发明的范围，对本发明所做的公开是说明性的，而非限制性的，本发明的范围由所附权利要求书限定。

Claims (10)

1.一种代码生成方法，适于在服务器中执行，所述方法包括：

将用户界面配置文件发送给客户端，以便在所述客户端呈现可视化用户界面；

接收用户在所述客户端上呈现的可视化用户界面上的操作信息，所述操作信息包括组件标识信息、页面信息以及组件在页面的布局信息；

向数据库发送访问请求，以便获取所述组件对应的代码片段和所述页面源代码文件；以及

基于所述组件在页面的布局信息，将所述组件对应的代码片段集成到页面源代码文件中相应的位置。

2.如权利要求1所述的方法，其中，所述可视化用户界面包括组件列表以及页面编辑区，所述页面编辑区适于调整组件在页面中的布局位置以及编辑所述组件。

3.如权利要求1所述的方法，其中，所述基于所述组件在页面的布局信息，将所述组件对应的代码片段集成到页面源代码文件中相应的位置的步骤包括：

解析所述源代码文件，基于所述组件标识信息查找定位到相应的节点；以及

确定追加所述节点的方式，将所述代码片段集成到源代码文件中相应的位置。

4.如权利要求3所述的方法，其中，所述追加所述节点的方式包括在所述节点内部添加、在节点的尾部添加以及删除所述节点。

5.如权利要求3所述的方法，其中，所述基于所述组件标识信息查找定位到相应的节点的步骤包括：

基于源代码文件中的注释节点，扫描定位出不同类别的代码块；

基于所述代码块中的注释信息，定位到代码片段相应的节点，其中，所述注释信息至少包括组件标识信息。

6.如权利要求5所述的方法，其中，所述代码块的类别包括属性类、方法类、全局状态类。

7.如权利要求5所述的方法，其中，所述注释信息适于记录所述组件对应的代码片段的信息，包括所述组件标识信息、组件版本、写入时间、变量名、方法名中的一项或多项。

8.如权利要求7所述的方法，其中，所述基于所述组件在页面的布局信息，将所述组件对应的代码片段集成到页面源代码文件中相应的位置的步骤还包括：

通过加入实例化标识后缀，对所述代码片段中的变量名和方法名进行重命名，来区分不同的代码片段；或者

通过在外层标签中加入类名来区分不同的代码片段。

9.如权利要求1-8任意一项中所述的方法，其中，所述方法还包括：

定义事件的订阅/发布消息，以便集成后的代码片段相互调用。

10.如权利要求1所述的方法，其中，所述数据库为关系型数据库，适于结构化存储所述组件的代码片段和页面源代码文件。