CN111580804A - 一种软件项目开发的方法和装置 - Google Patents

Abstract

本申请实施例的目的是提供一种一种用于软件项目开发的方法和装置。所述方法包括：在前端页面的构建过程中，进行模块打包工具的配置；针对一个或多个配置项分别建立相应的文件夹，以供开发人员使用各个配置项的文件夹来编写代码；根据开发人员在模块打包工具的主配置文件中构建配置对象的操作，确定需要打包的各个资源的存储位置；获取需要打包的各个资源来进行打包，以得到包含各个资源的打包文件。本申请实施例具有以下优点：本申请实施例提供的前端构建方法中的模块打包方式为开发人员的后期维护并寻找各个资源的位置提供了便利；在页面打包过程中基于页面中的各个图标对应的雪碧突来合成页面的雪碧图，方便对个图标进行定位和管理图片。

Description

一种软件项目开发的方法和装置

技术领域

本发明涉及计算机技术领域，尤其涉及一种软件项目开发的方法和装置。

背景技术

基于现有技术中，用于开发应用程序的系统的前端构建流程，其页面结构一般比较繁琐，开发人员需要撰写大量的代码，不利于后期开发人员的维护。并且，基于现有技术方案的CSS雪碧图(CSSSprites)生成方式，如果页面中存在很多小图标，需要多次向服务请求，并且需要以手动的方式测量各个图标的位置，并把相应的图片放在网页对应位置，因而难以对小图标的图片进行定位和管理。

发明内容

本申请实施例的目的是提供一种用于软件项目开发的方法和装置。

本申请实施例提供的一种用于软件项目开发的方法，包括：

在前端页面的构建过程中，进行模块打包工具的配置；

针对一个或多个配置项分别建立相应的文件夹，以供开发人员使用各个配置项的文件夹来编写代码；

根据开发人员在模块打包工具的主配置文件中构建配置对象的操作，确定需要打包的各个资源的存储位置；

获取需要打包的各个资源来进行打包，以得到包含各个资源的打包文件。

根据本申请的实施例的方法使用webpack作为模块打包工具。

根据本申请的实施例的方法进一步包括：在打包的过程中，为页面中包含的各个图标生成相应的雪碧图；基于各个图标对应的雪碧图合成新的雪碧图，并相应地更改页面的CSS。

根据本申请的实施例，所述基于各个图标对应的雪碧图合成新的雪碧图进一步包括：获取各个图标的雪碧图和各个图标在页面的原始雪碧图中的位置信息；对于每个图标，将该图标对应的雪碧图在原始雪碧图中的相应位置进行覆盖，以得到新的雪碧图。

根据本申请的实施例的方法进一步包括：使用模块打包工具将每个图标的雪碧图和相应的位置信息进行打包，得到每个图标相应的雪碧图打包文件。

根据本申请的实施例的方法进一步包括：为需要复用的组件生成相应的组件模板信息，以供其他使用该组件的一个或多个页面通过引用该组件模板信息来实现该组件的功能。

根据本申请的实施例的方法进一步包括：提供用于对页面中的组件进行统一管理的控制器，以供开发人员使用控制器来对一个或多个组件进行相应的操作；其中，所述操作包括以下至少任一项：-生成组件；-销毁组件。

根据本申请的实施例的方法进一步包括：对于弹窗组件，生成包含多种弹窗类型的弹窗模板信息，以供其他需要弹窗的页面通过引用所需弹窗类型对应的弹窗模板来在页面中进行弹窗。

根据本申请的实施例的方法进一步包括：如果所述软件项目在运行时发生数据包崩溃，确定该数据包崩溃将触发的弹窗的弹窗类型；通过引用该弹窗类型对应的弹窗模板来进行弹窗。

本申请实施例提供的一种用于软件项目开发的开发装置，包括：

用于在前端页面的构建过程中，进行模块打包工具的配置的装置；

用于针对一个或多个配置项分别建立相应的文件夹，以供开发人员使用各个配置项的文件夹来编写代码的装置；

用于根据开发人员在模块打包工具的主配置文件中构建配置对象的操作，确定需要打包的各个资源的存储位置的装置；

用于获取需要打包的各个资源来进行打包，以得到包含各个资源的打包文件的装置。

根据本申请的实施例，开发装置使用webpack作为模块打包工具。

根据本申请的实施例，所述开发装置进一步包括：用于在打包的过程中，为页面中包含的各个图标生成相应的雪碧图的装置；用于基于各个图标对应的雪碧图合成新的雪碧图，并相应地更改页面的CSS的装置。

