Home > Article > Web Front-end > Detailed explanation of javascript programmable script loading usage examples

Detailed explanation of javascript programmable script loading usage examples

伊谢尔伦Original: 2017-07-21 15:45:511494browse

Programmable script loading

Although the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag is excitingly simple, some situations do require a more sophisticated script loading method. We might only want to load a script for users who meet certain criteria, such as platinum members or players who have reached a certain level, or we might only want to load a feature, such as a chat widget, when the user clicks to activate it.
1. Directly load the script
We can use code similar to the following to insert the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag.

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);

Wait a minute, how do we know when the script has finished loading? We can add some code to the script itself to trigger the event, but it would be too annoying to add such code for every script to be loaded. Or there is another situation, that is, it is impossible for us to add such code to the script on the third-party server. The HTML5 specification defines an onload attribute that can be bound to callbacks.

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

However, IE8 and older versions do not support onload, they support onreadystatechange. Some browsers will also experience some "supernatural events" when inserting the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag. And we haven’t even talked about error handling yet! To avoid
all these headaches, it is highly recommended to use scripts to load libraries.

Yepnope's conditional loading
yepnope is a simple, lightweight script loading library (the compressed streamlined version is only 1.7KB). The design goal is to sincerely serve the most common dynamic script loading needs.
The simplest usage of yepnope is to load the script and return a callback when the script completes running.

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

Still indifferent? Next we are going to use yepnope to load multiple scripts in parallel and run them in a given order. For example, let's say we want to load Backbone.js, and this script depends on Underscore.js. To do this, we simply provide the locations of these two scripts as load parameters in an array.

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

Please note that complete is used here instead of callback.

The difference is that callback will be run for each resource in the script loading list, and complete will only be run when all scripts are loaded. The signature feature of yepnope is conditional loading. Given the test parameter, yepnope will load different resources depending on whether the parameter value is true. For example, it can be determined with a certain degree of accuracy whether the user is using a touch screen device, and different style sheets and scripts can be loaded accordingly.

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

We set the stage with just a few lines of code and can give users a completely different experience based on their access device. Of course, not all conditional loads require both yep (yes) and nope (no) test results. One of the most common uses of yepnope is to load shim scripts to compensate for missing functionality in older browsers.

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

After using yepnope, the page should become the following beautiful markup structure:

<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>

looks familiar? This structure is the same as the one given in the section discussing the defer attribute, the only difference is that one of the script files here has spliced yepnope.js (probably on top of deferredScripts.js) so that those can be loaded independently Scripts that reload conditionally (because the browser requires shim scripts) and those that want to be loaded dynamically (in response to user actions). The result will be a smaller deferredScripts.js.

The above is the detailed content of Detailed explanation of javascript programmable script loading usage examples. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of usage examples of classic and non-blocking