CN115756417A - 一种源码跳转方法、装置、计算机设备及存储介质 - Google Patents

Abstract

本申请公开了一种源码跳转方法、装置、计算机设备及存储介质，属于计算机软件技术领域。本申请通过获取携带源码地址链接的网络请求，并将源码地址链接传送到预先安装的浏览器插件中；判断源码地址链接的协议类型是否为预设协议类型；若源码地址链接的协议类型为预设协议类型，则响应网络请求，调用代码编辑器，并在代码编辑器上加载源码地址链接对应的源码文件。此外，本申请还涉及区块链技术，源码文件可存储于区块链中。本申请在识别出源码地址链接的协议类型为预设协议类型后，通过浏览器接口直接调用代码编辑器，并在代码编辑器上加载源码地址链接对应的源码文件，避免每一次源码跳转都会留下一个空白的新窗口，提升用户使用体验。

Description

一种源码跳转方法、装置、计算机设备及存储介质

技术领域

本申请属于计算机软件技术领域，具体涉及一种源码跳转方法、装置、计算机设备及存储介质。

背景技术

React用于构建用户界面的JavaScript库，起源于Facebook的内部项目，React主要用于构建UI，在React里可以传递多种类型的参数，如声明代码，也可以模拟静态的HTMLDOM元素，可以传递动态变量，React是可交互的应用组件。由于React的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来Web开发的主流工具。

在Web网页开发过程中，当开发人员想要通过点击网页的某个区块打开区块对应的代码文件时，目前业内的方案是通过在浏览器打开一个新的窗口，请求应用协议下的代码路径地址，浏览器再根据应用协议调用对应的应用软件打开该代码文件。但上述方案在成功跳转到源码页面后，会在浏览器留下一个空白窗口，影响用户使用体验。

发明内容

本申请实施例的目的在于提出一种源码跳转方法、装置、计算机设备及存储介质，以解决React组件源码现有方案，在成功跳转到源码页面后，会在浏览器留下一个空白窗口，影响用户使用体验的技术问题。

为了解决上述技术问题，本申请实施例提供一种源码跳转方法，采用了如下所述的技术方案：

一种源码跳转方法，包括下述步骤：

获取携带源码地址链接的网络请求，并将所述源码地址链接传送到预先安装的浏览器插件中；

判断所述源码地址链接的协议类型是否为预设协议类型；

若所述源码地址链接的协议类型为预设协议类型，则响应所述网络请求，调用代码编辑器，并在所述代码编辑器上加载所述源码地址链接对应的源码文件。

进一步地，在所述判断所述源码地址链接的协议类型是否为预设协议类型的步骤之后，还包括：

若所述源码地址链接的协议类型不是预设协议类型，则生成所述源码地址链接的消息ID；

基于所述消息ID创建新页面，并在所述新页面加载所述源码地址链接对应的源码文件。

进一步地，所述基于所述消息ID创建新页面，并在所述新页面加载所述源码地址链接对应的源码文件的步骤，具体包括：

在所述浏览器插件的后台创建一个消息监听器，并利用所述消息监听器监听所述消息ID；

当所述消息监听器监听到所述消息ID时，获取所述消息ID对应的消息处理逻辑；

执行所述消息处理逻辑，生成所述新页面，并在所述新页面加载所述源码地址链接对应的源码文件。

进一步地，所述响应所述网络请求调用代码编辑器，并在所述代码编辑器上加载所述源码地址链接对应的源码文件的步骤，具体包括：

对所述源码地址链接发起请求，得到所述源码文件的存储路径信息和存储位置信息；

响应所述网络请求，基于网络请求调用浏览器接口，并通过所述浏览器接口连接代码编辑器；

根据所述存储路径信息和所述存储位置信息将所述源码文件加载到所述代码编辑器中。

进一步地，在所述获取携带源码地址链接的网络请求，并将所述源码地址链接传送到预先安装的浏览器插件中的步骤之前，还包括：

下载React开发框架的源码，并对所述源码中的JS文件进行重写；

将预设的协议类型标识和预设的跳转逻辑策略添加到重写后的源码中，得到修改源码，其中，所述协议类型标识为http协议标识，所述协议类型标识与所述跳转逻辑策略相互对应；

对所述修改源码进行打包，构建浏览器插件；

将所述浏览器插件发送至浏览器，并在所述浏览器中安装所述浏览器插件。

进一步地，在所述获取携带源码地址链接的网络请求，并将所述源码地址链接传送到预先安装的浏览器插件中的步骤之前，还包括：

获取本地React项目，查找所述本地React项目的webpack配置；