根据本申请的实施例，所述开发装置进一步包括：用于使用模块打包工具将每个图标的雪碧图和相应的位置信息进行打包，得到每个图标相应的雪碧图打包文件的装置。

根据本申请的实施例，所述开发装置进一步包括：为需要复用的组件生成相应的组件模板信息，以供其他使用该组件的一个或多个页面通过引用该组件模板信息来实现该组件的功能。

根据本申请的实施例，所述开发装置进一步包括：提供用于对页面中的组件进行统一管理的控制器，以供开发人员使用控制器来对一个或多个组件进行相应的操作；其中，所述操作包括以下至少任一项：-生成组件；-销毁组件。

根据本申请的实施例，所述开发装置进一步包括：用于如果所述软件项目在运行时发生数据包崩溃，确定该数据包崩溃将触发的弹窗的弹窗类型的装置；用于通过引用该弹窗类型对应的弹窗模板来进行弹窗的装置。

本申请实施例提供的一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现本申请实施例的方法

本申请实施例提供的一种计算机可读的存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现本申请实施例的方法。

本申请实施例具有以下优点：本申请实施例提供了一种前端构建方法，该前端构建方法中的模块打包方式为开发人员的后期维护并寻找各个资源的位置提供了便利；本申请实施例提供的前端构方法中，在页面打包过程中基于页面中的各个图标对应的雪碧图合成页面的雪碧图，方便对个图标进行定位和管理图片；本申请实施例对弹窗等需要复用的组件创建相应的模板，方便引用，减少了开发人员编写代码的工作，提升了效率。

附图说明

通过阅读参照以下附图所作的对非限制性实施例所作的详细描述，本发明的其它特征、目的和优点将会变得更明显：

图1示出了根据本申请实施例的一种用于软件项目开发的方法的流程图；

图2示出了根据本申请实施例的一个示例性的前端构建流程图；

图3示出了根据本申请实施例的一个示例性的雪碧图插件的逻辑流程图；

图4a示出了根据本申请的一个示例性的应用程序异常检测平台的复用弹窗组件的逻辑流程图；

图4b示出了根据本申请的一个示例性的应用程序异常检测平台的弹窗界面的示意图；

图5示出了根据本申请实施例的一种用于软件项目开发的开发装置的结构示意图。

附图中相同或相似的附图标记代表相同或相似的部件。

具体实施方式

在更加详细地讨论示例性实施例之前应当提到的是，一些示例性实施例被描述成作为流程图描绘的处理或方法。虽然流程图将各项操作描述成顺序的处理，但是其中的许多操作可以被并行地、并发地或者同时实施。此外，各项操作的顺序可以被重新安排。当其操作完成时所述处理可以被终止，但是还可以具有未包括在附图中的附加步骤。所述处理可以对应于方法、函数、规程、子例程、子程序等等。

在上下文中所称“计算机设备”，也称为“电脑”，是指可以通过运行预定程序或指令来执行数值计算和/或逻辑计算等预定处理过程的智能电子设备，其可以包括处理器与存储器，由处理器执行在存储器中预存的存续指令来执行预定处理过程，或是由ASIC、FPGA、DSP等硬件执行预定处理过程，或是由上述二者组合来实现。计算机设备包括但不限于服务器、个人电脑、笔记本电脑、平板电脑、智能手机等。

所述计算机设备包括用户设备与网络设备。其中，所述用户设备包括但不限于电脑、智能手机、PDA等；所述网络设备包括但不限于单个网络服务器、多个网络服务器组成的服务器组或基于云计算(Cloud Computing)的由大量计算机或网络服务器构成的云，其中，云计算是分布式计算的一种，由一群松散耦合的计算机集组成的一个超级虚拟计算机。其中，所述计算机设备可单独运行来实现本申请，也可接入网络并通过与网络中的其他计算机设备的交互操作来实现本申请。其中，所述计算机设备所处的网络包括但不限于互联网、广域网、城域网、局域网、VPN网络等。

需要说明的是，所述用户设备、网络设备和网络等仅为举例，其他现有的或今后可能出现的计算机设备或网络如可适用于本申请，也应包含在本申请保护范围以内，并以引用方式包含于此。

