动态加载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 loadFile(element, callback, parent) {

            var p = parent && parent != undefined ? parent : "head";