CN111273899B - 代码处理方法、装置、电子设备及存储介质 - Google Patents

Abstract

本公开关于一种代码处理方法、装置、电子设备及存储介质。所述方法，包括：接收针对代码编辑器的启动指令；根据所述启动指令，通过浏览器对所述代码编辑器进行渲染展示，得到代码编辑器页面；通过所述代码编辑器页面中的代码输入区域接收待执行代码，并在所述代码编辑器页面中的结果展示区域展示所述待执行代码的执行结果。解决了相关技术中代码开发和测试过程操作繁琐，时间成本较大，效率较低的技术问题。取得了提高代码开发和测试过程的效率的有益效果。

Description

代码处理方法、装置、电子设备及存储介质

技术领域

本公开涉及计算机技术领域，尤其涉及一种代码处理方法、装置、电子设备及存储介质。

背景技术

在前端开发工程师日常开发的过程中或者学习过程中会遇到一些需要测试的代码片段，而测试或者学习之前需要下载编辑器以及相关调试工具，并且需要完整的输入编程语言所规定的固定模板才可以进行代码调试。例如，为了进行代码测试，需要下载代码编辑器，进而在本地的代码编辑器新建文件，新建代码模板，保存文件并在浏览器中运行，而且需要另外打开控制台以查看代码输出。另外，如果重新提交代码，则需要在浏览器中重新刷新页面，以获取最新页面展示。

有上述分析可知，相关技术中，前端开发人员在学习过程中为了进行代码测试，需要进行新建文件、新建模板、保存代码、刷新浏览器、打开控制台等一系列操作，使得在代码开发和测试过程操作繁琐，时间成本较大，效率较低。

发明内容

本公开提供一种代码处理方法、装置、电子设备及存储介质，以至少解决相关技术中代码开发和测试过程操作繁琐，时间成本较大，效率较低的问题。本公开的技术方案如下：

根据本公开实施例的第一方面，提供一种代码处理方法，包括：

接收针对代码编辑器的启动指令；

根据所述启动指令，通过浏览器对所述代码编辑器进行渲染展示，得到代码编辑器页面；

通过所述代码编辑器页面中的代码输入区域接收待执行代码，并在所述代码编辑器页面中的结果展示区域展示所述待执行代码的执行结果。

可选地，所述代码编辑器页面中还包括控制台输出区域，所述方法还包括：

获取与所述代码编辑器页面关联的控制台的输出数据，并在所述代码编辑器页面中的控制台输出区域中展示所述输出数据。

可选地，所述获取所述与所述代码编辑器页面关联的控制台的输出数据，并在所述代码编辑器页面中的控制台输出区域中展示所述输出数据的步骤，包括：

通过在所述代码编辑器页面的加载阶段重写的控制台函数，将与所述代码编辑器页面关联的控制台的输出数据绑定至预设的变量数组中，并在所述代码编辑器页面中的控制台输出区域显示所述变量数组。

可选地，所述通过所述代码编辑器页面中的代码输入区域接收待执行代码，并在所述代码编辑器页面中的结果展示区域展示所述待执行代码的执行结果的步骤，包括：

根据接收到针对所述代码编辑器页面中任一模板标识的选择指令，在所述代码输入区域展示所述模板标识对应的模板；

在通过所述代码输入区域接收编辑操作的过程中，响应于所述代码编辑器当前接收到的编辑操作为有内容的输入，根据所述编辑操作的输入内容，进行代码自动提示；

响应于所述代码输入区域在预设时间段内未接收到编辑操作，在所述结果展示区域中展示所述代码输入区域中的待执行代码的执行结果。

可选地，所述根据所述启动指令，通过浏览器对所述代码编辑器进行渲染展示，得到代码编辑器页面的步骤，包括：

响应于首次接收到所述启动指令，和/或在当前客户端的本地未检测到所述代码编辑器的文件包，从服务器获取所述代码编辑器的文件包；其中，所述文件包中包含在所述服务器中渲染完成的Nuxt框架；

响应于检测到所述Nuxt框架的所处环境为前端环境，根据所述文件包加载并渲染展示所述代码编辑器的编辑器插件。

可选地，所述根据所述文件包加载并渲染展示所述代码编辑器的编辑器插件的步骤，包括：

根据所述代码编辑器的主配置文件中配置的压缩参数，获取用以组成所述编辑器插件的各个压缩文件并解压缩，得到所述编辑器插件的至少一个组件；

通过所述编辑器插件对应的配置文件，在所述代码编辑器页面中引入所述组件，并通过所述代码编辑器页面的mounted钩子函数，初始化所述代码编辑器页面，同时将初始化后的编辑器插件与所述代码编辑器页面中的代码输入区域绑定。

可选地，在所述通过所述代码编辑器页面中的代码输入区域接收待执行代码，并在所述代码编辑器页面中的结果展示区域展示所述待执行代码的执行结果的步骤之后，还包括：

保存所述代码编辑器页面中显示的内容，并在下次启动所述代码编辑器时，在渲染完成的代码编辑器页面中展示上一次在所述代码编辑器页面中显示的内容。

根据本公开实施例的第二方面，提供一种代码处理装置，包括：

启动指令接收模块，被配置为执行接收针对代码编辑器的启动指令；

代码编辑器渲染模块，被配置为执行根据所述启动指令，通过浏览器对所述代码编辑器进行渲染展示，得到代码编辑器页面；

代码接收处理模块，被配置为执行通过所述代码编辑器页面中的代码输入区域接收待执行代码，并在所述代码编辑器页面中的结果展示区域展示所述待执行代码的执行结果。

可选地，所述代码编辑器页面中还包括控制台输出区域，所述装置还包括：

控制台数据展示模块，被配置为执行获取与所述代码编辑器页面关联的控制台的输出数据，并在所述代码编辑器页面中的控制台输出区域中展示所述输出数据。

