CN108287707A - Jsx文件生成方法、装置、存储介质和计算机设备 - Google Patents

Abstract

本发明涉及一种JSX文件生成方法、装置、存储介质和计算机设备，所述方法包括：获取待处理的PSD文件；识别所述PSD文件中每个图层中的可视信息、所述可视信息在相应图层中的位置信息；根据每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储；获取与所述PSD文件相匹配的JSX模板文件；根据分类存储的分层文件中的可视信息在所述相应图层中的位置信息，将相应的可视信息加载至所述JSX模板文件的对应区域中，生成JSX文件。上述JSX文件生成方法、装置、存储介质和计算机设备可提高JSX文件的生成的便利性。

Description

JSX文件生成方法、装置、存储介质和计算机设备

技术领域

本发明涉及信息处理技术领域，特别是涉及一种JSX文件生成方法、装置、存储介质和计算机设备。

背景技术

JSX(JavaScript XML)是一种在React组件内部构建标签的类XML语法，JSX文件是由JSX命令组成的描述性文本。在通过React创建用户界面视图组件时，需要用到JSX文件。

传统的JSX文件的生成方法，是通过将PSD文件转换为HTML文件，再根据所转换的HTML文件来转换成JSX文件。由于这种传统的在生成JSX文件时需要进过两次转换，因而其转换过程比较复杂。

发明内容

基于此，有必要针对上述JSX文件转换生成的过程比较复杂的技术问题，提供一种JSX文件生成方法、装置、存储介质和计算机设备。

一种JSX文件生成方法，所述方法包括：获取待处理的PSD文件；识别所述PSD文件中每个图层中的可视信息、所述可视信息在相应图层中的位置信息；根据每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储；获取与所述PSD文件相匹配的JSX模板文件；根据分类存储的分层文件中的可视信息在所述相应图层中的位置信息，将相应的可视信息加载至所述JSX模板文件的对应区域中，生成JSX文件。

在其中一个实施例中，在所述根据每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储之前，还包括：识别所述PSD文件中每个图层中的可视信息之间的关联关系；所述根据每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储，包括：根据所述关联关系对每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储。

在其中一个实施例中，所述根据所述关联关系对每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储，包括：检测具有关联关系的图层中的可视信息的类型是否相同，若是，则将相同类型的可视信息合并成同一份分层文件；将不具有关联关系的图层中的可视信息，或者具有关联关系的图层中的不同类型的可视信息独立生成分层文件；将分层文件存储至与可视信息的类型对应的存储路径中。

在其中一个实施例中，所述根据分类存储的分层文件中的可视信息在相应图层中的位置信息，将相应的可视信息加载至所述JSX模板文件的对应区域中，包括：提取每个存储路径下的分层文件；将提取的分层文件中的可视信息和位置信息，根据所述位置信息将对应的可视信息加载至所述JSX模板文件中与所述存储路径对应的区域中。

在其中一个实施例中，所述根据每个图层中的可视信息和位置信息形成相应的分层文件，包括：对所述可视信息进行格式处理和位置处理；根据每个图层中的处理后的可视信息和位置信息形成相应的分层文件。

在其中一个实施例中，所述获取与所述PSD文件相匹配的JSX模板文件，包括：获取每个JSX模板文件的历史反馈信息；根据所述历史反馈信息选取与所述PSD文件相匹配的JSX模板文件。

一种JSX文件生成装置，所述装置包括：PSD文件获取模块，用于获取待处理的PSD文件；识别模块，用于识别所述PSD文件中每个图层中的可视信息、所述可视信息在相应图层中的位置信息；分层文件生成模块，用于根据每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储；JSX模板文件获取模块，用于获取与所述PSD文件相匹配的JSX模板文件；JSX文件生成模块，用于根据分类存储的分层文件中的可视信息在所述相应图层中的位置信息，将相应的可视信息加载至所述JSX模板文件的对应区域中，生成JSX文件。

