CN113031940A - 前端框架开发方法、装置及终端设备 - Google Patents

Abstract

本申请实施例公开了前端框架开发方法、装置及终端设备，通过监听前端框架的静态资源目录，若所述静态资源目录发生改变，则遍历所述静态资源目录中用户输入的所有模板，并基于预设的规则集合，获取每个所述模板对应的预设规则，解析每个所述模板，得到每个所述模板对应的节点，基于每个所述模板对应的预设规则，编译对应每个所述节点的约束文件。前端框架根据生成的约束文件，对数据和组件关系进行正确的检查和约束。使得基于弱类型编程语言的前端项目可以在编码期间检测错误，提高前端开发的工作效率。

Description

前端框架开发方法、装置及终端设备

技术领域

本申请涉及软件设计领域，尤其涉及一种前端框架开发方法、装置及终端设备。

背景技术

在前端工程中，框架通常用于提供一套解决方案，按照预设的代码结构进行编排。前端框架是一种广泛使用的前端开发套件，是用于简化界面设计的框架，可以有效降低界面的开发周期并提高界面的美观性。

当前被广泛使用的前端框架有：Vue、React、Layui以及Dojo等，以vue2.0为参考，vue2.0可以更好地组织与简化Web开发。Vue2.0所关注的核心是MVC(Model ViewController，业务模型-用户界面-控制器)模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。

但是vue2.0也存在以下缺陷：对TypeScript编程语言没有良好的兼容性，导致基于Vue2.0的项目大多都是使用JavaScript编程语言进行的开发，采用JavaScript编程语言编写的代码缺乏可读性与易维护性，无法支持跨平台，一套代码若运行在浏览器上，则无法运行在小程序、浏览器插件上。此外，JavaScript编程语言是一种弱类型语言，只在编译项目时检测错误，而不在编码期间检测编码错误，开发人员在进行前端开发时需要特别注意数据类型是否错。因此，需要一种前端框架，提高前端框架代码的可读性、易维护性，为开发人员在编码期间检测编码错误。

发明内容

有鉴于现有技术存在的缺陷，本申请实施例目的在于提供一种前端框架开发方法、装置及终端设备，以对前端框架的数据和组件关系进行正确的检查和约束，提高代码可读性与易维护性，在实现了现有前端框架的特性的基础上，解决基于弱类型编程语言的前端框架无法在编码期间检测错误的问题。

第一方面，本申请的一个实施方式提供一种前端框架开发方法，包括：

监听前端框架的静态资源目录；

若所述静态资源目录发生改变，则遍历所述静态资源目录中用户输入的所有模板，并基于预设的规则集合，获取每个所述模板对应的预设规则；

解析每个所述模板，得到每个所述模板对应的节点；

基于每个所述模板对应的预设规则，编译对应每个所述节点的约束文件。

在上述的前端框架开发方法中，所述解析每个所述模板，得到每个所述模板对应的节点，包括：解析每个所述模板，得到每个所述模板的标签，其中，所述标签包括标签名称和标签属性；整合所述标签属性与标签名称，得到每个所述模板对应的节点。

在上述的前端框架开发方法中，所述基于每个所述模板对应的预设规则，编译对应每个所述节点的约束文件，包括：基于每个所述模板对应的预设规则，生成对应每个所述节点的约束文件；将每个所述模板替换为对应所述模板的约束文件。

在上述的前端框架开发方法中，所述监听前端框架的静态资源目录之前，还包括：获取前端框架的运行环境，其中，所述运行环境包括前端框架的当前运行***与运行平台；将前端框架的渲染的逻辑更改为与所述运行环境对应的渲染的逻辑，以生成兼容所述运行环境的代码。

在上述的前端框架开发方法中，所述监听前端框架的静态资源目录，包括：获取用户输入的新的文件；对比所述新的文件与所述静态资源目录中的静态资源文件；若所述新的文件与所述静态资源目录中的静态资源文件不匹配，则确定所述静态资源目录发生改变。

