(19)中华人民共和国国家知识产权局
(12)发明专利申请
(10)申请公布号 (43)申请公布日 (21)申请号 201811141310.X
(22)申请日 2018.09.28
(71)申请人 北京嘀嘀无限科技发展有限公司
地址 100193 北京市海淀区东北旺西路8号
院34号楼
(72)发明人 陈钦辉 张哲
(74)专利代理机构 北京超成律师事务所 11646
代理人 邓超
(51)Int.Cl.
G06F 8/34(2018.01)
G06F 8/65(2018.01)
G06F 8/71(2018.01)
(54)发明名称
前端开发方法、装置及电子设备
(57)摘要
本发明实施例提供一种前端开发方法、
装置及电子设备，所述前端开发方法包括：运行工具
载体启动命令，显示所述工具载体中的各个工程
页面的一个功能单元；获取到对所述各个工程模
监测该目标工程模块对应页面是否存在对应的
更新代码；若存在，使用所述更新代码进行渲染
构建目标页面。权利要求书5页 说明书16页 附图5页CN 110968302 A 2020.04.07
C N 110968302
A
1.一种前端开发方法，其特征在于，包括：
运行工具载体启动命令，显示所述工具载体中的各个工程模块对应的选项，每个工程模块对应待开发前端页面的一个功能单元；
获取到对所述各个工程模块中的任一目标工程模块的选项的选择操作后，监测该目标工程模块对应页面是否存在对应的更新代码，所述更新代码为本地更新代码或线上更新代码；
若存在，使用所述更新代码进行渲染构建目标页面。
2.如权利要求1所述的前端开发方法，其特征在于，所述使用所述更新代码进行渲染构建目标页面的步骤，包括：
读取页面模板；
将所述更新代码渲染到所述页面模板中构建目标页面。
3.如权利要求2所述的前端开发方法，其特征在于，所述监测该目标工程模块对应页面是否存在对应的更新代码的步骤，包括：
拦截所述目标工程模块对应页面中的静态资源网络之间互连的协议；
将所述静态资源网络之间互连的协议与目标前端的配置文件与本地化更新字段进行匹配，判断是否存在与所述静态资源网络之间互连的协议匹配的字段；
若存在，则查本地资源中是否存在可使用的本地更新代码。
4.如权利要求3所述的前端开发方法，其特征在于，所述查本地资源中是否存在可使用的本地更新代码的步骤，包括：
将所述页面模板的静态资源网络之间互连的协议替换为本地的静态资源服务地址，在静态资源代理层服务中，将本地的静态资源服务地址与所述目标前端的配置文件进行匹配，到所述目标工程模块对应的本地更新代码。
5.如权利要求1或2所述的前端开发方法，其特征在于，所述监测该目标工程模块对应页面是否存在对应的更新代码的步骤，包括：
监测服务器中是否存在所述目标工程模块对应的线上更新代码。
6.如权利要求1所述的前端开发方法，其特征在于，所述使用所述更新代码进行渲染构建目标页面的步骤，包括：
读取所述目标工程模块对应的打包配置；
根据所述打包配置对所述更新代码进行渲染构建目标页面。
7.如权利要求1所述的前端开发方法，其特征在于，所述各个工程模块的名称使用预设的命名规则进行命名。
8.如权利要求1所述的前端开发方法，其特征在于，所述使用所述更新代码进行渲染构建目标页面的步骤之前，所述方法包括：
若监测所述本地更新代码和线上更新代码，按照预设规则选择保留其中一种作为保留更新代码；
使用所述保留更新代码覆盖另一种更新代码。
9.如权利要求8所述的前端开发方法，其特征在于，所述按照预设规则选择保留其中一种作为保留更新代码的步骤，包括：
获取所述本地更新代码的第一时间和所述线上更新代码的第二时间；
对比所述第一时间和第二时间，选择时间距当前时间更近的更新代码作为保留更新代码。
10.如权利要求8所述的前端开发方法，其特征在于，所述按照预设规则选择保留其中一种作为保留更新代码的步骤，包括：
选择所述本地更新代码作为保留更新代码。
11.如权利要求8所述的前端开发方法，其特征在于，所述按照预设规则选择保留其中一种作为保留更新代码的步骤，包括：
获取所述本地更新代码与所述线上更新代码的区别代码；
将所述区别代码进行显示；
接收选择保留其一更新代码作为保留更新代码的选择操作。
12.如权利要求1所述的前端开发方法，其特征在于，所述监测该目标工程模块对应页面是否存在对应的更新代码的步骤之后，所述方法包括：
若存在所述本地更新代码，将所述本地更新代码上传到服务器中。
13.如权利要求12所述的前端开发方法，其特征在于，在所述将所述本地更新代码上传到服务器中的步骤之后，所述方法还包括：
若所述服务器中存在所述本地更新代码对应的工程模块对应的当前线上更新代码，则获取并显示所述本地更新代码与所述当前线上更新代码对应的区别；
接收对所述本地更新代码与所述当前线上更新代码的选择操作；
根据所述选择操作保留所述本地更新代码或所述当前线上更新代码在所述服务器中。
14.如权利要求1所述的前端开发方法，其特征在于，在所述运行工具载体启动命令，显示所述工具载
体中的各个工程模块对应的选项的步骤之后，所述方法还包括：运行工程子命令，以显示多个工程模板；
接收对所述多个工程模板进行选择的选择操作，得到新建工程模板；
提供多个为所述新建工程模板进行配置的配置参考；
接收根据所述配置参考输入的配置参数；
根据所述配置参数为所述新建工程模板进行配置，得到新建工程模块。
15.如权利要求14所述的前端开发方法，其特征在于，所述运行工程子命令，显示多个工程模板的步骤，包括：
运行所述工程子命令后，通过指定接口调用目标仓库组，查询所述目标仓库组下所有的工程模板；
显示查到的所有的工程模板。
16.如权利要求14所述的前端开发方法，其特征在于，在所述运行工具载体启动命令，显示所述工具载体中的各个工程模块对应的选项的步骤之后，所述方法还包括：运行准则子命令，以显示多个代码模板；
接收对所述多个代码模板的选择操作；
根据所述选择操作提供一个接收输入的代码的目标代码模板。
17.如权利要求16所述的前端开发方法，其特征在于，在所述接收对所述多个代码模板的选择操作的步骤之后，所述方法还包括：
判断是否有所述选择操作对应的目标代码模板对应的代码配置文件；
若没有，则创建一份与所述目标代码模板对应的代码配置文件。
18.如权利要求1所述的前端开发方法，其特征在于，所述运行工具载体启动命令之后，所述方法还包括：
显示识别码，所述识别码用于供其他终端读取；
检测到终端读取所述识别码后，向所述终端推送所述工具载体的显示界面。
19.如权利要求1所述的前端开发方法，其特征在于，所述运行工具载体启动命令之后，所述方法还包括：
接收输入的用户账号及密码；
将所述用户账号及密码发送给服务器，以获取与所述服务器交互的相关服务。
20.一种前端开发装置，其特征在于，包括：
启动模块，用于运行工具载体启动命令，显示所述工具载体中的各个工程模块对应的选项，每个工程模块对应待开发前端页面的一个功能单元；
监测模块，用于获取到对所述各个工程模块中的任一目标工程模块的选项的选择操作后，监测该目标工程模块对应页面是否存在对应的更新代码，所述更新代码为本地更新代码或线上更新代码；
更新模块，用于若存在，使用所述更新代码进行渲染构建目标页面。
21.如权利要求20所述的前端开发装置，其特征在于，所述更新模块还用于：
读取页面模板；
将所述更新代码渲染到所述页面模板中构建目标页面。
22.如权利要求21所述的前端开发装置，其特征在于，所述监测模块：
拦截所述目标工程模块对应页面中的静态资源网络之间互连的协议；
将所述静态资源网络之间互连的协议与目标前端的配置文件与本地化更新字段进行匹配，判断是否存在与所述静态资源网络之间互连的协议匹配的字段；
若存在，则查本地资源中是否存在可使用的本地更新代码。
23.如权利要求22所述的前端开发装置，其特征在于，所述监测模块：
将所述页面模板的静态资源网络之间互连的协议替换为本地的静态资源服务地址，在静态资源代理层服务中，将本地的静态资源服务地址与所述目标前端的配置文件进行匹配，到所述目标工程模块对应的本地更新代码。
24.如权利要求20或21所述的前端开发装置，其特征在于，所述监测模块还用于：
监测服务器中是否存在所述目标工程模块对应的线上更新代码。
25.如权利要求20所述的前端开发装置，其特征在于，所述更新模块还用于：
读取所述目标工程模块对应的打包配置；
根据所述打包配置对所述更新代码进行渲染构建目标页面。
26.如权利要求20所述的前端开发装置，其特征在于，所述各个工程模块的名称使用预设的命名规则进行命名。
27.如权利要求20所述的前端开发装置，其特征在于，所述装置包括：
选择模块，用于若监测所述本地更新代码和线上更新代码，按照预设规则选择保留其中一种作为保留更新代码；
覆盖模块，用于使用所述保留更新代码覆盖另一种更新代码。
28.如权利要求27所述的前端开发装置，其特征在于，所述选择模块还用于：
获取所述本地更新代码的第一时间和所述线上更新代码的第二时间；
对比所述第一时间和第二时间，选择时间距当前时间更近的更新代码作为保留更新代码。
29.如权利要求27所述的前端开发装置，其特征在于，所述选择模块还用于：
选择所述本地更新代码作为保留更新代码。
30.如权利要求27所述的前端开发装置，其特征在于，所述选择模块还用于：
获取所述本地更新代码与所述线上更新代码的区别代码；
将所述区别代码进行显示；
接收选择保留其一更新代码作为保留更新代码的选择操作。
31.如权利要求20所述的前端开发装置，其特征在于，所述装置包括：
上传模块，用于若存在所述本地更新代码，将所述本地更新代码上传到服务器中。
32.如权利要求31所述的前端开发装置，其特征在于，所述装置还包括：择一模块，用于：
若所述服务器中存在所述本地更新代码对应的工程模块对应的当前线上更新代码，则获取并显示所述本地更新代码与所述当前线上更新代码对应的区别；
接收对所述本地更新代码与所述当前线上更新代码的选择操作；
根据所述选择操作保留所述本地更新代码或所述当前线上更新代码在所述服务器中。
33.如权利要求20所述的前端开发装置，其特征在于，所述装置还包括：第一新建模块，用于：
运行工程子命令，以显示多个工程模板；
接收对所述多个工程模板进行选择的选择操作，得到新建工程模板；
提供多个为所述新建工程模板进行配置的配置参考；
接收根据所述配置参考输入的配置参数；
根据所述配置参数为所述新建工程模板进行配置，得到新建工程模块。
34.如权利要求33所述的前端开发装置，其特征在于，所述第一新建模块还用于：
运行所述工程子命令后，通过指定接口调用目标仓库组，查询所述目标仓库组下所有的工程模板；
显示查到的所有的工程模板。
35.如权利要求33所述的前端开发装置，其特征在于，所述装置还包括：提供模块，用于：
运行准则子命令，以显示多个代码模板；
接收对所述多个代码模板的选择操作；
根据所述选择操作提供一个接收输入的代码的目标代码模板。
36.如权利要求35所述的前端开发装置，其特征在于，所述装置还包括：创建模块，用于：
判断是否有所述选择操作对应的目标代码模板对应的代码配置文件；
若没有，则创建一份与所述目标代码模板对应的代码配置文件。
37.如权利要求20所述的前端开发装置，其特征在于，所述装置还包括：推送模块，用
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议