CN112631604B

CN112631604B - 一种前端框架实现方法及装置

Info

Publication number: CN112631604B
Application number: CN202011616828.1A
Authority: CN
Inventors: 张辉; 张永强; 李庄庄
Original assignee: Wuhan Dayun Data Technology Co ltd
Current assignee: Wuhan Dayun Data Technology Co ltd
Priority date: 2020-12-30
Filing date: 2020-12-30
Publication date: 2022-04-26
Anticipated expiration: 2040-12-30
Also published as: CN112631604A

Abstract

本发明涉及信息技术领域，本发明提供了一种前端框架实现方法及装置，包括：加载.vue文件的文本内容，将所述.vue文件的文本内容分割为代码片段并对所述代码片段进行清洗，其中，所述代码片段包括template、script和/或style；将所述template代码片段和script代码片段合成javascript代码片段，在callVue方法中创建script标签，并将所述javascript代码片段包裹到所述script标签中，将所述script标签追加到document文档的head节点中执行；并对script标签进行模块标记，通过completeLoad方法，将此模块追加到全局回调事件队列中去；其中，所述callVue方法实现javascript代码片段的执行和关联加载。由于是纯前端框架，后端人员更容易参与前端工作，即后端人员不需要学习前端开发的后端技术，如：NodeJs、TypeScript、CoffeeScript等后端技术，降低了学习成本。

Description

一种前端框架实现方法及装置

【技术领域】

本发明涉及信息技术领域，特别是涉及一种前端框架实现方法及装置。

【背景技术】

由于近几年前端技术更新的步伐比较快，不断推陈出新，涌现了很多优秀的前端框架，如现在市面上很火爆的vue框架。但是随着前端开发职业越来越独立化、专业化，vue框架慢慢形成了需要使用后端NodeJs编译的组件模式(翻译成浏览器可以识别的东西)，这对后端开发人员不是很友好，开发环境搭建复杂，学习曲线陡峭，使用成本增大。但是目前很多公司的现状是后端人员仍旧需要参与前端页面的构建和前端效果的实现工作。因此造成了一些公司的前端技术革新缓慢，新的前端技术难以应用和推广的困局。

例如：目前实际场景下若想使用element-ul框架(一款比较流行的基于vue实现的组件框架)作为前端框架，不仅需要学习NodeJs编译、webpack配置、ECMA6语法翻译等，还要下载几百M的nodemodules包，很麻烦，如果想像以前使用的前端框架一样，不需要后端编译直接将vue引入到项目中，就需要开发一款纯前端框架。

鉴于此，克服该现有技术所存在的缺陷是本技术领域亟待解决的问题。

【发明内容】

本发明需要解决的技术问题是：

目前市面上很流行的vue框架为需要后端NodeJs编译的组件模式，这种操作方式使后端开发人员要学习前端开发的后端技术，如：NodeJs、TypeScript、CoffeeScript等，这大大增加了后端开发人员的工作量以及学习成本；另一方面，由于前端开发需要NodeJs、TypeScript、CoffeeScript等后端技术的支持，使前端技术革新缓慢，新的前端技术难以应用和推广。

本发明通过如下技术方案达到上述目的：

第一方面，本发明提供一种前端框架实现方法，包括：

加载.vue文件的文本内容，将所述.vue文件的文本内容分割为代码片段并对所述代码片段进行清洗，其中，所述代码片段包括template、script和/或style；

将所述template代码片段和script代码片段合成javascript代码片段，在callVue方法中创建script标签，并将所述javascript代码片段包裹到所述script标签中，将所述script标签追加到document文档的head节点中执行；并对script标签进行模块标记，通过completeLoad方法，将此模块追加到全局回调事件队列中去；

其中，所述callVue方法实现javascript代码片段的执行和关联加载。

优选的，所述style代码片段的使用，具体包括：

创建style标签，将所述style标签追加到document文档的head节点中；

调用less.js接口将所述style代码片段中的文本内容编译成css代码并包裹到所述style标签中执行。