在其中一个实施例中，所述识别模块还用于识别所述PSD文件中每个图层中的可视信息之间的关联关系；所述分层文件生成模块还用于根据所述关联关系对每个图层中的可视信息和位置信息形成相应的分层文件。

一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述各实施例中所述的JSX文件生成方法的步骤。

一种计算机设备，包括存储器及处理器，所述存储器上存储有可被处理器执行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现上述各实施例中所述的JSX文件生成方法的步骤。

上述的JSX文件生成方法、装置、存储介质和计算机设备，通过识别PSD文件中每个图层中的可视信息以及可视信息在相应图层中的位置信息，并将识别出的该图层转换成分层文件进行分类存储，同时还获取与PSD文件相匹配的JSX模板文件，再从所存储的分层文件提取相应可视信息及其位置信息，按照该可视信息和位置信息确定该可视信息所加载的区域，并将其加载至对应区域中，生成JSX文件。上述方法通过生成分层文件，并利用JSX模板文件，从而可直接将PSD文件转换成JSX文件，提高了JSX文件的生成的便利性。

附图说明

图1为一个实施例中JSX文件生成方法的应用环境图；

图2为一个实施例中JSX文件生成方法的流程图；

图3为一个实施例中根据关联关系对每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储的流程图；

图4为一个实施例中JSX文件生成装置的结构框图；

图5为一个实施例中计算机设备的内部结构图。

具体实施方式

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

本发明所提供的JSX文件生成方法，可应用于如图1所示的应用环境中，参考图1所示，该JSX文件生成方法的应用环境包括终端110和服务器120。终端110可通过网络与服务器120连接，其中，终端110可为JSX文件设计或开发的用户的所使用的终端，服务器120可为适用于生成JSX文件的服务器。其中，终端110或服务器120均可上存储待处理的PSD文件，并可识别出该PSD文件中每个图层中的可视信息及其位置信息，并生成JSX文件。比如，以终端110为例，终端110可从本地获取待处理的PSD文件，或者可从服务器110上获取待处理的PSD文件；并可调用本地内置的可识别处理PSD文件的应用来识别PSD文件中每个图层中的可视信息、可视信息在相应图层中的位置信息；也可以向服务器120发送对该PSD文件的识别指令，接收有服务器120所出别处的PSD文件中每个图层中的可视信息、可视信息在相应图层中的位置信息，然后根据每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储；获取与PSD文件相匹配的JSX模板文件；根据分类存储的分层文件中的可视信息在相应图层中的位置信息，将相应的可视信息加载至JSX模板文件的对应区域中，生成JSX文件，从而实现了对JSX文件的生成。

在一个实施例中，如图2所示，提供了一种JSX文件生成方法。该方法包括：

步骤S202，获取待处理的PSD文件。

本实施例中，计算机设备可获取待处理的PSD文件，该计算机设备可为终端或服务器，该终端可包括但不限于手机、平板电脑、便携式笔记本或智能穿戴设备等。PSD(Photoshop Document)文件是Adobe公司的图像处理软件Photoshop的专用格式的文件。当该计算机设备为终端时，可提供下相应的PSD文件选取界面，并接收用户从该界面上提供的PSD文件选取入口对相应PSD文件的选取操作，再侦测在界面上对PSD文件选取的虚拟按钮点击操作，相应的手势或语音信息等，根据该相应的点击操作，手势或者语音信息等生成PSD文件选取指令，根据该选取指令获取对应选取的PSD文件，以设置为用于生成JSX文件的待处理PSD文件。

当该计算机设备为服务器时，终端可根据用户选取的待处理的PSD文件，生成相应的JSX文件生成请求，将该请求发送至服务器。服务器可接收该JSX文件生成请求，获取该JSX文件生成请求中包含的待处理的PSD文件。

步骤S204，识别PSD文件中每个图层中的可视信息、可视信息在相应图层中的位置信息。

