Copy Code code as follows:
$.getscript (Url,callback)
This method is a method provided by jquery itself for dynamically loading JS. When the site needs to load a large number of JS, dynamic loading JS is a relatively good method, when the need for a function of the corresponding JS loaded in.
But in the course of their use, but found some not satisfactory place.
Every time you need to perform this function will go to request this JS, this is not a disservice?
So I found out the jquery website API Description http://api.jquery.com/jQuery.getScript/
In fact, this approach is a package of Ajax methods, you can use the Ajax method of caching to the HTTP state 200 to 304, thereby using the client's cache:
Copy Code code as follows:
$.ajaxsetup ({
Cache:true
});
As a result, each time the function is invoked, it becomes the following:
Each time you call JS, a similar "? _=13126578" parameter is gone, and the state is not Modified.
But I am a bit "neat and tidy", each use this function, although the server does not have to return the entire JS file, but each time still have to request servers, always feel uncomfortable. So the title of this blog was born.
Not much to say, first on the code:
Copy Code code as follows:
<! DOCTYPE HTML >
<meta charset= "Utf-8" >
<title></title>
<script src= "Jquery-1.7.2.min.js" type= "Text/javascript" ></script>
<script type= "Text/javascript" >
A tag array that defines a global script that is used to mark whether a script has been downloaded to the local
var scriptsarray = new Array ();
$.cachedscript = function (URL, options) {
Loop Script Tag Array
For (var s in Scriptsarray) {
Console.log (Scriptsarray[s]);
If an array has been downloaded to the local
if (Scriptsarray[s]==url) {
return {//Returns an object literal, where the done is called done to correspond to the done in the following $.ajax
Done:function (method) {
if (typeof method = = ' function ') {//If the incoming argument is one of the methods
Method ();
}
}
};
}
}
This is the way jquery officially provides a getscript implementation, which means that getscript is actually an extension of the AJAX approach
Options = $.extend (Options | | {}, {
DataType: "Script",
Url:url,
Cache:true//In fact, now this cache plus and does not add much difference
});
Scriptsarray.push (URL); Put the URL address into the script tag array
return $.ajax (options);
};
$ (function () {
$ (' #btn '). Bind (' click ', function () {
$.cachedscript (' t1.js '). Done (function () {
AlertMe ();
});
});
$ (' #btn2 '). Bind (' click ', function () {
$.getscript (' t1.js '). Done (function () {
AlertMe ();
});
});
});
</script>
<body>
<button id= "BTN" > Custom Caching Method </button>
<br/>
<button id= "BTN2" >getScript</button>
</body>
Where the code in T1.js is a function
Copy Code code as follows:
function AlertMe () {
Alert (' clicked Me ');
}
Here, the entire transformation is completed, when you use this function, will only be initialized to the server once a JS request, and after the completion of the loading, will not request the server again, even if it is 304 status code will not have.
JS rookie one, please Pat, O (∩_∩) o~