优选的，所述template代码片段和script代码片段合成javascript代码片段，具体包括：

在所述script代码片段中添加template占位标记符，使用替换方法将所述template占位标记符替换为所述template代码片段，从而合成javascript代码片段。

优选的，所述加载.vue文件的文本内容的方法包括：

通过XMLHttpRequest方法将所述.vue文件的文本内容加载到浏览器端。

优选的，所述分割方法具体包括：

使用正则表达式的match方法将所述.vue文件中的文本内容分割为代码片段，其中，所述正则表达式匹配最开始的template标签和最后的template标签，忽略中间位置出现的template标签，从而准确分割template代码片段。

优选的，对所述.vue文件的文本内容中的代码进行修改，具体包括：

将.vue文件中的代码语法从后端语法改为对应的前端语法，其中，所述后端语法包括import和/或export；

所述前端语法包括require、define和return中的一种或者多种。

优选的，所述template代码片段的清洗，具体包括：

去掉template代码片段中的回车和换行符；

去掉template代码片段中多余的空格；

转义template代码片段中的单引号；

去掉template代码片段中前后的template标签。

优选的，所述script代码片段的清洗，具体包括：

去掉script代码片段中的注释；

去掉script代码片段中多余的空格；

去掉script代码片段中前后的script标签。

优选的，所述style代码片段的清洗，具体包括：

去掉style代码片段中的多余的空格；

去掉style代码片段中的注释。

第二方面，本发明还提供了一种前端框架实现装置，所述装置包括：

至少一个处理器；以及，与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述处理器执行，用于执行第一方面所述的前端框架实现的方法。

与现有技术相比，本发明的有益效果是：

本发明提供了一种前端框架实现方法，使用XMLHttpRequest方法将.vue文件的文本内容加载到浏览器端，然后使用callVue方法实现.vue文件的文本内容在浏览器端的依赖加载，可使用浏览器的多线程模式，同时异步请求多个页面资源，提升页面的性能，实现了框架使用纯前端方式便可以在浏览器端使用。由于是纯前端框架，后端人员更容易参与前端工作，即后端人员不需要学习前端开发的后端技术，如：NodeJs、TypeScript、CoffeeScript等后端技术，降低了学习成本；另一方面，由于是纯前端框架，在使用第三方插件的时候，不会受代码结构和格式的限制，方便开发人员扩展自己的组件，复用以前的组件，作新旧***前端的移植和融合，加快了前端技术的革新。

【附图说明】

为了更清楚地说明本发明实施例的技术方案，下面将对本发明实施例中所需要使用的附图作简单地介绍。显而易见地，下面所描述的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明实施例提供的一种前端框架实现方法；

图2是本发明实施例提供的一种清洗后style代码片段的使用方法流程图；

图3是本发明实施例提供的一种清洗后template代码片段和script代码片段的使用方法流程图；

图4是本发明实施例提供的一种前端框架实现装置的架构图。

【具体实施方式】

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

在本发明的描述中，术语“内”、“外”、“纵向”、“横向”、“上”、“下”、“顶”、“底”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明而不是要求本发明必须以特定的方位构造和操作，因此不应当理解为对本发明的限制。

此外，下面所描述的本发明各个实施方式中所涉及到的技术特征只要彼此之间未构成冲突就可以相互组合。

实施例1:

随着前端技术更新步伐的加快，前端框架不断推陈出新，涌现了很多优秀的前端框架，现在市面上比较流行的框架有vue框架，vue框架是由template、script和/或style三个部分组成.vue文件，采用后端编译的方式将.vue文件合并成.js和/或.css文件，然后再将其加载到浏览器端运行。也就是说，目前的vue框架若要在前端使用，是需要通过后端NodeJs编译为前端可以识别的框架，这种实现方式无异于增加了后端人员的工作量和学习成本，同时也使前端技术无法快速革新和推广。为了解决该问题，本发明提供了一种前端框架实现方法，使用纯前端的方式实现vue框架在前端的使用，首先要解决的问题就是如何将.vue文件的文本内容到浏览器端，由于浏览器端不支持.vue文件的加载，而RequireJs支持文本文件的异步加载，因此本发明开发了RequireJs的插件require.vue.js用XMLHttpRequest方法将.vue文件当作文本文件将其文本内容加载到浏览器端。

