Javascript实战应用篇(3)：动态加载JS和CSS文件

对于经常设计web页面的技术人员来说，javascript和css是必备的行囊，可能很多人都会运用这门技术。但是，试想一下，对于一个大型的web应用程序，可能包含大量的javascript和css文件，我们都知道加载这些文件需要网络带宽的，而且每个页面都去手动引入很多<script>或<link>等文件，对于开发人员来说可能是件费力不讨好的事情。而且，在项目维护后期，改动一个文件可能会影响到几个页面效果，自己加的文件也许别人在master或其他地方已经加载过，造成多余的文件浪费。因此，我们需要一种机制(或接口)来控制文件的引入，以便我们更方便的维护，以后这些维护工作专门找js人员即可完成，不必再去一个个检查页面。下面，我将这个动态引入的文件展示出来：

不妨给它起一个响亮的名字：JSLoader.js

/*
*JS文件动态加载工具(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 fileExt(url) {
            var att = url.split('.');
            var ext = att[att.length - 1].toLowerCase();
            return ext;
        }
        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) {
            var r = options;
            //如果传入的是文件名列表则转化为对应的对象
              if (typeof (options) == "string") {
                var cssFiles = [], scripts = [];
                var files = options.split(',');
                for (var i = 0, len = files.length; i < len; i++) {
                    var ext = fileExt(files[i]);
                    switch (ext) {
                        case "css":
                            cssFiles.push(files[i]);
                            break;
                        case "js":
                            scripts.push(files[i]);
                            break;
                    }
                }
                r.cssFiles = cssFiles;
                r.scripts = scripts;
            }
            //首先加载css，再次加载script
            loadCssFile(r.cssFiles, function () {
                //加载预备script
                loadScript(JSLoader.scripts.jquery, function () {
                    //加载页面所需的script
                    loadScript(r.scripts, null, "body");
                });
            });
        }
        return { include: includeFile };
    })()
};
/*
* 供外部调用接口
* include("1.css,2.css,3.js,4.css...");
* include({cssFiles:[], scripts:[]})
*/
var include = function (options) {
    JSLoader.call.include(options);
}

以下是在页面中如何调用JSLoader.js：

<head id="" runat="server">    
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
   <!--主加载文件-->    
   <script src="Scripts/JSLoader.js" type="text/javascript"></script>    
   <!--加载文件列表-->    
   <script type="text/javascript">
   //建议先加载css文件以便页面渲染，后加载页面所要的js文件    
   //注意: 这里jQuery已经自动引入，我们放心使用便是    
   include({         
      cssFiles:["styles/tree.css", "styles/main.css", "styles/login.css",...],        
      scripts:["scripts/jquery.extends.js", "scripts/array.extends.js",...]    
   });   
   </script>  
</head>

对了，顺便说一句，我们是可以通过配置去修改这个文件结构的，我们可以将那些需要的页面文件写到配置文件，然后单独建一个JS文件去调用，然后再将这个JS嵌入页面，尽最大程度与页面代码发生分离。还要记住一个普适原则，css文件一般放在head中，script文件分两种: 页面渲染和预备文件一般放在head中，而页面事件文件一般放在body中(仅是原则供参考)。