可选地，所述控制台数据展示模块，具体被配置为执行：通过在所述代码编辑器页面的加载阶段重写的控制台函数，将与所述代码编辑器页面关联的控制台的输出数据绑定至预设的变量数组中，并在所述代码编辑器页面中的控制台输出区域显示所述变量数组。

可选地，所述代码接收处理模块，包括：

模板选择显示子模块，被配置为执行根据接收到针对所述代码编辑器页面中任一模板标识的选择指令，在所述代码输入区域展示所述模板标识对应的模板；

代码自动提示子模块，被配置为执行在通过所述代码输入区域接收编辑操作的过程中，响应于所述代码编辑器当前接收到的编辑操作为有内容的输入，根据所述编辑操作的输入内容，进行代码自动提示；

代码处理子模块，被配置为执行响应于所述代码输入区域在预设时间段内未接收到编辑操作，在所述结果展示区域中展示所述代码输入区域中的待执行代码的执行结果。

可选地，所述代码编辑器渲染模块，包括：

文件包获取子模块，被配置为执行响应于首次接收到所述启动指令，和/或在当前客户端的本地未检测到所述代码编辑器的文件包，从服务器获取所述代码编辑器的文件包；其中，所述文件包中包含在所述服务器中渲染完成的Nuxt框架；

编辑器插件渲染子模块，被配置为执行响应于检测到所述Nuxt框架的所处环境为前端环境，根据所述文件包加载并渲染展示所述代码编辑器的编辑器插件。

可选地，所述编辑器插件渲染子模块，包括：

编辑器插件获取单元，被配置为执行根据所述代码编辑器的主配置文件中配置的压缩参数，获取用以组成所述编辑器插件的各个压缩文件并解压缩，得到所述编辑器插件的至少一个组件；

编辑器插件渲染单元，被配置为执行通过所述编辑器插件对应的配置文件，在所述代码编辑器页面中引入所述组件，并通过所述代码编辑器页面的mounted钩子函数，初始化所述代码编辑器页面，同时将初始化后的编辑器插件与所述代码编辑器页面中的代码输入区域绑定。

可选地，所述装置还包括：

内容记录回溯模块，被配置为执行保存所述代码编辑器页面中显示的内容，并在下次启动所述代码编辑器时，在渲染完成的代码编辑器页面中展示上一次在所述代码编辑器页面中显示的内容。

根据本公开实施例的第三方面，提供一种电子设备，包括：

处理器；

用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为执行所述指令，以实现如前述的任意一种代码处理方法。

根据本公开实施例的第四方面，提供一种存储介质，当所述存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行如前述的任意一种代码处理方法。

根据本公开实施例的第五方面，提供一种计算机程序产品，当所述存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行如前述的任意一种代码处理方法。

本公开的实施例提供的技术方案至少带来以下有益效果：在本申请实施例中，通过接收针对代码编辑器的启动指令；根据所述启动指令，通过浏览器对所述代码编辑器进行渲染展示，得到代码编辑器页面；通过所述代码编辑器页面中的代码输入区域接收待执行代码，并在所述代码编辑器页面中的结果展示区域展示所述待执行代码的执行结果。可以在输入代码的同时实时展示代码执行结果的变化，提高代码开发测试的效率。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理，并不构成对本公开的不当限定。

图1是根据一示例性实施例示出的一种代码处理方法的流程图。

图2是根据一示例性实施例示出的另一种代码处理方法的流程图。

图3是根据一示例性实施例示出的一种代码编辑器页面的示意图。

图4是根据一示例性实施例示出的一种代码测试装置的框图。

图5是根据一示例性实施例示出的另一种代码测试装置的框图。

图6是根据一示例性实施例示出的一种装置的框图。

图7是根据一示例性实施例示出的另一种装置的框图。

具体实施方式

为了使本领域普通人员更好地理解本公开的技术方案，下面将结合附图，对本公开实施例中的技术方案进行清楚、完整地描述。

需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

图1是根据一示例性实施例示出的一种代码处理方法的流程图，如图1所示，代码处理方法可用于电脑、笔记本、手机、服务器等电子设备中，包括以下步骤。

在步骤S11中，接收针对代码编辑器的启动指令。

在步骤S12中，根据所述启动指令，通过浏览器对所述代码编辑器进行渲染展示，得到代码编辑器页面。

在步骤S13中，通过所述代码编辑器页面中的代码输入区域接收待执行代码，并在所述代码编辑器页面中的结果展示区域展示所述待执行代码的执行结果。

在本申请实施例中，为了提高代码测试效率，降低时间成本，可以预先设置一可在线的前端代码编辑器，也即可在浏览器中渲染展示的代码编辑器，通过该代码编辑器可直接在浏览器中进行代码输入，并且在编辑器页面中可以设置指定区域进行实时的代码编译后的成果展示，从而可以直接减少前端开发人员在学习、测试、开发等过程中需要新建文件、保存代码，刷新浏览器等一系列操作，提高代码测试效率。

具体地，在本申请实施例中，如果接收到针对代码编辑器的启动指令，则可以根据所述启动指令，通过浏览器对所述代码编辑器进行渲染展示，得到代码编辑器页面。而且，在渲染得到的代码编辑器页面中可以至少包括代码输入区域和结果展示区域。那么则可以通过所述代码编辑器页面中的代码输入区域接收待执行代码，并在所述代码编辑器页面中的结果展示区域展示所述待执行代码的执行结果。

其中，在本申请实施例中，可以通过任何可用方式对代码编辑器进行渲染展示，对此本申请实施例不加以限定。而且，为了实现在代码编辑器页面中可以至少包括代码输入区域和结果展示区域，以实时展示代码编译后的执行结果，可以在预先配置代码编辑器的安装包时，在代码编辑器页面中设置代码输入区域和结果展示区域。

例如，在本申请实施例中，底层可以使用构建数据驱动的web界面的渐进式框架vue.js技术，配置基于Vue.js的通用应用框架nuxt.js技术框架作为前端开发模板。在针对代码编辑器进行代码开发完成之后，则可以上传代码至服务器并打包，而且可以通过pm2等进程管理工具守护进程启动后端文件，也即服务器中的代码编辑器的安装包文件。

