CN117453540A - 代码处理方法、装置、计算机设备及计算机可读存储介质 - Google Patents

代码处理方法、装置、计算机设备及计算机可读存储介质 Download PDF

Info

Publication number
CN117453540A
CN117453540A CN202311367640.1A CN202311367640A CN117453540A CN 117453540 A CN117453540 A CN 117453540A CN 202311367640 A CN202311367640 A CN 202311367640A CN 117453540 A CN117453540 A CN 117453540A
Authority
CN
China
Prior art keywords
code
target
browser
function
preset
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202311367640.1A
Other languages
English (en)
Inventor
杨泽伟
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Netease Hangzhou Network Co Ltd
Original Assignee
Netease Hangzhou Network Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Netease Hangzhou Network Co Ltd filed Critical Netease Hangzhou Network Co Ltd
Priority to CN202311367640.1A priority Critical patent/CN117453540A/zh
Publication of CN117453540A publication Critical patent/CN117453540A/zh
Pending legal-status Critical Current

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F11/00Error detection; Error correction; Monitoring
    • G06F11/36Preventing errors by testing or debugging software
    • G06F11/362Software debugging
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • YGENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02DCLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • Computer Hardware Design (AREA)
  • Quality & Reliability (AREA)
  • Stored Programmes (AREA)

Abstract

本申请实施例公开了一种代码处理方法、装置、计算机设备及计算机可读存储介质,包括:获取实现目标NPM模块功能的目标代码;基于预设判断函数对目标代码进行判断处理,确定目标代码是否可植入目标浏览器的浏览器代码中;若是,则基于预设代码调用函数,将目标代码植入目标浏览器的浏览器代码中;响应于针对目标代码的执行指令,在目标浏览器中执行所述目标代码,以通过所述目标浏览器实现所述目标NPM模块功能。本申请实施例可以通过在浏览器中直接浏览NPM模块的详情信息以及直接应用NPM模块的模块功能,实现在线可以调试与体验NPM模块的API功能,可以更加方便快捷地了解该NPM模块的功能与作用,简化应用NPM模块对应的模块功能的步骤,提高了网络开发效率。

Description

