javascript 按顺序加载运行 js 方法

这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!

JavaScript 客户端脚本语言

Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果.

本篇文章主要教给大家如何在 javascript 中动态加载按顺序加载运行 js 的方法以及实现代码,需要的朋友参考学习下吧.

首先如果大家对 JS 动态加载有不理解的地方可以参阅:

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

如何你的 script 上没有任何 异步, 阻塞 等标注:

浏览器会异步加载 javascript 文件, 但是会按照引用文件中的书写顺序从上到下执行解析 javascript

Defer 属性标记

defer 是 html4.0 中定义的,该属性使得浏览器能延迟脚本的执行,等文档完成解析完成后会按照他们在文档出现顺序再去下载解析.

也就是说 defer 属性的 script 就类似于将 script 放在 body 中的加载 效果一致.

但是 defer 属性在各个浏览器中支持程度有点不同, 就是说, 有的浏览器不完全支持.

Async 属性标注

async 是 HTML5 新增的属性, 大部分先进支持该属性的.

该属性的作用是让脚本能异步加载,也就是说当浏览器遇到 async 属性的 script 时浏览器加载 CSS 一样是异步加载的

javascript 动态加载 js 文件

原理很简单, 创建一个 script 节点, 给节点赋予 script 的属性, 然后 append 到 dom 的 head 标签中.

function loadJS(url){
  var Script = document.createElement('script');
  Script.setAttribute('src', url);
  Script.setAttribute('type', 'text/javascript');
  document.body.appendChild(Script);
  return Script;
}

如果我们同时加载多个 javascript 文件

loadJS('a.js');
loadJS('b.js');

上面的效果是, a.js 和 b.js 文件会被异步同时加载, 如果 b.js 文件比 a.js 文件小的话, 很可能先加载执行 b.js , 完全不会按照书写结果加载执行

所以, 如果你的 b.js 文件有依赖 a.js 的东西, 那么就会报错, 因为解释执行 b.js 的时候, a.js 还在加载中.

控制 javascript 加载执行顺序

我们对代码做如下改进

function loadJS(url, success) {
      var domScript = document.createElement('script');
      domScript.src = url;
      success = success || function () {
          };
      domScript.onload = domScript.onreadystatechange = function () {
        if (!this.readyState || 'loaded' === this.readyState || 'complete' === this.readyState) {
          success();
          this.onload = this.onreadystatechange = null;
          this.parentNode.removeChild(this);
        }
      }
      document.getElementsByTagName('head')[0].appendChild(domScript);
    }

通过 script 节点上的 onload 和 onreadystatechange 属性来监听节点 src 是否加载完成

如果成功, 调用回调函数 success();

我们在调用此方法的时候, 可以通过 loadJS 回调函数来知道当前节点已经加载完成, 然后在回调函数里继续加载其他 script 文件

loadJS(getUrl('a.js'), function () {
      loadJS(getUrl('b.js'), function () {
        console.log('a.js ,b.js 加载完成');
      });
});

通过上面的方法加载, 是一种同步阻塞加载, a.js 加载完成后才会加载执行 b.js 文件.

如果你的 javascript 文件没有相互依赖关系, 不要使用这种方法.

来源: http://www.phperz.com/article/18/0130/361562.html