很多时候在一个页面中某个操作需要用到一个js库，但这个操作也不经常用，所以并不想在该页面一开始就加载这个js库，只有当操作时才动态加载进来。
由于浏览器（DOM）对象允许javascript动态创建任何HTML内容，并自动根据链接下载内容，像<img src="..." />``<script src="...">等，所以只需向DOM中添加<script>内容就好了，关键在于怎样知道浏览器什么时候加载完js，不然我们依赖该js的代码就会出错，
Chrome/Firefox/safari/IE11 等在<script>内容加载完后会有一个load事件，我们可监听这一事来完成需要的相关操作
var script = document.createElement("script");
script.onload = function(){
///加载完成
}
script.src = "file.js";
document.getElementByTagName("head")[0].appendChild(script);
而IE11以下版本就不支持此事件，但会有一个readystatechange事件：
script.readystatechange = function(){
if( script.readyState == "loaded" || script.readyState == "complete" ){
///加载完成
}
}
下面来封装下，以方便调用：
function loadScript(url, callback){
var script = document.createElement ("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function(){
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
现在就可以当点击时再加载所需js库，但当重复点击时，就会重复加载，所以我们还需要一个变量记录已动态加载的js，以防止重复加载