另外，在本申请实施例中，可以通过任何可用方式接收针对代码编辑器的启动指令，对此本申请实施例不加以限定。例如，可以在浏览器的菜单栏中增加一用以触发启动代码编辑器的控件，用户可以通过触发该控件输入针对代码编辑器的启动指令，进而则可以在相应的浏览器中渲染展示相应的代码编辑器。在本申请实施例中，可以用以实现代码编辑器的渲染展示的浏览器可以根据需求进行自定义设置，对此本申请实施例不加以限定。

在本申请实施例中，通过接收针对代码编辑器的启动指令；根据所述启动指令，通过浏览器对所述代码编辑器进行渲染展示，得到代码编辑器页面；通过所述代码编辑器页面中的代码输入区域接收待执行代码，并在所述代码编辑器页面中的结果展示区域展示所述待执行代码的执行结果。可以在输入代码的同时实时展示代码执行结果的变化，提高代码开发测试的效率。

参照图2，在本申请实施例中，所述代码编辑器页面中还包括控制台输出区域，所述代码处理方法还可以包括：

步骤S14，获取与所述代码编辑器页面关联的控制台的输出数据，并在所述代码编辑器页面中的控制台输出区域中展示所述输出数据。

另外，在实际应用中，用户输入的代码可能存在错误使得编译失败，在相关技术中用户需要另外手动触发启动或者是切换至代码编辑器的控制台界面，以查看控制台报错数据，用户无法在输入代码的同时实时查看得到控制台数据。

因此，在本申请实施例中，为了方便用户可以实时查看控制台报错，可以设置代码编辑器页面中还包括控制台输出区域，那么此时还可以获取与所述代码编辑器页面关联的控制台的输出数据，并在所述代码编辑器页面中的控制台输出区域中展示所述输出数据。

其中，在本申请实施例中，可以通过任何可用方式获取与所述代码编辑器页面关联的控制台的输出数据，对此本申请实施例不加以限定。例如，可以在用户授权的情况下，通过钩子函数拦截控制台的输出数据，并在码编辑器页面中的控制台输出区域中展示，等等。而且，在本申请实施例中，在代码编辑器页面中展示控制台的输出数据时，可以不调整输入数据的原始格式，当然也可以根据控制台输出区域的具体位置、尺寸等调整输入数据的格式，以使其适应控制台输出区域，具体的可以根据需求进行自定义设置，对此本申请实施例不加以限定。

可选地，在本申请实施例中，所述步骤S14进一步可以包括：通过在所述代码编辑器页面的加载阶段重写的控制台函数，将与所述代码编辑器页面关联的控制台的输出数据绑定至预设的变量数组中，并在所述代码编辑器页面中的控制台输出区域显示所述变量数组。

在本申请实施例中，为了及时获取控制台的输出数据，以实时在代码编辑器页面中展示，可以在页面的加载阶段重写相应代码编辑器的控制台(console)函数，将控制台每次的输出数据绑定至预设的变量数组中，并将变量数组在代码编辑器页面中的控制台输出区域中显示，从而可以实现在控制台输出区域中展示控制台每次的输出数据，即可实现页面的实时数据输出观察。

当然，根据需求也可以在其他时机重写代码编辑器的控制台函数，具体的可以根据需求进行自定义设置，对此本申请实施例不加以限定。而且，在本申请实施例中，变量数组可以根据需求进行自定义设置，可以通过任何可用方式实现将变量数组绑定至代码编辑器页面中的控制台输出区域，而且绑定方式可以为双向数据绑定，也可以为单向绑定，对此本申请实施例不加以限定。

如图3所示为一种代码编辑器页面的示意图。其中，左侧界面为代码输入区域，右侧上部区域为结果展示区域，右侧下部区域为控制台输出区域。此时，在代码输入区域接收到待执行代码之后，则可以在右侧的结果展示区域中实时展示待执行代码的执行结果，同时可以在控制台输出区域展示控制台针对待执行代码的输出数据。

参照图2，在本申请实施例中，所述步骤S13进一步可以包括：

步骤S131，根据接收到针对所述代码编辑器页面中任一模板标识的选择指令，在所述代码输入区域展示所述模板标识对应的模板；

步骤S132，在通过所述代码输入区域接收编辑操作的过程中，响应于所述代码编辑器当前接收到的编辑操作为有内容的输入，根据所述编辑操作的输入内容，进行代码自动提示；

步骤S133，响应于所述代码输入区域在预设时间段内未接收到编辑操作，在所述结果展示区域中展示所述代码输入区域中的待执行代码的执行结果。

在实际应用中，存在多种不同类型语言，而且针对同一语言类型，在不同的应用场景下，也可能存在比较常用的代码模板，如果用户每次都需要完全自行输入全部代码，可能每次都需要重复输入同样的内容，影响代码测试效率。因此，在本申请实施例中，可以预先整理多套模板可供用户选择，实现模板之间的一键切换无需重新编写。而且，为了方便用户选择模板，可以在代码编辑器页面中设置用以选择模板的快捷键，通过触发该快捷键可以触发在前端的代码编辑器页面中展示模板列表，或者直接在代码编辑器页面中设置用以选择模板的的筛选框，用户可以通过模板列表或者筛选框选择当前所需的模板。例如，在图3所示的代码编辑器页面中，此时的代码输入区域中展示的代码中颜色较暗部分则为用户当前选定的目标标识对应的模板。

另外，在本申请实施例中，为了满足用户的个性化需求，还可以开放一设置模板的接口，用户还可以将自定义的模板通过相应的接口上传至代码编辑器，而且在本申请实施例中，用户也可以根据需求对预设的模板中的部分代码进行自定义调整，以对其前端展示的模板进行更新。而且，在本申请实施例中，在实现前端页面中的代码切换时，可以依靠vue底层的双向数据绑定实时切换前端页面的代码展示效果。其中，vue是一套构建用户界面的渐进式框架。