后面所讨论的方法(其中一些通过流程图示出)可以通过硬件、软件、固件、中间件、微代码、硬件描述语言或者其任意组合来实施。当用软件、固件、中间件或微代码来实施时，用以实施必要任务的程序代码或代码段可以被存储在机器或计算机可读介质(比如存储介质)中。(一个或多个)处理器可以实施必要的任务。

这里所公开的具体结构和功能细节仅仅是代表性的，并且是用于描述本申请的示例性实施例的目的。但是本申请可以通过许多替换形式来具体实现，并且不应当被解释成仅仅受限于这里所阐述的实施例。

应当理解的是，虽然在这里可能使用了术语“第一”、“第二”等等来描述各个单元，但是这些单元不应当受这些术语限制。使用这些术语仅仅是为了将一个单元与另一个单元进行区分。举例来说，在不背离示例性实施例的范围的情况下，第一单元可以被称为第二单元，并且类似地第二单元可以被称为第一单元。这里所使用的术语“和/或”包括其中一个或更多所列出的相关联项目的任意和所有组合。

应当理解的是，当一个单元被称为“连接”或“耦合”到另一单元时，其可以直接连接或耦合到所述另一单元，或者可以存在中间单元。与此相对，当一个单元被称为“直接连接”或“直接耦合”到另一单元时，则不存在中间单元。应当按照类似的方式来解释被用于描述单元之间的关系的其他词语(例如“处于...之间”相比于“直接处于...之间”，“与...邻近”相比于“与...直接邻近”等等)。

这里所使用的术语仅仅是为了描述具体实施例而不意图限制示例性实施例。除非上下文明确地另有所指，否则这里所使用的单数形式“一个”、“一项”还意图包括复数。还应当理解的是，这里所使用的术语“包括”和/或“包含”规定所陈述的特征、整数、步骤、操作、单元和/或组件的存在，而不排除存在或添加一个或更多其他特征、整数、步骤、操作、单元、组件和/或其组合。

还应当提到的是，在一些替换实现方式中，所提到的功能/动作可以按照不同于附图中标示的顺序发生。举例来说，取决于所涉及的功能/动作，相继示出的两幅图实际上可以基本上同时执行或者有时可以按照相反的顺序来执行。

下面结合附图对本发明作进一步详细描述。

图1示出了根据本申请实施例的一种用于软件项目开发的方法的流程图。所述方法包括步骤S1，步骤S2、步骤S3和步骤S4。

在步骤S1中，在前端页面的构建过程中，开发装置进行模块打包工具的配置。

其中，所述模块打包工具包括各种可用于在前端页面构建过程中对所需模块进行打包的工具，例如webpack、RequireJS或browserify等等。

在步骤S2中，开发装置针对一个或多个配置项分别建立相应的文件夹，以供开发人员使用各个配置项的文件夹来编写代码。

其中，所述配置项包括入口文件或出口文件等。

在步骤S3中，开发装置根据开发人员在模块打包工具的主配置文件中构建配置对象的操作，确定需要打包的各个资源的存储位置。

优选地，所述配置对象包括但不限于以下配置内容：

1)打包模式；

2)插件；

3)入口文件；

4)出口文件；

5)工具包；

6)devServer服务器；

7)优化项设置。

在步骤S4中，开发装置获取需要打包的各个资源来进行打包，以得到包含各个资源的打包文件。

根据一个实施例，所述方法使用webpack作为模块打包工具，在前端页面的构建过程中，开发装置进行webpack的配置后，针对入口(entry)文件和出口(output)文件等配置项分别建立独立的文件夹，以供开发人员使用各个配置项的文件夹来编写代码。开发装置在步骤S3中根据开发人员在webpack的主配置文件webpack.config.js中构建配置对象，确定需要打包的各个资源的存储位置。接着，开发装置获取需要打包的各个资源来进行打包，以得到包含各个资源的dist文件夹。

根据本申请的一个实施例，所述方法进一步包括步骤S5和步骤S6。

在步骤S5中，在打包的过程中，开发装置为页面中包含的各个图标生成相应的雪碧图。

在步骤S6中，开发装置基于各个图标对应的雪碧图合成新的雪碧图，并相应地更改页面的CSS。

具体地，开发装置获取各个图标的雪碧图和各个图标在页面的原始雪碧图中的位置信息。接着，对于每个图标，开发装置将该图标对应的雪碧图在原始雪碧图中的相应位置进行覆盖，以得到新的雪碧图。

优选地，开发装置使用模块打包工具将每个图标的雪碧图和相应的位置信息进行打包，得到每个图标相应的雪碧图打包文件。

