基于模块化思想的模板框架设计方法及系统

摘要

本发明提出一种基于模块化思想的模板框架设计方法及系统，方法包括：构建预编译阶段模板引擎及构建前端模板引擎，并根据预编译阶段模板引擎和前端模板引擎得到模板框架。本发明以模块化的角度，从静态资源没有合适模块化规则和方法这一点出发，构建了一套完整的模块化模板框架，涉及同步模块化和异步动态模块化两个方面，并从这两个方面一一入手，分别实现了高性能的前端模板引擎用于异步动态化渲染模板，和预编译模板引擎用于同步模板生成，工程化的角度来对整个过程进行一次流程设计及规范。该方法基于模块化思想的构建模板框架，极大地方便开发人员的工作，能够降低代码开发的维护的复杂度，从而提高了开发效率。

说明书

技术领域

本发明涉及前端开发技术领域，特别涉及一种基于模块化思想的模板框架设计方法及系统。

背景技术

Web应用的普及使得前端应用复杂度大大提高，直接导致网站前端规模不断扩大，前端开发出现了代码规模大、组织维护困难、代码复用性低、扩展性差等问题。因此，建立合理的前端开发架构，并遵循开发标准和规范将越来越重要。

从页面的角度来看，当前以Ajax为主的前端开发方式在与服务器交互时存在着一个问题：频繁的数据交互导致频繁的页面渲染。数据从后台传到前端时，需要将这些数据渲染到相应的DOM结构中，需要前端开发工作者做很大量的字符串拼接及一些其他冗余工作，这就为代码开发者增加了代码开发和维护的复杂度，代码可读性也变得很差。换言之，目前Web开发中常用的ajax等一些技术获得数据，再于相应的JavaScript代码中进行HTML字符串与相应数据组合拼接，填充到相应页面元素中，这样会导致逻辑代码和页面代码混杂在一起，既不容易维护，也不利于测试，例如图1所示，其中，图1(a)为字符串拼接流程，图1(b)为字符串拼接示例。

前端模板的出现解决了以上问题，如果能将不变的字符串固定住，将一些逻辑分发在其中，就形成了模板。所谓的网页模板，也就是将网页设计页面中动态会变化的内容块剔除后，保留下相对不会变动的内容或区域，开成这样的设计结构文件后，再由软件分析处理，将数据源(实时计算、其他应用中获取、数据库等)中因需求不同而频繁变更的内容数据按模板要求的格式回填，形成一份完整的网页数据内容，分发给不同需求的用户，这就是网页模板，例如图2所示。

目前的前端模板有tmpl、handbars等，具体原理大都是利用正则表达式，替换模板中事先定义好的标签。但是，就其实现方法，传统的JavaScript模板引擎中留有两个待解决的问题：

1)性能：模板引擎渲染的时候依赖Function构造器实现，Function与eval、setTimeout、setInterval一样，提供了使用文本访问javascript解析引擎的方法，但这样执行javascript的性能非常低下。

2)调试：由于是动态执行字符串，若遇到错误调试器无法捕获错误源，导致模板BUG 调试变得异常痛苦。在没有进行容错的引擎中，局部模板若因为数据异常甚至可以导致整个应用崩溃，随着模板的数目增加，维护成本将剧增。

发明内容

本发明旨在至少在一定程度上解决上述相关技术中的技术问题之一。

为此，本发明的一个目的在于提出一种基于模块化思想的模板框架设计方法，该方法基于模块化思想的构建模板框架，极大地方便开发人员的工作，能够降低代码开发的维护的复杂度，从而提高了开发效率。

本发明的另一个目的在于提出一种基于模块化思想的模板框架设计系统。

为了实现上述目的，本发明第一方面的实施例提出了一种基于模块化思想的模板框架设计方法，包括以下步骤：

根据Node.js和预存的后端模板构建预编译阶段模板引擎；

构建单例template，并构建config对象和cache对象，并根据所述单例template、config对象和cache对象构建前端模板引擎；

根据所述预编译阶段模板引擎和前端模板引擎得到所述模板框架。

另外，根据本发明上述实施例的基于模块化思想的模板框架设计方法还可以具有如下附加的技术特征：