代码处理方法、装置、计算机设备及计算机可读存储介质
技术领域
本申请涉及计算机技术领域,具体涉及一种代码处理方法、装置、计算机设备及计算机可读存储介质。
背景技术
近年来,开发技术不断发展,开发项目的复杂度和开发难度也在逐渐提高。为了满足项目成员的开发需求,降低开发难度,开发工具和系统的数量也日益增多。
目前,在进行网络(World Wide Web,Web)开发时,常常会使用Node.js软件包管理工具(Node Package Manager,NPM)中的各种NPM模块的开发功能来进行网络开发工作。然而,在使用这些NPM模块之前,开发人员有时可能需要提前了解一个NPM模块的具体应用程序接口(Application Programming Interface,API),以及执行API后能够实现的效果,也即能够使用的开发功能,在了解能够使用的开发功能后,再搭建一个本地项目或线上项目来安装该NPM模块进行体验与调试,导致应用NPM模块对应的模块功能的步骤繁琐,网络开发效率低。
发明内容
本申请实施例提供一种代码处理方法、装置、计算机设备及计算机可读存储介质,通过在浏览器中直接浏览NPM模块的详情信息以及直接应用NPM模块的模块功能,可以避免了手动下载与打包的过程,实现在线可以调试与体验NPM模块的API功能,从而可以更加方便快捷地了解该NPM模块的功能与作用,简化应用NPM模块对应的模块功能的步骤,提高了网络开发效率。
本申请实施例提供了一种代码处理方法,该方法包括:
获取实现目标NPM模块功能的目标代码;
基于预设判断函数对所述目标代码进行判断处理,确定所述目标代码是否可植入目标浏览器的浏览器代码中;
若是,则基于预设代码调用函数,将所述目标代码植入目标浏览器的浏览器代码中;
响应于针对所述目标代码的执行指令,在所述目标浏览器中执行所述目标代码,以通过所述目标浏览器实现所述目标NPM模块功能。
相应的,本申请实施例还提供了一种代码处理装置,该代码处理装置包括:
获取单元,用于获取实现目标NPM模块功能的目标代码;
确定单元,用于基于预设判断函数对所述目标代码进行判断处理,确定所述目标代码是否可植入目标浏览器的浏览器代码中;
植入单元,用于若是,则基于预设代码调用函数,将所述目标代码植入目标浏览器的浏览器代码中;
响应单元,用于响应于针对所述目标代码的执行指令,在所述目标浏览器中执行所述目标代码,以通过所述目标浏览器实现所述目标NPM模块功能。
相应的,本申请实施例还提供一种计算机设备,包括处理器、存储器及存储在所述存储器上并能够在所述处理器上运行的计算机程序,所述计算机程序被所述处理器执行时实现如上所述任一项的代码处理方法。
相应的,本申请实施例还提供一种计算机可读存储介质,所述计算机可读存储介质上存储计算机程序,所述计算机程序被处理器执行时实现如上所述任一项的代码处理方法。
本申请实施例提供一种代码处理方法、装置、计算机设备及计算机可读存储介质,通过获取实现目标NPM模块功能的目标代码;然后,基于预设判断函数对所述目标代码进行判断处理,确定所述目标代码是否可植入目标浏览器的浏览器代码中;接着,若是,则基于预设代码调用函数,将所述目标代码植入目标浏览器的浏览器代码中;最后,响应于针对所述目标代码的执行指令,在所述目标浏览器中执行所述目标代码,以通过所述目标浏览器实现所述目标NPM模块功能。本申请实施例可以通过在浏览器中直接浏览NPM模块的详情信息以及直接应用NPM模块的模块功能,可以避免了手动下载与打包的过程,实现在线可以调试与体验NPM模块的API功能,从而可以更加方便快捷地了解该NPM模块的功能与作用,简化应用NPM模块对应的模块功能的步骤,提高了网络开发效率。
附图说明
为了更清楚地说明本申请实施例中的技术方案,下面将对实施例描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本申请的一些实施例,对于本领域技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1是本申请实施例提供的代码处理装置的系统示意图。
图2是本申请实施例提供的代码处理方法的一种流程示意图。
图3是本申请实施例提供的代码处理装置的结构示意图。
图4是本申请实施例提供的计算机设备的结构示意图。
具体实施方式
下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚、完整地描述。显然,所描述的实施例仅仅是本申请一部分实施例,而不是全部的实施例。基于本申请中的实施例,本领域技术人员在没有作出创造性劳动前提下所获得的所有其他实施例,都属于本申请保护的范围。
目前,在进行网络(World Wide Web,Web)开发时,常常会使用Node.js软件包管理工具(Node Package Manager,NPM)中的各种NPM模块的开发功能来进行网络开发工作。然而,在使用这些NPM模块之前,开发人员有时可能需要提前了解一个NPM模块的具体应用程序接口(Application Programming Interface,API),以及执行API后能够实现的效果,也即能够使用的开发功能,在了解能够使用的开发功能后,再搭建一个本地项目或线上项目来安装该NPM模块进行体验与调试,导致应用NPM模块对应的模块功能的步骤繁琐,网络开发效率低。
并且,现有技术中通常会通过Chrome插件实现在线调试与体验NPM模块的API功能,然而,使用Chrome插件实现在线调试与体验NPM模块的API功能,无法判断NPM模块能否在浏览器中使用。因为NPM模块存在三种运行方式:只能在浏览器中运行、只能在Node中运行以及可以在浏览器与Node中运行。常规的解决方案无法知道NPM模块是哪种运行方式,导致下载下来的包可能无法使用。例如,无法得知NPM模块在浏览器中的使用名称,如果NPM模块能在浏览器中运行,那么它在控制台中可以通过window.[NPM name]的方式进行引用,但是有些包的命名不一定使用原来的NPM模块作为变量,就会导致使用window.[NPM name]时报错,只能在控制台中手动输入window.,然后使用上下方向键来查看大概的变量。又例如,只能在Chrome浏览器中使用,开发出来的Chrome浏览器插件只能在Chrome浏览器中使用,如果需要在其他浏览器中使用就要开发对应浏览器插件。这样导致常规的解决方案的扩展性与适应性极差,也增加了后续的维护成本。又例如,无法快速植入全部浏览器也无法快速调用,因为Chrome浏览器插件使用了浏览器的原生功能,所以必须依赖浏览器而生。这样导致了如果要调试一个NPM模块,就必须安装一个特定的浏览器插件,变相提高使用成本与调试难度。再加上部分浏览器插件托管在国外服务器中,在下载这些浏览器插件时也可能存在下载失败的情况。
本申请实施例提供一种代码处理方法、装置、计算机设备及计算机可读存储介质。具体地,本申请实施例的代码处理方法可以由计算机设备执行,其中,该计算机设备可以为终端。该终端可以为智能手机、平板电脑、笔记本电脑、触控屏幕、游戏机、个人计算机(PC,Personal Computer)、个人数字助理(Personal Digital Assistant,PDA)等终端设备,终端还可以包括客户端,该客户端可以是视频应用客户端、音乐应用客户端、游戏应用客户端、携带有游戏程序的浏览器客户端或即时通信客户端等。
请参阅图1,图1为本申请实施例所提供的代码处理系统的场景示意图,包括计算机设备,该系统可以包括至少一个终端,至少一个服务器,以及网络。用户持有的终端可以通过网络连接到不同的服务器。终端是具有计算硬件的任何设备,该计算硬件能够支持和执行与游戏对应的软件产品。另外,终端具有用于感测和获得用户通过在一个或者多个触控显示屏的多个点执行的触摸或者滑动操作的输入的一个或者多个多触敏屏幕。另外,当系统包括多个终端、多个服务器、多个网络时,不同的终端可以通过不同的网络、通过不同的服务器相互连接。网络可以是无线网络或者有线网络,比如无线网络为无线局域网(WLAN)、局域网(LAN)、蜂窝网络、2G网络、3G网络、4G网络、5G网络等。另外,不同的终端之间也可以使用自身的蓝牙网络或者热点网络连接到其他终端或者连接到服务器等。
其中,计算机设备可以通过获取实现目标NPM模块功能的目标代码;然后,基于预设判断函数对所述目标代码进行判断处理,确定所述目标代码是否可植入目标浏览器的浏览器代码中;接着,若是,则基于预设代码调用函数,将所述目标代码植入目标浏览器的浏览器代码中;最后,响应于针对所述目标代码的执行指令,在所述目标浏览器中执行所述目标代码,以通过所述目标浏览器实现所述目标NPM模块功能。本申请实施例可以通过在浏览器中直接浏览NPM模块的详情信息以及直接应用NPM模块的模块功能,可以避免了手动下载与打包的过程,实现在线可以调试与体验NPM模块的API功能,从而可以更加方便快捷地了解该NPM模块的功能与作用,简化应用NPM模块对应的模块功能的步骤,提高了网络开发效率。
需要说明的是,图1所示的代码处理系统的场景示意图仅仅是一个示例,本申请实施例描述的代码处理系统以及场景是为了更加清楚的说明本申请实施例的技术方案,并不构成对于本申请实施例提供的技术方案的限定,本领域普通技术人员可知,随着代码处理方法的演变和新业务场景的出现,本申请实施例提供的技术方案对于类似的技术问题,同样适用。
本申请实施例提供一种代码处理方法、装置、计算机设备及计算机可读存储介质,该代码处理方法可以配合终端使用,如智能手机、平板电脑、笔记本电脑或个人计算机等。以下对该代码处理方法、装置、计算机设备以及存储介质进行详细说明。需说明的是,以下实施例的描述顺序不作为对实施例优选顺序的限定。
请参阅图2,图2为本申请实施例提供的代码处理方法的一种流程示意图,具体流程可以如下步骤101至步骤104:
101,获取实现目标NPM模块功能的目标代码。
在一实施例中,在步骤“获取实现目标NPM模块功能的目标代码”之前,方法可以包括:
确定目标代码所属的目标来源平台的目标平台类型;
基于所述目标平台类型从预设获取函数中确定目标获取函数;
基于所述目标获取函数向所述目标来源平台发送代码获取请求,以使所述目标来源平台基于所述代码获取请求返回所述目标代码、以及所述目标代码的功能详情信息;
接收所述目标来源平台返回的所述目标代码、所述目标代码的代码类型以及所述目标代码的功能详情信息。
在又一实施例中,在步骤“接收所述目标来源平台返回的所述目标代码、所述目标代码的代码类型以及所述目标代码的功能详情信息”之后,方法可以包括:
在所述浏览器的显示页面中显示所述目标代码的目标代码文件的功能详情信息。
在本申请实施例中,当网络开发人员想要获取目标NPM模块功能的目标代码时,可以确定目标来源平台,例如,当目标代码为从第三方服务商的内容分发网络(ContentDelivery Network,CDN)服务中获取时,使用FetchCDN函数,通过使用FetchCDN函数(fetch是web提供的一个可以获取异步资源的API),可以通过Fetch方法从CDN中获取代码内容,通过DetectPkgType函数判断代码类型。如果代码类型为CSS,则返回代码内容与类型;如果代码类型为JavaScript,则进入switch语句(switch语句称为开关语句,是一种多分支选择结构),执行InjectJS函数与setTimeout函数。其中,InjectJS函数用于将代码植入到网页中,setTimeout函数用于在300毫秒后检测代码是否成功植入。如果代码类型为其他类型,因为浏览器目前仅支持CSS与JavaScript的运行,其他代码是无法在其中运行的,则返回错误信息。
具体的,本申请实施例中指出的NPM模块提供的CDN链接,指的是NPM中每个包在都有对应的CDN链接,这些CDN链接由一些第三方服务商提供,CDN链接可以加载出一些内容,上述加载出的内容就是NPM包的代码内容。
在本申请实施例中,当网络开发人员想要获取目标NPM模块功能的目标代码时,可以确定目标来源平台,例如,当目标代码为从NPM官方中获取时,使用FetchNPM函数,FetchNPM函数通过fetch方法从NPM中获取代码内容,通过DetectPkgType与DetectPkgVersion函数判断代码类型与版本。如果代码类型为CSS或JavaScript,则返回代码内容、类型、版本和统一资源定位系统(uniform resource locator,URL);如果代码类型为其他类型,因为浏览器目前仅支持CSS与JavaScript的运行,其他代码是无法在其中运行的,则返回错误信息。
102,基于预设判断函数对所述目标代码进行判断处理,确定所述目标代码是否可植入目标浏览器的浏览器代码中。
在本申请实施例中,步骤“所述基于预设判断函数对所述目标代码进行判断处理,确定所述目标代码是否可植入目标浏览器的浏览器代码中”,方法可以包括:
基于所述预设判断函数以及所述目标代码的代码类型,确定所述目标代码是否可植入目标浏览器的浏览器代码中;
若是,则基于预设代码调用函数,将所述目标代码植入目标浏览器的浏览器代码中。
进一步的,步骤“所述基于所述预设判断函数以及所述目标代码的代码类型,确定所述目标代码是否可植入目标浏览器的浏览器代码中”,方法可以包括:
采用所述预设判断函数判断所述目标代码的代码类型是否属于预设代码类型;
若是,则基于预设代码调用函数,将所述目标代码植入目标浏览器的浏览器代码中;
若否,则停止将所述目标代码植入目标浏览器的浏览器代码中的操作。
在一实施例中,步骤“所述基于预设代码调用函数,将所述目标代码植入目标浏览器的浏览器代码中”,方法可以包括:
基于预设代码调用函数以及所述目标代码的代码类型,从预设植入函数中确定目标植入函数;
基于所述目标植入函数将所述目标代码植入目标浏览器的浏览器代码中。
可选的,在步骤“基于所述目标植入函数将所述目标代码植入目标浏览器的浏览器代码中”之后,方法可以包括:
判断所述目标代码与所述浏览器代码是否存在相同的命名空间;
若是,则确定所述目标代码的代码植入结果为植入失败,停止在所述目标浏览器中执行所述目标代码,并在所述浏览器的显示页面中显示结果提示信息,其中,所述结果提示信息用于提示所述代码植入结果。
具体的,可以通过Require函数判断目标代码是否能在浏览器中使用并将代码植入到网页中。如果目标代码是CDN中的代码,则调用FetchCDN函数获取代码内容;如果目标代码的代码类型是NPM模块中的代码,则调用FetchNPM函数获取代码内容。如果获取目标代码内容成功,则判断代码类型并执行对应操作。如果目标代码的代码类型为CSS,则调用InjectCSS函数将代码植入到网页中并输出成功信息;如果目标代码的代码类型为JavaScript,则调用InjectJS函数将代码植入到网页中并通过window.postMessage方法向网页发送消息。如果代码类型为其他类型,则输出错误信息。其中,JavaScript是指一种具有函数优先的轻量级,解释型或即时编译型的编程语言。CSS是指一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
103,若是,则基于预设代码调用函数,将所述目标代码植入目标浏览器的浏览器代码中。
具体的,本申请实施例可以采用InjectRequire函数将所述目标代码植入目标浏览器的浏览器代码中,该InjectRequire函数用于植入目标代码,避免目标代码和浏览器代码冲突。例如,该InjectRequire函数通过InjectJS函数将一段目标代码植入到浏览器的浏览器代码中,以植入网页中,基于目标代码判断浏览器代码中是否存在同名的命名空间,如果存在,则发送冲突信息,例如使用postMessage这个浏览器API向window对象发送一个信息,这个信息会被记录下来,后续如果还有其他相同的命名空间,再次通过postMessage发送,那么检测前后两次是否一致就可以判断是否冲突了。如果不存在,则创建一个命名空间,并通过window.postMessage方法向网页发送消息。
本申请实施例可以通过CDN加载代码,通过CDN加载代码,避免了打包的过程,提高了开发效率与代码加载速度。然后,可以判断代码类型,通过DetectPkgType函数判断代码类型,从而决定如何处理代码。该函数判断代码类型的方式是通过检查代码的content-type头部信息。接着,可以植入代码,通过InjectCSS函数与InjectJS函数将代码植入到网页中,从而实现在网页中直接使用NPM模块的目的。接着,判断代码是否能在浏览器中使用,可以通过Require函数判断代码是否能在浏览器中使用,从而避免了因为代码不兼容浏览器而导致的错误。然后,监听代码的执行,可以通过ListenRequire函数监听代码的执行,从而判断代码中是否存在window全局变量,从而保证代码的正确性与可用性。本申请实施例可以避免代码冲突,通过InjectRequire函数植入代码,避免了代码冲突的问题,从而保证代码的可用性与稳定性。
104,响应于针对所述目标代码的执行指令,在所述目标浏览器中执行所述目标代码,以通过所述目标浏览器实现所述目标NPM模块功能。
在一实施例中,在步骤“响应于针对所述目标代码的执行指令,在所述目标浏览器中执行所述目标代码”之后,方法可以包括:
采用代码监听函数查看所述目标代码在所述目标浏览器中的执行操作,生成浏览器监听消息;
基于所述浏览器监听消息的消息类型和预设执行规则,调整所述目标代码在所述目标浏览器中的执行状态。
进一步的,步骤“所述基于所述浏览器监听消息的消息类型和预设执行规则,调整所述目标代码在所述目标浏览器中的执行状态”,方法可以包括:
若所述消息类型为第一消息类型,则保持所述目标代码在所述目标浏览器中的执行操作;
若所述消息类型为第二消息类型,则停止所述目标代码在所述目标浏览器中的执行操作。
具体的,本申请实施例采用ListenRequire函数查看所述目标代码在所述目标浏览器中的执行操作,生成浏览器监听消息,其中,ListenRequire函数用于监听代码的执行,判断目标代码中是否存在window全局变量。该ListenRequire函数通过window.addEventListener方法监听网页发送的消息,如果消息类型为require,则调用Require函数获取目标代码内容;如果消息类型为require_success,则输出成功信息;如果消息类型为vars,则记录全局变量,此处的vars是作为冲突判断的,如果没有冲突则可以使用全局变量,这里是可以使用API功能的;如果消息类型为conflict,则输出冲突信息。
本申请实施例可以通过CDN加载代码、判断代码类型、植入代码、判断NPM模块的目标代码是否能在浏览器中使用,然后监听目标代码的执行、避免代码冲突、实现方式的优化等方面,从而实现了在浏览器的网页中直接使用NPM模块的目的,提高了开发效率与代码的可用性和稳定性。
具体的,本专利通过NPM模块提供的CDN链接加载代码的内容,判断代码是CSS还是JavaScript,以对应代码形式将代码植入到网页中,通过Require函数判断代码能否在浏览器中使用,通过InjectRequire函数植入代码,通过ListenRequire函数监听代码的执行,判断代码中是否存在window全局变量。如果存在window全局变量,则提示具体的可执行的变量名称,开发者可以使用这些变量名称来调试与体验NPM模块;如果不存在window全局变量,则提示无法使用变量名称,开发者只能使用常规的解决方案来调试与体验NPM模块。其中,window全局变量就是能在浏览器控制台中使用window的方式来引用某个变量或函数,如果window的某个变量或函数存在,那么值肯定不是undefined,可以通过是否等于undefined来判断是否存在window全局变量。
为了对本申请实施例提供的代码处理方法进行进一步说明,下面将以代码处理方法在具体实施场景中的应用为例进行说明,具体场景如下所述:
(1)在本申请实施例中,当网络开发人员想要获取目标NPM模块功能的目标代码时,可以确定目标来源平台,如果目标代码为从第三方服务商的CDN服务中获取时,使用FetchCDN函数,通过使用FetchCDN函数,可以通过fetch方法从CDN中获取代码内容,通过DetectPkgType函数判断代码类型。如果代码类型为CSS,则返回代码内容与类型;如果代码类型为JavaScript,则进入switch语句,执行InjectJS函数与setTimeout函数。其中,InjectJS函数用于将代码植入到网页中,setTimeout函数用于在300毫秒后检测代码是否成功植入。如果代码类型为其他类型,因为浏览器目前仅支持CSS与JavaScript的运行,其他代码是无法在其中运行的,则返回错误信息。或者,当目标代码为从NPM官方中获取时,使用FetchNPM函数,FetchNPM函数通过fetch方法从NPM中获取代码内容,通过DetectPkgType与DetectPkgVersion函数判断代码类型与版本。如果代码类型为CSS或JavaScript,则返回代码内容、类型、版本和URL;如果代码类型为其他类型,因为浏览器目前仅支持CSS与JavaScript的运行,其他代码是无法在其中运行的,则返回错误信息。
(2)在本申请实施例中,可以通过Require函数判断目标代码是否能在浏览器中使用并将代码植入到网页中。如果目标代码是CDN中的代码,则调用FetchCDN函数获取代码内容;如果目标代码的代码类型是NPM模块中的代码,则调用FetchNPM函数获取代码内容。如果获取目标代码内容成功,则判断代码类型并执行对应操作。如果目标代码的代码类型为CSS,则调用InjectCSS函数将代码植入到网页中并输出成功信息;如果目标代码的代码类型为JavaScript,则调用InjectJS函数将代码植入到网页中并通过window.postMessage方法向网页发送消息。如果代码类型为其他类型,则输出错误信息。其中,JavaScript是指一种具有函数优先的轻量级,解释型或即时编译型的编程语言。CSS是指一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
(3)本申请实施例可以采用InjectRequire函数将所述目标代码植入目标浏览器的浏览器代码中,该InjectRequire函数用于植入目标代码,避免目标代码和浏览器代码冲突。例如,该InjectRequire函数通过InjectJS函数将一段目标代码植入到浏览器的浏览器代码中,以植入网页中,基于目标代码判断浏览器代码中是否存在同名的命名空间,如果存在,则发送冲突信息,例如使用postMessage这个浏览器API向window对象发送一个信息,这个信息会被记录下来,后续如果还有其他相同的命名空间,再次通过postMessage发送,那么检测前后两次是否一致就可以判断是否冲突了。如果不存在,则创建一个命名空间,并通过window.postMessage方法向网页发送消息。
(4)本申请实施例采用ListenRequire函数查看所述目标代码在所述目标浏览器中的执行操作,生成浏览器监听消息,其中,ListenRequire函数用于监听代码的执行,以判断目标代码中是否存在window全局变量。该ListenRequire函数通过window.addEventListener方法监听浏览器或网页发送的消息以及消息类型,如果该消息的消息类型为require,则调用Require函数获取目标代码内容;如果该消息的消息类型为require_success,则输出成功信息;如果该消息的消息类型为vars,则记录全局变量,需要说明的是,此处的vars是作为冲突判断的,如果没有冲突则可以使用全局变量,这里是可以使用该NPM模块对应的API功能的;如果该消息的消息类型为conflict,则输出冲突信息,则无法使用该NPM模块对应的API功能的。
为了对本申请实施例提供的代码处理方法进行进一步说明,下面将以代码处理方法在具体实施场景中的应用为例进行说明,具体场景如下所述:
(1)在本申请实施例中,当网络开发人员想要获取目标NPM模块功能的目标代码时,可以确定目标来源平台,如果目标代码为从第三方服务商的CDN服务中获取时,使用FetchCDN函数,通过使用FetchCDN函数,可以通过fetch方法从CDN中获取代码内容,通过DetectPkgType函数判断代码类型。如果代码类型为CSS,则返回代码内容与类型;如果代码类型为JavaScript,则进入switch语句,执行InjectJS函数与setTimeout函数。其中,InjectJS函数用于将代码植入到网页中,setTimeout函数用于在300毫秒后检测代码是否成功植入。如果代码类型为其他类型,因为浏览器目前仅支持CSS与JavaScript的运行,其他代码是无法在其中运行的,则返回错误信息。或者,当目标代码为从NPM官方中获取时,使用FetchNPM函数,FetchNPM函数通过fetch方法从NPM中获取代码内容,通过DetectPkgType与DetectPkgVersion函数判断代码类型与版本。如果代码类型为CSS或JavaScript,则返回代码内容、类型、版本和URL;如果代码类型为其他类型,因为浏览器目前仅支持CSS与JavaScript的运行,其他代码是无法在其中运行的,则返回错误信息。
(2)在本申请实施例中,可以通过Require函数判断目标代码是否能在浏览器中使用并将代码植入到网页中。如果目标代码是CDN中的代码,则调用FetchCDN函数获取代码内容;如果目标代码的代码类型是NPM模块中的代码,则调用FetchNPM函数获取代码内容。如果获取目标代码内容成功,则判断代码类型并执行对应操作。如果目标代码的代码类型为CSS,则调用InjectCSS函数将代码植入到网页中并输出成功信息;如果目标代码的代码类型为JavaScript,则调用InjectJS函数将代码植入到网页中并通过window.postMessage方法向网页发送消息。如果代码类型为其他类型,则输出错误信息。其中,JavaScript是指一种具有函数优先的轻量级,解释型或即时编译型的编程语言。CSS是指一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
(3)本申请实施例在确定目标代码所属的目标来源平台的目标平台类型;基于所述目标平台类型从预设获取函数中确定目标获取函数,然后,基于所述目标获取函数向所述目标来源平台发送代码获取请求,以使所述目标来源平台基于所述代码获取请求返回所述目标代码、以及所述目标代码的功能详情信息;最后,接收所述目标来源平台返回的所述目标代码、所述目标代码的代码类型以及所述目标代码的功能详情信息。此时,目标代码的功能详情信息包括目标代码的代码内容、类型、版本和URL,本申请实施例可以在所述浏览器的显示页面中显示所述目标代码的目标代码文件的功能详情信息,即显示目标代码的代码内容、类型、版本和URL,以使网络开发人员可以更加方便快捷地了解该NPM模块的功能与作用。
(4)本申请实施例可以采用InjectRequire函数将所述目标代码植入目标浏览器的浏览器代码中,该InjectRequire函数用于植入目标代码,从而避免目标代码和浏览器代码冲突。例如,该InjectRequire函数通过InjectJS函数将一段目标代码植入到浏览器的浏览器代码中,以植入浏览器对应的网页中。具体的,可以基于目标代码判断该浏览器代码中是否存在同名的命名空间,如果存在,则发送冲突信息,例如,使用postMessage这个浏览器API向window对象发送一个信息,这个信息会被记录下来,后续如果还有其他相同的命名空间,再次通过postMessage发送,那么检测前后两次是否一致就可以判断是否冲突了。如果不存在则会创建一个命名空间,并通过window.postMessage方法向网页发送消息。
(5)本申请实施例可以采用ListenRequire函数来查看所述目标代码在所述目标浏览器中的执行操作,从而生成浏览器监听消息,其中,ListenRequire函数用于监听代码的执行,判断目标代码中是否存在window全局变量。具体的,该ListenRequire函数通过window.addEventListener方法监听浏览器或网页发送的消息以及消息类型,如果该消息的消息类型为require,则调用Require函数获取目标代码内容;如果该消息的消息类型为require_success,则输出成功信息;如果该消息的消息类型为vars,则记录全局变量,需要说明的是,此处的vars是作为冲突判断的,如果没有冲突则可以使用全局变量,则可以使用该NPM模块对应的API功能的;如果该消息的消息类型为conflict,则输出冲突信息,则无法使用该NPM模块对应的API功能的。
综上所述,本申请实施例提供一种代码处理方法,通过获取实现目标NPM模块功能的目标代码;然后,基于预设判断函数对所述目标代码进行判断处理,确定所述目标代码是否可植入目标浏览器的浏览器代码中;接着,若是,则基于预设代码调用函数,将所述目标代码植入目标浏览器的浏览器代码中;最后,响应于针对所述目标代码的执行指令,在所述目标浏览器中执行所述目标代码,以通过所述目标浏览器实现所述目标NPM模块功能。本申请实施例可以通过在浏览器中直接浏览NPM模块的详情信息以及直接应用NPM模块的模块功能,可以避免了手动下载与打包的过程,实现在线可以调试与体验NPM模块的API功能,从而可以更加方便快捷地了解该NPM模块的功能与作用,简化应用NPM模块对应的模块功能的步骤,提高了网络开发效率。
为了更好地实施以上方法,本申请实施例还可以提供一种代码处理装置,该代码处理装置具体可以集成在计算机设备中,例如可以是终端等计算机设备。
请参阅图3,图3为本申请实施例提供的一种代码处理装置的结构示意图,该装置包括:
获取单元201,用于获取实现目标NPM模块功能的目标代码;
确定单元202,用于基于预设判断函数对所述目标代码进行判断处理,确定所述目标代码是否可植入目标浏览器的浏览器代码中;
植入单元203,用于若是,则基于预设代码调用函数,将所述目标代码植入目标浏览器的浏览器代码中;
响应单元204,用于响应于针对所述目标代码的执行指令,在所述目标浏览器中执行所述目标代码,以通过所述目标浏览器实现所述目标NPM模块功能。
在一些实施例中,该代码处理装置包括:
第一确定子单元,用于确定目标代码所属的目标来源平台的目标平台类型;
第一确定子单元,还用于基于所述目标平台类型从预设获取函数中确定目标获取函数;
发送子单元,用于基于所述目标获取函数向所述目标来源平台发送代码获取请求,以使所述目标来源平台基于所述代码获取请求返回所述目标代码、以及所述目标代码的功能详情信息;
接收子单元,用于接收所述目标来源平台返回的所述目标代码、所述目标代码的代码类型以及所述目标代码的功能详情信息。
在一些实施例中,该代码处理装置包括:
第二确定子单元,用于基于所述预设判断函数以及所述目标代码的代码类型,确定所述目标代码是否可植入目标浏览器的浏览器代码中;
第一植入子单元,用于若是,则基于预设代码调用函数,将所述目标代码植入目标浏览器的浏览器代码中。
在一些实施例中,该代码处理装置包括:
第一判断子单元,用于采用所述预设判断函数判断所述目标代码的代码类型是否属于预设代码类型;
第二植入子单元,用于若是,则基于预设代码调用函数,将所述目标代码植入目标浏览器的浏览器代码中;
第一处理单元,用于若否,则停止将所述目标代码植入目标浏览器的浏览器代码中的操作。
在一些实施例中,该代码处理装置包括:
第三确定子单元,用于基于预设代码调用函数以及所述目标代码的代码类型,从预设植入函数中确定目标植入函数;
第三植入子单元,用于基于所述目标植入函数将所述目标代码植入目标浏览器的浏览器代码中。
在一些实施例中,该代码处理装置包括:
第二判断子单元,用于判断所述目标代码与所述浏览器代码是否存在相同的命名空间;
第二处理单元,用于若是,则确定所述目标代码的代码植入结果为植入失败,停止在所述目标浏览器中执行所述目标代码,并在所述浏览器的显示页面中显示结果提示信息,其中,所述结果提示信息用于提示所述代码植入结果。
在一些实施例中,该代码处理装置包括:
生成子单元,用于采用代码监听函数查看所述目标代码在所述目标浏览器中的执行操作,生成浏览器监听消息;
调整子单元,用于基于所述浏览器监听消息的消息类型和预设执行规则,调整所述目标代码在所述目标浏览器中的执行状态。
在一些实施例中,该代码处理装置包括:
第三处理单元,用于若所述消息类型为第一消息类型,则保持所述目标代码在所述目标浏览器中的执行操作;
第三处理单元,还用于若所述消息类型为第二消息类型,则停止所述目标代码在所述目标浏览器中的执行操作。
在一些实施例中,该代码处理装置包括:
显示子单元,用于在所述浏览器的显示页面中显示所述目标代码的目标代码文件的功能详情信息。
本申请实施例公开了一种代码处理装置,可以通过获取单元201获取实现目标NPM模块功能的目标代码;确定单元202基于预设判断函数对所述目标代码进行判断处理,确定所述目标代码是否可植入目标浏览器的浏览器代码中;植入单元203若是,则基于预设代码调用函数,将所述目标代码植入目标浏览器的浏览器代码中;响应单元204响应于针对所述目标代码的执行指令,在所述目标浏览器中执行所述目标代码,以通过所述目标浏览器实现所述目标NPM模块功能。本申请实施例可以通过在浏览器中直接浏览NPM模块的详情信息以及直接应用NPM模块的模块功能,可以避免了手动下载与打包的过程,实现在线可以调试与体验NPM模块的API功能,从而可以更加方便快捷地了解该NPM模块的功能与作用,简化应用NPM模块对应的模块功能的步骤,提高了网络开发效率。
相应的,本申请实施例还提供一种计算机设备,该计算机设备可以为终端或者服务器,该终端可以为智能手机、平板电脑、笔记本电脑、触控屏幕、游戏机、个人计算机(PC,Personal Computer)、个人数字助理(Personal Digital Assistant,PDA)等终端设备。如图4所示,图4为本申请实施例提供的计算机设备的结构示意图。该计算机设备300包括有一个或者一个以上处理核心的处理器301、有一个或一个以上计算机可读存储介质的存储器302及存储在存储器302上并可在处理器上运行的计算机程序。其中,处理器301与存储器302电性连接。本领域技术人员可以理解,图中示出的计算机设备结构并不构成对计算机设备的限定,可以包括比图示更多或更少的部件,或者组合某些部件,或者不同的部件布置。
处理器301是计算机设备300的控制中心,利用各种接口和线路连接整个计算机设备300的各个部分,通过运行或加载存储在存储器302内的软件程序和/或模块,以及调用存储在存储器302内的数据,执行计算机设备300的各种功能和处理数据,从而对计算机设备300进行整体监控。
在本申请实施例中,计算机设备300中的处理器301会按照如下的步骤,将一个或一个以上的应用程序的进程对应的指令加载到存储器302中,并由处理器301来运行存储在存储器302中的应用程序,从而实现各种功能:
获取实现目标NPM模块功能的目标代码;
基于预设判断函数对所述目标代码进行判断处理,确定所述目标代码是否可植入目标浏览器的浏览器代码中;
若是,则基于预设代码调用函数,将所述目标代码植入目标浏览器的浏览器代码中;
响应于针对所述目标代码的执行指令,在所述目标浏览器中执行所述目标代码,以通过所述目标浏览器实现所述目标NPM模块功能。
在一实施例中,在获取实现目标NPM模块功能的目标代码之前,还包括:
确定目标代码所属的目标来源平台的目标平台类型;
基于所述目标平台类型从预设获取函数中确定目标获取函数;
基于所述目标获取函数向所述目标来源平台发送代码获取请求,以使所述目标来源平台基于所述代码获取请求返回所述目标代码、以及所述目标代码的功能详情信息;
接收所述目标来源平台返回的所述目标代码、所述目标代码的代码类型以及所述目标代码的功能详情信息。
在一实施例中,所述基于预设判断函数对所述目标代码进行判断处理,确定所述目标代码是否可植入目标浏览器的浏览器代码中,包括:
基于所述预设判断函数以及所述目标代码的代码类型,确定所述目标代码是否可植入目标浏览器的浏览器代码中;
若是,则基于预设代码调用函数,将所述目标代码植入目标浏览器的浏览器代码中。
在一实施例中,所述基于所述预设判断函数以及所述目标代码的代码类型,确定所述目标代码是否可植入目标浏览器的浏览器代码中,包括:
采用所述预设判断函数判断所述目标代码的代码类型是否属于预设代码类型;
若是,则基于预设代码调用函数,将所述目标代码植入目标浏览器的浏览器代码中;
若否,则停止将所述目标代码植入目标浏览器的浏览器代码中的操作。
在一实施例中,所述基于预设代码调用函数,将所述目标代码植入目标浏览器的浏览器代码中,包括:
基于预设代码调用函数以及所述目标代码的代码类型,从预设植入函数中确定目标植入函数;
基于所述目标植入函数将所述目标代码植入目标浏览器的浏览器代码中。
在一实施例中,在基于所述目标植入函数将所述目标代码植入目标浏览器的浏览器代码中之后,还包括:
判断所述目标代码与所述浏览器代码是否存在相同的命名空间;
若是,则确定所述目标代码的代码植入结果为植入失败,停止在所述目标浏览器中执行所述目标代码,并在所述浏览器的显示页面中显示结果提示信息,其中,所述结果提示信息用于提示所述代码植入结果。
在一实施例中,在响应于针对所述目标代码的执行指令,在所述目标浏览器中执行所述目标代码之后,还包括:
采用代码监听函数查看所述目标代码在所述目标浏览器中的执行操作,生成浏览器监听消息;
基于所述浏览器监听消息的消息类型和预设执行规则,调整所述目标代码在所述目标浏览器中的执行状态。
在一实施例中,所述基于所述浏览器监听消息的消息类型和预设执行规则,调整所述目标代码在所述目标浏览器中的执行状态,包括:
若所述消息类型为第一消息类型,则保持所述目标代码在所述目标浏览器中的执行操作;
若所述消息类型为第二消息类型,则停止所述目标代码在所述目标浏览器中的执行操作。
在一实施例中,在接收所述目标来源平台返回的所述目标代码、所述目标代码的代码类型以及所述目标代码的功能详情信息之后,还包括:
在所述浏览器的显示页面中显示所述目标代码的目标代码文件的功能详情信息。
以上各个操作的具体实施可参见前面的实施例,在此不再赘述。
可选的,如图4所示,计算机设备300还包括:触控显示屏303、射频电路304、音频电路305、输入单元306以及电源307。其中,处理器301分别与触控显示屏303、射频电路304、音频电路305、输入单元306以及电源307电性连接。本领域技术人员可以理解,图4中示出的计算机设备结构并不构成对计算机设备的限定,可以包括比图示更多或更少的部件,或者组合某些部件,或者不同的部件布置。
触控显示屏303可用于显示图形用户界面以及接收用户作用于图形用户界面产生的操作指令。触控显示屏303可以包括显示面板和触控面板。其中,显示面板可用于显示由用户输入的信息或提供给用户的信息以及计算机设备的各种图形用户接口,这些图形用户接口可以由图形、文本、图标、视频和其任意组合来构成。可选的,可以采用液晶显示器(LCD,Liquid Crystal Display)、有机发光二极管(OLED,Organic Light-EmittingDiode)等形式来配置显示面板。触控面板可用于收集用户在其上或附近的触摸操作(比如用户使用手指、触笔等任何适合的物体或附件在触控面板上或在触控面板附近的操作),并生成相应的操作指令,且操作指令执行对应程序。可选的,触控面板可包括触摸检测装置和触摸控制器两个部分。其中,触摸检测装置检测用户的触摸方位,并检测触摸操作带来的信号,将信号传送给触摸控制器;触摸控制器从触摸检测装置上接收触摸信息,并将它转换成触点坐标,再送给处理器301,并能接收处理器301发来的命令并加以执行。触控面板可覆盖显示面板,当触控面板检测到在其上或附近的触摸操作后,传送给处理器301以确定触摸事件的类型,随后处理器301根据触摸事件的类型在显示面板上提供相应的视觉输出。在本申请实施例中,可以将触控面板与显示面板集成到触控显示屏303而实现输入和输出功能。但是在某些实施例中,触控面板与触控面板可以作为两个独立的部件来实现输入和输出功能。即触控显示屏303也可以作为输入单元306的一部分实现输入功能。
在本申请实施例中,通过处理器301执行应用程序在触控显示屏303上生成图形界面。该触控显示屏303用于呈现图形界面以及接收用户作用于图形界面产生的操作指令。
射频电路304可用于收发射频信号,以通过无线通信与网络设备或其他计算机设备建立无线通讯,与网络设备或其他计算机设备之间收发信号。
音频电路305可以用于通过扬声器、传声器提供用户与计算机设备之间的音频接口。音频电路305可将接收到的音频数据转换后的电信号,传输到扬声器,由扬声器转换为声音信号输出;另一方面,传声器将收集的声音信号转换为电信号,由音频电路305接收后转换为音频数据,再将音频数据输出处理器301处理后,经射频电路304以发送给比如另一计算机设备,或者将音频数据输出至存储器302以便进一步处理。音频电路305还可能包括耳塞插孔,以提供外设耳机与计算机设备的通信。
输入单元306可用于接收输入的数字、字符信息或用户特征信息(例如指纹、虹膜、面部信息等),以及产生与用户设置以及功能控制有关的键盘、鼠标、操作杆、光学或者轨迹球信号输入。
电源307用于给计算机设备300的各个部件供电。可选的,电源307可以通过电源管理系统与处理器301逻辑相连,从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。电源307还可以包括一个或一个以上的直流或交流电源、再充电系统、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。
尽管图4中未示出,计算机设备300还可以包括摄像头、传感器、无线保真模块、蓝牙模块等,在此不再赘述。
在上述实施例中,对各个实施例的描述都各有侧重,某个实施例中没有详述的部分,可以参见其他实施例的相关描述。
由上可知,本实施例提供的计算机设备,通过获取实现目标NPM模块功能的目标代码;然后,基于预设判断函数对所述目标代码进行判断处理,确定所述目标代码是否可植入目标浏览器的浏览器代码中;接着,若是,则基于预设代码调用函数,将所述目标代码植入目标浏览器的浏览器代码中;最后,响应于针对所述目标代码的执行指令,在所述目标浏览器中执行所述目标代码,以通过所述目标浏览器实现所述目标NPM模块功能。本申请实施例可以通过在浏览器中直接浏览NPM模块的详情信息以及直接应用NPM模块的模块功能,可以避免了手动下载与打包的过程,实现在线可以调试与体验NPM模块的API功能,从而可以更加方便快捷地了解该NPM模块的功能与作用,简化应用NPM模块对应的模块功能的步骤,提高了网络开发效率。
本领域普通技术人员可以理解,上述实施例的各种方法中的全部或部分步骤可以通过指令来完成,或通过指令控制相关的硬件来完成,该指令可以存储于一计算机可读存储介质中,并由处理器进行加载和执行。
为此,本申请实施例提供一种计算机可读存储介质,其中存储有多条计算机程序,该计算机程序能够被处理器进行加载,以执行本申请实施例所提供的任一种代码处理方法中的步骤。例如,该计算机程序可以执行如下步骤:
获取实现目标NPM模块功能的目标代码;
基于预设判断函数对所述目标代码进行判断处理,确定所述目标代码是否可植入目标浏览器的浏览器代码中;
若是,则基于预设代码调用函数,将所述目标代码植入目标浏览器的浏览器代码中;
响应于针对所述目标代码的执行指令,在所述目标浏览器中执行所述目标代码,以通过所述目标浏览器实现所述目标NPM模块功能。
在一实施例中,在获取实现目标NPM模块功能的目标代码之前,还包括:
确定目标代码所属的目标来源平台的目标平台类型;
基于所述目标平台类型从预设获取函数中确定目标获取函数;
基于所述目标获取函数向所述目标来源平台发送代码获取请求,以使所述目标来源平台基于所述代码获取请求返回所述目标代码、以及所述目标代码的功能详情信息;
接收所述目标来源平台返回的所述目标代码、所述目标代码的代码类型以及所述目标代码的功能详情信息。
在一实施例中,所述基于预设判断函数对所述目标代码进行判断处理,确定所述目标代码是否可植入目标浏览器的浏览器代码中,包括:
基于所述预设判断函数以及所述目标代码的代码类型,确定所述目标代码是否可植入目标浏览器的浏览器代码中;
若是,则基于预设代码调用函数,将所述目标代码植入目标浏览器的浏览器代码中。
在一实施例中,所述基于所述预设判断函数以及所述目标代码的代码类型,确定所述目标代码是否可植入目标浏览器的浏览器代码中,包括:
采用所述预设判断函数判断所述目标代码的代码类型是否属于预设代码类型;
若是,则基于预设代码调用函数,将所述目标代码植入目标浏览器的浏览器代码中;
若否,则停止将所述目标代码植入目标浏览器的浏览器代码中的操作。
在一实施例中,所述基于预设代码调用函数,将所述目标代码植入目标浏览器的浏览器代码中,包括:
基于预设代码调用函数以及所述目标代码的代码类型,从预设植入函数中确定目标植入函数;
基于所述目标植入函数将所述目标代码植入目标浏览器的浏览器代码中。
在一实施例中,在基于所述目标植入函数将所述目标代码植入目标浏览器的浏览器代码中之后,还包括:
判断所述目标代码与所述浏览器代码是否存在相同的命名空间;
若是,则确定所述目标代码的代码植入结果为植入失败,停止在所述目标浏览器中执行所述目标代码,并在所述浏览器的显示页面中显示结果提示信息,其中,所述结果提示信息用于提示所述代码植入结果。
在一实施例中,在响应于针对所述目标代码的执行指令,在所述目标浏览器中执行所述目标代码之后,还包括:
采用代码监听函数查看所述目标代码在所述目标浏览器中的执行操作,生成浏览器监听消息;
基于所述浏览器监听消息的消息类型和预设执行规则,调整所述目标代码在所述目标浏览器中的执行状态。
在一实施例中,所述基于所述浏览器监听消息的消息类型和预设执行规则,调整所述目标代码在所述目标浏览器中的执行状态,包括:
若所述消息类型为第一消息类型,则保持所述目标代码在所述目标浏览器中的执行操作;
若所述消息类型为第二消息类型,则停止所述目标代码在所述目标浏览器中的执行操作。
在一实施例中,在接收所述目标来源平台返回的所述目标代码、所述目标代码的代码类型以及所述目标代码的功能详情信息之后,还包括:
在所述浏览器的显示页面中显示所述目标代码的目标代码文件的功能详情信息。
以上各个操作的具体实施可参见前面的实施例,在此不再赘述。
其中,该存储介质可以包括:只读存储器(ROM,Read Only Memory)、随机存取记忆体(RAM,Random Access Memory)、磁盘或光盘等。
由于该存储介质中所存储的计算机程序,可以执行本申请实施例所提供的任一种代码处理方法中的步骤,通过获取实现目标NPM模块功能的目标代码;然后,基于预设判断函数对所述目标代码进行判断处理,确定所述目标代码是否可植入目标浏览器的浏览器代码中;接着,若是,则基于预设代码调用函数,将所述目标代码植入目标浏览器的浏览器代码中;最后,响应于针对所述目标代码的执行指令,在所述目标浏览器中执行所述目标代码,以通过所述目标浏览器实现所述目标NPM模块功能。本申请实施例可以通过在浏览器中直接浏览NPM模块的详情信息以及直接应用NPM模块的模块功能,可以避免了手动下载与打包的过程,实现在线可以调试与体验NPM模块的API功能,从而可以更加方便快捷地了解该NPM模块的功能与作用,简化应用NPM模块对应的模块功能的步骤,提高了网络开发效率。
在上述实施例中,对各个实施例的描述都各有侧重,某个实施例中没有详述的部分,可以参见其他实施例的相关描述。
以上对本申请实施例所提供的一种代码处理方法、装置、计算机设备及计算机可读存储介质进行了详细介绍,本文中应用了具体个例对本申请的原理及实施方式进行了阐述,以上实施例的说明只是用于帮助理解本申请的技术方案及其核心思想;本领域的普通技术人员应当理解:其依然可以对前述各实施例所记载的技术方案进行修改,或者对其中部分技术特征进行等同替换;而这些修改或者替换,并不使相应技术方案的本质脱离本申请各实施例的技术方案的范围。