本发明提供了一种前端框架实现方法，如图1所示，包括：步骤10，加载.vue文件的文本内容，本发明开发了一款RequireJs的插件require.vue.js，并用XMLHttpRequest方法将.vue文件当作文本文件将其文本内容加载到浏览器端。步骤20，将加载到浏览器端的.vue文件的文本内容分割为代码片段并对所述代码片段进行清洗，其中，所述代码片段包括template、script和/或style；

本发明用XMLHttpRequest方法把.vue文件当作文本文件，并将其文本内容加载到浏览器端，.vue文件的文本内容加载到浏览器端后，需要对加载到浏览器端的.vue的文本内容进行分割解析，本实施例使用正则表达式的macth方法对加载到浏览器端的.vue的文本内容进行分割，其中，所使用的正则表达式的具体内容如下：

/(<template(.*？)>([\s\S]*？)<\/template>(？！[\s\S]*？<\/template>))|(<script(.*？)>([\s\S]*？)<\/script>)|(<style(.*？)>([\s\S]*？)<\/style>)/img

使用以上正则表达式对加载到浏览器端的.vue的文本内容分割之后，得到的代码片段包括template、script和/或style；其中，因为vue组件的模板中可能存在模板嵌套使用的情况，会出现多个template标签，导致template代码段的分割不准确，所以此正则表达式匹配最开始的template标签和最后的template标签，忽略中间出现的所有template标签，这种方式有效提高了分割template代码片段的准确度。因为script和/或style不存在模板嵌套使用的情况，因此不需要按照分割template代码片段的方法进行分割。

完成对template、script和/或style代码片段的分割之后，需要对各代码片段进行清洗转换。清洗转换后的style代码片段在使用less.js接口编译后便可直接加载至浏览器端使用，而清洗转换后的template和script需要先合成javascript代码片段，然后将javascript代码片段加载到浏览器端使用，理论上javascript代码片段是可以直接在浏览器端使用且不需要编译，但是由于RequireJs不能实现javascript代码片段的依赖加载，因此需要使用本发明提供的callVue方法实现RequireJs对javascript代码片段的依赖加载并在浏览器端执行。

本发明提供的template、script和/或style代码片段的清洗具体方式如下：

1)清洗template代码片段