在所述webpack配置中添加一个请求接口，其中，所述请求接口用于响应所述网络请求。

进一步地，在所述获取本地React项目，查找所述本地React项目的webpack配置的步骤之后，还包括：

获取所述webpack配置中设定的定位符；

在浏览器的控制台上生成所述浏览器插件的标签页，并在所述标签页中查找定位符配置项；

将所述webpack配置中的定位符填入所述定位符配置项中。

为了解决上述技术问题，本申请实施例还提供一种源码跳转装置，采用了如下所述的技术方案：

一种源码跳转装置，包括：

地址链接传送模块，用于获取携带源码地址链接的网络请求，并将所述源码地址链接传送到预先安装的浏览器插件中；

协议类型判断模块，用于判断所述源码地址链接的协议类型是否为预设协议类型；

第一源码加载模块，用于当所述源码地址链接的协议类型为预设协议类型时，响应所述网络请求，调用代码编辑器，并在所述代码编辑器上加载所述源码地址链接对应的源码文件。

为了解决上述技术问题，本申请实施例还提供一种计算机设备，采用了如下所述的技术方案：

一种计算机设备，包括存储器和处理器，所述存储器中存储有计算机可读指令，所述处理器执行所述计算机可读指令时实现如上述任一项所述的源码跳转方法的步骤。

为了解决上述技术问题，本申请实施例还提供一种计算机可读存储介质，采用了如下所述的技术方案：

一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机可读指令，所述计算机可读指令被处理器执行时实现如上述中任一项所述的源码跳转方法的步骤。

与现有技术相比，本申请实施例主要有以下有益效果：

本申请公开了一种源码跳转方法、装置、计算机设备及存储介质，属于源码跳转技术领域。本申请通过获取携带源码地址链接的网络请求，并将源码地址链接传送到预先安装的浏览器插件中；判断源码地址链接的协议类型是否为预设协议类型；若源码地址链接的协议类型为预设协议类型，则响应网络请求，调用代码编辑器，并在代码编辑器上加载源码地址链接对应的源码文件。本申请通过将源码地址链接传送到浏览器插件中，以识别源码地址链接的协议类型，若识别出源码地址链接的协议类型为预设协议类型，则通过浏览器接口直接调用代码编辑器，并在代码编辑器上加载源码地址链接对应的源码文件，避免每一次源码跳转都会留下一个空白的新窗口，提升用户使用体验。

附图说明

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

图1示出了本申请可以应用于其中的示例性系统架构图；

图2示出了根据本申请的源码跳转方法的一个实施例的流程图；

图3示出了图2中步骤S201之前的实施例一示意图；

图4示出了图2中步骤S201之前的实施例二示意图；

图5示出了图2中步骤S201之前的实施例三示意图；

图6示出了根据本申请的源码跳转装置的一个实施例的结构示意图；

图7示出了根据本申请的计算机设备的一个实施例的结构示意图。

具体实施方式

除非另有定义，本文所使用的所有的技术和科学术语与属于本申请的技术领域的技术人员通常理解的含义相同；本文中在申请的说明书中所使用的术语只是为了描述具体的实施例的目的，不是旨在于限制本申请；本申请的说明书和权利要求书及上述附图说明中的术语“包括”和“具有”以及它们的任何变形，意图在于覆盖不排他的包含。本申请的说明书和权利要求书或上述附图中的术语“第一”、“第二”等是用于区别不同对象，而不是用于描述特定顺序。

在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。

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

如图1所示，系统架构100可以包括终端设备101、102、103，网络104和服务器105。网络104用以在终端设备101、102、103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用终端设备101、102、103通过网络104与服务器105交互，以接收或发送消息等。终端设备101、102、103上可以安装有各种通讯客户端应用，例如网页浏览器应用、购物类应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等。

终端设备101、102、103可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、电子书阅读器、MP3播放器(Moving PictureExpertsGroup Audio Layer III，动态影像专家压缩标准音频层面3)、MP4(MovingPictureExperts Group Audio Layer IV，动态影像专家压缩标准音频层面4)播放器、膝上型便携计算机和台式计算机等等。

服务器105可以是提供各种服务的服务器，例如对终端设备101、102、103上显示的页面提供支持的后台服务器，服务器可以是独立的服务器，也可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、内容分发网络(Content Delivery Network，CDN)、以及大数据和人工智能平台等基础云计算服务的云服务器。

需要说明的是，本申请实施例所提供的源码跳转方法一般由服务器执行，相应地，源码跳转装置一般设置于服务器中。

应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