本实施例中，PSD文件中存储Photoshop中所有的图层，不同图层的属性不同，且不同图层之间具有层级关系。每个图层中均可包含相应的可视信息以及可视信息在相应图层中的位置信息。其中，该可视信息包括图片、文字、通道、参考线、注解和颜色等信息，位置信息为相应可视信息在对应图层中所处的位置。图层的属性包括每个可视信息的属性，比如图片的属性为png、bmp等格式。

在一个实施例中，计算机设备可调用预设的Photoshop软件来对待处理的PSD文件进行解析，识别PSD文件中每个图层中的可视信息及其位置信息。

在一个实施例中，计算机设备还可将该PSD文件发送至适用于解析该PSD文件的云服务器上，并向其发送解析指令，接收由云服务器所解析出的每个图层中的可视信息、位置信息以及关联关系，以降低计算机设备对资源的消耗。

步骤S206，根据每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储。

本实施例中，计算机设备可根据所识别出的图层，将其中一个或几个图层中的位置信息分别形成相应的一个分层文件，并存储。所存储的分层文件可为PSD文件中的各个图层，即将PSD中的各个图层独立出来进行分类存储。具体地，可缓存在计算机设备的内存储器中或存储至相应的非易失性存储介质中。比如，可针对每个图层，可对应存储为一份分层文件，并保持该图层中的可视信息及其位置信息不变。或者可将多份图层合并成一份分层文件，合并成的分层文件中的每个可视元素可保留其在原图层中的位置，或者在原图层中的位置对存储在分层文件中的位置进行调整。

在一个实施例中，形成的不同分层文件可按照其中的可视信息的属性的不同，被存储至对应不同的路径下，形成分类存储。

步骤S208，获取与PSD文件相匹配的JSX模板文件。

本实施例中，计算机设备还预设了多个JSX模板文件，可从其中选取一个与该PSD文件最匹配的JSX模板文件。JSX模板文件为用于生成相应JSX文件的模板文件，该JSX模板文件可为用户自定义制作的JSX模板文件，还可为预先存储的JSX模板文件。不同JSX模板文件所生成的JSX文件的内容样式不一定相同。

计算机设备可根据PSD文件中的每个图层的属性、以及可视元素的类型和在图层中的位置信息，从多个JSX模板文件中选取出最匹配的一个，作为待生成JSX文件的JSX模板文件。

在一个实施例中，上述步骤S208可在步骤S202之后、步骤S210之前的任意时刻执行。

步骤S210，根据分类存储的分层文件中的可视信息在相应图层中的位置信息，将相应的可视信息加载至JSX模板文件的对应区域中，生成JSX文件。

本实施例中，JSX模板文件中设置了不同的图层以及每个图层中的不同的可视信息所适用的加载区域，计算机设备可从所存储的分层文件中提取相应的可视信息，并根据该可视信息的属性以及在分层文件中的位置信息，确定其在JSX模板文件中所适应的加载区域，并将该可视信息加载至相应确定的区域中，当加载完所有的可视信息后，则生成相应的JSX文件。

本实施例中，通过识别PSD文件中每个图层中的可视信息以及可视信息在相应图层中的位置信息，并将识别出的该图层转换成分层文件进行分类存储，同时还获取与PSD文件相匹配的JSX模板文件，再从所存储的分层文件提取相应可视信息及其位置信息，按照该可视信息和位置信息确定该可视信息所加载的区域，并将其加载至对应区域中，生成JSX文件。上述方法通过生成分层文件，并利用JSX模板文件，从而可直接将PSD文件转换成JSX文件，既提高了JSX文件的生成的便利性，同时还可提高JSX文件的转换效率。

在一个实施例中，在步骤S206之前，上述方法还包括：识别PSD文件中每个图层中的可视信息之间的关联关系；步骤S206包括：根据关联关系对每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储。

