一种打包文件局部更新的前端模块化加载器的制造方法
【技术领域】
[0001]本发明涉及网络技术领域，特别是涉及一种打包文件局部更新的前端模块化加载器。
【背景技术】
[0002]随着互联网的飞速发展，前端开发变的越来越重要和复杂。传统的前端脚本开发方式会带来命名冲突、文件加载顺序依赖等问题，大部分的网站都引入了模块化的解决方案。目前比较流行的解决方案有AMD(Asynchronous Module Definit1n) ,CMDCCommonModule Def init1n)，代表性的工具分别是requirejs和sea JavaScript。
[0003]在传统的网站中，为了解决前端JavaScript脚本请求数量过多的问题，通常会把多个js文件合并为一个文件，同时对这个文件进行去空白符、缩短变量名等处理，这样会使得请求的数量和体积减少，提升了前端的加载性能。引入模块化之后，requirejs等提供了r.JavaScript来进行这项工作。
[0004]但是，如果一个JavaScript文件改动，将会引起打包之后的JavaScript改动，浏览器的缓存也将失效。在互联网项目中，网站的更新和迭代最短可能几天就会有一个版本的更新，打包合并的JavaScript数量可能会是几十个，甚至上百个，这样一个JavaScript的改动就会弓I起整个打包JavaScr ipt的重新加载，这不仅影响了性能也浪费了流量。
[0005]现有技术中，申请人:阿里巴巴集团控股有限公司申请了“一种JavaScript文件的管理方法、装置和系统”，申请号为= 200910249840.0，该专利公开了一种JavaScript文件的管理方法、装置和系统，该方法包括以下步骤:接收并解析来自客户端的JavaScript请求，获取所述JavaScript请求对应的文件数组，根据所述文件数组遍历文件依赖关系结构图，查找所述JavaScript请求对应的JavaScript文件以及与所述JavaScript文件存在依赖关系的文件集合；如果查找到所述JavaScript请求对应的JavaScript文件以及与所述JavaScript文件存在依赖关系的文件集合，则将所述JavaScript文件和所述文件集合发送到所述客户端。此发明仅仅提高了页面载入的速度、加快了网页下载的速度。而脚本文件更新后带来的打包文件重新全部加载问题却没有得到解决。
【发明内容】
[0006]本发明的目的在于:针对现有技术中存在的上述技术问题，提出打包文件局部更新的前端模块化加载器，使得脚本加载过程中能够充分能利用浏览器缓存，达到节省流量优化性能的目的。
[0007]本发明是通过以下技术方案实现的:一种打包文件局部更新的前端模块化加载器，模块加载器包括静态加载器和动态加载器;所述的动态加载器由前端加载器和后台缓存计算组件DynamicJsServlet组成；
所述的动态加载器用以加载动态JavaScript;所述的动态JavaScript为更新频率比较高的 JavaScr ipt; 所述的静态加载器用以加载静态JavaScript;所述的静态JavaScript为不经常更新的JavaScript ο
[0008]进一步，所述的动态加载器充分利用浏览器的本地缓存localstorage，所述的动态加载器加载动态JavaScr ipt的时候后台的缓存计算组件servelet通过比对其生成的唯一资源标识tag来决定是否让浏览器更新对应脚本。
[0009]进一步，所述静态加载器和动态加载器的结合，间接实现了打包脚本的局部更新。
[0010]进一步，所述打包脚本的构建过程如下:
首先，读取所有JavaScript ；
其次，将读取的JavaScript进行分类，分为动态JavaScript和静态JavaScript ；
再次，构建现行方案的打包JavaScr ipt;
最后，将动态JavaScript的列表写入到打包JavaScript中。
[0011 ]进一步，所述的构建现行方案的打包JavaScript为将静态JavaScript按照传统的打包方案进行打包，将动态JavaScript加入动态JavaScript列表中。
进一步，，所述JavaScript的模块文件的基本数据结构包括:ID、Deps、Url和Cache策略;所述的ID为标识;所述的Deps为要加载的一个依赖数组;所述的Url为文件路径;所述的Cache策略为缓存策略。
[0013]进一步，所述的模块加载器的加载执行过程为:
(1)加载执行打包JavaScript，所述的打包JavaScr ipt包含了静态JavaScr ipt的代码和动态JavaScript ID的列表；
(2)生成静态JavaScript的模块信息；
(3)读取动态JavaScript列表；
(4)动态加载器加载动态JavaScript；
(5)读取本地缓存localstorage中的动态JavaScript;
(6)执行localstorage中的动态JavaScript生成动态JavaScript的模块信息；
(7)根据静态JavaScript模块信息和动态JavaScript模块信息构建一棵模块之间的依赖关系树；
(8)按照后序遍历的顺序执行模块代码。
[0014I 进一步，所述的动态JavaScript模块信息包括Tag和Content;所述的Tag为服务器端计算生成的唯一资源标识符;所述的Content为文件内容。
[0015]进一步，所述动态加载器的执行过程为:动态加载器将需要加载的JavaScript文件列表和对应的tag发送到后台缓存计算组件Dynamic Js Servlet，后台缓存计算组件Dynamic Js Servlet采用hash算法，计算各个JavaScript的tag值;然后比较这个tag值与前端加载器传过来的tag值，如果相等代表JavaScr ipt代码没有做过修改，如果不相等，代表JavaScript代码已经修改过;对于修改过的JavaScript，将新的tag值和JavaScr ipt代码内容传到前端加载器，未修改过的JavaScript只需将tag值传回；前端加载器接收到信息后，将修改过的内容写回到本地缓存local storage中。
[0016]综上所述，由于采用了上述技术方案，本发明的有益效果是:本发明提出了一种局部更新打包文件的加载机制，对于一些不经常改动的JavaScript文件采用现行的合并压缩方式，对于会经常改动的JavaScript采用一种动态计算tag的本地缓存方式，通过静态加载和动态的结合，间接的实现了打包脚本的局部更新。本发明的前端加载器能够充分利用浏览器的缓存，够适应网站的经常性变化，达到优化网站性能和流量的目的。
【附图说明】
[0017]本发明将通过例子并参照附图的方式说明，其中:
图1为本发明的模块加载器的示意图；
图2为本发明的打包脚本构建流程示意图；
图3为本发明的JavaScript模块文件的基本数据结构表；
图4为本发明的模块加载器的加载执行过程图；
图5为本发明的动态JavaScript模块信息数据结构表图6为本发明的动态加载执行过程示意图。
【具体实施方式】
[0018]本说明书中公开的所有特征，或公开的所有方法或过程中的步骤，除了互相排斥的特征和/或步骤以外，均可以以任何方式组合。
[0019]本说明书(包括任何附加权利要求、摘要和附图)中公开的任一特征，除非特别叙述，均可被其他等效或具有类似目的的替代特征加以替换。即，除非特别叙述，每个特征只是一系列等效或类似特征中的一个例子而已。
[0020]实施例，现在流行的require JavaScript的r.JavaScript是将所有的脚本文件通过命令行合成一个脚本，当前端浏览器加载的时候只需加载一个JavaScr ipt。对于一个网站大量的JavaScript中，很大一部分的JavaScript更新的频率可能并不是很高。
[0021]因此，本专利提出了一种区分加载的方案，对于大部分不经常更新的JavaScript采用现行的方案，对于小部分的更新频率比较高的JavaScr ipt采用一种新的方案。这小部分JavaScript我们成之为动态JavaScript，其加载机制称为动态加载;相应的大部分不经常更新的JavaScript称为静态JavaScript，加载机制为静态加载。
[0022]动态加载的基本原理是充分利用了浏览器的本地缓存(localstorage)，加载动态JavaScript的时候后台缓存计算组件Dynamic Js Servlet通过比对它生成的唯一资源标识(tag)来决定是否让浏览