在一些示例中，所述根据Node.js和预存的后端模板构建预编译阶段模板引擎，进一步包括：根据所述预存的后端模板，在前端采用Node.js在文件预编译阶段构建一个前端预编译模板；通过所述前端预编译模板进行模板继承和模板复用；对于可利用的页面代码，直接采用继承或获取方式直接复用页面代码，并将填充区域填充入待填充的内容；通过所述前端预编译模板将待编译文件处理成对应完整的HTML代码，具体包括：通过所述前端预编译模板得到生成AST树的模板，所述生成AST树的模板并以预存页面为基础，逐步分析所述预存页面的依赖模块，并进行逐步加载及AST再生成，以得到一个完整的AST树，将所有的完整的AST树合并以生成所述完整的HTML代码。

在一些示例中，所述根据所述单例template、config对象和cache对象构建前端模板引擎，进一步包括：构建一个config对象以存储其语法标签及语法字符串转换函数；通过setConfig来进行语法标签的自定义，并在字符串转换函数中，通过匹配相应的关键字，以进行对应函数字符串的生成；构建一个单例template，并将所述单例template的编译方法及所述config对象绑定在所述单例template中，以进行变量的封装；构建一个Cache对象，以存放所有已经渲染过的文件名及对应的渲染函数。

在一些示例中，其中，在采用Node.js获取HTML模板字符串阶段，采用服务器编译方式先将模板字符串文件化，并放到特定位置调度，并在文件生成阶段，采用Node.js处理JS文件，通过正则表达式匹配，将相应的模板文件内容提取出来，插入到相应的引用位置。

在一些示例中，其中，在前端模板编译过程中，通过模板文件名称来获取模板文件内容，通过正则表达式来提取变量所在位置，并将变量声明提前在渲染函数之前，并解析逻辑字符串为相应逻辑语句，通过与普通字符串组合获得相应渲染函数并实例化返回，并在每一次Render函数生成完成并返回时，以文件标识符为唯一ID，将对应函数存储至cache缓存，并执行函数，以完成对前端模板的数据渲染。

根据本发明实施例的基于模块化思想的模板框架设计方法，以模块化的角度，从静态资源没有合适模块化规则和方法这一点出发，构建了一套完整的模块化模板框架，涉及同步模块化和异步动态模块化两个方面，并从这两个方面一一入手，分别实现了高性能的前端模板引擎用于异步动态化渲染模板，和预编译模板引擎用于同步模板生成，工程化的角度来对整个过程进行一次流程设计及规范。该方法基于模块化思想的构建模板框架，极大地方便开发人员的工作，能够降低代码开发的维护的复杂度，从而提高了开发效率。

为了实现上述目的，本发明第二方面的实施例还提出了一种基于模块化思想的模板框架设计系统，包括：预编译阶段模板引擎构建模块，所述预编译阶段模板引擎构建模块用于根据Node.js和预存的后端模板构建预编译阶段模板引擎；前端模板引擎构建模块，所述前端模板引擎构建模块用于构建单例template，并构建config对象和cache对象，并根据所述单例template、config对象和cache对象构建前端模板引擎；模板框架生成模块，所述模板框架生成模块用于根据所述预编译阶段模板引擎和前端模板引擎得到所述模板框架。

另外，根据本发明上述实施例的基于模块化思想的模板框架设计系统还可以具有如下附加的技术特征：

在一些示例中，所述预编译阶段模板引擎构建模块根据Node.js和预存的后端模板构建预编译阶段模板引擎，包括：根据所述预存的后端模板，在前端采用Node.js在文件预编译阶段构建一个前端预编译模板；通过所述前端预编译模板进行模板继承和模板复用；对于可利用的页面代码，直接采用继承或获取方式直接复用页面代码，并将填充区域填充入待填充的内容；通过所述前端预编译模板将待编译文件处理成对应完整的HTML代码，具体包括：通过所述前端预编译模板得到生成AST树的模板，所述生成AST树的模板并以预存页面为基础，逐步分析所述预存页面的依赖模块，并进行逐步加载及AST再生成，以得到一个完整的AST树，将所有的完整的AST树合并以生成所述完整的HTML代码。