本实施例中，计算机设备可进一步识别出每个图层中的可视信息之间是否具有关联关系，该关联关系表示相应可视信息之间具有一定的联系，比如为引用关系。计算机设备可根据所识别出的关联关系，提取具有关联关系的图层中的可视信息，进行合并，生成分层文件。并提取不具有关联关系的图层中的可视元素，同样也生成分层文件。使得具有关联关系的图层合并至一份分层文件中，并对生成的分层文件进行分类存储。同样地，所生成的分层文件中的每个可视元素可保留其在原图层中的位置，或者在原图层中的位置对存储在分层文件中的位置进行调整。

本实施例中，通过进一步考虑可视信息之间的关联关系来形成分层文件，使得后续加载分层文件中的可视信息至JSX模板文件中的效率更高。

在一个实施例中，如图3所示，上述根据关联关系对每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储，包括：

步骤S302，检测具有关联关系的图层中的可视信息的类型是否相同，若是，则执行步骤S304，否则，执行步骤S306。

本实施例中，计算机设备可检测每个图层中的可视信息之间是否具有关联关系，在检测出每个图层中的可视信息是否具有关联关系之后，可进一步检测具有关联关系的可视信息的信息类型是否相同。举例来说，若具有关联关系的两种可视信息分别为文字信息和图片信息时，则判定两者的信息类型不相同，当检测出两种可视信息均为图片信息，且两种图片信息的信息类型分别为JPG格式的图片时，则判定两个可视信息的信息类型相同。

步骤S304，将相同类型的可视信息合并成同一份分层文件。

本实施例中，可将具有相互关联的、相同类型的可视信息合并至同一份分层文件之中，形成一份分层文件，使得被合并存储的可视信息之间的信息类型相同，以提高后续调用该分层文件中的可视信息的便利性的和效率。

步骤S306，将不具有关联关系的图层中的可视信息，或者具有关联关系的图层中的不同类型的可视信息独立生成分层文件。

本实施例中，针对检测到不具有关联关系的图层中的可视信息，以及虽然具有关联关系，但关联的可视信息之间的类型并不相同，则将所涉及到的统一图层中的可视信息进行单独存储，即将每个图层中的可视信息单独形成一份分层文件。比如，具有5个图层，且每个图层之中的可视信息之间不具有关联关系，或者具有关联关系，但可视信息并不相同，则可对应生成5个分层文件，每个分层文件单独存储对应一个图层中的可视信息。

在一个实施例中，针对可视信息为文字信息时，可进一步检测该文字信息是否为可编辑的文字信息，若否，则将可编辑的文字信息和不可编辑的文字信息判定为不同类型的可视信息。比如该文字信息为PSD文件中经过滤镜、变色、变形处理过的文字信息，其不能被进行编辑。

步骤S308，将分层文件存储至与可视信息的类型对应的存储路径中。

本实施例中，计算机设备可将不同的图层中的可视信息所形成的分层文件存储至预设的对应不同的路径下。具体地，可针对不同的可视信息的类型，设置对应的存储路径。举例来说，可设置某一中图形类的可视信息对应的存储位置为路径A，针对某一种文字类型的可视信息存储的位置为路径B。

当检测到图层中的可视信息的信息类型后，确定其相应的存储路径，将所形成的分层文件存储至对应的路径下，以进一步提高对分层文件存储的规范性。且使得后续在需要调用分层文件时，可根据相应的路径寻找到对应类型的可视信息的分层文件，提高后续调用分层文件的便利性。

在一个实施例中，上述根据分类存储的分层文件中的可视信息在相应图层中的位置信息，将相应的可视信息加载至JSX模板文件的对应区域中，包括：提取每个存储路径下的分层文件；将提取的分层文件中的可视信息和位置信息，根据位置信息将对应的可视信息加载至JSX模板文件中与存储路径对应的区域中。

本实施例中，计算机设备可在检测到对JSX模板文件进行可视信息的加载指令后，提取上述步骤中所生成并存储的分层文件，并从相应预设的对应路径下提取对应类型的每个分层文件，所提取的分层文件为上述待处理的PSD文件所生成的分层文件。

