(19)中华人民共和国国家知识产权局
(12)发明专利申请
(10)申请公布号 (43)申请公布日 (21)申请号 201710015437.6
(22)申请日 2017.01.10
(71)申请人 北大方正集团有限公司
地址 100871 北京市海淀区成府路298号方
正大厦9层
申请人 北京北大方正电子有限公司
(72)发明人 戚博文　
(74)专利代理机构 北京友联知识产权代理事务
所(普通合伙) 11343
代理人 尚志峰　汪海屏
(51)Int.Cl.
G06F  8/30(2018.01)
(54)发明名称
web前端开发项目搭建的方法及系统
(57)摘要
本发明提出了一种web前端开发项目搭建的
方法及系统，web前端开发项目搭建的方法包括：
通过script标签加载项目主模块；定义项目主模
块的依赖模块的加载特征；定义依赖模块的加载
路径；加载依赖模块；将加载完成的依赖模块合
并至同一文件中，本发明解决js语言和css语言
本身不够灵活的现状，使得web前端开发人员能
像后端开发人员使用其它高级语言一样，提高
js脚本开发web前端开发效率，解决传统的一个页面需要引
用多个js/css资源文件，降低浏览器对资源的请
求次数，
减轻服务压力。权利要求书2页  说明书7页  附图2页CN 108287704 A 2018.07.17
C N  108287704
A
1.一种web前端开发项目搭建的方法，其特征在于，包括：
通过script标签加载项目主模块；
定义所述项目主模块的依赖模块的加载特征；
定义所述依赖模块的加载路径；
加载所述依赖模块；
将加载完成的所述依赖模块合并至同一文件中。
2.根据权利要求1所述的web前端开发项目搭建的方法，其特征在于，通过所述script 标签加载所述项目主模块，具体包括：
将所述script标签设置在网页底部；或
利用async属性或defer关键字改写所述script标签；
加载所述项目主模块的主要入口代码。
3.根据权利要求1所述的web前端开发项目搭建的方法，其特征在于，定义所述项目主模块的所述依赖模块的所述加载特征，具体包括：
当所述依赖模块为非AMD规范模块时，定义所述依赖模块的exports值及deps数组。
4.根据权利要求1所述的web前端开发项目搭建的方法，其特征在于，定义所述依赖模块的加载路径，具体包括：
当所述依赖模块在js子目录中时，将所述依赖模块的加载路径定义为js子目录；
当所述依赖模块不在js子目录中时，通过逐一指定路径或改变基目录，将所述依赖模块的加载路径定义为相应目录。
5.根据权利要求4所述的web前端开发项目搭建的方法，其特征在于，还包括：
当所述依赖模块存在于其它主机时，将所述依赖模块的加载路径定义为所述主机网址。
6.一种web前端开发项目搭建的系统，其特征在于，包括：
加载单元，用于通过script标签加载项目主模块；
定义单元，用于定义所述项目主模块的依赖模块的加载特征；以及定义所述依赖模块的加载路径；
所述加载单元，还用于加载所述依赖模块；
合并单元，用于将加载完成的所述依赖模块合并至同一文件中。
7.根据权利要求6所述的web前端开发项目搭建的系统，其特征在于，所述加载单元，具体用于：
将所述script标签设置在网页底部；或
利用async属性或defer关键字改写所述script标签；
加载所述项目主模块的主要入口代码。
8.根据权利要求6所述的web前端开发项目搭建的系统，其特征在于，所述定义单元，具体用于：
当所述依赖模块为非AMD规范模块时，定义所述依赖模块的exports值及deps数组。
9.根据权利要求6所述的web前端开发项目搭建的系统，其特征在于，所述定义单元，还用于：
当所述依赖模块在js子目录中时，将所述依赖模块的加载路径定义为js子目录；
当所述依赖模块不在js子目录中时，通过逐一指定路径或改变基目录，将所述依赖模块的加载路径定义为相应目录。
10.根据权利要求9所述的web前端开发项目搭建的系统，其特征在于，所述定义单元，还用于：
当所述依赖模块存在于其它主机时，将所述依赖模块的加载路径定义为所述主机网址。
web前端开发项目搭建的方法及系统
技术领域
[0001]本发明涉及web开发技术领域，具体而言，涉及一种web前端开发项目搭建的方法及系统。
背景技术
[0002]在网站开发和运行过程中，需要搭建web前端开发环境，对存在问题的内容进行修改和调试，现有技术中，web前端开发环境常常需要用到内容分发网络服务，访问网页时会附带访问很多资源文件，比如js和css文件等，互联网时代不可缺少的两门语言即js脚本语言和css层叠样式表，web前端开发也是开发web应用不可缺少的重要部分。
[0003]在复杂的互联网应用环境中，如何提高js、css语言本身的使用灵活性，及如何构建一套属于web前端开发的项目搭建快速方法，是提高开发效率的重要途径，较为原始的搭建web前端方法即将项目中需要用到的资源文件，按照使用顺序以html标签形式引入。该方法简单明了，代码易懂，但是明显的缺点为浏览器加载网页时需要访问数次服务器，请求这些资源文件，这无疑是损耗性能的。
[0004]因此，如何减少页面中对js、css内容的请求次数，解决代码文件中的相互引用造成的代码冗余成为了关键问题。
发明内容
[0005]本发明旨在至少解决现有技术或相关技术中存在的技术问题之一。
[0006]为此，本发明的一个目的在于提出了一种web前端开发项目搭建的方法。[0007]本发明的另一个目的在于提出了一种web前端开发项目搭建的系统。
[0008]有鉴于此，根据本发明的一个目的，提出了一种web前端开发项目搭建的方法，包括：通过script标签加载项目主模块；定义项目主模块的依赖模块的加载特征；定义依赖模块的加载路径；加载依赖模块；将加载完成的依赖模块合并至同一文件中。
[0009]本发明提供的web前端开发项目搭建的方法，通过script标签加载项目主模块，定义项目主模块
的依赖模块的加载特征，定义依赖模块的加载路径，加载依赖模块，将加载完成的依赖模块合并至同一文件中，解决js语言和css语言本身不够灵活的现状，使得web前端开发人员能像后端开发人员一样使用其它高级语言，提高web前端开发效率，解决传统的一个页面需要引用多个js/css资源文件，降低浏览器对资源的请求次数，减轻服务压力。[0010]根据本发明的上述web前端开发项目搭建的方法，还可以具有以下技术特征：[0011]在上述技术方案中，优选地，通过script标签加载项目主模块，具体包括：将script标签设置在网页底部；或利用async属性或defer关键字改写所述script标签；加载项目主模块的主要入口代码。
[0012]在该技术方案中，通过script标签加载项目主模块具体包括：将script标签设置在网页底部，或利用async属性或defer关键字改写所述script标签，加载项目主模块的主要入口代码，避免网页失去响应。具体地，IE不支持async属性，只支持defer关键字。
[0013]在上述技术方案中，优选地，定义项目主模块的依赖模块的加载特征，具体包括：当依赖模块为非AMD(Asynchronous Module Definition，异步模块定义)规范模块时，定义依赖模块的exports值及deps数组。
[0014]在该技术方案中，定义项目主模块的依赖模块的加载特征，具体包括：当依赖模块为非AMD规范模块时，定义依赖模块的exports值及deps数组，exports值及deps数组为shim 属性，专门用来配置不兼容的模块，exports值为依赖模块外部调用时的名称，deps数组为依赖模块的依赖性。
[0015]在上述技术方案中，优选地，定义依赖模块的加载路径，具体包括：当依赖模块在js子目录中时，将依赖模块的加载路径定义为js子目录；当依赖模块不在js子目录中时，通过逐一指定路径或改变基目录，将依赖模块的加载路径定义为相应目录。
[0016]在该技术方案中，定义依赖模块的加载路径具体包括：当依赖模块在js子目录中时，将依赖模块的加载路径定义为js子目录，当依赖模块不在js子目录中而在其他目录中时，通过逐一指定路径或直接改变基目录，将依赖模块的加载路径定义为相应目录，paths 属性指定各个模块的加载路径。
[0017]在上述技术方案中，优选地，还包括：当依赖模块存在于其它主机时，将依赖模块的加载路径定义为主机网址。
[0018]在该技术方案中，当依赖模块存在于另外一台主机时，将依赖模块的加载路径定义为主机网址，能够灵活使用js、css语言进行模块化开发和集成。
[0019]根据本发明的另一个目的，提出了一种web前端开发项目搭建的系统，包括：加载单元，用于通过script标签加载项目主模块；定义单元，用于定义项目主模块的依赖模块的加载特征；以及定义依赖模块的加载路径；加载单元，还用于加载依赖模块；合并单元，用于将加载完成的依赖模块合并至同一文件中。
[0020]本发明提供的web前端开发项目搭建的系统，加载单元通过script标签加载项目主模块，定义单元定义项目主模块的依赖模块的加载特征，定义依赖模块的加载路径，加载单元加载依赖模块，合并单元将加载完成的依赖模块合并至同一文件中，解决js语言和css 语言本身不够灵活的现状，使得web前端开发人员能像后端开发人员一样使用其它高级语言，提高web前端开发效率，解决传统的一个页面需要引用多个js/css资源文件，降低浏览器对资源的请求次数，减轻服务压力。
[0021]根据本发明的上述web前端开发项目搭建的系统，还可以具有以下技术特征：[0022]在上述技术方案中，优选地，加载单元，具体用于：将script标签设置在网页底部；或利用async属性或defer关键字改写script标签；加载项目主模块的主要入口代码。[0023]在该技术方案中，加载单元将script标签设置在网页底部，或利用async属性或defer关键字改写所述script标签，加载项目主模块的主要入口代码，避免网页失去响应。具体地，IE不支持async属性，只支持defer关键字。
[0024]在上述技术方案中，优选地，定义单元，具体用于：当依赖模块为非AMD规范模块时，定义依赖模块的exports值及deps数组。
[0025]在该技术方案中，定义单元当依赖模块为非AMD规范模块时，定义依赖模块的exports值及deps数组，exports值及deps数组为shim属性，专门用来配置不兼容的模块，exports值为依赖模块外部调用时的名称，deps数组为依赖模块的依赖性。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。