那么，在本申请实施例中，则可以根据接收到针对代码编辑器页面中任一模板标识的选择指令，则可以在代码输入区域展示相应模板标识对应的模板，而如果用户又选定另一模板标识，则相应地可以切换至另一模板标识对应的模板。其中的模板标识可以为可以唯一性地表征各个模板身份的标识，具体地每个模板的模板标识可以根据需求进行自定义设置，对此本申请实施例不加以限定。

另外，在本申请实施例中，由于代码编辑器还可以涉及自动补全，代码高亮等功能，所以还可以根据需求配置包括但不限于以下属性：mode(语言模式，例如可以采用html+js等语言模式)、theme(主题，例如monokai等主题)、tabSize(代码缩进数，例如可以默认设置为2)、lineNumbers(显示代码行数)、smartIndent(自动缩进)、autofocus(自动聚焦)、styleActiveLine(光标所在行数高亮)、matchBrackets(括号匹配)、showCursorWhenSelecting(选择时显示光标)、lineWrapping(线条包装)、foldGutter、gutters(代码折叠)、autoCloseTags(html标签自动匹配)，等等。在本申请实施例中，可以通过任何可用方式设置上述属性，以方便根据需求针对上述属性进行自定义设置或调整。

在实际应用中，用户在输入代码的过程中，可能会忘记部分函数或者参数的具体拼写方式，从而影响代码编辑效率，或者导致代码编辑出现错误。因此，在本申请实施例中，为了避免上述情况，可以在代码编辑器设置自动提示。具体地，在通过所述代码输入区域接收编辑操作的过程中，如果代码编辑器当前接收到的编辑操作为有内容的输入，则可以根据相应的编辑操作的输入内容，进行代码自动提示。例如，可以通过onchange事件监控代码编辑器内的代码输入，判断用的行为是增加还是删除，当用户行为是增加时，判断用户的输入是否为空格，当检测用户的输入含有具体内容时，也即编辑操作为有内容的输入时，则可以进行代码自动提示。

具体的代码自动提示的方式和位置等均可以根据需求进行自定义设置，对此本申请实施例不加以限定。例如，可以根据相应的编辑操作，获取其包含其输入内容在内的全部函数、参数等等，进而根据各个提示内容与输入内容的关联程度从高到低的顺序构建代码提示列表并在光标下方展示，等等。

另外，在本申请实施例中，为了实现代码执行结果的实时展示同时避免资源浪费，可以检测代码输入区域是否接收到编辑操作，如果代码输入区域在预设时间段内未接收到编辑操作，则可以在结果展示区域中展示所述代码输入区域中的待执行代码的执行结果。其中的预设时间段可以根据需求进行自定义设置，对此本申请实施例不加以限定。例如，可以设置预设时间段为3秒，等等。

需要说明的是，在本发明实施例中，可以并不限定步骤S131-S133的执行顺序及执行次数，可以针对用户的操作情况分别执行对应的步骤。

参照图2，在本申请实施例中，所述步骤S12进一步可以包括：

步骤S121，响应于首次接收到所述启动指令，和/或在当前客户端的本地未检测到所述代码编辑器的文件包，从服务器获取所述代码编辑器的文件包；其中，所述文件包中包含在所述服务器中渲染完成的Nuxt框架；

步骤S122，响应于检测到所述Nuxt框架的所处环境为前端环境，根据所述文件包加载并渲染展示所述代码编辑器的编辑器插件。

在实际应用中，如果客户端本地已经缓存有代码编辑器的文件包，那么为了提高响应效率，则可以直接基于本地的文件包进行代码编辑器的渲染展示。而如果如果当前的客户端是首次接收到针对代码编辑器的启动指令，那么本地一般不会存在缓存的代码编辑器的文件包。因此，在本申请实施例中，如果首次接收到针对代码编辑器的启动指令，和/或在当前客户端的本地未检测到所述代码编辑器的文件包，则可以从服务器获取所述代码编辑器的文件包。

而且如前述，在本申请实施例中，可以配置Nuxt.js技术框架作为前端开发模板。而且由于nuxt框架整体为后端渲染，因此可以在服务器中完成对nuxt框架的渲染，那么此时在从服务器获取的文件包中至少包含了已经在服务器中渲染完成的Nuxt框架。当然，在本申请实施例中，如果采用了其他可以在客户端渲染的框架，那么也可以在客户端进行框架渲染，此时文件包中包含的则为未渲染前的Nuxt框架。

另外，在本申请实施例中，可以通过引入Codemirrow等编辑器插件进行在线代码编辑器开发，而且Codemirrow所需渲染环境为前端，因此在本申请实施例中，可以通过检测渲染完成的Nuxt框架是否处于前端环境，如果检测到Nuxt框架的所处环境为前端环境，则可以根据文件包加载并渲染展示相应的代码编辑器的编辑器插件，以完成代码编辑器页面的渲染展示。

具体地，在本申请实施例中，可以通过任何可用方式检测Nuxt框架的所处环境是否为前端环境，对此本申请实施例不加以限定。例如，可以通过在mounted函数中的process.client参数判断Nuxt框架所处环境是否为前端环境。当Nuxt框架所处环境是否为前端环境时，process.client参数的取值可以为前端环境对应的值。其中，mounted在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作，mounted通常是在一些插件的使用或者组件的使用中进行操作。

可选地，在本申请实施例中，所述步骤S122进一步可以包括：

步骤S1221，根据所述代码编辑器的主配置文件中配置的压缩参数，获取用以组成所述编辑器插件的各个压缩文件并解压缩，得到所述编辑器插件的至少一个组件；

步骤S1222，通过所述编辑器插件对应的配置文件，在所述代码编辑器页面中引入所述组件，并通过所述代码编辑器页面的mounted钩子函数，初始化所述代码编辑器页面，同时将初始化后的编辑器插件与所述代码编辑器页面中的代码输入区域绑定。