在一些示例中，所述前端模板引擎构建模块根据所述单例template、config对象和cache对象构建前端模板引擎，包括：构建一个config对象以存储其语法标签及语法字符串转换函 数；通过setConfig来进行语法标签的自定义，并在字符串转换函数中，通过匹配相应的关键字，以进行对应函数字符串的生成；构建一个单例template，并将所述单例template的编译方法及所述config对象绑定在所述单例template中，以进行变量的封装；构建一个Cache对象，以存放所有已经渲染过的文件名及对应的渲染函数。

在一些示例中，所述预编译阶段模板引擎构建模块用于在采用Node.js获取HTML模板字符串阶段，采用服务器编译方式先将模板字符串文件化，并放到特定位置调度，并在文件生成阶段，采用Node.js处理JS文件，通过正则表达式匹配，将相应的模板文件内容提取出来，插入到相应的引用位置。

在一些示例中，所述前端模板引擎构建模块用于在前端模板编译过程中，通过模板文件名称来获取模板文件内容，通过正则表达式来提取变量所在位置，并将变量声明提前在渲染函数之前，并解析逻辑字符串为相应逻辑语句，通过与普通字符串组合获得相应渲染函数并实例化返回，并在每一次Render函数生成完成并返回时，以文件标识符为唯一ID，将对应函数存储至cache缓存，并执行函数，以完成对前端模板的数据渲染。

根据本发明实施例的基于模块化思想的模板框架设计系统，以模块化的角度，从静态资源没有合适模块化规则和方法这一点出发，构建了一套完整的模块化模板框架，涉及同步模块化和异步动态模块化两个方面，并从这两个方面一一入手，分别实现了高性能的前端模板引擎用于异步动态化渲染模板，和预编译模板引擎用于同步模板生成，工程化的角度来对整个过程进行一次流程设计及规范。该系统基于模块化思想的构建模板框架，极大地方便开发人员的工作，能够降低代码开发的维护的复杂度，从而提高了开发效率。

本发明的附加方面和优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本发明的实践了解到。

附图说明

本发明的上述和/或附加的方面和优点从结合下面附图对实施例的描述中将变得明显和容易理解，其中：

图1是目前的字符串拼接示意图；

图2是目前的前端模板引擎原理图；

图3是根据本发明实施例的基于模块化思想的模板框架设计方法的流程图；

图4是根据本发明一个实施例的构建预编译阶段模板引擎的流程图；

图5是根据本发明一个实施例的构建前端模板引擎的流程图；

图6是本发明一个实施例的前端模板工作原理流程图；

图7是本发明一个具体实施例的模块化功能设计示意图；

图8是本发明一个具体实施例的模板编码示例示意图；

图9是本发明一个具体实施例的模板引擎处理过程示意图；

图10是本发明一个具体实施例的前端目录结构设计示意图；

图11是本发明一个具体实施例的系统前端流程开发流程图；

图12是本发明一个具体实施例的页面整体框架示意图；以及

图13是本发明实施例的基于模块化思想的模板框架设计系统的结构框图。

具体实施方式

下面详细描述本发明的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，仅用于解释本发明，而不能理解为对本发明的限制。

以下结合附图描述根据本发明实施例的基于模块化思想的模板框架设计方法及系统。

图3是根据本发明一个实施例的基于模块化思想的模板框架设计方法的流程。如图3所示，该方法包括以下步骤：

步骤S1：根据Node.js和预存的后端模板构建预编译阶段模板引擎。

具体地，结合图4所示，根据Node.js和预存的后端模板构建预编译阶段模板引擎构建预编译阶段模板引擎的步骤包括：

步骤S11：根据预存的后端模板，在前端采用Node.js在文件预编译阶段构建一个前端预编译模板。

步骤S12：通过前端预编译模板进行模板继承和模板复用。

步骤S13：对于可利用的页面代码，直接采用继承或获取方式直接复用页面代码，并将填充区域填充入待填充的内容。

步骤S14：通过前端预编译模板将待编译文件处理成对应完整的HTML代码，具体包括：通过前端预编译模板得到生成AST树的模板，生成AST树的模板并以预存页面为基础，逐步分析预存页面的依赖模块，并进行逐步加载及AST再生成，以得到一个完整的AST树，将所有的完整的AST树合并以生成完整的HTML代码。