图2示出了根据本申请实施例的一个示例性的前端构建流程图。

参照图2，开发装置包含于用于软件项目开发的平台系统，该平台系统使用webpack作为模块打包工具，其前端构建流程包括以下步骤：

在步骤S201中，执行npm脚本，进行相应的插件安装；

步骤S202：由于开发人员所用的系统的不同，将MacOS系统/Linux系统和Windows系统的脚本分开，方便开发人员使用Windows系统，则执行“npm run dev,npm run pro”命令，如果是MacOS系统/Linux系统，则执行“npm run macdev,npm run pro”命令；

步骤S203：读取环境变量，找到NODE_EVN中的值；

步骤S204：为了方便后期开发人员进行维护，针对入口(entry)文件和出口(output)文件等配置项分别建立独立的文件夹，并由开发人员在webpack的主配置文件webpack.config.js中构建配置对象；

步骤S205：使用webpack进行打包，获取需要打包的各个资源来进行打包，以得到包含各个资源的dist文件夹，该dist文件夹中包含打包后的线上文件；

步骤S206：使用雪碧图插件来合成新的雪碧图，并相应地更改页面的CSS，该插件对应的逻辑流程图如下图3所示；

步骤S207：启动服务器；

步骤S208：打开浏览器进行浏览，浏览器会自动弹出来到软件项目的首页。

图3示出了根据本申请实施例的一个示例性的雪碧图插件的逻辑流程图。

参照图3，所述雪碧图插件使用webpack工具的hooks API。首先，声明一个WebpackCssSprite类(“Class WebpackCssSprite()”)；

接着，使用Constructor函数为该雪碧图插件做事先的配置；

接着，在apply函数中引入钩子(hook)；

接着，执行_hook函数，该函数的作用是执行在钩子处的行为；

接着，执行compile函数它有两个功能，一个是执行后面的_compile函数，一个是打印可能出现的错误提示；

接着，执行_compile函数；

接着，该_compile函数返回一个异步函数_asyncToGenerator,该异步函数负责该雪碧图插件的主要功能。_asyncToGenerator函数用于获取各个图标的雪碧图和各个图标在页面的原始雪碧图中的位置信息，接着对于每个图标，将该图标对应的雪碧图在原始雪碧图中的相应位置进行覆盖，以得到新的雪碧图；

具体地，_asyncToGenerator函数内部首先对样式资源的路径做了处理，找出后缀是.css的文件，然后转化成可识别的AST,再利用getBackgroundImageDeclaration函数找出背景图相关的声明，接着再检查路径的存在性，并保存文件的引用；接着，使用imageList数组存放存在且不重复的图片路径，使用sprite Result存放打包后的雪碧图，其打包文件包括雪碧图的相关属性，比如坐标、宽高以及雪碧图的图片数据。接着，统计所有坐标的数量，确定新的坐标和图片所在文件位置并与之前的做替换，从而将每个图标对应的雪碧图在原始雪碧图中的相应位置进行覆盖，以得到新的雪碧图；

接着，根据新的雪碧图，相应的更改CSS。

根据本申请实施例的方法，在前端构建方法中的模块打包方式为开发人员的后期维护并寻找各个资源的位置提供了便利；本申请实施例提供的前端构方法中，在页面打包过程中基于页面中的各个图标对应的雪碧突来合成页面的雪碧图，方便对个图标进行定位和管理图片。

根据本申请的一个实施例，所述方法进一步包括步骤S7。

在步骤S8中，开发装置为需要复用的组件生成相应的组件模板信息，以供其他使用该组件的一个或多个页面通过引用该组件模板信息来实现该组件的功能。

优选地，根据本实施例的方法进一步包括步骤S7。

提供用于对页面中的组件进行统一管理的控制器，以供开发人员使用控制器来对一个或多个组件进行相应的操作。

其中，所述操作包括但不限于以下至少任一项：

1)生成组件；

2)销毁组件。

例如，基于前端框架React中的组件的生命周期的概念，React框架中每个组件都有生命周期，包括1)Mounting：已插入真实DOM；2)Updating：正在被重新渲染；3)Unmounting：已移出真实DOM。并且，在每个组件里有为开发者提供了各种各样的方法来灵活使用组件，比如生成组件时会有componentWillMount方法等。开发装置利用这些方法为开发人员提供用于对页面中的组件进行统一管理的控制器，以供开发人员使用控制器来对一个或多个组件进行生成组件或销毁组件等操作。