在Web网页开发过程中，当开发人员想要通过点击网页的某个区块打开区块对应的代码文件时，目前业内的方案是通过在浏览器打开一个新的窗口，请求应用协议下的代码路径地址，浏览器再根据应用协议调用对应的应用软件打开该代码文件。但上述方案在成功跳转到代码编辑页面后，会在浏览器留下一个空白窗口，影响用户使用体验。

为了解决上述技术问题，请参考图2，示出了根据本申请的源码跳转方法的一个实施例的流程图。本实施例公开了一种源码跳转方法，包括下述步骤：

S201，获取携带源码地址链接的网络请求，并将源码地址链接传送到预先安装的浏览器插件中。

在本实施例中，预先安装的浏览器插件可以根据实际开发项目进行选择，如在React项目中选择React Devtools作为浏览器插件，而在Vue调试项目中，可以选择Vue-Devtools作为浏览器插件。在本申请一种具体的实施例中，预先安装的浏览器插件为ReactDevtools，React DevTools是一款开源的浏览器扩展插件，通过React DevTools可以在浏览器开发者工具中得到一个名为React的新标签，React DevTools可以检查React组件层次结构，并在页面上显示React组件。终端设备101、102、103上至少安装有一个浏览器，每个浏览器安装有浏览器插件，浏览器插件作为第三方应用程序，可以预先由开发测试人员生成得到，在终端设备101、102、103出厂之后，可以由开发测试人员将生成的浏览器插件安装在浏览器中。浏览器可以是chrome浏览器或Firefox浏览器。

具体的，源码地址链接为用户想要查看或编辑的源码文件对应的地址链接，在本申请具体的实施例中，用户为开发或测试人员。接收用户上传的携带源码地址链接的网络请求，并将源码地址链接传送到预先安装的React DevTools中，React DevTools上有一个配置项Open in Editor URL，将源码地址链接填入Open in Editor URL。

示例的，网络请求中携带的源码地址链接为http://localhost:3000/open？file＝C://Users/Test/app.jsx&line＝90，将上述源码地址链接填入React DevTools插件的Open in Editor URL。

在本实施例中，源码跳转方法运行于其上的电子设备(例如图1所示的服务器)可以通过有线连接方式或者无线连接方式获取携带源码地址链接的网络请求。需要指出的是，上述无线连接方式可以包括但不限于3G/4G/5G连接、WiFi连接、蓝牙连接、WiMAX连接、Zigbee连接、UWB(ultra wideband)连接、以及其他现在已知或将来开发的无线连接方式。

S202，判断源码地址链接的协议类型是否为预设协议类型。

在本实施例中，预设协议类型可以根据实际开发需求进行设置，如http协议、TCP协议、IP协议等。在本申请一种具体的实施例中，预设协议类型为http协议，将源码地址链接填入Open in Editor URL后，判断源码地址链接的协议类型是否为http协议。

S203，若源码地址链接的协议类型为预设协议类型，则响应网络请求，调用代码编辑器，并在代码编辑器上加载源码地址链接对应的源码文件。

在本实施例中，如果源码地址链接的协议类型为预设协议类型，即源码地址链接的协议类型为http协议，则响应网络请求，调用浏览器接口，并通过浏览器接口连接Web应用开发端的代码编辑器，在代码编辑器上加载源码地址链接对应的源码文件。

在上述实施例中，通过将源码地址链接传送到浏览器插件中，以识别源码地址链接的协议类型，若识别出源码地址链接的协议类型为http协议，则通过浏览器接口直接调用代码编辑器，并在代码编辑器上加载源码地址链接对应的源码文件，避免每一次源码跳转都会留下一个空白的新窗口，提升用户使用体验。

在一些可选的实现方式中，请继续参考图2，在判断源码地址链接的协议类型是否为预设协议类型的步骤之后，还包括：

S204，若源码地址链接的协议类型不是预设协议类型，则生成源码地址链接的消息ID；

S205，基于消息ID创建新页面，并在新页面加载源码地址链接对应的源码文件。

在本实施例中，以chrome浏览器为例，chrome.runtime.sendMessage和chrome.runtime.onMessage.addListener是chrome浏览器插件开发SDK中内置的两个消息通信方法，sendMessage用于发送消息，传递一个消息ID，onMessage.addListener用于接收消息，通过消息ID进行区分消息类型。