在此基础上，所述方法还包括：构建前端框架的脚手架工具；基于所述脚手架工具，创建与上传前端框架的组件，以及将所述用户输入的新的文件上传至服务器。

第二方面，本申请的一个实施方式提供一种前端框架开发装置，包括：

监听模块，用于监听前端框架的静态资源目录；

获取模块，用于若所述静态资源目录发生改变，则遍历所述静态资源目录中用户输入的所有模板，并基于预设的规则集合，获取每个所述模板对应的预设规则；

解析模块，用于解析每个所述模板，得到每个所述模板对应的节点；

编译模块，用于基于每个所述模板对应的预设规则，编译对应每个所述节点的约束文件。

在上述的前端框架开发装置中，所述编译模块，包括：

模板解析子模块，用于解析每个所述模板，得到每个所述模板的标签，其中，所述标签包括标签名称和标签属性；

整合子模块，用于整合所述标签属性与标签名称，得到每个所述模板对应的节点。

第三方面，本申请的一个实施方式提供一种终端设备，包括处理器和存储器，所述存储器上存储有程序或指令，所述程序或指令被所述处理器执行时实现上述的前端框架开发方法。

第四方面，本申请的一个实施方式提供一种计算机可读存储介质，所述计算机可读存储介质上存储有程序或指令，所述程序或指令被处理器执行时实现上述的前端框架开发方法。

本申请提供一种前端框架开发方法，通过监听前端框架的静态资源目录；若所述静态资源目录发生改变，则遍历所述静态资源目录中用户输入的所有模板，并基于预设的规则集合，获取每个所述模板对应的预设规则；解析每个所述模板，得到每个所述模板对应的节点；基于每个所述模板对应的预设规则，编译对应每个所述节点的约束文件。本申请在实现了现有前端框架特性的基础上，根据用户输入的模板编译对应的约束文件，前端框架根据生成的约束文件，对数据和组件关系进行正确的检查和约束。使得基于弱类型编程语言的前端项目可以在编码期间检测错误，提高前端开发的工作效率。

附图说明

为了更清楚地说明本申请的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对本申请保护范围的限定。在各个附图中，类似的构成部分采用类似的编号。

图1示出了本发明实施例1提供的前端框架开发方法的流程图；

图2示出了本发明实施例2提供的前端框架开发装置的结构示意图。

具体实施方式

下面将结合本申请实施例中附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。

通常在此处附图中描述和示出的本申请实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本申请的实施例的详细描述并非旨在限制要求保护的本申请的范围，而是仅仅表示本申请的选定实施例。基于本申请的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本申请保护的范围。

在下文中，可在本申请的各种实施例中使用的术语“包括”、“具有”及其同源词仅意在表示特定特征、数字、步骤、操作、元件、组件或前述项的组合，并且不应被理解为首先排除一个或更多个其它特征、数字、步骤、操作、元件、组件或前述项的组合的存在或增加一个或更多个特征、数字、步骤、操作、元件、组件或前述项的组合的可能性。

此外，术语“第一”、“第二”、“第三”等仅用于区分描述，而不能理解为指示或暗示相对重要性。

除非另有限定，否则在这里使用的所有术语(包括技术术语和科学术语)具有与本申请的各种实施例所属领域普通技术人员通常理解的含义相同的含义。所述术语(诸如在一般使用的词典中限定的术语)将被解释为具有与在相关技术领域中的语境含义相同的含义并且将不被解释为具有理想化的含义或过于正式的含义，除非在本申请的各种实施例中被清楚地限定。

实施例1

请参阅图1，图1示出了本发明实施例1提供的前端框架开发方法的流程图，图1中的前端框架开发方法包括以下步骤：

步骤101，监听前端框架的静态资源目录。