计算机设备针对每种JSX模板文件，所设置的其中的不同区域可被适用于加载的可视信息的类型不一定相同。计算机设备可检测该JSX模板文件中的每个待加载的区域所适用于加载的类型，并可根据该适用的类型，自动从对应的路径下提取相应的分层文件，将相应分层文件中的可视信息加载至对应的区域中。通过遍历每个存储路径下的分层文件，以完成对所有分层文件中的可视信息的加载，从而生成相应的JSX文件。通过根据相应的路径寻找到对应类型的可视信息的分层文件，将其加载至JSX模板文件的对应区域中，可提高调用分层文件的便利性，和可视信息加载的效率。

在一个实施例中，在从对应的路径中提取出相应分层文件后，在准备加载至相应的JXS模板文件之前，可生成是否确认加载的提示信息，以供用户进行加载确认，使得用户可对待加载的分层文件进行修改，以进一步提高加载的准确性。

在一个实施例中，根据每个图层中的可视信息和位置信息形成相应的分层文件，包括：对可视信息进行格式处理和位置处理；根据每个图层中的处理后的可视信息和位置信息形成相应的分层文件。

本实施例中，计算机设备可进一步对所识别出的可视信息进行格式处理和位置处理。其中，格式处理包括对所识别出的可视信息的信息类型进行检测，并判定是否需要进行修改，以使得修改后的可视信息的信息类型更加匹配后续所生成的JSX文件。位置处理用于检测待形成的分层文件中的可视信息所处的位置是否需要进行调整，使得调整后的位置更加匹配后续所生成的JSX文件。其中，可检测将识别出的可视信息在图层中的位置设置为可视信息在待形成的分层文件中的位置是否相匹配，若不匹配，可进行位置调整。通过格式处理和位置处理，根据格式处理和位置处理后的可视信息形成相应的分层文件，从而可进一步提高利用分层文件生成JSX文件的效率。

在一个实施例中，获取与PSD文件相匹配的JSX模板文件，包括：获取每个JSX模板文件的历史反馈信息；根据历史反馈信息选取与PSD文件相匹配的JSX模板文件。

本实施例中，计算机设备的模板库中可存储多个JSX模板文件，并可进一步存储每个JSX模板文件的历史反馈信息。历史反馈信息包括JSX模板文件的使用信息和推荐信息等，可根据该使用信息和推荐信息计算出相应JSX模板文件的使用次数、使用频率以及推荐次数等。可根据每个JSX模板文件使用次数、使用频率和推荐次数查询出适用于生成本次JSX文件的JSX模板文件。

在一个实施例中，该模板库中所存储的JSX模板文件为对应用户使用过的JSX模板文件，比如可为用户的登录账号中所关联存储的JSX模板文件的历史反馈信息，也可为计算机设备自身存储的JSX模板文件的历史反馈信息。使得可从该用户使用过的JSX模板文件的历史反馈信息，选取出相应的JSX模板文件。比如，可根据历史反馈信息，查询出用户使用次数最多的JSX模板文件，将其判定为与该PSD模板文件最匹配的JSX模板文件。或者从该历史反馈信息中查询出用户最近一次使用的JSX模板文件，将其判定为与该PSD模板文件最匹配的JSX模板文件。

在一个实施例中，当检测到与用户的登录账号关联的JSX模板文件均不与该PSD文件相匹配时，可从服务器上查询多个JSX模板文件，并从其中选取一个或多个匹配度最高的JSX模板文件，以向用户推荐，并根据接收到的选择指令，将选择的JSX判定为与PSD文件相匹配的JSX模板文件。

在一个实施例中，计算机设备可接收对JSX模板文件的修改指令，并存储修改后的JSX模板文件，从而使得用户可自定义地编辑和创建JSX模板文件，并选择修改后的JSX模板文件作为与PSD文件相匹配的JSX模板文件，提高了JSX模板文件生成的灵活性。具体地，修改指令中可携带对JSX模板文件中的代码块的顺序调整信息以及对代码块的编辑和修改等信息，使得根据其中所携带的修改和/或调整的信息，完成对JSX模板文件的修改，并建立修改后的JSX模板文件与用户账号之间的关联关系。