具体的，如果填入React DevTools中的源码地址链接的协议类型不是http协议，则使用chrome浏览器插件提供的chrome.runtime.sendMessage消息通信方法生成源码地址链接的消息ID，消息ID用openInEditorByNewTab表示，基于openInEditorByNewTab在Web应用开发端创建一个新页面，并在新页面加载源码文件。需要说明的是，若本申请的浏览器为Firefox浏览器，当源码地址链接的协议类型不是http协议时，同样采用SDK消息通信方法创建新页面，并在新页面加载源码地址链接对应的源码文件，实现过程与chrome浏览器的源码文件加载过程类似，在此不再赘述。

在上述实施例中，当填入React DevTools中的源码地址链接的协议类型不是http协议时，采用浏览器插件提供的chrome.runtime.sendMessage消息通信方法创建新页面，并在新页面加载源码文件。

在一些可选的实现方式中，基于消息ID创建新页面，并在新页面加载源码地址链接对应的源码文件的步骤，具体包括：

在浏览器插件的后台创建一个消息监听器，并利用消息监听器监听消息ID；

当消息监听器监听到消息ID时，获取消息ID对应的消息处理逻辑；

执行消息处理逻辑，生成新页面，并在新页面加载源码地址链接对应的源码文件。

在本实施例中，浏览器插件的插件后台用background表示，background主要用于逻辑处理，例如网络拦截等。向background发送一个openInEditorByNewTab，通过background里面的消息监听器实时对openInEditorByNewTab进行监听，当消息监听器监听到openInEditorByNewTab时，获取openInEditorByNewTab对应的消息处理逻辑chrome.tabs.create({url,active:true})，并执行该处理逻辑以打开一个新的页面，通过新页面加载源码地址链接对应的源码文件。

需要额外说明的是，消息监听器是通过background里面的chrome.runtime.onMessage.addListener创建的。

在上述实施例中，当填入React DevTools中的源码地址链接的协议类型不是http协议时，通过浏览器插件的插件后台background中的消息监听器实时监听消息ID，当消息监听器监听到消息ID后，执行消息ID对应的消息处理逻辑，以生成新的页面，通过新页面加载源码文件，实现非http协议的源码文件的加载。

在一些可选的实现方式中，响应网络请求调用代码编辑器，并在代码编辑器上加载源码地址链接对应的源码文件的步骤，具体包括：

对源码地址链接发起请求，得到源码文件的存储路径信息和存储位置信息；

响应网络请求，基于网络请求调用浏览器接口，并通过浏览器接口连接代码编辑器；

根据存储路径信息和存储位置信息将源码文件加载到代码编辑器中。

在本实施例中，如果源码地址链接的协议类型为预设协议类型，即源码地址链接的协议类型为http协议，则对源码地址链接发起请求，请求源码文件的存储路径信息和存储位置信息。示例性的，网络请求中携带的源码地址链接为：

http://localhost:3000/open？file＝C://Users/Test/app.jsx&line＝90，对上述源码地址链接发起请求，得到源码文件的存储路径是C://Users/Test/app.jsx，存储位置是在第90行。

其中，在得到源码文件的存储路径信息和存储位置信息之后，Web应用开发端响应发送过来的网络请求，并基于网络请求调用浏览器接口API，通过浏览器接口API连接Web应用开发端的代码编辑器，最后根据存储路径信息和存储位置信息将源码文件加载到代码编辑器中。

在上述实施例中，通过浏览器接口API直接调用Web应用开发端的代码编辑器，并在代码编辑器上加载源码地址链接对应的源码文件，实现http协议类型的源码文件的无感跳转，避免每一次源码跳转都会留下一个空白的新窗口，提升用户使用体验。

在一些可选的实现方式中，请参考图3，图3示出了图2中步骤S201之前的实施例一示意图，在获取携带源码地址链接的网络请求，并将源码地址链接传送到预先安装的浏览器插件中的步骤之前，还包括：

S301，下载React开发框架的源码，并对源码中的JS文件进行重写；

S302，将预设的协议类型标识和预设的跳转逻辑策略添加到重写后的源码中，得到修改源码，其中，协议类型标识为http协议标识，协议类型标识与跳转逻辑策略相互对应；

S303，对修改源码进行打包，构建浏览器插件；

S304，将浏览器插件发送至浏览器，并在浏览器中安装浏览器插件。

在本实施例中，在步骤S201之前，需要预先安装浏览器插件React DevTools，具体的，在GitHub网站托管的react开源仓库中，下载React开发框架的源码，在React项目所在根目录中运行命令行yarn install，自动安装React项目启动所需依赖，然后对源码的InspectedElement.JS文件进行重写，重写JS文件后，将预设的协议类型标识和预设的跳转逻辑策略添加到重写后的源码中，得到修改源码，对修改源码进行打包，构建浏览器插件React DevTools的生产包，将浏览器插件React DevTools的生产包发送至浏览器中，并在浏览器中安装浏览器插件React DevTools的生产包，完成浏览器插件React DevTools的安装。