具体地说，由于当前前端技术日新月异，不断拥抱新变化，而前端模块化一直是经久不衰的问题，以JavaScript模块化为主，经历了无模块时代，即代码次序堆叠的时代、模块萌芽时代到现在模块化组件化时代，ECMA2015也将模块化纳入到规范中，开发人员不断地进行摸索及探求。模块化是一种从某种角度一般是功能角度出发，将系统进行模块设计与划分，广泛采用面向对象程序设计方法，开发人员也会将一些设计模式运用到其中，并 将模块进行抽象与封装，设计其接口，最终组成完整的软件架构。整体软件的复杂度与软件的规模和复杂度成正比。

模块化开发使得模块的重用性增加，进而减少了开发人员重复编码，同时也使得开发人员之间的分工更加明确清晰，开发人只需要对自己负责的模块进行设计和实现，能够有效地提高开发效率和代码质量。

而当前模块化技术主要针对于JavaScript模块化，即将逻辑这一模块做功能划分，遵循AMD或CMD规范，将同一功能的作模块化封装与产出，模块化技术已日趋成熟。就网页的角度来说，结构及样式代码的冗余同样也为前端开发人员带来不小的麻烦。基于此，本发明的实施例借助于JavaScript模块化思想，一是开发前端模板引擎，在页面动态渲染服务器数据阶段，对HTML字符串作模板模块化处理，减少代码冗余，高效组织网络资源，提高利用性，增强动态渲染字符串的可读性及可维护性。二是在所有文件资源生成阶段，借助于模块化思想，实现了前端简单的类smarty模板，将HTML代码划分为一个个的代码段，可按需求加载进来，同时实现了模板继承，具体例如图7所示，将可复用的结构代码进行分离，将其独立成一个个单独的文件，应用时通过相应语句引用进来，从而达到模板模块化的目的。如果将模板独立为单独文件，将会涉及到模块化加载方式。

在前端开发技术中，文件引用加载同步加载和异步加载之分，同步加载即建立于已知的文件次序初始化文件的时候通过插入script标签来实现文件的加载，但是其可维护性不佳，不能动态地进行模板的增添，这为模板的灵活性带来了很大的困难；而异步加载主要有两种方式，ajax异步加载方式和动态脚本注入加载方式。Ajax异步加载主要通过对服务器的数据请求，来实现模板文件的获取，而script的出现则解决了Ajax请求的跨域限制问题，无疑变成最好的方式，但是需要事先编入callback程序来制定返回，这就使前端模板文件不易被识别。

Node.js的产生使得JavaScript可以脱离浏览器的束缚而运行在服务器环境下，可以像PHP，Python等语言一样进行服务端程序的开发。首先它遵循ECMAScript标准实现了核心JavaScript，在此基础上，为了将JS移植到了服务端，又实现了诸如模块、包、文件系统、网络通信和操作系统API等新的功能。Node的核心是一个独立的JavaScript虚拟机，这个虚拟机实际上是对V8引擎的封装。V8引擎采用一系列的非阻塞库的方式来支持事件循环。Node.js将Google V8引擎提供的非阻塞I/O栈与JavaScript提供的闭包和匿名函数相结合，是一个编写高吞量网络的优秀平台。

Node.js突破了Javascript在浏览器的局限性，有一套完善的文件系统，一系列API可供编程人员使用，让前端迸发出更大的可能性，这就为以上的问题提供了另一条解决思路，在 文件预处理期间，可将相应使用的模板文件提取出来，将其内容进行提取转化，插入到相应的引用位置。

因此，在本发明的一个实施例中，在采用Node.js获取HTML模板字符串阶段，采用服务器编译方式先将模板字符串文件化，并放到特定位置调度，并在文件生成阶段，采用Node.js处理JS文件，通过正则表达式匹配，将相应的模板文件内容提取出来，插入到相应的引用位置，具体示例代码如图8所示。