上述JSX文件生成方法，可以将设计稿的PSD文件一键输出成react版的JSX文件，明显提升从UI设计到开发react代码的开发效率，能够更方便、流畅的对接到移动app中，并且生成的前端代码一致性较好，更加规范。

在一个实施例中，如图4所示，提供了一种JSX文件生成装置，该装置包括：

PSD文件获取模块402，用于获取待处理的PSD文件。

识别模块404，用于识别PSD文件中每个图层中的可视信息、可视信息在相应图层中的位置信息。

分层文件生成模块406，用于根据每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储。

JSX模板文件获取模块408，用于获取与PSD文件相匹配的JSX模板文件。

JSX文件生成模块410，用于根据分类存储的分层文件中的可视信息在相应图层中的位置信息，将相应的可视信息加载至JSX模板文件的对应区域中，生成JSX文件。

在一个实施例中，识别模块404还用于识别PSD文件中每个图层中的可视信息之间的关联关系；分层文件生成模块406还用于根据关联关系对每个图层中的可视信息和位置信息形成相应的分层文件。

在一个实施例中，分层文件生成模块406还用于检测具有关联关系的图层中的可视信息的类型是否相同，若是，则将相同类型的可视信息合并成同一份分层文件；将不具有关联关系的图层中的可视信息，或者具有关联关系的图层中的不同类型的可视信息独立生成分层文件；将分层文件存储至与可视信息的类型对应的存储路径中。

在一个实施例中，JSX文件生成模块410还用于提取每个存储路径下的分层文件；将提取的分层文件中的可视信息和位置信息，根据位置信息将对应的可视信息加载至JSX模板文件中与存储路径对应的区域中。

在一个实施例中，分层文件生成模块406还用于对可视信息进行格式处理和位置处理；根据每个图层中的处理后的可视信息和位置信息形成相应的分层文件。

在一个实施例中，JSX模板文件获取模块408还用于获取每个JSX模板文件的历史反馈信息；根据历史反馈信息选取与PSD文件相匹配的JSX模板文件。

上述JSX文件生成装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。其中，网络接口可以是以太网卡或无线网卡等。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。该处理器可以为中央处理单元(CPU)、微处理器、单片机等。

在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述各实施例中的JSX文件生成方法的步骤。

在一个实施例中，该计算机程序被处理器执行时实现以下步骤：获取待处理的PSD文件；识别PSD文件中每个图层中的可视信息、可视信息在相应图层中的位置信息；根据每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储；获取与PSD文件相匹配的JSX模板文件；根据分类存储的分层文件中的可视信息在相应图层中的位置信息，将相应的可视信息加载至JSX模板文件的对应区域中，生成JSX文件。

在一个实施例中，该计算机程序被处理器执行时，在实现根据每个图层中的可视信息和位置信息形成相应的分层文件之前，还包括实现识别PSD文件中每个图层中的可视信息之间的关联关系；所实现的根据每个图层中的可视信息和位置信息形成相应的分层文件，包括：根据关联关系对每个图层中的可视信息和位置信息形成相应的分层文件。

在一个实施例中，该计算机程序被处理器执行时实现的根据关联关系对每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储，包括：检测具有关联关系的图层中的可视信息的类型是否相同，若是，则将相同类型的可视信息合并成同一份分层文件；将不具有关联关系的图层中的可视信息，或者具有关联关系的图层中的不同类型的可视信息独立生成分层文件；将分层文件存储至与可视信息的类型对应的存储路径中。

在一个实施例中，该计算机程序被处理器执行时实现的根据分类存储的分层文件中的可视信息在相应图层中的位置信息，将相应的可视信息加载至JSX模板文件的对应区域中，包括：提取每个存储路径下的分层文件；将提取的分层文件中的可视信息和位置信息，根据位置信息将对应的可视信息加载至JSX模板文件中与存储路径对应的区域中。