在进行前端项目开发时，通常需要在模板中引用到JavaScript文件、图片文件等静态资源，前端框架的静态资源目录则用于存放这些静态资源。在监听前端框架的静态资源目录时，可以根据静态资源目录中静态资源文件内容的改变，来确定静态资源目录是否发生改变。

作为一个示例，所述监听前端框架的静态资源目录，包括：获取用户输入的新的文件；对比所述新的文件与所述静态资源目录中的静态资源文件；若所述新的文件与所述静态资源目录中的静态资源文件不匹配，则确定所述静态资源目录发生改变。

举例而言，假设静态资源目录中的静态资源文件内容为a、b、c，当用户输入的文件内容为d时，对比用户输入新的文件内容d与静态资源目录中的文件内容a、b、c，显然，前端框架的静态资源目录中不存在与文件内容d匹配的静态资源文件内容，进而可确定静态资源目录发生改变。同理，当用户输入的文件内容为a时，端框架的静态资源目录中存在与文件内容a匹配的静态资源文件内容，进而可确定静态资源目录未发生改变。

在此基础上，所述方法还包括：构建前端框架的脚手架工具；基于所述脚手架工具，创建与上传前端框架的组件，以及将所述用户输入的新的文件上传至服务器。

前端框架中提供脚手架工具，为开发人员提供了生成代码的相关工具链。开发人员可以基于脚手架工具快速创建组件，将已有的模板与组件写入前端框架本地，也可以基于脚手架工具快速上传组件，读取前端框架的本地文件，并将文件上传至Github等软件项目托管平台。此外，前端框架能基于脚手架工具自动上传静态资源，进而能够更快的请求到源代码。

当静态资源目录中的文件内容发生更改时，将目录中发生更改的文件内容作为新加入的文件上传至服务器，服务器判断是否存储了与新加入的文件相同的静态资源文件，若否，将新加入的文件存储至服务器。其中，静态资源文件包括但不限于图片文件，svg格式文件等。

举例而言，假设服务器中存储了静态资源文件a.jpg与b.jpg，前端框架监听到静态资源目录发生改变，将新加入的文件c.jpg上传到了服务器，则在服务器中存储c.jpg文件。将静态资源上传到服务器，能够更快的请求到源代码，为开发人员提供生成代码的工具链。

通常前端项目都会上传到文件存储服务器，以更快的请求到源代码。在开发人员进行前端开发过程中，需要将一些图片等静态资源文件上传到服务器，本实施中，通过前端框架cli(command-line interface，cli，命令行界面)自动将文件上传至Github。举例而言，假设前端项目中存在文件夹A、B、C，可以由cli识别到D文件夹中组件，并上传至Github。

同时，在前端项目开发完成后，将文件打包成为整体资源，并通过命令触发cli的函数上传整体资源。举例而言，在前端项目开发完成后，将多个的文件夹A、B、C中的文件打包成为整体资源，并上传至OSS(Operation Support Systems，OSS，运营支撑***)服务器。

作为一个示例，所述监听前端框架的静态资源目录之前，还包括：获取前端框架的运行环境，其中，所述运行环境包括前端框架的当前运行***与运行平台；将前端框架的渲染的逻辑更改为与所述运行环境对应的渲染的逻辑，以编写兼容所述运行环境的代码。

前端框架cli在前端构建过程中判断当前的运行环境。例如，判断运行***是linux***还是windows***，以及运行平台是Web还是小程序。

将得到的运行环境通过环境变量传入前端框架，前端框架内部将渲染逻辑更改为对应运行环境的逻辑。举例而言，当运行平台为小程序时，将渲染的逻辑设置为renderForWxapp，当运行平台为Web时，将渲染的逻辑设置为renderForWeb。前端框架通过判断当前运行环境来编写兼容性的代码，实现代码的跨平台运行。

步骤102，若所述静态资源目录发生改变，则遍历所述静态资源目录中用户输入的所有模板，并基于预设的规则集合，获取每个所述模板对应的预设规则。

