Rumah >hujung hadapan web >tutorial js >javascript可编程的脚本加载用法实例详解

javascript可编程的脚本加载用法实例详解

伊谢尔伦asal: 2017-07-21 15:45:511519semak imbas

可编程的脚本加载

虽然3f1c4e4b6b16bbbd69b2ee476dc4f83a标签简单得令人心动，但有些情况确实需要更精致的脚本加载方式。我们可能只想给那些满足一定条件的用户加载某个脚本，譬如白金会员或达到一定级别的玩家，也可能只想当用户单击激活时才加载某个特性，譬如聊天小部件。
1、直接加载脚本
我们可以用类似下面这样的代码来插入3f1c4e4b6b16bbbd69b2ee476dc4f83a标签。

var head = document.getElementsByTagName(&#39;head&#39;)[0];
var script = document.createElement(&#39;script&#39;);
script.src = &#39;/js/feature.js&#39;;
head.appendChild(script);

稍等，我们如何才能知道脚本何时加载结束呢？我们可以给脚本本身添加一些代码以触发事件，但如果要为每个待加载脚本都添加这样的代码，那也太闹心了。或者是另外一种情况，即我们不可能给第三方服务器上的脚本添加这样的代码。HTML5 规范定义了一个可以绑定回调的onload 属性。

script.onload = function() {
// 现在可以调用脚本里定义的函数了
};

不过， IE8 及更老的版本并不支持onload ，它们支持的是onreadystatechange。某些浏览器在插入3f1c4e4b6b16bbbd69b2ee476dc4f83a标签时还会出现一些“灵异事件”。而且，这里甚至还没谈到错误处理呢！为了避免
所有这些令人头疼的问题，在此强烈建议使用脚本加载库。

yepnope的条件加载
yepnope是一个简单的、轻量级的脚本加载库（压缩后的精简版只有1.7KB），其设计目标就是真诚服务于最常见的动态脚本加载需求。
yepnope 最简单的用法是，加载脚本并对脚本完成运行这一事件返回一个回调。

yepnope({
  load: &#39;oompaLoompas.js&#39;,
  callback: function() {
  console.log(&#39;oompa-Loompas ready!&#39;);
  }
});

还是无动于衷？下面我们要用yepnope 来并行加载多个脚本并按给定次序运行它们。举个例子，假设我们想加载Backbone.js，而这个脚本又依赖于Underscore.js。为此，我们只需用数组形式提供这两个脚本的位置作为加载参数。

yepnope({
  load: [&#39;underscore.js&#39;, &#39;backbone.js&#39;],
  complete: function() {
  // 这里是Backbone 的业务逻辑
  }
});

请注意，这里使用了complete（完成）而不是callback（回调）。

其差别在于，脚本加载列表中的每个资源均会运行callback，而只有当所有脚本都加载完成后才会运行complete。yepnope 的标志性特征是条件加载。给定test 参数，yepnope 会根据该参数值是否为真而加载不同的资源。举个例子，可以以一定的准确度判断用户是否在用触摸屏设备，从而据此相应地加载不同的样式表及脚本。

yepnope({
  test: Modernizr.touch,
  yep: [&#39;touchStyles.css&#39;, &#39;touchApplication.js&#39;],
  nope: [&#39;mouseStyles.css&#39;, &#39;mouseApplication.js&#39;],
  complete: function() {
  // 不管是哪一种情况，应用程序均已就绪！
  }
});

我们只用寥寥几行代码就搭好了舞台，可以基于用户的接入设备而给他们完全不同的使用体验。当然，不是所有的条件加载都需要备齐yep（是）和nope（否）这两种测试结果。yepnope 最常见的用法之一就是加载垫片脚本以弥补老式浏览器缺失的功能。

yepnope({
  test: window.json,nope: [&#39;json2.js&#39;],
  complete: function() {
  // 现在可以放心地用JSON 了
  }
});

页面使用了yepnope 之后应该变成下面这种漂亮的标记结构：

<html>
<head>
  <!-- metadata and stylesheets go here -->
  <script src="headScripts.js"></scripts>
  <script src="deferredScripts.js" defer></script>
</head>
<body>
  <!-- content goes here -->
</body>
</html>

很眼熟？这个结构和讨论defer 属性那一节给出的结构一样，唯一的区别是这里的某个脚本文件已经拼接了yepnope.js（很可能就在deferredScripts.js 的顶部），这样就可以独立地加载那些根据条件再加载的脚本（因为浏览器需要垫片脚本）和那些想要动态加载的脚本（以便回应用户的动作）。结果将是一个更小巧的deferredScripts.js。

Atas ialah kandungan terperinci javascript可编程的脚本加载用法实例详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：经典型和非阻塞型<script>标签用法实例详解Artikel seterusnya：javascript中的Require.js/AMD 模块化加载用法案例汇总

Artikel berkaitan

Lihat lagi