在一个实施例中，该计算机程序被处理器执行时实现的根据每个图层中的可视信息和位置信息形成相应的分层文件，包括：对可视信息进行格式处理和位置处理；根据每个图层中的处理后的可视信息和位置信息形成相应的分层文件。

在一个实施例中，该计算机程序被处理器执行时实现的获取与PSD文件相匹配的JSX模板文件，包括：获取每个JSX模板文件的历史反馈信息；根据历史反馈信息选取与PSD文件相匹配的JSX模板文件。

在一个实施例中，提供了一种计算机设备，包括存储器及处理器，该存储器上存储有可被处理器执行的计算机程序，该处理器执行该计算机程序时实现上述各实施例中的JSX文件生成方法的步骤。

在一个实施例中，该计算机设备可为终端或服务器等，比如可为图1中所示的终端110或者服务器120。如图5所示，为一个实施例中计算机设备的内部结构示意图。该计算机设备包括通过系统总线连接的处理器、存储器和网络接口。其中，该处理器用于提供计算和控制能力，支撑整个计算机设备的运行。存储器用于存储数据、指令代码等，存储器上存储至少一个计算机程序，该计算机程序可被处理器执行，以实现本申请实施例中提供的适用于计算机设备的JSX文件生成方法。存储器可包括磁碟、光盘、只读存储记忆体(Read-OnlyMemory，ROM)等非易失性存储介质，或随机存储记忆体(Random-Access-Memory，RAM)等。例如，在一个实施例中，存储器包括非易失性存储介质及内存储器。非易失性存储介质存储有操作系统、数据库和计算机程序。该数据库中存储有用于实现以上各个实施例所提供的一种JSX文件生成方法相关的数据，比如可存储有多个JSX模板文件等。该计算机程序可被处理器所执行，以用于实现以上各个实施例所提供的一种JSX文件生成方法。计算机设备中的内存储器为非易失性存储介质中的操作系统、数据库和计算机程序提供高速缓存的运行环境。网络接口可以是以太网卡或无线网卡等，用于与外部的终端或服务器进行通信。

本领域技术人员可以理解，图5中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。比如该计算机设备还可包含显示屏，该显示屏可用于显示相应的PSD文件以及JSX文件等信息。显示屏可以是触摸屏，比如为电容屏或电子屏，可通过接收作用于该触摸屏上显示的控件的点击操作，生成相应的指令。

在一个实施例中，该处理器执行该计算机程序时实现以下步骤：获取待处理的PSD文件；识别PSD文件中每个图层中的可视信息、可视信息在相应图层中的位置信息；根据每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储；获取与PSD文件相匹配的JSX模板文件；根据分类存储的分层文件中的可视信息在相应图层中的位置信息，将相应的可视信息加载至JSX模板文件的对应区域中，生成JSX文件。

在一个实施例中，该处理器执行该计算机程序时，在实现根据每个图层中的可视信息和位置信息形成相应的分层文件之前，还包括实现识别PSD文件中每个图层中的可视信息之间的关联关系的步骤；所实现的根据每个图层中的可视信息和位置信息形成相应的分层文件，包括：根据关联关系对每个图层中的可视信息和位置信息形成相应的分层文件。

在一个实施例中，该处理器执行该计算机程序时实现的根据关联关系对每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储，包括：检测具有关联关系的图层中的可视信息的类型是否相同，若是，则将相同类型的可视信息合并成同一份分层文件；将不具有关联关系的图层中的可视信息，或者具有关联关系的图层中的不同类型的可视信息独立生成分层文件；将分层文件存储至与可视信息的类型对应的存储路径中。

在一个实施例中，该处理器执行该计算机程序时实现的根据分类存储的分层文件中的可视信息在相应图层中的位置信息，将相应的可视信息加载至JSX模板文件的对应区域中，包括：提取每个存储路径下的分层文件；将提取的分层文件中的可视信息和位置信息，根据位置信息将对应的可视信息加载至JSX模板文件中与存储路径对应的区域中。

