一种前端模板的处理方法及装置制造方法
【专利摘要】本发明公开了一种前端模板的处理方法和装置，应用于对Html的第一代码处理过程中，所述方法包括：获得Html的所述第一代码；获得Html的所述前端模板；分析所述第一代码与所述前端模板的对应关系；根据所述对应关系，将所述第一代码转换为第二代码，其中，所述第一代码与所述第二代码不同。本发明实施例通过将Html的第一代码与前端模板的对应关系，将第一代码转换为第二代码，进而实现利用前端模板，在开发中将Html和Javascript进行分离，达到代码的可读性和可维护性较好的技术效果。
【专利说明】一种前端模板的处理方法及装置
【技术领域】
[0001]本发明涉及计算机处理【技术领域】，尤其涉及一种前端模板的处理方法及装置。
【背景技术】
[0002]随着计算机技术的不断发展，WEB开发应用场景也越来越多，并且随着页面应用越来越复杂，在页面中使用Javascript的地方也越来越多，很多时候使用Javascript和后端进行通讯，获取数据，并将返回的数据拼接成对应的Html，渲染到页面上。
[0003]但本申请发明人在实现本申请实施例中发明技术方案的过程中，受到如下困扰:
[0004]在Javascript中拼接会比较麻烦，且其代码可读性也比较差，编辑器对其支持也不友好。比如说，现有技术中由于Javascript中不支持多行的字符串，所以一般要处理多行字符串时，需要将换行符Vi进行转义，并且还需要使用引号将字符串包含起来。这样的处理方式需要对换行符进行转义，且使用了引号，如果字符串内容较长的话，其可读性和可维护性均较差。
【发明内容】
[0005]本发明实施例提供一种前端模板的处理方法及装置，用于解决现有技术中web开发过程中，使用javascript进行拼接时，可读性和可维护性较差的技术问题，达到代码可读性和可维护性好的技术效果。
[0006]一方面，本申请通过本申请的一实施例提供如下技术方案:
[0007]一种前端模板的处理方法，应用于对Html的第一代码处理过程中，所述方法包括:获得所述Html的所述第一代码；获得所述Html的所述前端模板；分析所述第一代码与所述前端模板的对应关系；根据所述对应关系，将所述第一代码转换为第二代码，其中，所述第一代码与所述第二代码不同。
[0008]进一步的，所述方法还包括:分析所述Html的所述前端模板；获得所述前端模板的引导标记，以便于根据所述引导标记确定所述第一代码在Javascript中的所述第一代码的相应位置。
[0009]进一步的,所述方法还包括:将所述第二代码替换到所述Javascript中的所述第一代码的相应位置。
[0010]进一步的,在所述将所述第二代码替换到所述Javascript中的所述第一代码的相应位置之后，还包括:在所述Html中删除所述前端模板。
[0011]进一步的，所述获得所述Html的所述第一代码包括:通过一异步接口获得所述第
一代码。
[0012]进一步的,在将所述第二代码替换到所述Javascript中的所述第一代码的相应位置之前，所述方法还包括:对所述第二代码进行压缩处理。
[0013]另一方面，本申请通过本申请的一实施例，提供如下技术方案:
[0014]一种前端模板的处理装置，应用于对Html的第一代码处理过程中，所述装置包括:第一获得模块，所述第一获得模块用于获得Html的所述第一代码；第二获得模块，所述第二获得模块用于获得Html的所述前端模板；第一分析模块，所述第一分析模块用于分析所述第一代码与所述前端模板的对应关系；转换模块，所述转换模块用于根据所述对应关系，将所述第一代码转换为第二代码，其中，所述第一代码与所述第二代码不同。
[0015]进一步的，所述装置还包括:第二分析模块，所述第二分析模块用于分析所述Html的所述前端模板；第三获得模块，所述第三获得模块用于获得所述前端模板的引导标记，以便于根据所述引导标记确定所述第一代码在Javascript中的所述第一代码的相应位置。
[0016]进一步的，所述装置还包括:替换模块，所述替换模块用于将所述第二代码替换到所述Javascript中的所述第一代码的相应位置。
[0017]进一步的，所述装置还包括:删除模块，所述删除模块用于在所述Html中删除所述前端模板。
[0018]进一步的，所述装置还包括:第四获得模块，所述第四获得模块用于通过一异步接口获得所述第一代码。
[0019]进一步的，所述装置还包括:压缩模块，所述压缩模块用于对所述第二代码进行压缩处理。
[0020]本发明实施例的有益效果如下:
[0021]本发明一实施例提供的一种前端模板的处理方法和装置，通过将Html的第一代码与前端模板的对应关系，将第一代码转换为第二代码，进而实现利用前端模板，在开发中将Html和Javascript进行分离,达到代码的可读性和可维护性较好的技术效果。
[0022]进一步的，本发明实施例通过对第二代码进行压缩等优化处理，可以减少代码的体积，提升页面的访问速度。
【专利附图】
【附图说明】
[0023]图1为本发明一实施例中一种前端模板的处理方法的流程示意图；
[0024]图2为本发明一实施例中一种前端模板的处理装置的结构示意图。
【具体实施方式】
[0025]本发明一实施例提供的一种前端模板的处理方法和装置，通过将Html的第一代码与前端模板的对应关系，将第一代码转换为第二代码，进而实现利用前端模板，在开发中将Html和Javascript进行分离,达到代码的可读性和可维护性较好的技术效果。
[0026]具体而言，本发明实施例旨在通过一种前端模板的机制，让开发时拼接Html的工作还是在Html的环境中进行，进而增加了代码的可读性和可维护性。也就是说，在代码上线时，对代码进行分析，分析在javascript中对html中前端模版的调用关系，对将前端模版内容生成到对应javascript文件中，让上线后的javascript和html在前端模版这块没有任何的依赖。
[0027]也就是说，对于一个程序开发而言，开发工作主要分成两个部分，S卩:在Html中开发Html代码,在Javascript中开发Javascript代码,然后通过本申请所提供的前端模板实现在Javascript环境中，将html代码转换成Javascript代码，进而实现javascript环境中代码的完整性，同时也实现了上述代码上线后Javascript和Html在前端模块之间没有任何依赖，达到增加代码可读性和可维护性的目的。需要说明的是，上述程序开发的代码在javascript环境中包括了两部分:一部分是Javascript环境中开发的第一部分javascript代码,另外一部分是Html代码通过本申请实施例转化的第二部分javascript代码。
[0028]为使本申请一实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
[0029]实施例一
[0030]为使本领域技术人员能够更详细了解本发明，以下结合附图对本发明进行详细描述。
[0031]如图1所述，图1为本发明一实施例中一种前端模板的处理方法,应用于对Html的第一代码处理过程中，其中所述方法包括:
[0032]步骤10:获得所述Html的所述第一代码；
[0033]具体来说，步骤10主要是获得Html中的html代码，本发明实施例定义为第一代码。所述第一代码的获得可以通过异步接口获得，从本发明实施例来说，本领域技术人员从Html中获得第一代码的常规获得方式均为本申请的保护范围，本申请将不做具体阐述。
[0034]步骤20:获得所述Html的所述前端模板；
[0035]具体来说，步骤20主要是获得Html中的前端模板，所述前端模板为一段包含动态数据的Html代码,这段代码具体是通过扫描Html中的script,然后判断script中的type为text/html为前端模版。通过该前端模板的ID可以获取javascript中调用前端模板的位置，进而可以通过将前端模板内容进行转义换行、代码优化等操作，将javascript中对前端模板的引用替换为具体的前端模板的代码，进而实现了本申请的目的，即增加了代码的可读性和可维护性。进一步的，这段代码一般是通过异步接口拿到第一代码后通过Javascript进行渲染。
[0036]进一步的，在获得所述前端模板的同时，还可以获得所述前端模板的引导标记，所述引导标记标记了第一代码在Javascript中的具体位置，引导标记的作用是将根据前端模板将第一代码转换为第二代码之后，便于将第二代码置于javascript中的正确位置，以便和上述javascript环境中开发的第一部分javascript代码形成一个整体。
[0037]具体而言，所述引导标记可以标记为:id=itemSerViCeTpl，然后通过该引导标记获得所述第一代码在javascript中的引用位置，比如，获取前端模版的id为itemServiceTpl,就可以通过 W(‘#itemServiceTpl，).html O 在 javascript 中进行查找，就可以查找到对应的引用位置。
[0038]具体来说，通过引导标记，即ID查找javascript中的对应的应用位置的方法有:
[0039]采用比如通过拼接字符串的方式直接在Javascript中找到相应的javascript的引用位置；
[0040]或者，还可以通过正则匹配的方式获得javascript中的引用位置；
[0041]或者,还可以对javascript进行词法分析,进而分析出javascript中的引用位置。
[0042]也就是说，对于本领域技术人员而言，只要通过获得前端模板的引导标记后，可以通过多种方式获得javascript中的对应的引用位置。本申请只是示例性的介绍上述获得javascript中对应的位置的方法，其他类似的获得方法也是本专利申请的保护范围。
[0043]步骤30:分析所述第一代码与所述前端模板的对应关系；
[0044]具体来说，步骤30是建立第一代码与所述前端模板的代码对应关系，也就是根据前端模板的代码将html中的代码语言转换为javascript中的代码语言。
[0045]步骤40:根据所述对应关系，将所述第一代码转换为第二代码，其中，所述第一代码与所述第二代码不同；
[0046]具体来说，步骤40是根据前端模板与第一代码之间的对应关系，将第一代码转换为第二代码，也就是说，在javascript中，通过前端模板的id获得该前端模板在javascript中的引用位置，并将获取的第一代码渲染到该前端模板，并形成第二代码，进而将第二代码置于javascript中的引用位置后，形成最终要显示的Html片段。
[0047]步骤50:在所述Html中删除所述前端模板。
[0048]具体来说，步骤50是在第二代码顺利进入javascript中的相应位置后，在javascript中已经形成了完整的代码，即包括了上述javascript环境中开发的第一部分javascript代码和Html代码通过前端模板转为第二代码的第二部分javascript代码。也就是说，对于现阶段的前端模板而言，其存在的价值已经不再，故可以在Html中删除所述前端模板。进一步的，本申请实施例通过这种利用前端模板的机制，实现了开发时前端模板与javascript之间的分离,分别写在对应文件里,代码可读性和可维护性均较高。
[0049]同时，在删除所述前端模板的代码之前还可以对第二代码进行压缩等优化处理，进而减少了代码的体积，同时提升了页面的访问速度。
[0050]为了更清楚的介绍本申请实施例所提供的一种前端模板的处理方法和装置，下面从一具体的代码形式予以介绍。需要说明的是，下面所提供的具体代码形式属于示例性的，并不限定本申请的保护范围。本领域的技术人员能够根据本申请的
【发明内容】
，编写出不同代码形式的文档。具体来说，
[0051]首先，通过一个异步接口获得如下数据:
[0052]
【权利要求】
1.一种前端模板的处理方法，应用于对Html的第一代码处理过程中，其中，所述方法包括: 获得所述Html的所述第一代码； 获得所述Html的所述前端模板； 分析所述第一代码与所述前端模板的对应关系； 根据所述对应关系，将所述第一代码转换为第二代码，其中，所述第一代码与所述第二代码不同。
2.如权利要求1所述的方法，其中，所述方法还包括: 分析所述Html的所述前端模板； 获得所述前端模板的引导标记，以便于根据所述引导标记确定所述第一代码在Javascript中的所述第一代码的相应位置。
3.如权利要求2所述的方法，其中，所述方法还包括: 将所述第二代码替换到所述Javascript中的所述第一代码的相应位置。
4.如权利要求3所述的方法，其中，在所述将所述第二代码替换到所述Javascript中的所述第一代码的相应位置之后，还包括: 在所述Html中删除所述前端模板。
5.如权利要求1所述的方法，其中，所述获得所述Html的所述第一代码包括: 通过一异步接口获得所述第一代码。
6.如权利要求3所述的方法，其中，在将所述第二代码替换到所述Javascript中的所述第一代码的相应位置之前，所述方法还包括: 对所述第二代码进行压缩处理。
7.一种前端模板的处理装置，应用于对Html的第一代码处理过程中，其中，所述装置包括: 第一获得模块，所述第一获得模块用于获得所述Html的所述第一代码； 第二获得模块，所述第二获得模块用于获得所述Html的所述前端模板； 第一分析模块，所述第一分析模块用于分析所述第一代码与所述前端模板的对应关系; 转换模块，所述转换模块用于根据所述对应关系，将所述第一代码转换为第二代码，其中，所述第一代码与所述第二代码不同。
8.如权利要求7所述的装置，其中，所述装置还包括: 第二分析模块，所述第二分析模块用于分析所述Html的所述前端模板； 第三获得模块，所述第三获得模块用于获得所述前端模板的引导标记，以便于根据所述引导标记确定所述第一代码在Javascript中的所述第一代码的相应位置。
9.如权利要求8所述的装置，其中，所述装置还包括: 替换模块，所述替换模块用于将所述第二代码替换到所述Javascript中的所述第一代码的相应位置。
10.如权利要求7所述的装置，其中，所述装置还包括: 第四获得模块，所述第四获得模块用于通过一异步接口获得所述第一代码。
【文档编号】G06F9/44GK103605514SQ201310556774
【公开日】2014年2月26日 申请日期:2013年11月11日 优先权日:2013年11月11日
【发明者】李成银 申请人:北京奇虎科技有限公司, 奇智软件（北京）有限公司