CN103605514B - 一种前端模板的处理方法及装置 - Google Patents

Abstract

本发明公开了一种前端模板的处理方法和装置，应用于对Html的第一代码处理过程中，所述方法包括：获得Html的所述第一代码；获得Html的所述前端模板；分析所述第一代码与所述前端模板的对应关系；根据所述对应关系，将所述第一代码转换为第二代码，其中，所述第一代码与所述第二代码不同。本发明实施例通过将Html的第一代码与前端模板的对应关系，将第一代码转换为第二代码，进而实现利用前端模板，在开发中将Html和Javascript进行分离，达到代码的可读性和可维护性较好的技术效果。

Description

一种前端模板的处理方法及装置

技术领域

本发明涉及计算机处理技术领域，尤其涉及一种前端模板的处理方法及装置。

背景技术

随着计算机技术的不断发展，WEB开发应用场景也越来越多，并且随着页面应用越来越复杂，在页面中使用Javascript的地方也越来越多，很多时候使用Javascript和后端进行通讯，获取数据，并将返回的数据拼接成对应的Html，渲染到页面上。

但本申请发明人在实现本申请实施例中发明技术方案的过程中，受到如下困扰：

在Javascript中拼接会比较麻烦，且其代码可读性也比较差，编辑器对其支持也不友好。比如说，现有技术中由于Javascript中不支持多行的字符串，所以一般要处理多行字符串时，需要将换行符\n进行转义，并且还需要使用引号将字符串包含起来。这样的处理方式需要对换行符进行转义，且使用了引号，如果字符串内容较长的话，其可读性和可维护性均较差。

发明内容

本发明实施例提供一种前端模板的处理方法及装置，用于解决现有技术中web开发过程中，使用javascript进行拼接时，可读性和可维护性较差的技术问题，达到代码可读性和可维护性好的技术效果。

一方面，本申请通过本申请的一实施例提供如下技术方案：

一种前端模板的处理方法，应用于对Html的第一代码处理过程中，所述方法包括：获得所述Html的所述第一代码；获得所述Html的所述前端模板；分析所述第一代码与所述前端模板的对应关系；根据所述对应关系，将所述第一代码转换为第二代码，其中，所述第一代码与所述第二代码不同。

进一步的，所述方法还包括：分析所述Html的所述前端模板；获得所述前端模板的引导标记，以便于根据所述引导标记确定所述第一代码在Javascript中的所述第一代码的相应位置。

进一步的，所述方法还包括：将所述第二代码替换到所述Javascript中的所述第一代码的相应位置。

进一步的，在所述将所述第二代码替换到所述Javascript中的所述第一代码的相应位置之后，还包括：在所述Html中删除所述前端模板。

进一步的，所述获得所述Html的所述第一代码包括：通过一异步接口获得所述第一代码。

进一步的，在将所述第二代码替换到所述Javascript中的所述第一代码的相应位置之前，所述方法还包括：对所述第二代码进行压缩处理。

另一方面，本申请通过本申请的一实施例，提供如下技术方案：

一种前端模板的处理装置，应用于对Html的第一代码处理过程中，所述装置包括：第一获得模块，所述第一获得模块用于获得Html的所述第一代码；第二获得模块，所述第二获得模块用于获得Html的所述前端模板；第一分析模块，所述第一分析模块用于分析所述第一代码与所述前端模板的对应关系；转换模块，所述转换模块用于根据所述对应关系，将所述第一代码转换为第二代码，其中，所述第一代码与所述第二代码不同。

进一步的，所述装置还包括：第二分析模块，所述第二分析模块用于分析所述Html的所述前端模板；第三获得模块，所述第三获得模块用于获得所述前端模板的引导标记，以便于根据所述引导标记确定所述第一代码在Javascript中的所述第一代码的相应位置。

进一步的，所述装置还包括：替换模块，所述替换模块用于将所述第二代码替换到所述Javascript中的所述第一代码的相应位置。