根据本申请的一个实施例，需要复用的组件为弹窗组件。对于弹窗组件，开发装置生成包含多种弹窗类型的弹窗模板信息，以供其他需要弹窗的页面通过引用所需弹窗类型对应的弹窗模板来在页面中进行弹窗。

根据本申请的一个实施例，所述方法进一步包括步骤S8和步骤S9。

在步骤S9中，如果所述软件项目在运行时发生数据包崩溃，开发装置确定该数据包崩溃将触发的弹窗的弹窗类型。

其中，开发装置可基于多种方式来对弹窗进行分类，例如，将弹窗分为模态弹窗和非模态弹窗两种类型，或者分为对话框、功能框、提示框等类型。

在步骤S10中，开发装置通过引用该弹窗类型对应的弹窗模板来进行弹窗。

例如，图4a和图4b分别示出了根据本申请的一个示例性的应用程序异常检测平台的复用弹窗组件的逻辑流程图和弹窗界面的示意图。该异常检测平台基于如上图2所示的前端构建方法来进行弹窗提醒。该平台对弹窗组件进行复用的逻辑流程如图4a所示：

将index.js文件作为整个项目的起始文件，定义id＝app的根节点；

启用Window.popupController＝create()的函数，该函数是调用自文件夹components的popup文件夹中的index.js文件；

建立create：create在这里被定义，它的功能是返回一个function来创建弹窗最外侧的html；

建立popupList，实现按需引用弹窗组件：用View组件渲染，该View组件是来自于popup文件夹中的view.jsx，该文件主要定义了popupList来存贮item和i，使得其他组件可以按需引用，并定义pop和add方法；

利用Fragment组件返回对应的弹窗内部的内容：利用Fragment组件为弹窗的具体内容添加一个外层的空的div，最后利用周期函数ComponentDidMount执行回调函数cb，进行组件的传值，把该组件用this.pops.cb(this)传到components/popup/index.js中去；

给出弹窗内部的模板：在PopupItem.jsx中书写一个弹窗内部结构的模板进行复用，该弹窗内部的模板包括：AddUserPopup.jsx、AddRolePopup.jsx、AddGroupPopup.jsx和AddAppPopup.jsx；

最后完成TextPopup.jsx、Messager.jsx和ComfirmPopup.jsx，使得其他需要使用弹窗的页面可以直接引用，而无需再书写相关代码。

该异常检测平台中的某个页面进行弹窗提醒的界面如图4b所示。

根据本申请的方法，通过对弹窗等需要复用的组件创建相应的模板，方便引用，减少了开发人员编写代码的工作，提升了效率。

图5示出了根据本申请实施例的一种用于软件项目开发的开发装置的结构示意图。

所述开发装置包括：用于在前端页面的构建过程中，进行模块打包工具的配置的装置(以下简称“工具配置装置1”)，用于针对一个或多个配置项分别建立相应的文件夹，以供开发人员使用各个配置项的文件夹来编写代码的装置(以下简称“文件建立装置2”)，用于根据开发人员在模块打包工具的主配置文件中构建配置对象的操作，确定需要打包的各个资源的存储位置的装置(以下简称“对象配置装置3”)，和用于获取需要打包的各个资源来进行打包，以得到包含各个资源的打包文件的装置(以下简称“资源打包装置4”)。

参照图5，在前端页面的构建过程中，工具配置装置1”进行模块打包工具的配置。

其中，所述模块打包工具包括各种可用于在前端页面构建过程中对所需模块进行打包的工具，例如webpack、RequireJS或browserify等等。

文件建立装置2针对一个或多个配置项分别建立相应的文件夹，以供开发人员使用各个配置项的文件夹来编写代码。

其中，所述配置项包括入口文件或出口文件等。

对象配置装置3根据开发人员在模块打包工具的主配置文件中构建配置对象的操作，确定需要打包的各个资源的存储位置。

优选地，所述配置对象包括但不限于以下配置内容：

1)打包模式；

2)插件；

3)入口文件；

4)出口文件；

5)工具包；

6)devServer服务器；

7)优化项设置。

资源打包装置4获取需要打包的各个资源来进行打包，以得到包含各个资源的打包文件。