模板是进行前端项目开发时的常用工具，可以将开发时固定不变的内容提取成为模板，将动态数据装填至模板中，进而得到完整的模板，根据模板快速生成字符串代码，提高前端开发人员的工作效率。

在前端框架中预设一个规则集合，规则集合中有多个不同的预设规则，规则用于覆盖模板的代码。在遍历到用户输入的模板后，在预设的规则集合中寻找用户输入的模板对应的预设规则，基于预设规则生成与模板对应的约束文件。实质上，可以将预设规则的执行过程理解为，在前端项目中覆盖用户输入的模板并生成对应模板的约束文件的过程。

步骤103，解析每个所述模板，得到每个所述模板对应的节点。

前端具有一个树型结构，用于表示前端的内部结构。DOM(Document ObjectModel，DOM，结构文档对象模型)将这个树型结构视为由节点组成的节点树，其中，DOM是用于操作节点的，并通过对节点的操作来赋予用户操作前端的能力。

作为一个示例，所述解析每个所述模板，得到每个所述模板对应的节点，包括：解析每个所述模板，得到每个所述模板的标签，其中，所述标签包括标签名称和标签属性；整合所述标签属性与标签名称，得到每个所述模板对应的节点。

模板是由标签组成的，标签内含有标签名称和标签属性。通过解析模板找到标签，并解析标签得到标签名称和标签属性，整合标签名称和标签属性并记录为节点。

举例而言，当用户输入了模板<button@bind:click＝”click”/>时，对这个模板进行解析得到标签名称和标签属性，具体地，找出标签名称button，标签属性@bind:click＝”click”。根据标签属性得知用户需要绑定按钮click事件。整合标签名称和标签属性得到节点：

VElement:{name:”button”,attributes:{@bind:click:“click”}}

在解析模板得到节点后，根据节点生成模板的约束文件。

步骤104，基于每个所述模板对应的预设规则，编译对应每个所述节点的约束文件。

在前端开发中，约束被理解为一种团队协作规范，这种规范要求开发人员在既有的规定下编写代码。本申请通过遍历用户输入的模板，得到模板对应的规则，解析模板并生成具有约束作用的约束文件。通过生成约束文件实现对前端工程的约束，使得多个开发人员能够对前端进行协同开发，提高开发团队的编码和调试效率。

作为一个示例，所述基于每个所述模板对应的预设规则，编译对应每个所述节点的约束文件，包括：基于每个所述模板对应的预设规则，生成对应每个所述节点的约束文件；将每个所述模板替换为对应所述模板的约束文件。

依据步骤103的内容继续说明，当监听到用户输入了模板<button@bind:click＝”click”/>时，生成模板对应的节点，并依据节点将模板转换为抽象约束protectedabstract click():void。

其中，click()函数名为动态语法由节点的attributes.@bind:click获得，protected abstract为静态语法。通过对模板的解析，得知用户需要绑定按钮的click事件，进而根据与模板对应的预设规则为用户生成约束文件：

protected abstract click(event:MouseEvent,eventData:this['E']['click']):void

在用户对click事件进行赋值或者***表达式时，前端框架根据生成的约束文件，检测用户对click事件的赋值或***的表达式是否出现错误。通过生成click事件的约束文件，约束click事件的参数与类型，保证用户不会错误使用click事件。

在生成click事件的约束文件后，若监听到户输入了基于JavaScript编程语言的模板：<p>{{sayHi}}</p>，则确定静态资源目录再次发生改变，则重新遍历用户输入的模板，并在预设的规则集合中找到<p>{{sayHi}}</p>模板对应的规则，解析模板得到节点<P>与{{sayHi}}，进而得知用户要在<P>内渲染sayHi变量，编译出<p>{{sayHi}}</p>对应的兼容TypeScript编程语言的约束文件：@vState()public sayHi？:BasicType|{}。