进一步的，所述装置还包括：删除模块，所述删除模块用于在所述Html中删除所述前端模板。

进一步的，所述装置还包括：第四获得模块，所述第四获得模块用于通过一异步接口获得所述第一代码。

进一步的，所述装置还包括：压缩模块，所述压缩模块用于对所述第二代码进行压缩处理。

本发明实施例的有益效果如下：

本发明一实施例提供的一种前端模板的处理方法和装置，通过将Html的第一代码与前端模板的对应关系，将第一代码转换为第二代码，进而实现利用前端模板，在开发中将Html和Javascript进行分离，达到代码的可读性和可维护性较好的技术效果。

进一步的，本发明实施例通过对第二代码进行压缩等优化处理，可以减少代码的体积，提升页面的访问速度。

附图说明

图1为本发明一实施例中一种前端模板的处理方法的流程示意图；

图2为本发明一实施例中一种前端模板的处理装置的结构示意图。

具体实施方式

本发明一实施例提供的一种前端模板的处理方法和装置，通过将Html的第一代码与前端模板的对应关系，将第一代码转换为第二代码，进而实现利用前端模板，在开发中将Html和Javascript进行分离，达到代码的可读性和可维护性较好的技术效果。

具体而言，本发明实施例旨在通过一种前端模板的机制，让开发时拼接Html的工作还是在Html的环境中进行，进而增加了代码的可读性和可维护性。也就是说，在代码上线时，对代码进行分析，分析在javascript中对html中前端模版的调用关系，对将前端模版内容生成到对应javascript文件中，让上线后的javascript和html在前端模版这块没有任何的依赖。

也就是说，对于一个程序开发而言，开发工作主要分成两个部分，即：在Html中开发Html代码，在Javascript中开发Javascript代码，然后通过本申请所提供的前端模板实现在Javascript环境中，将html代码转换成Javascript代码，进而实现javascript环境中代码的完整性，同时也实现了上述代码上线后Javascript和Html在前端模块之间没有任何依赖，达到增加代码可读性和可维护性的目的。需要说明的是，上述程序开发的代码在javascript环境中包括了两部分：一部分是Javascript环境中开发的第一部分javascript代码，另外一部分是Html代码通过本申请实施例转化的第二部分javascript代码。

为使本申请一实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

实施例一

为使本领域技术人员能够更详细了解本发明，以下结合附图对本发明进行详细描述。

如图1所述，图1为本发明一实施例中一种前端模板的处理方法，应用于对Html的第一代码处理过程中，其中所述方法包括：

步骤10：获得所述Html的所述第一代码；

具体来说，步骤10主要是获得Html中的html代码，本发明实施例定义为第一代码。所述第一代码的获得可以通过异步接口获得，从本发明实施例来说，本领域技术人员从Html中获得第一代码的常规获得方式均为本申请的保护范围，本申请将不做具体阐述。

步骤20：获得所述Html的所述前端模板；

具体来说，步骤20主要是获得Html中的前端模板，所述前端模板为一段包含动态数据的Html代码，这段代码具体是通过扫描Html中的script，然后判断script中的type为text/html为前端模版。通过该前端模板的ID可以获取javascript中调用前端模板的位置，进而可以通过将前端模板内容进行转义换行、代码优化等操作，将javascript中对前端模板的引用替换为具体的前端模板的代码，进而实现了本申请的目的，即增加了代码的可读性和可维护性。进一步的，这段代码一般是通过异步接口拿到第一代码后通过Javascript进行渲染。

进一步的，在获得所述前端模板的同时，还可以获得所述前端模板的引导标记，所述引导标记标记了第一代码在Javascript中的具体位置，引导标记的作用是将根据前端模板将第一代码转换为第二代码之后，便于将第二代码置于javascript中的正确位置，以便和上述javascript环境中开发的第一部分javascript代码形成一个整体。