其中，协议类型标识为http协议标识，协议类型标识与跳转逻辑策略相互对应，示例性的，http协议类型的源码地址链接对应的跳转逻辑策略为调用代码编辑器，并在代码编辑器上加载源码地址链接对应的源码文件，非ttp协议类型的源码地址链接对应的跳转逻辑策略为生成源码地址链接的消息ID，基于消息ID在浏览器插件的后台创建新页面基于消息ID创建新页面，并在新页面加载源码地址链接对应的源码文件。

在上述实施例中，通过下载React开发框架的源码，安装React项目启动所需依赖，重写JS文件，并在源码中添加协议类型标识和跳转逻辑策略，增强页面跳转判断，最后对源码进行打包，构建浏览器插件React DevTools。此外，通过添加协议类型标识和跳转逻辑策略，增强页面跳转判断，解决Firefox浏览器无法实现源码跳转的技术问题。

在一些可选的实现方式中，请参考图4，图3示出了图2中步骤S201之前的实施例二示意图，在获取携带源码地址链接的网络请求，并将源码地址链接传送到预先安装的浏览器插件中的步骤之前，还包括：

S401，获取本地React项目，查找本地React项目的webpack配置；

S402，在webpack配置中添加一个请求接口，其中，请求接口用于响应网络请求。

在本实施例中，获取Web应用开发端的本地React项目，在本地React项目中查找webpack配置，并在webpack配置中增加一个请求接口，请求接口可以实现两个功能：1.处理URL；2、调用launch-editor-middleware插件智能打开代码编辑器。例如，添加一个/open，当open接口被请求时，本地React项目的webpack会调用launch-editor-middleware插件智能调用当前电脑打开代码编辑器进程，并解析网络请求，得到请求参数中携带的源码文件的存储路径信息和存储位置信息，根据存储路径信息和存储位置信息将源码文件加载到代码编辑器中。

其中，统一资源定位系统(uniform resource locator；URL)是因特网的万维网服务程序上用于指定信息位置的表示方法。URL是由一串字符组成，这些字符可以是字母，数字和特殊符号，一个URL可以用多种方法来表现,例如：纸上的字迹，或者是用字符集编码的八位字节序列。URL也就是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址，互联网上的网页都会有一个URL与之对应，这样才能正常访问得到该网页，简单来说URL就是网站页面的网址。

在上述实施例中，通过在本地React项目的webpack配置中添加一个请求接口，当请求接口被请求时，可以直接通过本地React项目的webpack调用插件打开代码编辑器进程，将源码文件加载到代码编辑器中，不需要再打开新窗口来加载源码文件，避免每一次源码跳转都会留下一个空白的新窗口。

在一些可选的实现方式中，请参考图5，图3示出了图2中步骤S201之前的实施例三示意图，在获取本地React项目，查找本地React项目的webpack配置的步骤之后，还包括：

S501，获取webpack配置中设定的定位符；

S502，在浏览器的控制台上生成浏览器插件的标签页，并在标签页中查找定位符配置项；

S503，将webpack配置中的定位符填入定位符配置项中。

在本实施例中，浏览器插件React DevTools安装完成后，浏览器的控制台会显示一个React Devtools生成的Components标签页，在Components标签页中查找定位符配置项URL，并查找本地React项目中webpack配置的定位符URL，将webpack配置的定位符URL填入Components标签页的定位符配置项URL，完成Open in Editor URL配置，初始化跳转逻辑。在配置完成后，开发人员可以使用React组件选择功能，点击Components标签页的跳转按钮，激活跳转逻辑，此时浏览器插件React DevTools判断Open in Editor URL的协议类型，如果Open in Editor URL的协议类型是http协议，则调用launch-editor-middleware插件智能调用当前电脑打开代码编辑器进程，并解析网络请求，得到请求参数中携带的源码文件的存储路径信息和存储位置信息，根据存储路径信息和存储位置信息将源码文件加载到代码编辑器中，实现源码无感跳转。

本申请公开了一种源码跳转方法，属于源码跳转技术领域。本申请通过获取携带源码地址链接的网络请求，并将源码地址链接传送到预先安装的浏览器插件中；判断源码地址链接的协议类型是否为预设协议类型；若源码地址链接的协议类型为预设协议类型，则响应网络请求，调用代码编辑器，并在代码编辑器上加载源码地址链接对应的源码文件。本申请通过将源码地址链接传送到浏览器插件中，以识别源码地址链接的协议类型，若识别出源码地址链接的协议类型为预设协议类型，则通过浏览器接口直接调用代码编辑器，并在代码编辑器上加载源码地址链接对应的源码文件，避免每一次源码跳转都会留下一个空白的新窗口，提升用户使用体验。

