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

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

【技术实现步骤摘要】

本专利技术涉及前端开发
，特别涉及一种基于模块化思想的模板框架设计方法及系统。
技术介绍
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树的模板并以预存页本文档来自技高网...

【技术保护点】
一种基于模块化思想的模板框架设计方法，其特征在于，包括以下步骤：根据Node.js和预存的后端模板构建预编译阶段模板引擎；构建单例template，并构建config对象和cache对象，并根据所述单例template、config对象和cache对象构建前端模板引擎；根据所述预编译阶段模板引擎和前端模板引擎得到所述模板框架。

【技术特征摘要】
1.一种基于模块化思想的模板框架设计方法，其特征在于，包括以下步骤：根据Node.js和预存的后端模板构建预编译阶段模板引擎；构建单例template，并构建config对象和cache对象，并根据所述单例template、config对象和cache对象构建前端模板引擎；根据所述预编译阶段模板引擎和前端模板引擎得到所述模板框架。2.根据权利要求1所述的基于模块化思想的模板框架设计方法，其特征在于，所述根据Node.js和预存的后端模板构建预编译阶段模板引擎，进一步包括：根据所述预存的后端模板，在前端采用Node.js在文件预编译阶段构建一个前端预编译模板；通过所述前端预编译模板进行模板继承和模板复用；对于可利用的页面代码，直接采用继承或获取方式直接复用页面代码，并将填充区域填充入待填充的内容；通过所述前端预编译模板将待编译文件处理成对应完整的HTML代码，具体包括：通过所述前端预编译模板得到生成AST树的模板，所述生成AST树的模板并以预存页面为基础，逐步分析所述预存页面的依赖模块，并进行逐步加载及AST再生成，以得到一个完整的AST树，将所有的完整的AST树合并以生成所述完整的HTML代码。3.根据权利要求1所述的基于模块化思想的模板框架设计方法，其特征在于，所述根据所述单例template、config对象和cache对象构建前端模板引擎，进一步包括：构建一个config对象以存储其语法标签及语法字符串转换函数；通过setConfig来进行语法标签的自定义，并在字符串转换函数中，通过匹配相应的关键字，以进行对应函数字符串的生成；构建一个单例template，并将所述单例template的编译方法及所述config对象绑定在所述单例template中，以进行变量的封装；构建一个Cache对象，以存放所有已经渲染过的文件名及对应的渲染函数。4.根据权利要求2所述的基于模块化思想的模板框架设计方法，其特征在于，其中，在采用Node.js获取HTML模板字符串阶段，采用服务器编译方式先将模板字符串文件化，并放到特定位置调度，并在文件生成阶段，采用Node.js处理JS文件，通过正则表达式匹配，将相应的模板文件内容提取出来，插入到相应的引用位置。5.根据权利要求1所述的基于模块化思想的模板框架设计方法，其特征在于，其中，在前端模板编译过程中，通过模板文件名称来获取模板文件内容，通过正则表达式来提取变量所在位置，并将变量声明提前在渲染函数之前，并解析逻辑字符串为相应逻辑语句，通过与普通字符串组合获得相应渲染函数并实例化返回，并在每一次Render函数生成完成并返回时，以文件标识符为唯一ID，将对应函数存储至cache缓存，并执行函数，以完成对前端模板的数据渲染。6.一种基于模块化思想的模板框架设计系统，其特征在于，包括：预编译阶段模板引擎构建模块，所述预编译阶段模板引擎构建模块用于...

【专利技术属性】
技术研发人员：鄂海红，宋美娜，杨婷，
申请(专利权)人：北京邮电大学，
类型：发明
国别省市：北京;11