具体而言，所述引导标记可以标记为：id=itemServiceTpl，然后通过该引导标记获得所述第一代码在javascript中的引用位置，比如，获取前端模版的id为itemServiceTpl,就可以通过W(‘#itemServiceTpl’).html()在javascript中进行查找，就可以查找到对应的引用位置。

具体来说，通过引导标记，即ID查找javascript中的对应的应用位置的方法有：

采用比如通过拼接字符串的方式直接在Javascript中找到相应的javascript的引用位置；

或者，还可以通过正则匹配的方式获得javascript中的引用位置；

或者，还可以对javascript进行词法分析，进而分析出javascript中的引用位置。

也就是说，对于本领域技术人员而言，只要通过获得前端模板的引导标记后，可以通过多种方式获得javascript中的对应的引用位置。本申请只是示例性的介绍上述获得javascript中对应的位置的方法，其他类似的获得方法也是本专利申请的保护范围。

步骤30：分析所述第一代码与所述前端模板的对应关系；

具体来说，步骤30是建立第一代码与所述前端模板的代码对应关系，也就是根据前端模板的代码将html中的代码语言转换为javascript中的代码语言。

步骤40：根据所述对应关系，将所述第一代码转换为第二代码，其中，所述第一代码与所述第二代码不同；

具体来说，步骤40是根据前端模板与第一代码之间的对应关系，将第一代码转换为第二代码，也就是说，在javascript中，通过前端模板的id获得该前端模板在javascript中的引用位置，并将获取的第一代码渲染到该前端模板，并形成第二代码，进而将第二代码置于javascript中的引用位置后，形成最终要显示的Html片段。

步骤50：在所述Html中删除所述前端模板。

具体来说，步骤50是在第二代码顺利进入javascript中的相应位置后，在javascript中已经形成了完整的代码，即包括了上述javascript环境中开发的第一部分javascript代码和Html代码通过前端模板转为第二代码的第二部分javascript代码。也就是说，对于现阶段的前端模板而言，其存在的价值已经不再，故可以在Html中删除所述前端模板。进一步的，本申请实施例通过这种利用前端模板的机制，实现了开发时前端模板与javascript之间的分离，分别写在对应文件里，代码可读性和可维护性均较高。

同时，在删除所述前端模板的代码之前还可以对第二代码进行压缩等优化处理，进而减少了代码的体积，同时提升了页面的访问速度。

为了更清楚的介绍本申请实施例所提供的一种前端模板的处理方法和装置，下面从一具体的代码形式予以介绍。需要说明的是，下面所提供的具体代码形式属于示例性的，并不限定本申请的保护范围。本领域的技术人员能够根据本申请的发明内容，编写出不同代码形式的文档。具体来说，

首先，通过一个异步接口获得如下数据：

然后，从上述数据中获得前端模板，具体为：

进而，在javascript中，可以通过前端模版的id=itemServiceTpl来获取这段前端模版的引用位置，并将获取到的数据渲染到该前端模版，从而拼成最终要显示的HTML片段。

var content=QW(‘#itemServiceTpl’).html();

content=content.tmpl(content,data);

W(content).appendTo(document.body)

最终，javascript中的代码为：

综上所述，将上述编写好的代码上线，就可以做到代码可读性、可维护性以及去除html里的前端模版和javascript之间的依赖。

实施例三

一种前端模板的处理装置，应用于对Html的第一代码处理过程中，其中，所述装置包括：

第一获得模块110，所述第一获得模块110用于获得所述Html的所述第一代码；

第二获得模块120，所述第二获得模块120用于获得所述Html的所述前端模板；

第一分析模块130，所述第一分析模块130用于分析所述第一代码与所述前端模板的对应关系；

转换模块140，所述转换模块140用于根据所述对应关系，将所述第一代码转换为第二代码，其中，所述第一代码与所述第二代码不同。

进一步的，所述装置还包括：

第二分析模块，所述第二分析模块用于分析所述Html的所述前端模板；

第三获得模块，所述第三获得模块用于获得所述前端模板的引导标记，以便于根据所述引导标记确定所述第一代码在Javascript中的所述第一代码的相应位置。

进一步的，所述装置还包括：

替换模块150，所述替换模块用于将所述第二代码替换到所述Javascript中的所述第一代码的相应位置。

进一步的，所述装置还包括：

删除模块160，所述删除模块用于在所述Html中删除所述前端模板。

进一步的，所述装置还包括：

第四获得模块，所述第四获得模块用于通过一异步接口获得所述第一代码。

进一步的，所述装置还包括：

压缩模块，所述压缩模块用于对所述第二代码进行压缩处理。

综上所述，本发明实施例所提供的一种前端模板的处理方法及装置如有如下技术效果：

1.本发明实施例通过将Html的第一代码与前端模板的对应关系，将第一代码转换为第二代码，进而实现利用前端模板，在开发中将Html和Javascript进行分离，达到代码的可读性和可维护性较好的技术效果。

2.本发明实施例通过对第二代码进行压缩等优化处理，可以减少代码的体积，提升页面的访问速度。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质（包括但不限于磁盘存储器、CD-ROM、光学存储器等）上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备（系统）、和计算机程序产品的流程图和／或方框图来描述的。应理解可由计算机程序指令实现流程图和／或方框图中的每一流程和／或方框、以及流程图和／或方框图中的流程和／或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能的步骤。

尽管已描述了本发明的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。

显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims (8)

1.一种前端模板的处理方法，应用于对Html的第一代码处理过程中，其中，所述方法包括：

获得所述Html的所述第一代码；

获得所述Html的所述前端模板；

分析所述第一代码与所述前端模板的对应关系；

根据所述对应关系，将所述第一代码转换为第二代码，其中，所述第一代码与所述第二代码不同；

分析所述Html的所述前端模板；

获得所述前端模板的引导标记，以便于根据所述引导标记确定所述第一代码在Javascript中的所述第一代码的相应位置；

将所述第二代码替换到所述Javascript中的所述第一代码的相应位置。

2.如权利要求1所述的方法，其中，在所述将所述第二代码替换到所述Javascript中的所述第一代码的相应位置之后，还包括：

在所述Html中删除所述前端模板。

3.如权利要求1所述的方法，其中，所述获得所述Html的所述第一代码包括：

通过一异步接口获得所述第一代码。

4.如权利要求1所述的方法，其中，在将所述第二代码替换到所述Javascript中的所述第一代码的相应位置之前，所述方法还包括：

对所述第二代码进行压缩处理。

5.一种前端模板的处理装置，应用于对Html的第一代码处理过程中，其中，所述装置包括：

第一获得模块，所述第一获得模块用于获得所述Html的所述第一代码；

第二获得模块，所述第二获得模块用于获得所述Html的所述前端模板；

第一分析模块，所述第一分析模块用于分析所述第一代码与所述前端模板的对应关系；

转换模块，所述转换模块用于根据所述对应关系，将所述第一代码转换为第二代码，其中，所述第一代码与所述第二代码不同；

第二分析模块，所述第二分析模块用于分析所述Html的所述前端模板；

第三获得模块，所述第三获得模块用于获得所述前端模板的引导标记，以便于根据所述引导标记确定所述第一代码在Javascript中的所述第一代码的相应位置；

替换模块，所述替换模块用于将所述第二代码替换到所述Javascript中的所述第一代码的相应位置。

6.如权利要求5所述的装置，其中，所述装置还包括：

第四获得模块，所述第四获得模块用于通过一异步接口获得所述第一代码。

7.如权利要求5所述的装置，其中，所述装置还包括：

删除模块，所述删除模块用于在所述Html中删除所述前端模板。

8.如权利要求5所述的装置，其中，所述装置还包括：

压缩模块，所述压缩模块用于对所述第二代码进行压缩处理。