JQuery 加载 CSS、JS 文件

JS 方式加载 CSS、JS 文件：

//加载 css 文件
function includeCss(filename) {var head = document.getElementsByTagName('head')[0];var link = document.createElement('link');link.href = filename;link.rel = 'stylesheet';link.type = 'text/css';head.appendChild(link)
}//加载 js 文件
function includeJs(filename) {var head = document.getElementsByTagName('head')[0];var script = document.createElement('script');script.src = filename;script.type = 'text/javascript';head.appendChild(script)
}

上面这种方式很简单，但也会出现一些问题，比如加载 JS 文件之后，需要执行 JS 内的方法，这时候偶尔会找不到方法执行，因为可能加载 JS 文件的时候，网络卡掉了，所以，需要换种方式加载，必须在加载 JS 文件完成之后，执行 JS 内部方法。

JQuery 加载 CSS 文件：

$("head").append("<link>");
var css = $("head").children(":last");
css.attr({rel:  "stylesheet",type: "text/css",href: "address_of_your_css"
});

Jquery 加载 JS 文件，有两种方式：

$.ajax({url: "js file",dataType: "script",cache: true,success: function () {//todo}
});$.getScript('js file', function () {//todo
});

上面两种方式都可以，并且都是在加载 JS 文件之后，再执行 JS 内部的方法（不会出现找不到方法执行错误），第二种会更简单些。

那如果我们需要加载多个 JS 文件呢？

$.when($.getScript( "/mypath/myscript1.js" ),$.getScript( "/mypath/myscript2.js" ),$.getScript( "/mypath/myscript3.js" ),$.Deferred(function(deferred){$(deferred.resolve);})
).done(function(){//place your code here, the scripts are all loaded
});

如果需要多次调用，也可以抽离出方法：

//定义
$.getMultiScripts = function(arr, path) {var _arr = $.map(arr, function(scr) {return $.getScript( (path||"") + scr );});_arr.push($.Deferred(function( deferred ){$( deferred.resolve );}));return $.when.apply($, _arr);
}//调用
var script_arr = ['myscript1.js', 'myscript2.js', 'myscript3.js'
];
$.getMultiScripts(script_arr, '/mypath/').done(function() {// all scripts loaded
});