Before introducing the implementation of ensure, let's take a look at its functionality:
Ensure ({
HTML: "Popup.html",
javascript: "Popup.js",
CSS: "Popup.css"
}, function () {
Popup.show ("Hello World");
}
);
In this code, ensure first ensures that the popup.html, popup.js, and popup.css load the 3 files and dynamically load them if they have not been loaded ensure, and if they have already been loaded, ensure will not load them again. After making sure that all 3 files are loaded, ensure calls the following anonymous function, which is the execution popup.show ("Hello World");
Next, let's take a look at how ensure dynamically loads JavaScript and CSS.
Load JavaScript
In ensure, loading JavaScript is performed in two different scenarios, Safari and non-safari.
Loading JavaScript in IE, Firefox, opera
To load JavaScript in these three browsers, you just need to create a SCRIPT element, point src to the URL to load, and then append the script element to the head element. This work was done in Httplibrary.createscripttag (). But we're not just loading JavaScript, we need to know when it's going to load, which can be done by the OnLoad event or onreadystatechange event of the script element.
Loading JavaScript in Safari
Since Safari 2 does not support onload or onreadystatechange, you can only read the URL manually through the XHR and then manually eval the code, which creates a limitation--only JavaScript files in this domain can be loaded. In ensure, the eval work is done through Httplibrary.globaleval (). In order for JavaScript code to eval,ensure in the global context or to use the method that creates the script element, the JavaScript that will eval is placed inside, and the script element is appended to the head element.
Careful people are sure to ask why Httplibrary.globaleval () should be so designed, not directly window.eval or Eval.call. This is because neither window.eval nor Eval.call can implement the same effect as the script tag loading JavaScript code in IE6, both of which Eval is still not performed in the global context under IE6. If you search, you will find some related discussions, such as jquery used Window.execscript () to accomplish this task. But eventually everyone found that adding a SCRIPT element was the best cross-browser solution, so now jquery and ensure are all implemented.
Load CSS
Rather than Ugacha JavaScript, loading CSS is much simpler and the approach is similar: adding link elements directly to the head element. This is exactly what Loadcss () is doing.
In fact, ensure does not make sure that the CSS finishes loading and then executes. This is estimated because the browser can be loaded after the CSS is automatically applied to the page, so Omar AL Zabir that the loading order of CSS is irrelevant, but if the CSS loading speed is too slow, in fact, will affect the display effect.
Load CSS in IE6
It is IE6, not safari, that needs special attention this time. IE6 when adding a LINK element to the head element, it must be done in the context of window, so the function that adds link switches the context through call invocation.
Summarize
In fact, dynamically loading JavaScript and CSS is not difficult, in most cases only need to append the corresponding child elements to the head element, only the Safari2 and IE6 two old browsers need special care.
Official address
ensure
Current 1/2 page
12 Next read the full text