进一步地，在开发的过程中，会发现HTML的一些header，body及script有些是已经固定的，每开发一个页面都要复制之前的代码，有时候还会忘记加一些meta标签。因此，本发明的实施例借助于已有的后端模板，在前端采用Node.js在文件预编译阶段实现了一个简单的前端模板，可进行模板继承和模板复用，对于可利用的页面代码，直接采用继承或获取方式直接复用页面代码，将填充区域填充入想要的内容，而前端预编译模板则会将文件处理成对应完整的HTML代码，这样可以实现团队开发过程中页面代码可模块化管理，省去开发过程中重复代码编写的麻烦，同时可生成同等功能的页面，达到同等的效果。

其中，在本发明的一个实施例中，在步骤S14中，通过前端预编译模板得到生成AST树的模板，生成AST树的模板并以预存页面为基础，逐步分析预存页面的依赖模块，并进行逐步加载及AST再生成，以得到一个完整的AST树，将所有的完整的AST树合并以生成完整的HTML代码。换言之，即在算法设计上，预编译模板设计了生成AST树的模板，是一种回溯式的生成过程，以现有页面为基础，逐步分析其依赖模块，并进行逐步加载及AST再生成，最后生成一个完整的AST树，合并生成最终HTML代码，整个过程如图9所示。

步骤S2：构建单例template，并构建config对象和cache对象，并根据单例template、config对象和cache对象构建前端模板引擎。

具体地，结合图5所示，构建前端模板引擎的步骤包括：

步骤S21：构建一个config对象以存储其语法标签及语法字符串转换函数。

步骤S22：通过setConfig来进行语法标签的自定义，并在字符串转换函数中，通过匹配相应的关键字，以进行对应函数字符串的生成。

步骤S23：构建一个单例template，并将单例template的编译方法及config对象绑定在单例template中，以进行变量的封装。

步骤S24：构建一个Cache对象，以存放所有已经渲染过的文件名及对应的渲染函数。

具体地说，本发明实施例基于现有技术中的可优化点，借助于腾讯artTemplate的思想，本文实现了一个易用性能较高的模板引擎。在保证性能的基础上提高了渲染速度。

在构建前端模板引擎过程中，首先构建了一个单例template，相应模板渲染方法绑定其中，其次构建了config对象和cache对象用于语法规则及缓存处理。

本发明的实施例构建了一个config对象来存储其语法标签及语法字符串转换函数，用户可以通过setConfig来实现语法标签的自定义，提高了模板的灵活性。在字符串转换函数中，通过匹配相应的关键字，来进行对应函数字符串的生成。构建一个单例template，将其编译方法及config对象等绑定在其中，实现变量的封装。Cache是一个类似于hashmap的对象集合，目的是用来存放所有已经渲染过的文件名及对应渲染函数。

在本发明的一个实施例中，在前端模板编译过程中，通过模板文件名称来获取模板文件内容，通过正则表达式来提取变量所在位置，将变量声明提前在渲染函数之前，旨在降低内在占有率，并解析逻辑字符串为相应逻辑语句，通过与普通字符串组合获得相应渲染函数并实例化返回。进一步地，在每一次Render函数生成完成并返回时，以文件标识符为唯一ID，将对应函数存储至cache缓存，并执行函数，完成对模板的数据渲染。这样的优点是下一次模板渲染时，直接在cache中找到该函数，调用并执行，略去生成渲染函数的繁杂过程，简化操作，并提升了速度。具体流程如图6所示。

步骤S3：根据预编译阶段模板引擎和前端模板引擎得到模板框架。

为了便于更好地理解本发明实施例的基于模块化思想的模板框架设计方法，以下结合附图，以本发明实施例的基于模块化思想的模板框架设计方法的一个具体应用作为具体实施例，对该方法进行更加详细具体地描述。

在本实施例中，将本发明实施例的基于模块化思想的模板框架设计方法应用到大数据平台的开发中，提升了开发效率。

具体地，在本实施例中，该方法主要将模块化思想运用到大数据平台-用户行为分析平台上，该平台主要涉及五大模块，即数据源管理、数据多级统计分析、数据挖掘、用户流量分群分析及用户访问热点分析，共五大模块，通过分析每个模块的异同，将项目前端分层，即逻辑层、页面层、静态模板层、动态模板层及CSS层。其中，逻辑层放置系统共用的JS文件，如模块化文件sea.js，JS组件库jquery.js，前端模板sea.tmpl.js等；CSS层用于放置页面共用样式文件；静态模板层放置开发期间将静态页面划分的页面碎片，如页面头部、脚部、共用菜单等；动态模板层用于放置用来动态渲染服务器数据的前端模板，以.tmpl结尾；页面层放置向用户展示的页面，以.html结尾。项目整体结构例如图10所示。