根据一个实施例，所述开发装置使用webpack作为模块打包工具，在前端页面的构建过程中，工具配置装置1进行webpack的配置后，文件建立装置2针对入口(entry)文件和出口(output)文件等配置项分别建立独立的文件夹，以供开发人员使用各个配置项的文件夹来编写代码。对象配置3根据开发人员在webpack的主配置文件webpack.config.js中构建配置对象，确定需要打包的各个资源的存储位置。接着，资源打包装置获取需要打包的各个资源来进行打包，以得到包含各个资源的dist文件夹。

根据本申请的一个实施例，所述开发装置进一步包括用于的装置(以下简称“图片生成装置”)，和用于的装置(以下简称“图片合成装置”)。

在打包的过程中，图片生成装置为页面中包含的各个图标生成相应的雪碧图。

图片合成装置基于各个图标对应的雪碧图合成新的雪碧图，并相应地更改页面的CSS。

具体地，图片合成装置获取各个图标的雪碧图和各个图标在页面的原始雪碧图中的位置信息。接着，对于每个图标，图片合成装置将该图标对应的雪碧图在原始雪碧图中的相应位置进行覆盖，以得到新的雪碧图。

优选地，图片生成装置使用模块打包工具将每个图标的雪碧图和相应的位置信息进行打包，得到每个图标相应的雪碧图打包文件。

根据本申请实施例的方案，所提供的在前端构建过程中的模块打包方式为开发人员的后期维护并寻找各个资源的位置提供了便利；本申请实施例提供的前端构流程中，在页面打包过程中基于页面中的各个图标对应的雪碧突来合成页面的雪碧图，方便对个图标进行定位和管理图片。

根据本申请的一个实施例，所述开发装置进一步包括用于为需要复用的组件生成相应的组件模板信息的装置(以下简称“组件复用装置”)。

组件复用装置为需要复用的组件生成相应的组件模板信息，以供其他使用该组件的一个或多个页面通过引用该组件模板信息来实现该组件的功能。

优选地，根据本实施例的开发装置进一步包括用于对页面中的组件进行统一管理的控制器的装置(以下简称“组件管理装置”)。

组件管理装置提供用于对页面中的组件进行统一管理的控制器，以供开发人员使用控制器来对一个或多个组件进行相应的操作。

其中，所述操作包括但不限于以下至少任一项：

1)生成组件；

2)销毁组件。

例如，基于前端框架React中的组件的生命周期的概念，React框架中每个组件都有生命周期，包括1)Mounting：已插入真实DOM；2)Updating：正在被重新渲染；3)Unmounting：已移出真实DOM。并且，在每个组件里有为开发者提供了各种各样的方法来灵活使用组件，比如生成组件时会有componentWillMount方法等。组件管理装置利用这些方法为开发人员提供用于对页面中的组件进行统一管理的控制器，以供开发人员使用控制器来对一个或多个组件进行生成组件或销毁组件等操作。

根据本申请的一个实施例，需要复用的组件为弹窗组件。对于弹窗组件，组件复用装置生成包含多种弹窗类型的弹窗模板信息，以供其他需要弹窗的页面通过引用所需弹窗类型对应的弹窗模板来在页面中进行弹窗。

根据本申请的一个实施例，所述开发装置进一步包括用于如果所述软件项目在运行时发生数据包崩溃，确定该数据包崩溃将触发的弹窗的弹窗类型的装置(以下简称“类型确定装置”)，和用于通过引用该弹窗类型对应的弹窗模板来进行弹窗的装置(以下简称“弹窗提醒装置”)。

如果所述软件项目在运行时发生数据包崩溃，类型确定装置确定该数据包崩溃将触发的弹窗的弹窗类型。

其中，开发装置可基于多种方式来对弹窗进行分类，例如，将弹窗分为模态弹窗和非模态弹窗两种类型，或者分为对话框、功能框、提示框等类型。

类型提醒装置通过引用该弹窗类型对应的弹窗模板来进行弹窗。

根据本申请的方案，通过对弹窗等需要复用的组件创建相应的模板，方便引用，减少了开发人员编写代码的工作，提升了效率。

本发明的软件程序可以通过处理器执行以实现上文所述步骤或功能。同样地，本发明的软件程序(包括相关的数据结构)可以被存储到计算机可读记录介质中，例如，RAM存储器，磁或光驱动器或软磁盘及类似设备。另外，本发明的一些步骤或功能可采用硬件来实现，例如，作为与处理器配合从而执行各个功能或步骤的电路。

