Copy codeThe Code is as follows:
$. GetScript (url, callback)
This method is provided by jquery itself for dynamic loading of js. When a website needs to load a large number of js files, dynamic loading of js is a good method. When a function is required, the corresponding js files are loaded.
However, I found some unsatisfactory points in the use process.
Every time you need to execute this function, you will request this js once. Isn't that helpful?
So find the Jquery official site of the API description http://api.jquery.com/jQuery.getScript/
In fact, this method is an encapsulation of the ajax method. You can use the cache of the ajax method to change the http status 200 to 304, so as to use the Client Cache:
Copy codeThe Code is as follows:
$. AjaxSetup ({
Cache: true
});
Therefore, we will find that every time we call this function, it becomes as follows:
This is similar "? The _ = 13126578 "parameter is no longer available and the status is Not Modified.
But I am a little "clean". Every time I use this function, although the server does not need to return the entire js file any more, I still need to request a server every time, and I always feel uncomfortable. The title of this blog was born.
Not to mention, first go to the Code:
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> </title>
<Script src = "jquery-1.7.2.min.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
// Defines the mark array of a global script to mark whether a script has been downloaded to the local device.
Var scriptsArray = new Array ();
$. CachedScript = function (url, options ){
// Mark the array with cyclic scripts
For (var s in scriptsArray ){
// Console. log (scriptsArray [s]);
// If an array has been downloaded to the local device
If (scriptsArray [s] = url ){
Return {// returns an object literal. The done is called done to correspond to the done in $. ajax.
Done: function (method ){
If (typeof method = 'function') {// if the input parameter is a method
Method ();
}
}
};
}
}
// Jquery officially provides methods similar to getScript implementation, that is, getScript is actually an extension of ajax methods.
Options = $. extend (options | | {},{
DataType: "script ",
Url: url,
Cache: true // In fact, this cache addition is not much different from not adding
});
ScriptsArray. push (url); // put the url address in 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>
</Head>
<Body>
<Button id = "btn"> Custom cache method </button>
<Br/>
<Button id = "btn2"> getScript </button>
</Body>
</Html>
The code in t1.js is also a function.
Copy codeThe Code is as follows:
Function alertMe (){
Alert ('clicked ');
}
By now, the entire transformation is complete. When you use this function, only one js request will be sent to the server during initialization, and after loading, the server will not be requested again, even if it is 304 status code.
One js cainiao. You can also take a pat on it ~
