Home >Web Front-end >JS Tutorial >js file introduces implementation code_javascript skills

js file introduces implementation code_javascript skills

WBOY
WBOYOriginal
2016-05-16 18:28:591306browse

It’s not too much trouble to ask them to write a new method. Since they all referenced this AA.js file, they wanted to execute a function after AA.js to automatically import the jq library, so they thought of introducing the js file method:

Copy code The code is as follows:

getScript : function(s,call){
var el = UI.DC('script');
if (call) {
el.onload =el.onreadystatechange=call;
}
UI.A(el,'type', 'text/javascript');
UI.A(el,'src',s);
UI.GT(document,'head')[0].appendChild(el);
}
/*UI.DC is for creating objects, UI.A is for attribute assignment, and GT is the abbreviation of getElementsByTagName*/

So execute UI.getScript("js/jquery/jquery-1.4. 2.min.js",function(){alert("Loading successful")});

The result is that the loading is successful under IE and ff, but when I use jq in HTML Sometimes it can't be executed under IE, but it can occasionally be executed after constant refreshing. There are also differences between static pages placed on the server and on the client, but there is no problem under Firefox...

So I thought about whether the jq file was loaded in parallel with the html loading. When the jq file was loaded successfully, the HTML file had already been executed, so I added
Copy code The code is as follows:
<script> <br>alert("execute before html") <br></script>

The execution found that it was indeed executed before the hmtl popped up first, and then the loading was successful. The same is true under Firefox. When uploading to the server, I felt that Firefox pop-ups would appear at the same time...

So I started to wonder, how to set it up to ensure that the stuff in the html body can be executed only after the jq file is loaded, how does it look like Add in the head to introduce the file...
When I think about it, I always think that he used a page when browsing it. The loading file introduces many js files. These imported file functions can be used in html. The search found the content of this js file:


Copy code The code is as follows:
var Collapsar = {
Version: '0.0.1',
require: function(libraryName) {
// inserting via DOM fails in Safari 2.0, so brute force approach
document.write('');
} ,
load: function() {
if((typeof Prototype=='undefined') ||
(typeof Element == 'undefined') ||
(typeof Element.Methods== 'undefined') ||
parseFloat(Prototype.Version.split(".")[0] "."
Prototype.Version.split(".")[1]) < 1.5)
throw("The Prototype JavaScript framework 1.5.0 is required");

$A(document.getElementsByTagName("script")).findAll( function(s) {
return (s.src && s.src.match(/loader.js(?.*)?$/))
}).each( function(s) {
var path = s.src.replace(/loader.js (?.*)?$/,'');
var includes = s.src.match(/?.*load=([a-z,]*)/);
(includes ? includes[1 ] : "").split(',').each(
function(include) {
Collapsar.require(path include '.js') });
});
}
}
Collapsar.load();


When called, it is In this way, the files after the equal sign can be imported. In fact, the key role of this sentence is document.write('');
I just saw some doubts about whether the write method is like adding content to the document. The content should appear in the body tag. The experiment found that if it is a string It does appear in the document. When tags such as script link appear in the head; then adding reference js files in the head is the same as loading them directly in the head before executing the content in the body.... He loads What is the difference between adding script and adding it above...

Experiment: Add in AA.js:

UI.getsc=(function(){
document.write('');
})()

Let it be executed automatically. The jq method was introduced in the first line of the body. The experiment was indeed successful. It can be executed in IE as well as in ff;
Have time to continue the experiment... .............
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:jquery picture previous next link effect (continuation)_jqueryNext article:jquery picture previous next link effect (continuation)_jquery

Related articles

See more