另外，本发明的一部分可被应用为计算机程序产品，例如计算机程序指令，当其被计算机执行时，通过该计算机的操作，可以调用或提供根据本发明的方法和/或技术方案。而调用本发明的方法的程序指令，可能被存储在固定的或可移动的记录介质中，和/或通过广播或其他信号承载媒体中的数据流而被传输，和/或被存储在根据所述程序指令运行的计算机设备的工作存储器中。在此，根据本发明的一个实施例包括一个装置，该装置包括用于存储计算机程序指令的存储器和用于执行程序指令的处理器，其中，当该计算机程序指令被该处理器执行时，触发该装置运行基于前述根据本发明的多个实施例的方法和/或技术方案。

对于本领域技术人员而言，显然本发明不限于上述示范性实施例的细节，而且在不背离本发明的精神或基本特征的情况下，能够以其他的具体形式实现本发明。因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本发明的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化涵括在本发明内。不应将权利要求中的任何附图标记视为限制所涉及的权利要求。此外，显然“包括”一词不排除其他单元或步骤，单数不排除复数。系统权利要求中陈述的多个单元或装置也可以由一个单元或装置通过软件或者硬件来实现。第一，第二等词语用来表示名称，而并不表示任何特定的顺序。

虽然前面特别示出并且描述了示例性实施例，但是本领域技术人员将会理解的是，在不背离权利要求书的精神和范围的情况下，在其形式和细节方面可以有所变化。这里所寻求的保护在所附权利要求书中做了阐述。在下列编号条款中规定了各个实施例的这些和其他方面：

1.一种用于软件项目开发的方法，包括：

在前端页面的构建过程中，进行模块打包工具的配置；

针对一个或多个配置项分别建立相应的文件夹，以供开发人员使用各个配置项的文件夹来编写代码；

根据开发人员在模块打包工具的主配置文件中构建配置对象的操作，确定需要打包的各个资源的存储位置；

获取需要打包的各个资源来进行打包，以得到包含各个资源的打包文件。

2.根据条款1所述的方法，所述方法使用webpack作为模块打包工具。

3.根据条款1所述的方法，进一步包括：

在打包的过程中，为页面中包含的各个图标生成相应的雪碧图；

基于各个图标对应的雪碧图合成新的雪碧图，并相应地更改页面的CSS。

4.根据条款3所述的方法，所述基于各个图标对应的雪碧图合成新的雪碧图进一步包括：

获取各个图标的雪碧图和各个图标在页面的原始雪碧图中的位置信息；

对于每个图标，将该图标对应的雪碧图在原始雪碧图中的相应位置进行覆盖，以得到新的雪碧图。

5.根据条款3或4所述的方法，进一步包括：

使用模块打包工具将每个图标的雪碧图和相应的位置信息进行打包，得到每个图标相应的雪碧图打包文件。

6.根据条款1所述的方法，进一步包括：

为需要复用的组件生成相应的组件模板信息，以供其他使用该组件的一个或多个页面通过引用该组件模板信息来实现该组件的功能。

7.根据条款6所述的方法，进一步包括：

提供用于对页面中的组件进行统一管理的控制器，以供开发人员使用控制器来对一个或多个组件进行相应的操作；

其中，所述操作包括以下至少任一项：

-生成组件；

-销毁组件。

8.根据条款6所述的方法，进一步包括：

对于弹窗组件，生成包含多种弹窗类型的弹窗模板信息，以供其他需要弹窗的页面通过引用所需弹窗类型对应的弹窗模板来在页面中进行弹窗。

9.根据条款8的方法，进一步包括：

如果所述软件项目在运行时发生数据包崩溃，确定该数据包崩溃将触发的弹窗的弹窗类型；

通过引用该弹窗类型对应的弹窗模板来进行弹窗。

10.一种用于软件项目开发的开发装置，包括：

用于在前端页面的构建过程中，进行模块打包工具的配置的装置；

用于针对一个或多个配置项分别建立相应的文件夹，以供开发人员使用各个配置项的文件夹来编写代码的装置；

用于根据开发人员在模块打包工具的主配置文件中构建配置对象的操作，确定需要打包的各个资源的存储位置的装置；

用于获取需要打包的各个资源来进行打包，以得到包含各个资源的打包文件的装置。

11.根据条款10所述的开发装置，开发装置使用webpack作为模块打包工具。

12.根据条款10所述的开发装置，进一步包括：

用于在打包的过程中，为页面中包含的各个图标生成相应的雪碧图的装置；

用于基于各个图标对应的雪碧图合成新的雪碧图，并相应地更改页面的CSS的装置。