Claims (12)

1.一种代码处理方法,其特征在于,包括:
获取实现目标NPM模块功能的目标代码;
基于预设判断函数对所述目标代码进行判断处理,确定所述目标代码是否可植入目标浏览器的浏览器代码中;
若是,则基于预设代码调用函数,将所述目标代码植入目标浏览器的浏览器代码中;
响应于针对所述目标代码的执行指令,在所述目标浏览器中执行所述目标代码,以通过所述目标浏览器实现所述目标NPM模块功能。
2.根据权利要求1所述的代码处理方法,其特征在于,在获取实现目标NPM模块功能的目标代码之前,还包括:
确定目标代码所属的目标来源平台的目标平台类型;
基于所述目标平台类型从预设获取函数中确定目标获取函数;
基于所述目标获取函数向所述目标来源平台发送代码获取请求,以使所述目标来源平台基于所述代码获取请求返回所述目标代码、以及所述目标代码的功能详情信息;
接收所述目标来源平台返回的所述目标代码、所述目标代码的代码类型以及所述目标代码的功能详情信息。
3.根据权利要求2所述的代码处理方法,其特征在于,所述基于预设判断函数对所述目标代码进行判断处理,确定所述目标代码是否可植入目标浏览器的浏览器代码中,包括:
基于所述预设判断函数以及所述目标代码的代码类型,确定所述目标代码是否可植入目标浏览器的浏览器代码中;
若是,则基于预设代码调用函数,将所述目标代码植入目标浏览器的浏览器代码中。
4.根据权利要求3所述的代码处理方法,其特征在于,所述基于所述预设判断函数以及所述目标代码的代码类型,确定所述目标代码是否可植入目标浏览器的浏览器代码中,包括:
采用所述预设判断函数判断所述目标代码的代码类型是否属于预设代码类型;
若是,则基于预设代码调用函数,将所述目标代码植入目标浏览器的浏览器代码中;
若否,则停止将所述目标代码植入目标浏览器的浏览器代码中的操作。
5.根据权利要求3所述的代码处理方法,其特征在于,所述基于预设代码调用函数,将所述目标代码植入目标浏览器的浏览器代码中,包括:
基于预设代码调用函数以及所述目标代码的代码类型,从预设植入函数中确定目标植入函数;
基于所述目标植入函数将所述目标代码植入目标浏览器的浏览器代码中。
6.根据权利要求5所述的代码处理方法,其特征在于,在基于所述目标植入函数将所述目标代码植入目标浏览器的浏览器代码中之后,还包括:
判断所述目标代码与所述浏览器代码是否存在相同的命名空间;
若是,则确定所述目标代码的代码植入结果为植入失败,停止在所述目标浏览器中执行所述目标代码,并在所述浏览器的显示页面中显示结果提示信息,其中,所述结果提示信息用于提示所述代码植入结果。
7.根据权利要求1所述的代码处理方法,其特征在于,在响应于针对所述目标代码的执行指令,在所述目标浏览器中执行所述目标代码之后,还包括:
采用代码监听函数查看所述目标代码在所述目标浏览器中的执行操作,生成浏览器监听消息;
基于所述浏览器监听消息的消息类型和预设执行规则,调整所述目标代码在所述目标浏览器中的执行状态。
8.根据权利要求7所述的代码处理方法,其特征在于,所述基于所述浏览器监听消息的消息类型和预设执行规则,调整所述目标代码在所述目标浏览器中的执行状态,包括:
若所述消息类型为第一消息类型,则保持所述目标代码在所述目标浏览器中的执行操作;
若所述消息类型为第二消息类型,则停止所述目标代码在所述目标浏览器中的执行操作。
9.根据权利要求2所述的代码处理方法,其特征在于,在接收所述目标来源平台返回的所述目标代码、所述目标代码的代码类型以及所述目标代码的功能详情信息之后,还包括:
在所述浏览器的显示页面中显示所述目标代码的目标代码文件的功能详情信息。
10.一种代码处理方法,其特征在于,包括:
获取单元,用于获取实现目标NPM模块功能的目标代码;
确定单元,用于基于预设判断函数对所述目标代码进行判断处理,确定所述目标代码是否可植入目标浏览器的浏览器代码中;
植入单元,用于若是,则基于预设代码调用函数,将所述目标代码植入目标浏览器的浏览器代码中;
响应单元,用于响应于针对所述目标代码的执行指令,在所述目标浏览器中执行所述目标代码,以通过所述目标浏览器实现所述目标NPM模块功能。
11.一种计算机设备,其特征在于,包括处理器、存储器及存储在所述存储器上并能够在所述处理器上运行的计算机程序,所述计算机程序被所述处理器执行时实现如权利要求1至9中任一项所述的代码处理方法。
12.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质上存储计算机程序,所述计算机程序被处理器执行时实现如权利要求1至9中任一项所述的代码处理方法。
CN202311367640.1A 2023-10-20 2023-10-20 代码处理方法、装置、计算机设备及计算机可读存储介质 Pending CN117453540A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202311367640.1A CN117453540A (zh) 2023-10-20 2023-10-20 代码处理方法、装置、计算机设备及计算机可读存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202311367640.1A CN117453540A (zh) 2023-10-20 2023-10-20 代码处理方法、装置、计算机设备及计算机可读存储介质