另外，由于codemirrow等编辑器插件自身包体积过大，在主入口配置文件加载编辑器插件容易导致首屏加载过慢影响性能。因此在本申请实施例中，可以采用页面单独引入加载的方式以提高性能首屏，也即通过编辑器插件对应的配置文件中引入编辑器插件，并在主配置文件中配置optimization(压缩参数/打包参数，例如压缩方式、压缩路径，等等)。

另外，在本申请实施例中，为了防止大量静态文件压缩至一个文件中，避免增加浏览器的请求时间。还可以通过拆分编辑器插件中的chunks(块)进行各个组件单独压缩。其中，编辑器插件的拆分方式可以根据需求进行自定义设置，对此本申请实施例不加以限定。例如，可以将编辑器插件拆分出lib，addon，keymap，mode，theme五个组件，分别代表主文件，插件，快捷键，编程语言模式以及主题。那么则可以分别将五个组件分别压缩至不同的文件中。

那么在前端进行编辑器插件的渲染时，则可以根据所述代码编辑器的主配置文件中配置的压缩参数，获取用以组成所述编辑器插件的各个压缩文件并解压缩，得到所述编辑器插件的各个组件；进而则可以通过编辑器插件对应的配置文件，在所述代码编辑器页面中引入所述组件，并通过所述代码编辑器页面的mounted钩子函数，初始化所述代码编辑器页面，而且为了展示编辑器插件，可以将初始化后的编辑器插件绑定在代码编辑器页面中建立的代码输入区域，之后则可以通过代码输入区域进行代码输入并展示。

参照图2，在本申请实施例中，在所述步骤S13之后，进一步可以包括：

步骤S15，保存所述代码编辑器页面中显示的内容，并在下次启动所述代码编辑器时，在渲染完成的代码编辑器页面中展示上一次在所述代码编辑器页面中显示的内容。

另外，在实际应用中，用户在进行代码编辑过程中，可能会由于操作失误关闭代码编辑器，或者是在下一次重启代码编辑器时仍然期望可以继续上一次的代码编辑，等等。因此，在本申请实施例中，为了满足用户的上述需求，还可以保存代码编辑器页面中显示的内容，并在下次启动所述代码编辑器时，在渲染完成的代码编辑器页面中展示上一次在所述代码编辑器页面中显示的内容。

其中，代码编辑器页面中显示的内容的保存地址可以根据需求进行自定义设置，对此本申请实施例不加以限定。例如，可以设置将代码编辑器页面中显示的内容保存至浏览器本地缓存中，等等。

而且，在本申请实施例中，为了保证所保存内容的时效性，可以周期性地保存代码编辑器页面中显示的内容。例如，可以在前端的代码编辑器中内置了一个定时器，每三秒对代码编辑器页面中显示的内容进行一次本地缓存的存储，将每次用户的最新输入，以及执行结果和控制台的输出数据等存储至浏览器本地缓存中。当用户下次在相应客户端启动代码编辑器时，可根据用户的缓存内容直接展示上次在所述代码编辑器页面中显示的内容。

在本申请实施例中，通过获取与所述代码编辑器页面关联的控制台的输出数据，并在所述代码编辑器页面中的控制台输出区域中展示所述输出数据。并且，通过在所述代码编辑器页面的加载阶段重写的控制台函数，将与所述代码编辑器页面关联的控制台的输出数据绑定至预设的变量数组中，并在所述代码编辑器页面中的控制台输出区域显示所述变量数组。从而可以在集成控制台输出，无需在浏览器内开启调试工具即可展示控制台最新输出以及报错等。

而且，在本申请实施例中，还可以根据接收到针对所述代码编辑器页面中任一模板标识的选择指令，在所述代码输入区域展示所述模板标识对应的模板；在通过所述代码输入区域接收编辑操作的过程中，响应于所述代码编辑器当前接收到的编辑操作为有内容的输入，根据所述编辑操作的输入内容，进行代码自动提示；响应于所述代码输入区域在预设时间段内未接收到编辑操作，在所述结果展示区域中展示所述代码输入区域中的待执行代码的执行结果。从而可以配置各种前端模板，实现代码快速输入及切换，而且可以实现页面实时更新，无需手动保存刷新浏览器，降低操作繁琐性以及执行结果的实时性；同时还可以通过自动代码提示提高代码输入效率，降低输入代码的出错率。

另外，在本申请实施例中，通过响应于首次接收到所述启动指令，和/或在当前客户端的本地未检测到所述代码编辑器的文件包，从服务器获取所述代码编辑器的文件包；其中，所述文件包中包含在所述服务器中渲染完成的Nuxt框架；响应于检测到所述Nuxt框架的所处环境为前端环境，根据所述文件包加载并渲染展示所述代码编辑器的编辑器插件。并且，根据所述代码编辑器的主配置文件中配置的压缩参数，获取用以组成所述编辑器插件的各个压缩文件并解压缩，得到所述编辑器插件的至少一个组件；通过所述编辑器插件对应的配置文件，在所述代码编辑器页面中引入所述组件，并通过所述代码编辑器页面的mounted钩子函数，初始化所述代码编辑器页面，同时将初始化后的编辑器插件与所述代码编辑器页面中的代码输入区域绑定。从而可以提高代码编辑器的渲染展示效果，提高代码编辑器的加载速度，同时降低浏览器的请求时间。

进一步地，在本申请实施例中，还可以保存所述代码编辑器页面中显示的内容，并在下次启动所述代码编辑器时，在渲染完成的代码编辑器页面中展示上一次在所述代码编辑器页面中显示的内容。以实现自动保存，并在下次直接恢复上次展示的内容。提高代码开发测试的效率。

本发明所集成的这些功能可以让前端开发工程师在调试某一段代码或者学习某一段功能时快速集成模板，并可以实时观察页面以及控制台的变化，提高开发以及学习效率，无需每次都新建模板刷新页面。

