`

动态加载JS文件

阅读更多

/**
 * 动态加载JS文件,
 * @return {}
 */
var JsLoader = function(config) {

 return {
  /**
   * 动态加载.js文件。当全部文件加载完后,执行回调函数。
   * 如果文件加载顺序很重要,则需要设置preserveOrder参数为true
   * @param {Array} 文件名称列表
   * @param {Function} 全部文件加载完后,需要执行的回调函数
   * @param {Object}  作用域
   * @param {Boolean} 是否顺序加载,即加载完一个文件后,再加载下一个,true则顺序加载,默认为false。
   */
  load : function(fileList, callback, scope, preserveOrder) {
   var scope = scope || this, head = document
     .getElementsByTagName("head")[0], fragment = document
     .createDocumentFragment(), numFiles = fileList.length, loadedFiles = 0, me = this;

   /**
    * preservOrder为true,才会执行该方法。
    * 根据文件下标逐个加载文件
    */
   var loadFileIndex = function(index) {
    head.appendChild(me.buildScriptTag(fileList[index],
        onFileLoaded));
   };

   /**
    * 当每个文件加载完后,需要执行的回调函数
    */
   var onFileLoaded = function() {
    loadedFiles++;

    //如果是最后一个文件,执行回调函数,否则加载下一个文件
    if (numFiles == loadedFiles && typeof callback == 'function') {
     callback.call(scope);
    } else {
     if (preserveOrder === true) {
      loadFileIndex(loadedFiles);
     }
    }
   };
   //如果是按顺序加载,则直接执行loadFileIndex,否则循环加载文件列表
   if (preserveOrder === true) {
    loadFileIndex.call(this, 0);
   } else {
    //load each file (most browsers will do this in parallel)
    for (var index = 0; index < numFiles; index++) {
     fragment.appendChild(this.buildScriptTag(fileList[index],
         onFileLoaded));
    }
    head.appendChild(fragment);
   }
  },

  /**
   * @private
   * 创建并返回一个scipt标签
   * @param {String/Object} 创建script标签文件对象信息对象或者文件名
   * @param {Function} 可选,当文件加载完后,执行该回调函数
   * @return {Element} The new script ta
   */
  buildScriptTag : function(file, callback) {
   var script = document.createElement('script');
   script.type = "text/javascript";
   script.src = file["url"]||file;
   script.id = file["id"]||file["url"]||file;

   //判断浏览器种类,目前只判断IE、FireFox
   if (script.readyState) {
    script.onreadystatechange = function() {
     if (script.readyState == "loaded"
       || script.readyState == "complete") {
      script.onreadystatechange = null;
      callback();
     }
    };
   } else {
    script.onload = callback;
   }

   return script;
  },
  /**
  
*@private
   * 根据id删除script标签
   * @param {String} script标签的id
   * @param {Function} 这个参数为可选,如果需要删除script标签,需要动作则执行该回调函数。
   * 例如:释放内存等。
   */
  removeScriptTag : function(id, callback) {
   var existing = doc.getElementById(id);
   if (existing) {
    existing.parentNode.removeChild(existing);
   }
   callback();
  }
 }
}

分享到:
评论

相关推荐

    javascript函数动态加载javascript文件

    动态加载JavaScript文件的基本原理是利用`&lt;script&gt;`标签的异步加载特性或者使用`XMLHttpRequest`或`fetch` API来创建HTTP请求获取JS文件。下面我们将深入探讨这两种方法: 1. **使用`&lt;script&gt;`标签**: 在HTML中,...

    动态加载外部JS文件

    动态加载则改变了这一模式,它使用JavaScript代码来异步请求并插入外部脚本,使得页面可以先呈现基本内容,而JavaScript文件则在后台加载,提高了用户体验。 二、动态加载的方法 1. 使用`&lt;script&gt;`标签的`async`和...

    vue动态加载js.zip

    Vue动态加载JS是一种实现这一需求的技术,它允许我们在运行时根据需要加载JavaScript文件。本文将深入探讨Vue动态加载JavaScript的原理、方法以及其实现步骤。 首先,我们需要理解Vue动态加载的核心概念。在HTML中...

    vue动态加载外部依赖js代码实现

    在前端开发中,有时我们需要动态地加载外部JavaScript库或脚本文件。特别是在构建大型Vue应用程序时,可能会遇到需要按需加载某些功能的情况,例如第三方库、API接口等。本文将详细介绍如何通过创建一个Vue组件来...

    动态加载js文件

    可以通过extjs3进行动态加载js,也可以直接通过原生js进行调用 拥有extjs4的动态加载功能, 可以同时加载多个js文件, 同时加载过的文件不会重复加载

    JS 动态加载js文件和css文件 同步/异步的两种简单方式

    JavaScript动态加载资源文件是指在页面加载完成后,根据需要从服务器动态加载额外的脚本(js文件)或样式表(css文件)。这种方法可以减少初始页面加载时的资源消耗,提高页面的加载速度。动态加载可以通过两种方式...

    动态加载JS文件和CSS文件,多浏览器支持。

    动态加载JS文件和CSS文件,多浏览器支持。多个JS文件同时加载,加载完成后执行回调方法。 使用方法: var loader=new RemoteLoader(); loader.loadFiles(["yy.js","jj.jus"],作用域);

    使用javaScript动态加载Js文件和Css文件

    (1)使用JavaScript动态加载Js文件 /*JavaScript动态加载Js文件*/ var scriptNode = document.createElement('script'); scriptNode.src = 'proxy.js?t='+new Date().getTime();/*附带时间参数,防止缓存*/ ...

    单页面的js文件动态加载组件

    js文件动态加载是通过JavaScript代码在需要时按需加载外部JavaScript文件的一种技术。这样可以减少初始页面加载时间,提高用户体验,因为不是所有的代码都在页面加载时就需要执行。有几种常见的方法可以实现动态加载...

    动态加载JavaScript文件的两种方法_.docx

    动态加载JavaScript文件是提高网页性能和优化用户体验的重要技术。它允许网页在需要时按需加载脚本,避免一次性加载大量资源导致页面加载速度减慢。本文将详细介绍两种常见的动态加载JavaScript文件的方法,并讨论...

    EXTJS4 MVC+ASP.NET MVC3动态加载JS文件实例

    本例采用ASP.NET MVC3 +EXTJS4 MVC 框架,完美实现了EXTJS4动态加载JS文件,对ASP.NET MVC3及EXTJS4 MVC 各应用要点进行了应用。对于想采用ASP.NET MVC3 +EXTJS4 MVC 框架的学习者有很好的帮助,快速掌握MVC框架,本...

    asp.net后台代码动态引用添加JS和css文件

    在ASP.NET开发中,动态引用和添加JS及CSS文件是一项常用且重要的技能,尤其是在需要根据运行时条件加载不同样式或脚本的情况下。本文将详细解析如何在ASP.NET后台代码中实现这一功能,确保网页能够根据实际需求灵活...

    使用jquery动态加载js文件的方法

    动态加载JavaScript文件是一种在网页运行时,根据需要将JavaScript文件加载到页面中的技术。这种方法通常用于页面初始化时不需要执行的脚本,或者根据用户操作来决定加载哪些脚本,以此减少页面的初始加载时间,提高...

    javascript中动态加载js文件多种解决办法总结

    在开发过程中,有时我们可能需要在运行时动态加载JavaScript文件,以提高页面性能或根据用户需求加载特定的脚本。本文将详细介绍几种在JavaScript中动态加载JS文件的方法。 1. **利用`document.write`** 这是最...

    如何动态加载外部Javascript文件

    动态加载外部JavaScript文件是一种常用的技术手段,它允许在不重新加载整个页面的情况下,动态地将JavaScript文件添加到网页中。这对于提高页面加载速度、按需加载资源、减少初始加载时间等方面非常有效。 在介绍...

    js 异步加载js, css文件

    当项目js(css)文件使用越来越多,js 文件的加载也成了性能上的一个问题,此资源能够在页面全部加载完成后异步加载js等资源文件,它可以顺序加载资源列表,也可以并发加载资源列表,它包含一个方法调用接口:...

    动态加载JavaScript文件的3种方式

    动态加载JavaScript文件是前端开发中常用的技术之一,它允许我们在页面加载完成后根据需要再加载特定的JS文件,从而优化页面的加载时间和性能。本文将详细介绍三种动态加载JavaScript文件的方法:使用document.write...

    jquery及js实现动态加载js文件的方法

    在前端开发中,动态加载JavaScript文件是一种常见的需求,尤其是在需要按需加载资源或者是在异步操作中根据不同条件加载不同的脚本时。本文介绍了使用jQuery和原生JavaScript实现动态加载JS文件的方法,并通过实例...

    动态加载JS文件的三种方法

    在Web开发中,动态加载JavaScript文件是一种常见的需求。这不仅可以提高页面性能,还能让开发者灵活地控制脚本的加载时机。本文将详细介绍三种常用的动态加载JS文件的方法,并通过示例代码帮助读者更好地理解和掌握...

Global site tag (gtag.js) - Google Analytics