13.根据条款12所述的开发装置，所述基于各个图标对应的雪碧图合成新的雪碧图进一步包括：

获取各个图标的雪碧图和各个图标在页面的原始雪碧图中的位置信息；

对于每个图标，将该图标对应的雪碧图在原始雪碧图中的相应位置进行覆盖，以得到新的雪碧图。

14.根据条款12或13所述的开发装置，进一步包括：

用于使用模块打包工具将每个图标的雪碧图和相应的位置信息进行打包，得到每个图标相应的雪碧图打包文件的装置。

15.根据条款10所述的开发装置，进一步包括：

为需要复用的组件生成相应的组件模板信息，以供其他使用该组件的一个或多个页面通过引用该组件模板信息来实现该组件的功能。

16.根据条款15所述的开发装置，进一步包括：

提供用于对页面中的组件进行统一管理的控制器，以供开发人员使用控制器来对一个或多个组件进行相应的操作；

其中，所述操作包括以下至少任一项：

-生成组件；

-销毁组件。

17.根据条款15所述的开发装置，所述为需要复用的组件生成相应的组件模板信息进一步包括：

用于对于弹窗组件，生成包含多种弹窗类型的弹窗模板信息，以供其他需要弹窗的页面通过引用所需弹窗类型对应的弹窗模板来在页面中进行弹窗的装置。

18.根据条款17的开发装置，进一步包括：

用于如果所述软件项目在运行时发生数据包崩溃，确定该数据包崩溃将触发的弹窗的弹窗类型的装置；

用于通过引用该弹窗类型对应的弹窗模板来进行弹窗的装置。

19.一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如条款1至9中任一所述的方法。

20.一种计算机可读的存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如条款1至9中任一所述的方法。

Claims (10)

1.一种用于软件项目开发的方法，包括：

在前端页面的构建过程中，进行模块打包工具的配置；

针对一个或多个配置项分别建立相应的文件夹，以供开发人员使用各个配置项的文件夹来编写代码；

根据开发人员在模块打包工具的主配置文件中构建配置对象的操作，确定需要打包的各个资源的存储位置；

获取需要打包的各个资源来进行打包，以得到包含各个资源的打包文件。

2.根据权利要求1所述的方法，所述方法使用webpack作为模块打包工具。

3.根据权利要求1所述的方法，进一步包括：

在打包的过程中，为页面中包含的各个图标生成相应的雪碧图；

基于各个图标对应的雪碧图合成新的雪碧图，并相应地更改页面的CSS。

4.根据权利要求3所述的方法，所述基于各个图标对应的雪碧图合成新的雪碧图进一步包括：

获取各个图标的雪碧图和各个图标在页面的原始雪碧图中的位置信息；

对于每个图标，将该图标对应的雪碧图在原始雪碧图中的相应位置进行覆盖，以得到新的雪碧图。

5.根据权利要求3或4所述的方法，进一步包括：

使用模块打包工具将每个图标的雪碧图和相应的位置信息进行打包，得到每个图标相应的雪碧图打包文件。

6.根据权利要求1所述的方法，进一步包括：

为需要复用的组件生成相应的组件模板信息，以供其他使用该组件的一个或多个页面通过引用该组件模板信息来实现该组件的功能。

7.根据权利要求6所述的方法，进一步包括：

提供用于对页面中的组件进行统一管理的控制器，以供开发人员使用控制器来对一个或多个组件进行相应的操作；

其中，所述操作包括以下至少任一项：

-生成组件；

-销毁组件。

8.根据权利要求6所述的方法，进一步包括：

对于弹窗组件，生成包含多种弹窗类型的弹窗模板信息，以供其他需要弹窗的页面通过引用所需弹窗类型对应的弹窗模板来在页面中进行弹窗。

9.一种用于软件项目开发的开发装置，包括：

用于在前端页面的构建过程中，进行模块打包工具的配置的装置；

用于针对一个或多个配置项分别建立相应的文件夹，以供开发人员使用各个配置项的文件夹来编写代码的装置；

用于根据开发人员在模块打包工具的主配置文件中构建配置对象的操作，确定需要打包的各个资源的存储位置的装置；

用于获取需要打包的各个资源来进行打包，以得到包含各个资源的打包文件的装置。

10.根据权利要求9所述的开发装置，进一步包括：

用于在打包的过程中，为页面中包含的各个图标生成相应的雪碧图的装置；

用于基于各个图标对应的雪碧图合成新的雪碧图，并相应地更改页面的CSS的装置。

Images