Home > Developer > JavaScript
For technicians who often design web pages, javascript and css are essential. Many may use this technology. However, for a large web application that may contain a large number of javascript and css files, we all know that loading these files requires network bandwidth, in addition, manual introduction of many <script> or <link> files on each page may be a thankless task for developers. In addition, after the project is maintained, modifying a file may affect the effect of several pages. Files Added by yourself may have been loaded by others on the master node or elsewhere, resulting in excessive file waste. Therefore, we need a mechanism (or interface) to control the introduction of files, so that we can maintain them more conveniently. In the future, these maintenance work will be completed by js personnel, you do not have to check the pages one by one. Below, I will display this dynamically introduced file:
Give it a resounding name: JSLoader. js
/*
* JS file dynamic loading tool (2011-12-12)
*/
Var JSLoader = {
Scripts :{
Jquery: "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
},
Browser :{
Ie:/msie/. test (window. navigator. userAgent. toLowerCase ()),
Moz:/gecko/. test (window. navigator. userAgent. toLowerCase ()),
Opera:/opera/. test (window. navigator. userAgent. toLowerCase ()),
Safari:/safari/. test (window. navigator. userAgent. toLowerCase ())
},
Call: (function (){
Function hasFile (tag, url ){
Var contains = false;
Var files = document. getElementsByTagName (tag );
Var type = tag = "script "? "Src": "href ";
For (var I = 0, len = files. length; I <len; I ++ ){
If (files [I]. getAttribute (type) = url ){
Contains = true;
Break;
}
}
Return contains;
}
Function loadFile (element, callback, parent ){
Var p = parent & parent! = Undefined? Parent: "head ";
Document. getElementsByTagName (p) [0]. appendChild (element );
If (callback ){
// Ie
If (JSLoader. browser. ie ){
Element. onreadystatechange = function (){
If (this. readyState = 'loaded' | this. readyState = 'complete '){
Callback ();
}
};
} Else if (JSLoader. browser. moz ){
Element. onload = function (){
Callback ();
};
} Else {
Callback ();
}
}
}
Function loadCssFile (files, callback ){
Var urls = files & typeof (files) = "string "? [Files]: files;
For (var I = 0, len = urls. length; I <len; I ++ ){
Var cssFile = document. createElement ("link ");
CssFile. setAttribute ('type', 'text/css ');
CssFile. setAttribute ('rel ', 'stylesheet ');
CssFile. setAttribute ('href ', urls [I]);
If (! HasFile ("link", urls [I]) {
LoadFile (cssFile, callback );
}
}
}
Function loadScript (files, callback, parent ){
Var urls = files & typeof (files) = "string "? [Files]: files;
For (var I = 0, len = urls. length; I <len; I ++ ){
Var script = document. createElement ("script ");
Script. setAttribute ('charset', 'gb2312 ');
Script. setAttribute ('type', 'text/javascript ');
Script. setAttribute ('src', urls [I]);
If (! HasFile ("script", urls [I]) {
LoadFile (script, callback, parent );
}
}
}
Function includeFile (options ){
// First load css and then load script www.2cto.com
LoadCssFile(options.css Files, function (){
// Load the prepared script
LoadScript (JSLoader. scripts. jquery, function (){
// Script required to load the page
LoadScript (options. scripts, null, "body ");
});
});
}
Return {include: includeFile };
})()
};
/*
* External call interface
* Include ({cssFiles: [], scripts: []})
*/
Var include = function (options ){
JSLoader. call. include (options );
}
After this file is introduced, all the remaining tasks on our page are to introduce it and the list of files required for other pages (note: we can introduce many public js files in advance ), the general file structure is as follows:
<Head id = "" runat = "server">
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<! -- Loading files on the master -->
<Script src = "Scripts/JSLoader. js" type = "text/javascript"> </script>
<! -- Load the file list -->
<Script type = "text/javascript">
// We recommend that you first load the css file for page rendering, and then load the js file required by the page
// Note: jQuery has been automatically introduced here, so we can safely use it.
Include ({
CssFiles: ["styles/tree.css", "styles/main.css", "styles/login.css",...],
Scripts: ["scripts/jquery. extends. js", "scripts/array. extends. js",...]
});
</Script>
</Head>
By the way, we can modify the structure of this file through configuration. We can write the required page files to the configuration file, and then create a separate JS file to call it, then, embed the JavaScript code into the page to the maximum degree of separation from the page code. Remember a general principle that css files are generally placed in the head, and script files are divided into two types: page rendering and preparation files are generally placed in the head, page event files are generally placed in the body (for reference only ).
Hmiinyu
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