if(toKeepFormat){//是否保持代码格式

str＝str.replace(/\r|\n/gm,'\\n')`//去掉template代码片段字符串中的回车和换行符

}else{

str＝str.replace(/\r|\n/gm,″)；//去掉template代码片段字符串中的回车和换行符

str＝str.replace(/\s+/gm,″)；//去掉template代码片段字符串中多余的空格

str＝str.replace(/\s</gm,'<').replace(/>\s/gm,'>')；//去掉html节点前后的空格

}

str＝str.replace(/'/gm,'\\\″)；//转义template代码片段字符串中的单引号

str＝str.replace(/^<template(.*？)>|<\/template>$/gm,″)；//去掉template代码片段字符串前后的template标签

2)清洗script代码片段

str＝str.replace(/:\/\//g,'@:@@')；//防止“http://”干扰去注释

str＝str.replace(/(\/\/.*)|(\/\*[\s\S]*？\*\/)/g,″)；//去掉script代码片段中的注释“//”和“/**.....*/”

str＝str.replace(/@:@@/g,':\/\/')；//还原“http://”

str＝str.replace(/\r|\n/gm,″)；//去掉script代码片段字符串中的回车和换行符

str＝str.replace(/\s+/gm,″)；//去掉script代码片段字符串中多余的空格

//去掉script代码片段中“()、{}、[]、；、:、,、＝”前后的空格

str＝str.replace(/\s？$\s？/gm,'\(').replace(/\s？$\s？/gm,'\)').replace(/\s？\{\s？/gm,'\{').replace(/\s？}\s？/gm,'}')

.replace(/\s？\[\s？/gm,'\[').replace(/\s？]\s？/gm,']').replace(/\s？；\s？/gm,'；').replace(/\s？:\s？/gm,':')

.replace(/\s？,\s？/gm,',').replace(/\s？＝\s？/gm,'＝')；

str＝str.replace(/^<script(.*？)>|<\/script>$/gm,″)；//去掉script代码片段字符串前后的script标签

3)清洗style代码片段

str＝str.replace(/\/\*[\s\S]*？\*\//g,″)；//去掉style代码片段中的注释“/*.....*/”

str＝str.replace(/\r|\n/gm,″)；//去掉style代码片段字符串中的回车和换行符

str＝str.replace(/\s+/gm,″)；//去掉style代码片段字符串中多余的空格

//去掉style代码片段中“{}、；、:、,”前后的空格

str＝str.replace(/\s？\{\s？/gm,'\{').replace(/\s？}\s？/gm,'}').replace(/\s？；\s？/gm,'；')

.replace(/\s？:\s？/gm,':').replace(/\s？,\s？/gm,',')；

以上对template、script和/或style代码片段的清洗过程仅仅是举例说明，并不用于限定本发明，对上述各代码片段清洗之后，就可以使用清洗后的各代码片段。

其中，由于步骤30中template、script和/或style代码片段的分割清洗后的使用方式不同，本实施例对分割清洗后的template、script和/或style代码片段的使用方式分别进行说明。

如图2所示，步骤3011，清洗后style代码片段的使用：

由于清洗后的style代码片段不能被浏览器页面直接识别并使用，因此需要将清洗后的style代码片段进行编译，本发明使用less.js的render接口将清洗后的style代码片段的文本内容编译成css代码，因为RequireJs支持对css代码的依赖加载的，因此当style代码片段的文本内容编译成css代码后便可直接加载到浏览器端使用，所述style代码片段的使用，具体包括：

步骤3012，创建style标签。

步骤3013，将所述style标签追加到document文档的head节点中。

步骤3014，调用less.js接口将所述style代码片段中的文本内容编译成css代码并包裹到所述style标签中执行。

实际应用场景中，首先创建style标签，调用less.js的render接口将清洗后的style代码片段中的文本内容编译成css代码包裹在<style>标签中，追加到html页面的document文档结构中执行。方法如下：

以上是本实施例提供的一种清洗后的style代码片段的使用方式，本实施例仅仅是举例说明，并不用于限定本发明，为了便于理解，本实施例呈现了传统的使用requirejs加载css文件的方式，具体为，首先创建一个link标签，将css文件的路径赋值给link标签的href属性，然后将link标签追加到document文档的head节点中，link标签会根据href属性值将css文件加载到页面使用。大致步骤如下：

var link＝document.createElement('link')；

link.type＝'text/css'；

link.rel＝'stylesheet'；

link.href＝url；

head.appendChild(link)；//将创建link标签追加到document文档的head节点中

如图3所示，步骤3021，清洗后template代码片段和script代码片段的使用：

步骤3022，首先将清洗后的template代码片段和script代码片段合成vue组件构造器代码结构javascript代码片段待用。

传统的使用NodeJs后端编译的vue组件构造器代码结构如下：

{

name:'Name',

data:function(){},

created:function(){},

methods:{}

}

因为vue组件构造器支持template属性值传入模板字符串的使用方法，所以可以在vue组件构造器中添加template属性名，在template属性值的位置***${template}占位标记符,代码结构如下：

{

name:'Monitor',

template:'${template}',//固定写法，template字符串模板占位标记符

data:function(){},

created:function(){},

methods:{}

}

然后使用script.replace('${template}',template)方法，将${template}替换为清洗后的template代码片段，在文本代码段的层面将.vue文件中的清洗后的template代码片段赋值给vue组件构造器的template属性。就将template和script合成了vue组件构造器代码结构的javascript代码片段。

传统的使用requirejs加载.js文件，是创建一个script标签，将.js文件的路径赋值给script标签的src属性，然后将script标签追加到document文档的head节点中，script标签会根据src属性值将.js文件加载到页面执行。大致步骤如下：

var node＝document.createElement('script')；

node.type＝config.scriptType||'text/javascript'；

node.charset＝'utf-8'；

node.async＝true；

node.src＝url；

head.appendChild(node)；//将创建script标签追加到document文档的head节点中。

清洗后的template和script合成的vue组件代码结构的javascript代码片段在理论上也可以包裹在script标签中，然后将script标签直接追加到html页面的document文档结构中执行，如下：

var node＝document.createElement('script')；

node.type＝config.scriptType||'text/javascript'；

node.charset＝'utf-8'；

//script节点代码注入

try{

node.appendChild(document.createTextNode(code))；//code为template和script合成的vue组件代码结构的javascript代码片段

}catch(ex){

node.text＝code；

}

但是由于javascript代码片段存在.vue文件依赖引用的情况，如：a.vue文件里面引用了b.vue文件作为子组件，而b.vue文件又引用了c.vue文件作为子组件，相当于a组件的执行要依赖b组件的执行结果，b组件的执行又要依赖c组件的执行结果。要求a.vue、b.vue、c.vue文件中javascript代码段的执行顺序为c-->b-->a。而且还存在.js文件中引用.vue文件，.vue文件中又引入.js文件的情况，这个时候就需要把.vue文件的引用融入到.js文件的引用体系中才行。

经分析RequireJs的源码，它在引用.js文件时，先对创建的script节点进行模块命名标记，然后监听script节点的加载完成事件'onreadystatechange'，在节点加载完成之后，通过completeLoad方法，将模块化命名标记与此模块的回调函数对应起来，保存到全局回调事件队列中去，检查此模块所需的依赖文件是否都加载完成了，待最内层依赖模块加载完成之后，由内而外一一执行全局回调事件队列，完成整个最外层模块的定义。大致过程如下：

node.setAttribute('data-requiremodule',moduleName)；//标记此.js文件的模块名

node.attachEvent('onreadystatechange',context.onScriptLoad)；/监听.js文件的加载完成事件

context.completeLoad(moduleName)；//将模块名与回调函数对应起来

checkLoaded()；//检查模块的依赖是否已加载完成

takeGlobalQueue()；//反顺序执行队列中的回调函数

由于RequireJs是不支持javascript代码片段的执行和依赖加载的，本发明修改了RequireJs的源码，在其源码里面添加了自定义方法callVue，步骤3023，在callVue方法里面创建script标签，步骤3024，将javascript代码片段包裹到script标签中，步骤3025将所述script标签追加到document文档的head节点中执行；并对script标签进行模块标记，通过completeLoad方法，将此模块追加到全局回调事件队列中去；这里的javascript代码段已经通过文本的方式加载完成了，不需要像.js文件一样监听加载完成事件'onreadystatechange'，直接通过completeLoad方法，将模块化命名标记与此模块的回调函数对应起来，保存到全局回调事件队列中去，检查此模块所需的依赖文件是否都加载完成了。这样就顺利的把.vue文件中的javascript代码片段作为一个已定义的模块添加到了RequireJs的全局事件回调队列中，完美地将.vue文件的依赖加载和.js文件的依赖加载融合起来了。

RequireJs执行和依赖加载javascript代码片段的步骤如下：

a.在模块加载定义的位置添加.vue文件类型的处理方法调用分支，如果是js文件，调用load方法；普通插件引用，如text、css调用callPlugin方法；.vue文件引用，就调用自定义的callVue方法。

map.prefix？(map.prefix＝＝＝"vue"？this.callVue():this.callPlugin()):this.load()；

b.在自定义方法callVue中创建script标签，将javascript代码片段渲染到页面执行。

var node＝document.createElement('script')；

node.type＝config.scriptType||'text/javascript'；

node.charset＝'utf-8'；

//script节点代码注入

try{

}catch(ex){

node.text＝code；

}

c.对script标签进行模块标记，然后通过completeLoad方法，将此模块追加到全局回调事件队列中。

useInteractive＝true；

node.setAttribute('data-requirecontext',context.contextName)；

node.setAttribute('data-requiremodule',name)；

//直接通过completeLoad方法，将此模块追加到全局回调事件队列中去

context.completeLoad(name)；

takeGlobalQueue()；

所述template代码片段和script代码片段合成javascript代码片段，具体包括：

{

name:'Monitor',

,template:'${template}',//固定写法，template字符串模板占位标记符

data:function(){},

created:function(){},

methods:{}

}

所述分割方法具体包括：

要使.vue组件在前端运行并支持主流浏览器，需要对使用后端Node.js编译的vue组件的代码进行一些前端化语法的修改。

具体修改方式为：对所述.vue文件的文本内容中的代码进行修改，具体包括：将.vue文件中的代码语法从后端语法改为对应的前端语法，其中，所述后端语法包括import和/或export；

所述前端语法包括require、define和return中的一种或者多种。

本发明举例说明如何将.vue文件中的代码语法从后端语法改为对应的前端语法。

首先在.vue文件的引用、vue组件对象的定义和vue组件对象的输出部分去掉了浏览器引擎无法识别的import、export等后端语法，改为了浏览器引擎支持的替代方法：使用require方法引用.vue文件，define方法定义vue组件对象，return方法输出vue组件对象。具体后端语言为：

由于浏览器引擎有很多不同的厂商，如Chrome使用的Webkit，Firefox使用的Gecko，IE使用的Trident，它们对Javascript的语法标准支持各不相同，因此要将一些浏览器不支持的新标准语法(ECMA6标准)改为了主要流浏览器(Chrome、FireFox、IE10+)都支持的语法。不过随着主流浏览器升级对新的JavaScript语法的支持，有些语法就不需要改动了。需要修改的语法如：

...变量的解构赋值，用jquery的extend方法代替；

＝>箭头函数，使用外部声明_this＝this，防止this指针偏转；

for of循环，使用for in循环代替

``模板字符串，使用”代替

数组的find、findIndex方法，使用普通的for循环代替

Includes方法，使用indexOf代替

Object使用[变量]作为key，使用传统的Object对象变量赋值方法代替

所述template代码片段的清洗，具体包括：

if(toKeepFormat){//是否保持代码格式

str＝str.replace(/\r|\n/gm,'\\n')；//去掉template代码片段字符串中的回车和换行符

}else{

}

上述template代码片段的清洗过程，去掉了template代码片段中的回车和换行符；去掉了template代码片段中多余的空格；转义了template代码片段中的单引号；去掉了template代码片段中前后的template标签。

所述script代码片段的清洗，具体包括：

str＝str.replace(/:\/\//g,'@:@@')；//防止“http://”干扰去注释

str＝str.replace(/@:@@/g,':\/\/')；//还原“http://”

.replace(/\s？,\s？/gm,',').replace(/\s？＝\s？/gm,'＝')；

上述script代码片段的清洗过程，去掉了script代码片段中的注释；去掉了script代码片段中多余的空格；去掉了script代码片段中前后的script标签。

所述style代码片段的清洗，具体包括：

//去掉style代码片段中“{}、；、:、,”前后的空格

.replace(/\s？:\s？/gm,':').replace(/\s？,\s？/gm,',')；

上述style代码片段的清洗过程，去掉了style代码片段中的多余的空格；去掉了style代码片段中的注释。

本发明使用RequireJs的方式加载前端文件，可以做到按需加载，可使用浏览器的多线程模式，同时异步请求多个页面资源，提升页面的性能。因为是纯前端框架，后端人员不需学习前端开发的后端技术，如：NodeJs、TypeScript、CoffeeScript等后端技术；而且在使用第三方插件时，不会受代码结构和格式的限制，方便开发人员自己扩展组件，复用以前的组件，做新旧***前端的移植与融合。本发明提供了一种免编译，采用浏览器普遍支持的ECMA5和部分ECMA6语法编写JS代码，学习成本低，可直接在浏览器端运行，支持Chrome、Firefox、IE10+浏览器兼容。丰富的组件，涵盖常用场景，另引入了一些前端常用组件，如JQuery、echarts、d3、zTree、fontawesome，提供更多解决前端问题的手段。基于vue组件化开发，数据驱动视图封装了组件的复杂性，提供简单友好的api。集成了本地登录和Oauth2协议两种登录方式，只需设置LoginMode参数并可快速切换。

实施例2：

在上述实施例1提供的前端框架实现方法的基础上，本发明还提供了一种可用于实现上述方法的前端框架实现装置，如图4所示，是本发明实施例的装置架构示意图。本实施例的前端框架实现装置包括一个或多个处理器21以及存储器22。其中，图4中以一个处理器21为例。

所述处理器21和所述存储器22可以通过总线或者其他方式连接，图4中以通过总线连接为例。

所述存储器22作为一种前端框架实现方法非易失性计算机可读存储介质，可用于存储非易失性软件程序、非易失性计算机可执行程序以及模块，如实施例1中的前端框架实现方法。所述处理器21通过运行存储在所述存储器22中的非易失性软件程序、指令以及模块，从而执行前端框架实现装置的各种功能应用以及数据处理，即实现实施例1的前端框架实现方法。

所述存储器22可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实施例中，所述存储器22可选包括相对于所述处理器21远程设置的存储器，这些远程存储器可以通过网络连接至所述处理器21。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

所述程序指令/模块存储在所述存储器22中，当被所述一个或者多个处理器21执行时，执行上述实施例1中的前端框架实现方法，例如，执行以上描述的图1-图3所示的各个步骤。

本领域普通技术人员可以理解实施例的各种方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成，该程序可以存储于一计算机可读存储介质中，存储介质可以包括：只读存储器(ROM，Read Only Memory)、随机存取存储器(RAM，Random AccessMemory)、磁盘或光盘等。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本发明的保护范围之内。

Claims

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

2.根据权利要求1所述的前端框架实现方法，其特征在于，所述style代码片段的使用，具体包括：

3.根据权利要求1所述的前端框架实现方法，其特征在于，所述template代码片段和script代码片段合成javascript代码片段，具体包括：

4.根据权利要求1所述的前端框架实现方法，其特征在于，所述加载.vue文件的文本内容的方法包括：

5.根据权利要求1所述的前端框架实现方法，其特征在于，所述分割方法具体包括：

6.根据权利要求1所述的前端框架实现方法，其特征在于，对所述.vue文件的文本内容中的代码进行修改，具体包括：

所述前端语法包括require、define和return中的一种或者多种。

7.根据权利要求1所述的前端框架实现方法，其特征在于，所述template代码片段的清洗，具体包括：

去掉template代码片段中的回车和换行符；

去掉template代码片段中多余的空格；

转义template代码片段中的单引号；

去掉template代码片段中前后的template标签。

8.根据权利要求1所述的前端框架实现方法，其特征在于，所述script代码片段的清洗，具体包括：

去掉script代码片段中的注释；

去掉script代码片段中多余的空格；

去掉script代码片段中前后的script标签。

9.根据权利要求1所述的前端框架实现方法，其特征在于，所述style代码片段的清洗，具体包括：

去掉style代码片段中的多余的空格；

去掉style代码片段中的注释。

10.一种前端框架实现装置，其特征在于，包括至少一个处理器和存储器，所述至少一个处理器和存储器之间通过数据总线连接，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令在被所述处理器执行后，用于完成权利要求1-9任一所述的前端框架实现方法。