图4是根据一示例性实施例示出的一种代码处理装置框图。参照图4，该装置包括启动指令接收模块21，代码编辑器渲染模块22和代码接收处理模块23。

启动指令接收模块21，被配置为执行接收针对代码编辑器的启动指令；

代码编辑器渲染模块22，被配置为执行根据所述启动指令，通过浏览器对所述代码编辑器进行渲染展示，得到代码编辑器页面；

代码接收处理模块23，被配置为执行通过所述代码编辑器页面中的代码输入区域接收待执行代码，并在所述代码编辑器页面中的结果展示区域展示所述待执行代码的执行结果。

在本申请实施例中，通过接收针对代码编辑器的启动指令；根据所述启动指令，通过浏览器对所述代码编辑器进行渲染展示，得到代码编辑器页面；通过所述代码编辑器页面中的代码输入区域接收待执行代码，并在所述代码编辑器页面中的结果展示区域展示所述待执行代码的执行结果。可以在输入代码的同时实时展示代码执行结果的变化，提高代码开发测试的效率。

参照图5，在本申请实施例中，所述代码编辑器页面中还包括控制台输出区域，所述装置还可以包括：

控制台数据展示模块24，被配置为执行获取与所述代码编辑器页面关联的控制台的输出数据，并在所述代码编辑器页面中的控制台输出区域中展示所述输出数据。

可选地，在本申请实施例中，所述控制台数据展示模块24，进一步地具体可以被配置为执行：通过在所述代码编辑器页面的加载阶段重写的控制台函数，将与所述代码编辑器页面关联的控制台的输出数据绑定至预设的变量数组中，并在所述代码编辑器页面中的控制台输出区域显示所述变量数组。

参照图5，在本申请实施例中，所述代码接收处理模块23，进一步可以包括：

模板选择显示子模块231，被配置为执行根据接收到针对所述代码编辑器页面中任一模板标识的选择指令，在所述代码输入区域展示所述模板标识对应的模板；

代码自动提示子模块232，被配置为执行在通过所述代码输入区域接收编辑操作的过程中，响应于所述代码编辑器当前接收到的编辑操作为有内容的输入，根据所述编辑操作的输入内容，进行代码自动提示；

代码处理子模块233，被配置为执行响应于所述代码输入区域在预设时间段内未接收到编辑操作，在所述结果展示区域中展示所述代码输入区域中的待执行代码的执行结果。

参照图5，在本申请实施例中，所述代码编辑器渲染模块22，进一步可以包括：

文件包获取子模块221，被配置为执行响应于首次接收到所述启动指令，和/或在当前客户端的本地未检测到所述代码编辑器的文件包，从服务器获取所述代码编辑器的文件包；其中，所述文件包中包含在所述服务器中渲染完成的Nuxt框架；

编辑器插件渲染子模块222，被配置为执行响应于检测到所述Nuxt框架的所处环境为前端环境，根据所述文件包加载并渲染展示所述代码编辑器的编辑器插件。

可选地，在本申请实施例中，所述编辑器插件渲染子模块222，进一步可以包括：

编辑器插件获取单元，被配置为执行根据所述代码编辑器的主配置文件中配置的压缩参数，获取用以组成所述编辑器插件的各个压缩文件并解压缩，得到所述编辑器插件的至少一个组件；

编辑器插件渲染单元，被配置为执行通过所述编辑器插件对应的配置文件，在所述代码编辑器页面中引入所述组件，并通过所述代码编辑器页面的mounted钩子函数，初始化所述代码编辑器页面，同时将初始化后的编辑器插件与所述代码编辑器页面中的代码输入区域绑定。

参照图5，在本申请实施例中，所述装置还可以包括：

内容记录回溯模块25，被配置为执行保存所述代码编辑器页面中显示的内容，并在下次启动所述代码编辑器时，在渲染完成的代码编辑器页面中展示上一次在所述代码编辑器页面中显示的内容。

在本申请实施例中，通过获取与所述代码编辑器页面关联的控制台的输出数据，并在所述代码编辑器页面中的控制台输出区域中展示所述输出数据。并且，通过在所述代码编辑器页面的加载阶段重写的控制台函数，将与所述代码编辑器页面关联的控制台的输出数据绑定至预设的变量数组中，并在所述代码编辑器页面中的控制台输出区域显示所述变量数组。从而可以在集成控制台输出，无需在浏览器内开启调试工具即可展示控制台最新输出以及报错等。

而且，在本申请实施例中，还可以根据接收到针对所述代码编辑器页面中任一模板标识的选择指令，在所述代码输入区域展示所述模板标识对应的模板；在通过所述代码输入区域接收编辑操作的过程中，响应于所述代码编辑器当前接收到的编辑操作为有内容的输入，根据所述编辑操作的输入内容，进行代码自动提示；响应于所述代码输入区域在预设时间段内未接收到编辑操作，在所述结果展示区域中展示所述代码输入区域中的待执行代码的执行结果。从而可以配置各种前端模板，实现代码快速输入及切换，而且可以实现页面实时更新，无需手动保存刷新浏览器，降低操作繁琐性以及执行结果的实时性；同时还可以通过自动代码提示提高代码输入效率，降低输入代码的出错率。

另外，在本申请实施例中，通过响应于首次接收到所述启动指令，和/或在当前客户端的本地未检测到所述代码编辑器的文件包，从服务器获取所述代码编辑器的文件包；其中，所述文件包中包含在所述服务器中渲染完成的Nuxt框架；响应于检测到所述Nuxt框架的所处环境为前端环境，根据所述文件包加载并渲染展示所述代码编辑器的编辑器插件。并且，根据所述代码编辑器的主配置文件中配置的压缩参数，获取用以组成所述编辑器插件的各个压缩文件并解压缩，得到所述编辑器插件的至少一个组件；通过所述编辑器插件对应的配置文件，在所述代码编辑器页面中引入所述组件，并通过所述代码编辑器页面的mounted钩子函数，初始化所述代码编辑器页面，同时将初始化后的编辑器插件与所述代码编辑器页面中的代码输入区域绑定。从而可以提高代码编辑器的渲染展示效果，提高代码编辑器的加载速度，同时降低浏览器的请求时间。

进一步地，在本申请实施例中，还可以保存所述代码编辑器页面中显示的内容，并在下次启动所述代码编辑器时，在渲染完成的代码编辑器页面中展示上一次在所述代码编辑器页面中显示的内容。以实现自动保存，并在下次直接恢复上次展示的内容。提高代码开发测试的效率。

关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

图6是根据一示例性实施例示出的一种用于代码处理的装置300的框图。例如，装置300可以是移动电话，计算机，数字广播终端，消息收发设备，游戏控制台，平板设备，医疗设备，健身设备，个人数字助理等电子设备。

参照图6，装置300可以包括以下一个或多个组件：处理组件302，存储器304，电力组件306，多媒体组件308，音频组件310，输入/输出(I/O)的接口312，传感器组件314，以及通信组件316。

处理组件302通常控制装置300的整体操作，诸如与显示，电话呼叫，数据通信，相机操作和记录操作相关联的操作。处理组件302可以包括一个或多个处理器320来执行指令，以完成上述的方法的全部或部分步骤。此外，处理组件302可以包括一个或多个模块，便于处理组件302和其他组件之间的交互。例如，处理组件302可以包括多媒体模块，以方便多媒体组件308和处理组件302之间的交互。

存储器304被配置为存储各种类型的数据以支持在设备300的操作。这些数据的示例包括用于在装置300上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图片，视频等。存储器304可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。

电源组件306为装置300的各种组件提供电力。电源组件306可以包括电源管理系统，一个或多个电源，及其他与为装置300生成、管理和分配电力相关联的组件。

多媒体组件308包括在所述装置300和用户之间的提供一个输出接口的屏幕。在一些实施例中，屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与所述触摸或滑动操作相关的持续时间和压力。在一些实施例中，多媒体组件308包括一个前置摄像头和/或后置摄像头。当设备300处于操作模式，如拍摄模式或视频模式时，前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜系统或具有焦距和光学变焦能力。

音频组件310被配置为输出和/或输入音频信号。例如，音频组件310包括一个麦克风(MIC)，当装置300处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器304或经由通信组件316发送。在一些实施例中，音频组件310还包括一个扬声器，用于输出音频信号。

I/O接口312为处理组件302和外围接口模块之间提供接口，上述外围接口模块可以是键盘，点击轮，按钮等。这些按钮可包括但不限于：主页按钮、音量按钮、启动按钮和锁定按钮。

传感器组件314包括一个或多个传感器，用于为装置300提供各个方面的状态评估。例如，传感器组件314可以检测到设备300的打开/关闭状态，组件的相对定位，例如所述组件为装置300的显示器和小键盘，传感器组件314还可以检测装置300或装置300一个组件的位置改变，用户与装置300接触的存在或不存在，装置300方位或加速/减速和装置300的温度变化。传感器组件314可以包括接近传感器，被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件314还可以包括光传感器，如CMOS或CCD图像传感器，用于在成像应用中使用。在一些实施例中，该传感器组件314还可以包括加速度传感器，陀螺仪传感器，磁传感器，压力传感器或温度传感器。

通信组件316被配置为便于装置300和其他设备之间有线或无线方式的通信。装置300可以接入基于通信标准的无线网络，如WiFi，运营商网络(如2G、3G、4G或5G)，或它们的组合。在一个示例性实施例中，通信组件316经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中，所述通信组件316还包括近场通信(NFC)模块，以促进短程通信。例如，在NFC模块可基于射频识别(RFID)技术，红外数据协会(IrDA)技术，超宽带(UWB)技术，蓝牙(BT)技术和其他技术来实现。

在示例性实施例中，装置300可以被一个或多个应用专用集成电路(ASIC)、数字信号处理器(DSP)、数字信号处理设备(DSPD)、可编程逻辑器件(PLD)、现场可编程门阵列(FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述方法。

在示例性实施例中，还提供了一种包括指令的存储介质，例如包括指令的存储器304，上述指令可由装置300的处理器320执行以完成上述方法。可选地，存储介质可以是非临时性计算机可读存储介质，例如，所述非临时性计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

图7是根据一示例性实施例示出的一种用于代码处理的装置400的框图。例如，装置400可以被提供为一服务器。参照图7，装置400包括处理组件422，其进一步包括一个或多个处理器，以及由存储器432所代表的存储器资源，用于存储可由处理组件422的执行的指令，例如应用程序。存储器432中存储的应用程序可以包括一个或一个以上的每一个对应于一组指令的模块。此外，处理组件422被配置为执行指令，以执行上述代码处理方法。

装置400还可以包括一个电源组件426被配置为执行装置400的电源管理，一个有线或无线网络接口450被配置为将装置400连接到网络，和一个输入输出(I/O)接口458。装置400可以操作基于存储在存储器432的操作系统，例如Windows ServerTM，Mac OS XTM，UnixTM,LinuxTM，FreeBSDTM，等等。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims (12)

1.一种代码处理方法，其特征在于，包括：

接收针对代码编辑器的启动指令；

根据所述启动指令，通过浏览器对所述代码编辑器进行渲染展示，得到代码编辑器页面；

通过所述代码编辑器页面中的代码输入区域接收待执行代码，并在所述代码编辑器页面中的结果展示区域展示所述待执行代码的执行结果；

其中，所述代码编辑器页面中还包括控制台输出区域，所述方法还包括：

通过在所述代码编辑器页面的加载阶段重写的控制台函数，将与所述代码编辑器页面关联的控制台每次的输出数据绑定至预设的变量数组中，并在所述代码编辑器页面中的控制台输出区域显示所述变量数组；

其中，所述通过所述代码编辑器页面中的代码输入区域接收待执行代码，并在所述代码编辑器页面中的结果展示区域展示所述待执行代码的执行结果，包括：

检测所述代码输入区域是否接收到编辑操作，若所述代码输入区域在预设时间段内未接收到编辑操作，在所述结果展示区域中展示所述代码输入区域中的待执行代码的执行结果。

2.根据权利要求1所述的方法，其特征在于，所述通过所述代码编辑器页面中的代码输入区域接收待执行代码，并在所述代码编辑器页面中的结果展示区域展示所述待执行代码的执行结果的步骤，还包括：

根据接收到针对所述代码编辑器页面中任一模板标识的选择指令，在所述代码输入区域展示所述模板标识对应的模板；

在通过所述代码输入区域接收编辑操作的过程中，响应于所述代码编辑器当前接收到的编辑操作为有内容的输入，根据所述编辑操作的输入内容，进行代码自动提示。

3.根据权利要求1所述的方法，其特征在于，所述根据所述启动指令，通过浏览器对所述代码编辑器进行渲染展示，得到代码编辑器页面的步骤，包括：

响应于首次接收到所述启动指令，和/或在当前客户端的本地未检测到所述代码编辑器的文件包，从服务器获取所述代码编辑器的文件包；其中，所述文件包中包含在所述服务器中渲染完成的Nuxt框架；

响应于检测到所述Nuxt框架的所处环境为前端环境，根据所述文件包加载并渲染展示所述代码编辑器的编辑器插件。

4.根据权利要求3所述的方法，其特征在于，所述根据所述文件包加载并渲染展示所述代码编辑器的编辑器插件的步骤，包括：

根据所述代码编辑器的主配置文件中配置的压缩参数，获取用以组成所述编辑器插件的各个压缩文件并解压缩，得到所述编辑器插件的至少一个组件；

通过所述编辑器插件对应的配置文件，在所述代码编辑器页面中引入所述组件，并通过所述代码编辑器页面的mounted钩子函数，初始化所述代码编辑器页面，同时将初始化后的编辑器插件与所述代码编辑器页面中的代码输入区域绑定。

5.根据权利要求1所述的方法，其特征在于，在所述通过所述代码编辑器页面中的代码输入区域接收待执行代码，并在所述代码编辑器页面中的结果展示区域展示所述待执行代码的执行结果的步骤之后，还包括：

保存所述代码编辑器页面中显示的内容，并在下次启动所述代码编辑器时，在渲染完成的代码编辑器页面中展示上一次在所述代码编辑器页面中显示的内容。

6.一种代码处理装置，其特征在于，包括：

启动指令接收模块，被配置为执行接收针对代码编辑器的启动指令；

代码编辑器渲染模块，被配置为执行根据所述启动指令，通过浏览器对所述代码编辑器进行渲染展示，得到代码编辑器页面；

代码接收处理模块，被配置为执行通过所述代码编辑器页面中的代码输入区域接收待执行代码，并在所述代码编辑器页面中的结果展示区域展示所述待执行代码的执行结果；

其中，所述代码编辑器页面中还包括控制台输出区域，所述装置还包括：

控制台数据展示模块，被配置为执行：通过在所述代码编辑器页面的加载阶段重写的控制台函数，将与所述代码编辑器页面关联的控制台每次的输出数据绑定至预设的变量数组中，并在所述代码编辑器页面中的控制台输出区域显示所述变量数组；

其中，所述代码接收处理包括，包括：

代码处理子模块，被配置为执行检测所述代码输入区域是否接收到编辑操作，若所述代码输入区域在预设时间段内未接收到编辑操作，在所述结果展示区域中展示所述代码输入区域中的待执行代码的执行结果。

7.根据权利要求6所述的装置，其特征在于，所述代码接收处理模块，还包括：

模板选择显示子模块，被配置为执行根据接收到针对所述代码编辑器页面中任一模板标识的选择指令，在所述代码输入区域展示所述模板标识对应的模板；

代码自动提示子模块，被配置为执行在通过所述代码输入区域接收编辑操作的过程中，响应于所述代码编辑器当前接收到的编辑操作为有内容的输入，根据所述编辑操作的输入内容，进行代码自动提示。

8.根据权利要求6所述的装置，其特征在于，所述代码编辑器渲染模块，包括：

文件包获取子模块，被配置为执行响应于首次接收到所述启动指令，和/或在当前客户端的本地未检测到所述代码编辑器的文件包，从服务器获取所述代码编辑器的文件包；其中，所述文件包中包含在所述服务器中渲染完成的Nuxt框架；

编辑器插件渲染子模块，被配置为执行响应于检测到所述Nuxt框架的所处环境为前端环境，根据所述文件包加载并渲染展示所述代码编辑器的编辑器插件。

9.根据权利要求8所述的装置，其特征在于，所述编辑器插件渲染子模块，包括：

编辑器插件获取单元，被配置为执行根据所述代码编辑器的主配置文件中配置的压缩参数，获取用以组成所述编辑器插件的各个压缩文件并解压缩，得到所述编辑器插件的至少一个组件；

编辑器插件渲染单元，被配置为执行通过所述编辑器插件对应的配置文件，在所述代码编辑器页面中引入所述组件，并通过所述代码编辑器页面的mounted钩子函数，初始化所述代码编辑器页面，同时将初始化后的编辑器插件与所述代码编辑器页面中的代码输入区域绑定。

10.根据权利要求6所述的装置，其特征在于，所述装置还包括：

内容记录回溯模块，被配置为执行保存所述代码编辑器页面中显示的内容，并在下次启动所述代码编辑器时，在渲染完成的代码编辑器页面中展示上一次在所述代码编辑器页面中显示的内容。

11.一种电子设备，其特征在于，包括：

处理器；

用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为执行所述指令，以实现如权利要求1至5中任一项所述的代码处理方法。

12.一种存储介质，当所述存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行如权利要求1至5中任一项所述的代码处理方法。