在本实施例中，该方法首先对大数据平台系统页面进行一个展示层次的模块划分，将可用模块例如页面整体框架、页面菜单等进行抽离，将其放在layout文件夹中作为开发阶段为提高开发人员效率而产生的预编译静态模板；其次在功能组件层面将数据源列表、聚类分类模块共用的展示模块、弹出框等进行模块化抽离，将其放在tmpl文件夹中作为动态模板用于浏览器解析期间前端模板编译，开发人员需要使用时只需要将其require进来遵循其规定接口定入即可。整个开发流程例如图11所示。

首先，该方法对系统页面进行展示层次模块划分，把大数据平台的页面框架进行规划，将其大方向划分为四部分，即头部、底部、菜单及内容，例如图12所示。

规划预编译模板，因为本次平台页面共用同一套头部尾部，所以没有进行分离，将菜单分离，内容做出扩展入口，详细代码如下表1所示：

表1

之后的页面只需要继承该模板，只需要关心该页面所需要的CSS、JS及内容就好，对于头部底部及一些共用元素均可忽略，模块化方面sea.js也已放入大数据平台模板中，所以该模板从某种意义上可以让开发人员关注于自己的功能实现而不是代码的复制粘贴。表2是以聚类分析页面举例，简略展示该页面代码如下表2所示。

表2

以上便实现了开发阶段的模块化，通过预编译模板引擎可以将页面转换为普通页面文件，接下来处理动态数据渲染问题，在聚类分析页面中，主要涉及到数据源列表接口、算法展示接口及数据处理接口，以数据源列表接口为例，因为其他页面也有涉及到该接口并且展示相似，所以将其做成组件形式，并运用前端模板引擎简化开发量，具体代码如下表3所示。

表3

这样在聚类分析页面中，只需要将该模块引入并进行new创建，即可完成数据源列表的初始化，具体代码如下表4所示。

表4

综上，本发明实施例的基于模块化思想的模板框架设计方法，将模块化运用于静态页面中，并从开发阶段和生产阶段划分出不同层次的模板体系供开发人员使用。生成的框架分为预编译阶段模板和前端模板，使用JavaScript语言开发，并针对具体项目进行运用开发，结果表明，模板框架提高了工作人员的开发效率

根据本发明实施例的基于模块化思想的模板框架设计方法，以模块化的角度，从静态资源没有合适模块化规则和方法这一点出发，构建了一套完整的模块化模板框架，涉及同步模块化和异步动态模块化两个方面，并从这两个方面一一入手，分别实现了高性能的前端模板引擎用于异步动态化渲染模板，和预编译模板引擎用于同步模板生成，工程化的角度来对整个过程进行一次流程设计及规范。该方法基于模块化思想的构建模板框架，极大地方便开发人员的工作，能够降低代码开发的维护的复杂度，从而提高了开发效率。

本发明的进一步实施例还提供了一种基于模块化思想的模板框架设计系统。

图13是根据本发明一个实施例的基于模块化思想的模板框架设计系统的结构框图。如图13所示，该基于模块化思想的模板框架设计系统100包括：预编译阶段模板引擎构建模块110、前端模板引擎构建模块120和模板框架生成模块130。

其中，预编译阶段模板引擎构建模块110用于根据Node.js和预存的后端模板构建预编译阶段模板引擎，具体包括：根据预存的后端模板，在前端采用Node.js在文件预编译阶段构建一个前端预编译模板，通过前端预编译模板进行模板继承和模板复用，对于可利用的页面代码，直接采用继承或获取方式直接复用页面代码，并将填充区域填充入待填充的内容，通过前端预编译模板将待编译文件处理成对应完整的HTML代码。

在本发明的一个实施例中，上述的预编译阶段模板引擎构建模块110通过前端预编译模板将待编译文件处理成对应完整的HTML代码，包括：通过前端预编译模板得到生成AST树的模板，生成AST树的模板并以预存页面为基础，逐步分析预存页面的依赖模块，并进 行逐步加载及AST再生成，以得到一个完整的AST树，将所有的完整的AST树合并以生成完整的HTML代码。