Publications (1)

Publication Number Publication Date
CN117453540A true CN117453540A (zh) 2024-01-26

Family

ID=89580961

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202311367640.1A Pending CN117453540A (zh) 2023-10-20 2023-10-20 代码处理方法、装置、计算机设备及计算机可读存储介质

Country Status (1)

Country Link
CN (1) CN117453540A (zh)

Similar Documents

Publication Publication Date Title
CN108241500B (zh) 一种硬件组件的修复方法、装置、系统和存储介质
CN107040609B (zh) 一种网络请求处理方法和装置
CN106970790B (zh) 一种应用程序创建的方法、相关设备及系统
CN112257135B (zh) 一种基于多线程的模型加载方法、装置、存储介质及终端
CN109857403B (zh) 一种页面更新、页面处理方法及装置
KR100826147B1 (ko) 무선 컴포넌트 애플리케이션 구축 시스템 및 방법
US20050138647A1 (en) Application module for managing interactions of distributed modality components
CN107741844B (zh) 一种应用安装包的生成方法和装置
CN108124016B (zh) 一种发送post请求的方法和装置
CN108153778B (zh) 网页保存方法、网页读取方法及装置
CN107666406B (zh) 智能卡片显示方法及装置
CN104636122B (zh) 一种能力组件的共享方法和设备
CN112507263B (zh) 页面加载更新方法、装置、电子设备及存储介质
CN109800030B (zh) 一种应用程序运行方法、装置及终端
CN106953898B (zh) 一种获取软件包的方法和装置
CN111723002A (zh) 一种代码调试方法、装置、电子设备及存储介质
CN111273955A (zh) 热修复插件优化方法、装置、存储介质及电子设备
CN114327087A (zh) 输入事件处理方法、装置、电子设备和存储介质
CN110674444A (zh) 一种动态网页下载的方法及终端
EP4024208A1 (en) Method for launching quick application, and related device
CN109145598B (zh) 脚本文件的病毒检测方法、装置、终端及存储介质
CN108959062B (zh) 网页元素获取方法及装置
CN111090442B (zh) 一种应用更新方法、装置和存储介质
CN117453540A (zh) 代码处理方法、装置、计算机设备及计算机可读存储介质
CN115509531A (zh) 基于前端技术的微前端实现方法、装置、终端及存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination