CN111767498A

CN111767498A - 一种实现文件信息共享的方法和装置

Info

Publication number: CN111767498A
Application number: CN201911118885.4A
Authority: CN
Inventors: 单开元
Original assignee: Beijing Jingdong Century Trading Co Ltd; Beijing Wodong Tianjun Information Technology Co Ltd
Current assignee: Beijing Jingdong Century Trading Co Ltd; Beijing Wodong Tianjun Information Technology Co Ltd
Priority date: 2019-11-15
Filing date: 2019-11-15
Publication date: 2020-10-13

Abstract

本发明公开了一种实现文件信息共享的方法和装置，涉及计算机技术领域。该方法的一种具体实施方式包括：获取记载了待共享信息的共享文件，所述待共享信息指示了一个或多个共享变量及所述共享变量对应的值；使用模块打包器加载所述共享文件；从加载后的所述共享文件中获取所述共享变量及所述共享变量对应的值；将所获取的所述共享变量及所述共享变量对应的值插入到第一目标文件中；使用所述模块打包器对所述第一目标文件进行编译，生成用以进行页面展示的第二目标文件，以实现所述共享文件与所述第二目标文件的信息共享。该实施方式能够在现有的CSS或者JS语言的基础上，实现CSS对JS信息的访问，减少了开发者学习新代码需消耗的时间及精力。

Description

一种实现文件信息共享的方法和装置

技术领域

本发明涉及计算机技术领域，尤其涉及一种实现文件信息共享的方法和装置。

背景技术

目前，Web开发者需要同时掌握多种语言并能够灵活应用多种语言，如负责网页的结构HTML语言、负责网页的样式CSS(层叠样式表)语言、负责网页的逻辑和交互JavaScript(简称JS)语言等。为提高页面的开发效率、降低开发者学习不同语言的难度，出现了CSS-in-JS技术方案，也即采用JavaScript语言写CSS。该方案弥补了CSS和JS之间的差距，可以让CSS轻松访问JS上的信息并用于自身。

在实现本发明过程中，发明人发现现有技术中至少存在如下问题：由于采用JavaScript语言写CSS与原有的CSS不同，开发人员需要重新学习新的代码，耗费时间及精力；CSS-in-JS将CSS写入HTML无法缓存，加载速度慢、用户体验差。

发明内容

有鉴于此，本发明提供了一种实现文件信息共享的方法和装置，能够在现有的CSS或者JS语言的基础上，实现CSS对JS信息的访问，上手快；又避免了使用CSS-in-JS将CSS写入HTML无法缓存的问题，从而可以提页面高加载速度，提高用户体验。

为实现上述目的，根据本发明的一个方面，提供了一种实现文件信息共享的方法，包括：

获取记载了待共享信息的共享文件，所述待共享信息指示了一个或多个共享变量及所述共享变量对应的值；

使用模块打包器加载所述共享文件；

从加载后的所述共享文件中获取所述共享变量及所述共享变量对应的值；

将所获取的所述共享变量及所述共享变量对应的值插入到第一目标文件中；

使用所述模块打包器对所述第一目标文件进行编译，生成用以进行页面展示的第二目标文件，以实现所述共享文件与所述第二目标文件的信息共享。

可选地，所述模块打包器是Webpack。

可选地，所述共享文件遵循CommonJS规范。

可选地，所述第一目标文件为层叠样式表预编译文件，所述第二目标文件为层叠样式文件；

或所述第一目标文件为JavaScript文件，所述第二目标文件为CSS-in-JS文件。

可选地，在所述第一目标文件为层叠样式表预编译文件，所述第二目标文件为层叠样式文件的情况下，还包括：

从加载后的所述共享文件中，获取所述一个或多个共享变量，以生成第一数组，所述第一数组的元素指示了所述共享变量；

遍历所述第一数组，从加载后的所述共享文件中获取所述共享变量对应的值，以生成以第二数组，每一个所述第二数组的元素指示了一个键值对，所述键值对的键名指示了所述共享变量，所述键值对的值指示了所述共享变量对应的值；

根据所述第二数组，生成含有所述键值对的字符串；

将含有所述键值对的所述字符串插入到所述第一目标文件中。

为实现上述目的，根据本发明的又一个方面，提供了一种实现文件信息共享的装置，包括：文件获取模块、文件加载模块、信息获取模块、信息插入模块、文件编译模块；其中，

所述文件获取模块，用于获取记载了待共享信息的共享文件，所述待共享信息指示了一个或多个共享变量及所述共享变量对应的值；

所述文件加载模块，用于使用模块打包器加载所述共享文件；

所述信息获取模块，用于从加载的所述共享文件中获取所述共享变量对应的值；

所述信息插入模块，用于将所获取的所述共享变量及所述共享变量对应的值插入到第一目标文件中；

所述文件编译模块，用于使用所述模块打包其对所述第一目标文件进行编译，生成用以进行页面展示的第二目标文件，以实现所述共享文件与所述第二目标文件的信息共享。

可选地，所述模块打包器是Webpack。

可选地，所述共享文件遵循CommonJS规范。

根据所述第二数组，生成含有所述键值对的字符串；

为实现上述目的，根据本发明的另一个方面，提供了一种用于实现文件信息共享的电子设备，包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如上所述的实现文件信息共享的方法中任一所述的方法。

为实现上述目的，根据本发明的再一个方面，提供了一种计算机可读介质，其上存储有计算机程序，所述程序被处理器执行时实现如上所述的实现文件信息共享的方法中任一所述的方法。

上述发明中具有如下优点或有益效果：通过模块打包器实现了对共享文件的加载，从而可以将共享文件中的记载的待共享信息插入到层叠样式表预编译文件或JS文件中，进而通过模块打包器的编译获得了与层叠样式表预编译文件或JS文件对应的CSS文件或CSS-in-JS文件，实现了对共享文件信息的共享，以及共享文件信息对页面展示的控制。在现有的CSS或者JS语言的基础上，实现CSS对JS信息的访问，上手快；又避免了使用CSS-in-JS将CSS写入HTML无法缓存的问题，从而可以提页面高加载速度，提高用户体验。

上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。

附图说明

附图用于更好地理解本发明，不构成对本发明的不当限定。其中：

图1是根据本发明实施例的实现文件信息共享的方法的主要流程的示意图；

图2是根据本发明实施例的另一实现文件信息共享的方法的主要流程的示意图；

图3是根据本发明实施例的实现文件信息共享的装置的主要模块的示意图；

图4是本发明实施例可以应用于其中的示例性系统架构图；

图5是适于用来实现本发明实施例的终端设备或服务器的计算机系统的结构示意图。

具体实施方式

以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

图1是根据本发明实施例的一种实现文件信息共享的方法的主要流程示意图，如图1所示，该方法具体可以包括的步骤如下：

步骤S101，获取记载了待共享信息的共享文件，所述待共享信息指示了一个或多个共享变量及所述共享变量对应的值。

共享文件可以是预定义的记载有共享信息，且可以使用模块打包器处理的任意格式的文件，且记载的待共享信息即共享变量及共享变量对应的值可以根据实际需求进行调整。值得注意的是，在有多个共享文件的情况下，可以使用同一个文件夹容纳所有的共享文件，以对共享文件进行统一管理或者操作等。

在本申请的优选实施例中，所述共享文件遵循CommonJS规范。该遵循CommonJS规范的共享文件采用module.exports导出和require导入的方式定义，用于给其他文件传递记载的待共享信息，即共享变量及共享变量对应的值。具体地，以一个共享文件A为例进行说明，A文件的定义方式及记载的信息如下：

//A