在一个实施例中，该处理器执行该计算机程序时实现的根据每个图层中的可视信息和位置信息形成相应的分层文件，包括：对可视信息进行格式处理和位置处理；根据每个图层中的处理后的可视信息和位置信息形成相应的分层文件。

在一个实施例中，该处理器执行该计算机程序时实现的获取与PSD文件相匹配的JSX模板文件，包括：获取每个JSX模板文件的历史反馈信息；根据历史反馈信息选取与PSD文件相匹配的JSX模板文件。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成。该计算机程序可存储在存储器上，比如存储于一非易失性计算机可读取存储介质中。该程序被执行时，可实现包括如上述各方法的实施例的流程。

本发明所使用的对存储器、存储、数据库或其它介质的任何引用可包括非易失性存储器。合适的非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。

以上所述实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (10)

1.一种JSX文件生成方法，其特征在于，所述方法包括：

获取待处理的PSD文件；

识别所述PSD文件中每个图层中的可视信息、所述可视信息在相应图层中的位置信息；

根据每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储；

获取与所述PSD文件相匹配的JSX模板文件；

根据分类存储的分层文件中的可视信息在所述相应图层中的位置信息，将相应的可视信息加载至所述JSX模板文件的对应区域中，生成JSX文件。

2.根据权利要求1所述的方法，其特征在于，在所述根据每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储之前，还包括：

识别所述PSD文件中每个图层中的可视信息之间的关联关系；

所述根据每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储，包括：

根据所述关联关系对每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储。

3.根据权利要求2所述的方法，其特征在于，所述根据所述关联关系对每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储，包括：

检测具有关联关系的图层中的可视信息的类型是否相同，若是，则将相同类型的可视信息合并成同一份分层文件；

将不具有关联关系的图层中的可视信息，或者具有关联关系的图层中的不同类型的可视信息独立生成分层文件；

将分层文件存储至与可视信息的类型对应的存储路径中。

4.根据权利要求3所述的方法，其特征在于，所述根据分类存储的分层文件中的可视信息在相应图层中的位置信息，将相应的可视信息加载至所述JSX模板文件的对应区域中，包括：

提取每个存储路径下的分层文件；

将提取的分层文件中的可视信息和位置信息，根据所述位置信息将对应的可视信息加载至所述JSX模板文件中与所述存储路径对应的区域中。

5.根据权利要求1所述的方法，其特征在于，所述根据每个图层中的可视信息和位置信息形成相应的分层文件，包括：

对所述可视信息进行格式处理和位置处理；

根据每个图层中的处理后的可视信息和位置信息形成相应的分层文件。

6.根据权利要求1至5中任一项所述的方法，其特征在于，所述获取与所述PSD文件相匹配的JSX模板文件，包括：

获取每个JSX模板文件的历史反馈信息；

根据所述历史反馈信息选取与所述PSD文件相匹配的JSX模板文件。

7.一种JSX文件生成装置，其特征在于，所述装置包括：

PSD文件获取模块，用于获取待处理的PSD文件；

识别模块，用于识别所述PSD文件中每个图层中的可视信息、所述可视信息在相应图层中的位置信息；

分层文件生成模块，用于根据每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储；

JSX模板文件获取模块，用于获取与所述PSD文件相匹配的JSX模板文件；

JSX文件生成模块，用于根据分类存储的分层文件中的可视信息在所述相应图层中的位置信息，将相应的可视信息加载至所述JSX模板文件的对应区域中，生成JSX文件。

8.根据权利要求7所述的装置，其特征在于，所述识别模块还用于识别所述PSD文件中每个图层中的可视信息之间的关联关系；

所述分层文件生成模块还用于根据所述关联关系对每个图层中的可视信息和位置信息形成相应的分层文件。

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

10.一种计算机设备，包括存储器及处理器，所述存储器上存储有可被处理器执行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至6中任一项所述方法的步骤。