需要强调的是，为进一步保证上述源码文件的私密和安全性，上述源码文件还可以存储于一区块链的节点中。

本申请所指区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。区块链(Blockchain)，本质上是一个去中心化的数据库，是一串使用密码学方法相关联产生的数据块，每一个数据块中包含了一批次网络交易的信息，用于验证其信息的有效性(防伪)和生成下一个区块。区块链可以包括区块链底层平台、平台产品服务层以及应用服务层等。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机可读指令来指令相关的硬件来完成，该计算机可读指令可存储于一计算机可读取存储介质中，该计算机可读指令在执行时，可包括如上述各方法的实施例的流程。其中，前述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)等非易失性存储介质，或随机存储记忆体(Random Access Memory，RAM)等。

应该理解的是，虽然附图的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，其可以以其他的顺序执行。而且，附图的流程图中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，其执行顺序也不必然是依次进行，而是可以与其他步骤或者其他步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。

进一步参考图6，作为对上述图2所示方法的实现，本申请提供了一种源码跳转装置的一个实施例，该装置实施例与图2所示的方法实施例相对应，该装置具体可以应用于各种电子设备中。

如图6所示，本实施例所述的源码跳转装置600包括：

地址链接传送模块601，用于获取携带源码地址链接的网络请求，并将源码地址链接传送到预先安装的浏览器插件中；

协议类型判断模块602，用于判断源码地址链接的协议类型是否为预设协议类型；

第一源码加载模块603，用于当源码地址链接的协议类型为预设协议类型时，响应网络请求，调用代码编辑器，并在代码编辑器上加载源码地址链接对应的源码文件。

在一些可选的实现方式中，源码跳转装置600还包括：

消息ID生成模块604，用于当源码地址链接的协议类型不是预设协议类型时，生成源码地址链接的消息ID；

第二源码加载模块605，用于基于消息ID创建新页面，并在新页面加载源码地址链接对应的源码文件。

在一些可选的实现方式中，第二源码加载模块605具体包括：

监听器创建单元，用于在浏览器插件的后台创建一个消息监听器，并利用消息监听器监听消息ID；

处理逻辑获取单元，用于当消息监听器监听到消息ID时，获取消息ID对应的消息处理逻辑；

第二源码加载单元，用于执行消息处理逻辑，生成新页面，并在新页面加载源码地址链接对应的源码文件。

在一些可选的实现方式中，第一源码加载模块603具体包括：

链接请求单元，用于对源码地址链接发起请求，得到源码文件的存储路径信息和存储位置信息；

接口调用单元，用于响应网络请求，基于网络请求调用浏览器接口，并通过浏览器接口连接代码编辑器；

第一源码加载单元，用于根据存储路径信息和存储位置信息将源码文件加载到代码编辑器中。

在一些可选的实现方式中，源码跳转装置600还包括：

React源码下载模块，用于下载React开发框架的源码，并对源码中的JS文件进行重写；

标识策略写入模块，用于将预设的协议类型标识和预设的跳转逻辑策略添加到重写后的源码中，得到修改源码，其中，协议类型标识为http协议标识，协议类型标识与跳转逻辑策略相互对应；

插件构建模块，用于对修改源码进行打包，构建浏览器插件；

插件安装模块，用于将浏览器插件发送至浏览器，并在浏览器中安装浏览器插件。

在一些可选的实现方式中，源码跳转装置600还包括：

webpack配置查找模块，用于获取本地React项目，查找本地React项目的webpack配置；

接口添加模块，用于在webpack配置中添加一个请求接口，其中，请求接口用于响应网络请求。

在一些可选的实现方式中，源码跳转装置600还包括：

定位符获取模块，用于获取webpack配置中设定的定位符；

配置项查找模块，用于在浏览器的控制台上生成浏览器插件的标签页，并在标签页中查找定位符配置项；

配置项修改模块，用于将webpack配置中的定位符填入定位符配置项中。

