[发明专利]一种动态加载js资源时防止重复请求的方法

说明书

本发明公开了一种动态加载js资源时防止重复请求的方法，本发明的方法通过使用一个map对象维护不同js资源的相应Promise实例，在Promise对象实例中通过创建script标签动态加载js资源，实现各组件引用同一js资源时，获取到的Promise实例是唯一的，保证了不同组件对同一js资源的引入是一致的，防止了对同一js资源的重复请求。

技术领域

本发明涉及网页js加载技术领域，尤其涉及一种动态加载js资源时防止重复请求的方法。

背景技术

在html页面中，需要外部js资源时可以通过创建script标签，并设置script标签的src属性，再将script标签添加到head元素，实现动态引入js资源。在使用react框架开发的单页面应用中，兄弟或父子组件同时依赖某个相同的外部js资源时，都可能使用创建script标签动态引入js资源的方法。由于这种方法是异步的，在第一个对某外部js资源的请求尚未返回成功时，另一个组件判断尚未获取此js资源而再次通过script标签动态加载同一js资源。这样就可能造成对同一js资源的重复请求，以及所引入js代码的重复执行。

发明内容

针对上述问题，本发明提出了一种动态加载js资源时防止重复请求的方法，解决了通过创建script标签实现动态加载js资源时可能出现的重复请求的问题。

本发明通过以下技术方案来实现上述目的：

一种动态加载js资源时防止重复请求的方法，包括以下步骤：

步骤一，创建一个javascript文件，在js文件内创建一个用作配置的javascript对象config，config对象中的键为js资源标识，config对象中的值为对应js资源的地址；

步骤二，创建一个map对象，这个map对象中的键也为js资源标识，其值为相对应的Promise对象；

步骤三，创建一个loadJs函数并通过export命令导出，接受一个id参数，id参数为js资源标识，loadJs函数内判断map对象是否包含此js资源标识，若存在就返回id对应的Promise对象实例；若不存在，则创建并返回一个新的Promise对象，再将js资源标识和对应的Promise对象实例存入map对象中；

步骤四，在Promise对象实例中，根据window对象上是否有以传入的id为名的属性来判断要引入的js资源是否已经请求成功，存在就调用resolve方法将Promise对象的状态变为成功，否则就动态创建script标签，根据js资源标识在配置对象config中查询对应的js资源地址url，以此设置script标签的src属性引入外部js资源，通过在script标签的onload事件中调用resolve方法将Promise对象的状态变为成功，即对js资源的请求成功；

步骤五，其他模块通过import命令导入loadJs函数，根据要用的js资源标识获取对应的Promise实例，在Primise实例的then方法中就可以执行依赖所需js资源的代码；

通过以上步骤在多个组件对同一js资源存在依赖并使用创建script标签动态加载资源时，避免了因为异步原因造成的对同一资源的重复请求以及代码的重复执行。

进一步方案为，所述步骤一中js资源标识用来判断window对象上是否存在这个属性，以此判断第三方js资源是否引入成功。

本发明的有益效果在于：

本发明的方法通过使用一个map对象维护不同js资源的相应Promise实例，在Promise对象实例中通过创建script标签动态加载js资源，实现各组件引用同一js资源时，获取到的Promise实例是唯一的，保证了不同组件对同一js资源的引入是一致的，防止了对同一js资源的重复请求。

附图说明