在本发明的一个实施例中，预编译阶段模板引擎构建模块110用于在采用Node.js获取HTML模板字符串阶段，采用服务器编译方式先将模板字符串文件化，并放到特定位置调度，并在文件生成阶段，采用Node.js处理JS文件，通过正则表达式匹配，将相应的模板文件内容提取出来，插入到相应的引用位置。

前端模板引擎构建模块120用于构建单例template，并构建config对象和cache对象，并根据单例template、config对象和cache对象构建前端模板引擎，具体包括：构建一个config对象以存储其语法标签及语法字符串转换函数，通过setConfig来进行语法标签的自定义，并在字符串转换函数中，通过匹配相应的关键字，以进行对应函数字符串的生成，构建一个单例template，并将单例template的编译方法及config对象绑定在单例template中，以进行变量的封装，构建一个Cache对象，以存放所有已经渲染过的文件名及对应的渲染函数。

在本发明的一个实施例中，前端模板引擎构建模块120用于在前端模板编译过程中，通过模板文件名称来获取模板文件内容，通过正则表达式来提取变量所在位置，并将变量声明提前在渲染函数之前，并解析逻辑字符串为相应逻辑语句，通过与普通字符串组合获得相应渲染函数并实例化返回，并在每一次Render函数生成完成并返回时，以文件标识符为唯一ID，将对应函数存储至cache缓存，并执行函数，以完成对前端模板的数据渲染。

模板框架生成模块130用于根据预编译阶段模板引擎和前端模板引擎得到模板框架。

需要说明的是，本发明实施例的基于模块化思想的模板框架设计系统的具体实现方式与本发明实施例的基于模块化思想的模板框架设计方法的具体实现方式类似，具体请参见方法部分的描述，为了减少冗余，此处不做赘述。

综上，根据本发明实施例的基于模块化思想的模板框架设计系统，以模块化的角度，从静态资源没有合适模块化规则和方法这一点出发，构建了一套完整的模块化模板框架，涉及同步模块化和异步动态模块化两个方面，并从这两个方面一一入手，分别实现了高性能的前端模板引擎用于异步动态化渲染模板，和预编译模板引擎用于同步模板生成，工程化的角度来对整个过程进行一次流程设计及规范。该系统基于模块化思想的构建模板框架，极大地方便开发人员的工作，能够降低代码开发的维护的复杂度，从而提高了开发效率。

在本发明的描述中，需要理解的是，术语“中心”、“纵向”、“横向”、“长度”、“宽度”、“厚度”、“上”、“下”、“前”、“后”、“左”、“右”、“竖直”、“水平”、“顶”、“底”“内”、“外”、“顺时针”、“逆时针”、“轴向”、“径向”、“周向”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。

此外，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个该特征。在本发明的描述中，“多个”的含义是至少两个，例如两个，三个等，除非另有明确具体的限定。

在本发明中，除非另有明确的规定和限定，术语“安装”、“相连”、“连接”、“固定”等术语应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或成一体；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通或两个元件的相互作用关系，除非另有明确的限定。对于本领域的普通技术人员而言，可以根据具体情况理解上述术语在本发明中的具体含义。

在本发明中，除非另有明确的规定和限定，第一特征在第二特征“上”或“下”可以是第一和第二特征直接接触，或第一和第二特征通过中间媒介间接接触。而且，第一特征在第二特征“之上”、“上方”和“上面”可是第一特征在第二特征正上方或斜上方，或仅仅表示第一特征水平高度高于第二特征。第一特征在第二特征“之下”、“下方”和“下面”可以是第一特征在第二特征正下方或斜下方，或仅仅表示第一特征水平高度小于第二特征。

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不必须针对的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任一个或多个实施例或示例中以合适的方式结合。此外，在不相互矛盾的情况下，本领域的技术人员可以将本说明书中描述的不同实施例或示例以及不同实施例或示例的特征进行结合和组合。

尽管上面已经示出和描述了本发明的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本发明的限制，本领域的普通技术人员在本发明的范围内可以对上述实施例进行变化、修改、替换和变型。