根据生成的约束文件约束sayHi变量，保证用户给sayHi变量赋值时不会出现错误，在开发人员的编码期间检测是否出现错误，提高了代码的可维护性。此外，TypeScript编程语言相对于JavaScript编程语言，增加了静态类型、类、模块、接口和类型注解，实现了从动态弱类型检查到强类型检查，其中，强类型是指表达的任何对象所从属的类型都必须能在编译时刻确定。通过生成兼容TypeScript编程语言的约束文件实现强类型检查，使得生成的代码更具有可读性。

在本实施例中，两次监听到静态资源目录发生改变后，为用户输入的模板生成约束文件。监听静态资源目录的改变，重复执行生成约束文件的过程，在前端开发时自动为用户生成约束文件，相比于现有的前端框架在编译项目时检测错误，本申请对数据和组件关系进行正确的检查和约束。在进行前端项目的开发时，前端框架提供了在编码期间检测错误的能力，为开发团队创建了一个更高效的编码和调试过程。

本申请提供一种前端框架开发方法，通过监听前端框架的静态资源目录；若所述静态资源目录发生改变，则遍历所述静态资源目录中用户输入的所有模板，并基于预设的规则集合，获取每个所述模板对应的预设规则；解析每个所述模板，得到每个所述模板对应的节点；基于每个所述模板对应的预设规则，编译对应每个所述节点的约束文件。本申请在实现了现有前端框架特性的基础上，根据用户输入的模板编译对应的约束文件，前端框架根据生成的约束文件，对数据和组件关系进行正确的检查和约束。使得基于弱类型编程语言的前端项目可以在编码期间检测错误，提高前端开发的工作效率。

实施例2

请参阅图2，图2示出了本发明实施例2提供的前端框架开发装置的结构示意图，图2中的前端框架开发装置200包括：

监听模块210，用于监听前端框架的静态资源目录；

获取模块220，用于若所述静态资源目录发生改变，则遍历所述静态资源目录中用户输入的所有模板，并基于预设的规则集合，获取每个所述模板对应的预设规则；

解析模块230，用于解析每个所述模板，得到每个所述模板对应的节点；

编译模块240，用于基于每个所述模板对应的预设规则，编译对应每个所述节点的约束文件。

作为一个示例，所述解析模块230，包括：

模板解析子模块，用于解析每个所述模板，得到每个所述模板的标签，其中，所述标签包括标签名称和标签属性；

整合子模块，用于整合所述标签属性与标签名称，得到每个所述模板对应的节点。

作为一个示例，所述编译模块240，包括：

文件生成子模块，用于基于每个所述模板对应的预设规则，生成对应每个所述节点的约束文件；

替换子模块，用于将每个所述模板替换为对应所述模板的约束文件。

作为一个示例，所述前端框架开发装置200，还包括：

环境判断模块，用于获取前端框架的运行环境，其中，所述运行环境包括前端框架的当前运行***与运行平台；

逻辑更改模块，用于将前端框架的渲染的逻辑更改为与所述运行环境对应的渲染的逻辑，以生成兼容所述运行环境的代码。

作为一个示例，所述监听模块210，包括：

文件获取子模块，用于获取用户输入的新的文件；

对比子模块，用于对比所述新的文件与所述静态资源目录中的静态资源文件；

判断子模块，用于若所述新的文件与所述静态资源目录中的静态资源文件不匹配，则确定所述静态资源目录发生改变。

在此基础上，所述前端框架开发装置200，还包括：

构建模块，用于构建前端框架的脚手架工具；

脚手架模块，用于基于所述脚手架工具，创建与上传前端框架的组件，以及将所述用户输入的新的文件上传至服务器。

本申请实施例还提供一种终端设备，包括处理器和存储器，所述存储器上存储有程序或指令，所述程序或指令被所述处理器执行，以使所述终端设备执行上述的前端框架开发方法的步骤。