module.exports＝{

//传递的颜色信息

‘infoColor’:red,

//传递的尺寸信息

‘infoSize’:12px

可以理解的是，上述共享文件A中的信息可以是自由定义的，上述内容仅为示例性的，意思为共享文件A中记载了infoColor、infoSize两个共享变量，对应的取值分别为red、2px。也即是说，共享文件A通过module.exports方式导出一个样式对象，该样式对象中定义了颜色和尺寸，需要将这个样式对象传递给与预编译样式文件或者脚本文件才能在页面中进行展示，以实现对页面的控制。其中，预编译样式文件是指SCSS、SASS、LESS等CSS预编译文件，用以获取CSS文件；脚本文件是指JavaScript(以下简称JS)文件。CSS(层叠样式表，Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

步骤S102，使用模块打包器加载所述共享文件。

由于CSS预编译文件或JS脚本文件不遵循CommonJS的规范，因此从遵循CommonJS的规范的共享文件(如共享文件A)中导出的定义好的信息并不能在CSS预编译文件或JS脚本文件中直接导入。因此，需要使用模块打包器对共享文件进行处理，以将上面定义的信息插入到CSS预编译文件或JS脚本文中件。如此，CSS预编译文件或JS脚本文件可以轻松使用这些信息，达到CSS访问JS信息的效果或在CSS-in-JS文件中访问JS信息的效果。

可以理解的是，可使用的模块打包器包括但不限于Webpack，在一个优选的实施例中，使用的模块打包器是Webpack。即使用Webpack中的加载器加载共享文件，以便从共享文件中提取共享信息。所谓Webpack是指一个现代JavaScript应用程序的静态模块打包器(module bundler)。Webpack自身只理解JavaScript，因此Webpack需要借助loader(加载器)让Webpack能够去处理那些非JavaScript文件。loader可以将所有类型的文件转换为Webpack能够处理的有效模块，然后就可以利用Webpack的打包能力，对它们进行处理。

具体地，在Webpack配置文件webpack.config.js，因为Webpack文件支持commonjs规范，因此可使用require的方式将共享文件信息导入到配置文件中，具体通过require导入方式示例如下：

//webpack.config.js

const V＝require(/public/A)；

步骤S103，从加载后的所述共享文件中获取所述共享变量及所述共享变量对应的值。

从加载后的所述共享文件中获取所述共享变量及所述共享变量对应的值，包括：从共享文件中获取字符串形式的共享变量及共享变量的值，以便直接插入SCSS、SASS、LESS等CSS预编译文件中，以达到CSS文件访问共享变量及对应的值的效果；或者直接将从符合CommonJS的规范的共享文件中获取的共享变量及共享变量的值插入到JavaScript文件中，进而通过CSS-in-JS编写JavaScript文件中的样式，并通过style标签的形式插入到HTML.中，从而用于展示页面样式等。

步骤S104，将所获取的所述共享变量及所述共享变量对应的值插入到第一目标文件中。

所述第一目标文件为层叠样式表预编译文件，对应的所述第二目标文件为层叠样式文件；或所述第一目标文件为JavaScript文件，对应的所述第二目标文件为CSS-in-JS文件。层叠样式表预编译文件即为SCSS、SASS、LESS等CSS预编译文件，对应的第二目标文件则为用以页面展示的CSS文件。可以理解的是，对于共享文件定义的页面格式信息而言，只有通过CSS文件或者CSS-in-JS文件才能实现页面格式的展示，因此，需要对直接插入有共享信息的CSS预编译文件或JavaScript文件进行处理，编译为CSS文件或CSS-in-JS文件，用以进行页面展示。

在此基础上，与获取所述共享变量及所述共享变量对应的值相对应，可以直接将从符合CommonJS的规范的共享文件中获取的共享变量及共享变量的值插入到JavaScript文件中，也可以将从共享文件中获取的字符串形式的共享变量及共享变量的值，直接插入SCSS、SASS、LESS等CSS预编译文件中。

在一个优选的实施例中，在所述第一目标文件为层叠样式表预编译文件，所述第二目标文件为层叠样式文件的情况下，还包括：从加载后的所述共享文件中，获取所述一个或多个共享变量，以生成第一数组，所述第一数组的元素指示了所述共享变量；遍历所述第一数组，从加载后的所述共享文件中获取所述共享变量对应的值，以生成以第二数组，每一个所述第二数组的元素指示了一个键值对，所述键值对的键名指示了所述共享变量，所述键值对的值指示了所述共享变量对应的值；根据所述第二数组，生成含有所述键值对的字符串；将含有所述键值对的所述字符串插入到所述第一目标文件中。

具体地，仍以上述共享文件A为例进行说明，从加载后的共享文件A中，使用Object.keys()方法获取其中的键名，对应的以该键名为元素的第一数组内容如下：

{infoColor；infoSize}

对第一数组执行map方法，即遍历上述第一数组，从加载后的共享文件A中获取第一数组中中每一个共享变量对应的值，并组装为键值对，如$key:value，其中，Key为共享变量，value为共享变量的值，获取的以该键值对为元素的第二数组内容如下：

{infoColor:red；infoSize:2px}

在此基础上，对第二数组中的每一项执行join()方法，该方法的作用是将第二数组中的每一项进行拼接并得到一个字符串S，我们采用回车的形式即join(‘\n’)进行拼接，拼接的结果如下所示：

“

$key1:value1；

$key2:value2

”

也即是说，共享文件A声明多少个共享变量及共享变量对应的值，则在此处存在多少键值对与之一一对应。基于此，将生成的键值对的字符串S，插入到CSS预编译文件的头部，CSS预编译文件访问共享信息的方式示例如下：

.example{

color:$key1

}

如此，CSS预编译文件可轻松访问JS的信息。

步骤S105，使用所述模块打包器对所述第一目标文件进行编译，生成用以进行页面展示的第二目标文件，以实现所述共享文件与所述第二目标文件的信息共享。

第二目标文件是使用模块打包器编译第一目标文件后生成的可以进行页面展示的文件：在第一目标文件是CSS预编译文件的情况下，编译后生成的第二目标文件为CSS文件，可以将插入到CSS预编译文件中的待共享信息(如页面格式等)进行页面展示；在第一目标文件为JS文件的情况下，第二目标文件则是编译后生成的CSS-in-JS文件，并将直接插入到JS文件中的待共享信息，如页面格式信息等，以style标签的形式插入到HTML中，进行页面展示。

也即是说，在CSS预编译文件可轻松访问JS的信息的基础上，将CSS预编译文件编译为CSS文件，则可实现CSS对JS的信息的轻松访问，并用于页面展示。或在JS文件中直接插入共享文件信息的基础上，使用CSS-in-JS方案编写样式，则该样式可直接访问JS文件中插入的样式信息，比如可将我们定义的颜色和文字大小直接赋值给fontSize和color属性，并在编译后将CSS-in-JS文件中的样式以style标签的形式插入到HTML中，用于展示页面样式。

值得注意的是，无论第一目标文件是CSS预编译文件还是JS文件，都可以通过直接修改共享文件中的共享变量一会对应的值，并重新使用Webpack等加载编译的方式，实现对页面格式的修改及控制。

基于上述实施例，通过模块打包器实现了对符合CommonJS规范的共享文件的加载，从而可以将共享文件中的记载的信息插入到层叠样式表预编译文件或JS文件中，进而通过模块打包器的编译获得了与层叠样式表预编译文件或JS文件对应的CSS文件或CSS-in-JS文件，实现了对共享文件信息的共享，以及共享文件信息对页面展示的控制。在现有的CSS或者JS语言的基础上，实现CSS对JS信息的访问，上手快；又避免了使用CSS-in-JS将CSS写入HTML无法缓存的问题，从而可以提页面高加载速度，提高用户体验。

参见图2，在上述实施例的基础上，提供了另一种实现文件信息共享的方法的主要流程的示意图，该方法具体可以包括的步骤如下：

步骤S201，获取记载了待共享信息的共享文件，所述待共享信息指示了了一个或多个共享变量及所述共享变量对应的值。

步骤S202，使用模块打包器加载所述共享文件。可以理解的是，所述第一目标文件为层叠样式表预编译文件，所述第二目标文件为层叠样式文件；或所述第一目标文件为JavaScript文件，所述第二目标文件为CSS-in-JS文件。在本申请的该实施例中，仅以第一目标文件为层叠样式表预编译文件，所述第二目标文件为层叠样式文件为例进行说明。

步骤S203，从加载后的所述共享文件中，获取所述一个或多个共享变量，以生成第一数组，所述第一数组的元素指示了所述共享变量。

步骤S204，遍历所述第一数组，从加载后的所述共享文件中获取所述共享变量对应的值，以生成以第二数组，每一个所述第二数组的元素指示了一个键值对，所述键值对的键名指示了所述共享变量，所述键值对的值指示了所述共享变量对应的值。

步骤S205，根据所述第二数组，生成含有所述键值对的字符串。

步骤S206，将含有所述键值对的所述字符串插入到所述第一目标文件中。

步骤S207，使用所述模块打包器对所述第一目标文件进行编译，生成用以进行页面展示的第二目标文件，以实现所述共享文件与所述第二目标文件的信息共享。

参见图3，在上述实施例的基础上，本发明实施例提供了一种实现文件信息共享的装置300，其特征在于，包括：文件获取模块301、文件加载模块302、信息获取模块303、信息插入模块304、文件编译模块305；其中，

所述文件获取模块301，用于获取记载了待共享信息的共享文件，所述待共享信息指示了一个或多个共享变量及所述共享变量对应的值；

所述文件加载模块302，用于使用模块打包器加载所述共享文件；

所述信息获取模块303，用于从加载的所述共享文件中获取所述共享变量对应的值；

所述信息插入模块304，用于将所获取的所述共享变量及所述共享变量对应的值插入到第一目标文件中；

所述文件编译模块305，用于使用所述模块打包其对所述第一目标文件进行编译，生成用以进行页面展示的第二目标文件，以实现所述共享文件与所述第二目标文件的信息共享。

在一个优选的实施例中，所述模块打包器是Webpack。

在一个优选的实施例中，所述共享文件遵循CommonJS规范。

在一个优选的实施例中，所述第一目标文件为层叠样式表预编译文件，所述第二目标文件为层叠样式文件；或所述第一目标文件为JavaScript文件，所述第二目标文件为CSS-in-JS文件。

图4示出了可以应用本发明实施例的实现文件信息共享的服方法或实现文件信息共享的服装置的示例性系统架构400。

如图4所示，系统架构400可以包括终端设备401、402、403，网络404和服务器405。网络404用以在终端设备401、402、403和服务器405之间提供通信链路的介质。网络404可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

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

终端设备401、402、403可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。

服务器405可以是提供各种服务的服务器，例如对用户利用终端设备401、402、403所浏览的购物类网站提供支持的后台管理服务器。后台管理服务器可以对接收到的产品信息查询请求等数据进行分析等处理，并将处理结果(例如页面样式)反馈给终端设备。

需要说明的是，本发明实施例所提供的实现文件信息共享的服方法一般由服务器405执行，相应地，实现文件信息共享的服装置一般设置于服务器405中。

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

下面参考图5，其示出了适于用来实现本发明实施例的终端设备的计算机系统500的结构示意图。图5示出的终端设备仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图5所示，计算机系统500包括中央处理单元(CPU)501，其可以根据存储在只读存储器(ROM)502中的程序或者从存储部分508加载到随机访问存储器(RAM)503中的程序而执行各种适当的动作和处理。在RAM 503中，还存储有系统500操作所需的各种程序和数据。CPU 501、ROM 502以及RAM 503通过总线504彼此相连。输入/输出(I/O)接口505也连接至总线504。

以下部件连接至I/O接口505：包括键盘、鼠标等的输入部分506；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分507；包括硬盘等的存储部分508；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分509。通信部分509经由诸如因特网的网络执行通信处理。驱动器510也根据需要连接至I/O接口505。可拆卸介质511，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器510上，以便于从其上读出的计算机程序根据需要被安装入存储部分508。

特别地，根据本发明公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本发明公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分509从网络上被下载和安装，和/或从可拆卸介质511被安装。在该计算机程序被中央处理单元(CPU)501执行时，执行本发明的系统中限定的上述功能。

需要说明的是，本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本发明中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本发明中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。

附图中的流程图和框图，图示了按照本发明各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本发明实施例中所涉及到的模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述模块也可以设置在处理器中，例如，可以描述为：一种处理器包括文件获取模块、文件加载模块、信息获取模块、信息插入模块、文件编译模块。其中，这些模块的名称在某种情况下并不构成对该模块本身的限定，例如，文件获取模块还可以被描述为“用于获取记载了待共享信息的共享文件，所述待共享信息指示了一个或多个共享变量及所述共享变量对应的值的模块”。

作为另一方面，本发明还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的设备中所包含的；也可以是单独存在，而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该设备执行时，使得该设备包括：获取共享文件，所述共享文件记载了一个或多个共享变量及所述共享变量对应的值；使用模块打包器加载所述共享文件；从加载后的所述共享文件中获取所述共享变量及所述共享变量对应的值；

将所获取的所述共享变量及所述共享变量对应的值插入到第一目标文件中；使用所述模块打包器对所述第一目标文件进行编译，获取用以进行页面展示的第二目标文件，以实现所述共享文件与所述第二目标文件的信息共享。

根据本发明实施例的技术方案，通过模块打包器实现了对符合CommonJS规范的共享文件的加载，从而可以将共享文件中的记载的信息插入到层叠样式表预编译文件或JS文件中，进而通过模块打包器的编译获得了与层叠样式表预编译文件或JS文件对应的CSS文件或CSS-in-JS文件，实现了对共享文件信息的共享，以及共享文件信息对页面展示的控制。在现有的CSS或者JS语言的基础上，实现CSS对JS信息的访问，上手快；又避免了使用CSS-in-JS将CSS写入HTML无法缓存的问题，从而可以提页面高加载速度，提高用户体验。

上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。

Claims

1.一种实现文件信息共享的方法，其特征在于，包括：

使用模块打包器加载所述共享文件；

2.根据权利要求1所述的实现文件信息共享的方法，其特征在于，

所述模块打包器是Webpack。

3.根据权利要求1所述的实现文件信息共享的方法，其特征在于，

所述共享文件遵循CommonJS规范。

4.根据权利要求3所述的实现文件信息共享的方法，其特征在于，

所述第一目标文件为层叠样式表预编译文件，所述第二目标文件为层叠样式文件；

5.根据权利要求4所述的实现文件信息共享的方法，其特征在于，在所述第一目标文件为层叠样式表预编译文件，所述第二目标文件为层叠样式文件的情况下，还包括：

根据所述第二数组，生成含有所述键值对的字符串；

6.一种实现文件信息共享的装置，其特征在于，包括：文件获取模块、文件加载模块、信息获取模块、信息插入模块、文件编译模块；其中，

7.根据权利要求6所述的实现文件信息共享的装置，其特征在于，在所述第一目标文件为层叠样式表预编译文件，所述第二目标文件为层叠样式文件的情况下，还包括：

根据所述第二数组，生成含有所述键值对的字符串；

8.一种用于实现文件信息共享的电子设备，其特征在于，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-5中任一所述的方法。

9.一种计算机可读介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现如权利要求1-5中任一所述的方法。