本申请公开了一种源码跳转装置，属于源码跳转技术领域。本申请通过获取携带源码地址链接的网络请求，并将源码地址链接传送到预先安装的浏览器插件中；判断源码地址链接的协议类型是否为预设协议类型；若源码地址链接的协议类型为预设协议类型，则响应网络请求，调用代码编辑器，并在代码编辑器上加载源码地址链接对应的源码文件。本申请通过将源码地址链接传送到浏览器插件中，以识别源码地址链接的协议类型，若识别出源码地址链接的协议类型为预设协议类型，则通过浏览器接口直接调用代码编辑器，并在代码编辑器上加载源码地址链接对应的源码文件，避免每一次源码跳转都会留下一个空白的新窗口，提升用户使用体验。

为解决上述技术问题，本申请实施例还提供计算机设备。具体请参阅图7，图7为本实施例计算机设备基本结构框图。

所述计算机设备7包括通过系统总线相互通信连接存储器71、处理器72、网络接口73。需要指出的是，图中仅示出了具有组件71-73的计算机设备7，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。其中，本技术领域技术人员可以理解，这里的计算机设备是一种能够按照事先设定或存储的指令，自动进行数值计算和/或信息处理的设备，其硬件包括但不限于微处理器、专用集成电路(ApplicationSpecific Integrated Circuit，ASIC)、可编程门阵列(Field－Programmable GateArray，FPGA)、数字处理器(Digital Signal Processor，DSP)、嵌入式设备等。

所述计算机设备可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。所述计算机设备可以与用户通过键盘、鼠标、遥控器、触摸板或声控设备等方式进行人机交互。

所述存储器71至少包括一种类型的可读存储介质，所述可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，所述存储器71可以是所述计算机设备7的内部存储单元，例如该计算机设备7的硬盘或内存。在另一些实施例中，所述存储器71也可以是所述计算机设备7的外部存储设备，例如该计算机设备7上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(FlashCard)等。当然，所述存储器71还可以既包括所述计算机设备7的内部存储单元也包括其外部存储设备。本实施例中，所述存储器71通常用于存储安装于所述计算机设备7的操作系统和各类应用软件，例如源码跳转方法的计算机可读指令等。此外，所述存储器71还可以用于暂时地存储已经输出或者将要输出的各类数据。

所述处理器72在一些实施例中可以是中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器72通常用于控制所述计算机设备7的总体操作。本实施例中，所述处理器72用于运行所述存储器71中存储的计算机可读指令或者处理数据，例如运行所述源码跳转方法的计算机可读指令。

所述网络接口73可包括无线网络接口或有线网络接口，该网络接口73通常用于在所述计算机设备7与其他电子设备之间建立通信连接。

本申请公开了一种计算机设备，属于源码跳转技术领域。本申请通过获取携带源码地址链接的网络请求，并将源码地址链接传送到预先安装的浏览器插件中；判断源码地址链接的协议类型是否为预设协议类型；若源码地址链接的协议类型为预设协议类型，则响应网络请求，调用代码编辑器，并在代码编辑器上加载源码地址链接对应的源码文件。本申请通过将源码地址链接传送到浏览器插件中，以识别源码地址链接的协议类型，若识别出源码地址链接的协议类型为预设协议类型，则通过浏览器接口直接调用代码编辑器，并在代码编辑器上加载源码地址链接对应的源码文件，避免每一次源码跳转都会留下一个空白的新窗口，提升用户使用体验。

本申请还提供了另一种实施方式，即提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机可读指令，所述计算机可读指令可被至少一个处理器执行，以使所述至少一个处理器执行如上述的源码跳转方法的步骤。

本申请公开了一种存储介质，属于源码跳转技术领域。本申请通过获取携带源码地址链接的网络请求，并将源码地址链接传送到预先安装的浏览器插件中；判断源码地址链接的协议类型是否为预设协议类型；若源码地址链接的协议类型为预设协议类型，则响应网络请求，调用代码编辑器，并在代码编辑器上加载源码地址链接对应的源码文件。本申请通过将源码地址链接传送到浏览器插件中，以识别源码地址链接的协议类型，若识别出源码地址链接的协议类型为预设协议类型，则通过浏览器接口直接调用代码编辑器，并在代码编辑器上加载源码地址链接对应的源码文件，避免每一次源码跳转都会留下一个空白的新窗口，提升用户使用体验。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本申请各个实施例所述的方法。

本申请可用于众多通用或专用的计算机系统环境或配置中。例如：个人计算机、服务器计算机、手持设备或便携式设备、平板型设备、多处理器系统、基于微处理器的系统、置顶盒、可编程的消费电子设备、网络PC、小型计算机、大型计算机、包括以上任何系统或设备的分布式计算环境等等。本申请可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本申请，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

显然，以上所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例，附图中给出了本申请的较佳实施例，但并不限制本申请的专利范围。本申请可以以许多不同的形式来实现，相反地，提供这些实施例的目的是使对本申请的公开内容的理解更加透彻全面。尽管参照前述实施例对本申请进行了详细的说明，对于本领域的技术人员来而言，其依然可以对前述各具体实施方式所记载的技术方案进行修改，或者对其中部分技术特征进行等效替换。凡是利用本申请说明书及附图内容所做的等效结构，直接或间接运用在其他相关的技术领域，均同理在本申请专利保护范围之内。

Claims (10)

1.一种源码跳转方法，其特征在于，包括下述步骤：

获取携带源码地址链接的网络请求，并将所述源码地址链接传送到预先安装的浏览器插件中；

判断所述源码地址链接的协议类型是否为预设协议类型；

若所述源码地址链接的协议类型为预设协议类型，则响应所述网络请求，调用代码编辑器，并在所述代码编辑器上加载所述源码地址链接对应的源码文件。

2.如权利要求1所述的源码跳转方法，其特征在于，在所述判断所述源码地址链接的协议类型是否为预设协议类型的步骤之后，还包括：

若所述源码地址链接的协议类型不是预设协议类型，则生成所述源码地址链接的消息ID；

基于所述消息ID创建新页面，并在所述新页面加载所述源码地址链接对应的源码文件。

3.如权利要求2所述的源码跳转方法，其特征在于，所述基于所述消息ID创建新页面，并在所述新页面加载所述源码地址链接对应的源码文件的步骤，具体包括：

在所述浏览器插件的后台创建一个消息监听器，并利用所述消息监听器监听所述消息ID；

当所述消息监听器监听到所述消息ID时，获取所述消息ID对应的消息处理逻辑；

执行所述消息处理逻辑，生成所述新页面，并在所述新页面加载所述源码地址链接对应的源码文件。

4.如权利要求1所述的源码跳转方法，其特征在于，所述响应所述网络请求，调用代码编辑器，并在所述代码编辑器上加载所述源码地址链接对应的源码文件的步骤，具体包括：

对所述源码地址链接发起请求，得到所述源码文件的存储路径信息和存储位置信息；

响应所述网络请求，基于网络请求调用浏览器接口，并通过所述浏览器接口连接代码编辑器；

根据所述存储路径信息和所述存储位置信息将所述源码文件加载到所述代码编辑器中。

5.如权利要求1所述的源码跳转方法，其特征在于，在所述获取携带源码地址链接的网络请求，并将所述源码地址链接传送到预先安装的浏览器插件中的步骤之前，还包括：

下载React开发框架的源码，并对所述源码中的JS文件进行重写；

将预设的协议类型标识和预设的跳转逻辑策略添加到重写后的源码中，得到修改源码，其中，所述协议类型标识为http协议标识，所述协议类型标识与所述跳转逻辑策略相互对应；

对所述修改源码进行打包，构建浏览器插件；

将所述浏览器插件发送至浏览器，并在所述浏览器中安装所述浏览器插件。

6.如权利要求1所述的源码跳转方法，其特征在于，在所述获取携带源码地址链接的网络请求，并将所述源码地址链接传送到预先安装的浏览器插件中的步骤之前，还包括：

获取本地React项目，查找所述本地React项目的webpack配置；

在所述webpack配置中添加一个请求接口，其中，所述请求接口用于响应所述网络请求。

7.如权利要求6所述的源码跳转方法，其特征在于，在所述获取本地React项目，查找所述本地React项目的webpack配置的步骤之后，还包括：

获取所述webpack配置中设定的定位符；

在浏览器的控制台上生成所述浏览器插件的标签页，并在所述标签页中查找定位符配置项；

将所述webpack配置中的定位符填入所述定位符配置项中。

8.一种源码跳转装置，其特征在于，包括：

地址链接传送模块，用于获取携带源码地址链接的网络请求，并将所述源码地址链接传送到预先安装的浏览器插件中；

协议类型判断模块，用于判断所述源码地址链接的协议类型是否为预设协议类型；

第一源码加载模块，用于当所述源码地址链接的协议类型为预设协议类型时，响应所述网络请求，调用代码编辑器，并在所述代码编辑器上加载所述源码地址链接对应的源码文件。

9.一种计算机设备，其特征在于，包括存储器和处理器，所述存储器中存储有计算机可读指令，所述处理器执行所述计算机可读指令时实现如权利要求1至7中任一项所述的源码跳转方法的步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机可读指令，所述计算机可读指令被处理器执行时实现如权利要求1至7中任一项所述的源码跳转方法的步骤。

Images