前端框架开发装置200用于执行上述的前端框架开发方法中的对应步骤，各个功能的具体实施，在此不再一一描述。此外，实施例1中可选示例也同样适用于实施例2的前端框架开发装置200。

本申请实施例还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有程序或指令，所述程序或指令被处理器执行时实现上述的前端框架开发方法的步骤。

在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，也可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，附图中的流程图和结构图显示了根据本申请的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，结构图和/或流程图中的每个方框、以及结构图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的***来实现，或者可以用专用硬件与计算机指令的组合来实现。

另外，在本申请各个实施例中的各功能模块或单元可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或更多个模块集成形成一个独立的部分。

所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是智能手机、个人计算机、服务器、或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述，仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。

Claims (10)

1.一种前端框架开发方法，其特征在于，包括：

监听前端框架的静态资源目录；

若所述静态资源目录发生改变，则遍历所述静态资源目录中用户输入的所有模板，并基于预设的规则集合，获取每个所述模板对应的预设规则；

解析每个所述模板，得到每个所述模板对应的节点；

基于每个所述模板对应的预设规则，编译对应每个所述节点的约束文件。

2.根据权利要求1所述的前端框架开发方法，其特征在于，所述解析每个所述模板，得到每个所述模板对应的节点，包括：

解析每个所述模板，得到每个所述模板的标签，其中，所述标签包括标签名称和标签属性；

整合所述标签属性与标签名称，得到每个所述模板对应的节点。

3.根据权利要求1所述的前端框架开发方法，其特征在于，所述基于每个所述模板对应的预设规则，编译对应每个所述节点的约束文件，包括：

基于每个所述模板对应的预设规则，生成对应每个所述节点的约束文件；

将每个所述模板替换为对应所述模板的约束文件。

4.根据权利要求1所述的前端框架开发方法，其特征在于，所述监听前端框架的静态资源目录之前，还包括：

获取前端框架的运行环境，其中，所述运行环境包括前端框架的当前运行***与运行平台；

将前端框架的渲染的逻辑更改为与所述运行环境对应的渲染的逻辑，以生成兼容所述运行环境的代码。

5.根据权利要求1所述的前端框架开发方法，其特征在于，所述监听前端框架的静态资源目录，包括：

获取用户输入的新的文件；

对比所述新的文件与所述静态资源目录中的静态资源文件；

若所述新的文件与所述静态资源目录中的静态资源文件不匹配，则确定所述静态资源目录发生改变。

6.根据权利要求5所述的前端框架开发方法，其特征在于，所述方法还包括：

构建前端框架的脚手架工具；

基于所述脚手架工具，创建与上传前端框架的组件，以及将所述用户输入的新的文件上传至服务器。

7.一种前端框架开发装置，其特征在于，包括：

监听模块，用于监听前端框架的静态资源目录；

获取模块，用于若所述静态资源目录发生改变，则遍历所述静态资源目录中用户输入的所有模板，并基于预设的规则集合，获取每个所述模板对应的预设规则；

解析模块，用于解析每个所述模板，得到每个所述模板对应的节点；

编译模块，用于基于每个所述模板对应的预设规则，编译对应每个所述节点的约束文件。

8.根据权利要求7所述的前端框架开发装置，其特征在于，所述编译模块，包括：

模板解析子模块，用于解析每个所述模板，得到每个所述模板的标签，其中，所述标签包括标签名称和标签属性；

整合子模块，用于整合所述标签属性与标签名称，得到每个所述模板对应的节点。

9.一种终端设备，其特征在于，包括处理器和存储器，所述存储器上存储有程序或指令，所述程序或指令被所述处理器执行时实现如权利要求1至6中任一项所述的前端框架开发方法的步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有程序或指令，所述程序或指令被处理器执行时实现如权利要求1至6中任一项所述的前端框架开发方法的步骤。

Images