web动态添加js外部文件方式

<1>scrilpt标签方式

文档对象模型（DOM）允许你使用JavaScript 动态创建HTML的几乎全部文档内容。其根本在于，<script>元素与页面其他元素没有什么不同：引用变量可以通过DOM进行检索，可以从文档中移动、删除，也可以被创建.

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "file1.js";
document.getElementsByTagName_r("head")[0].appendChild(script);

新的<script>元素加载file1.js源文件。此文件当元素添加到页面之后立刻开始下载。此技术的重点在于：无论在何处启动下载，文件的下载和运行都不会阻塞其他页面处理过程。你甚至可以将这些代码放在<head>部分而不会对其余部分的页面代码造成影响（除了用于下载文件的HTTP 连接）。

当文件使用动态脚本节点下载时，返回的代码通常立即执行（除了Firefox和Opera，他们将等待此前的所有动态脚本节点执行完毕）。当脚本是“自运行”类型时这一机制运行正常，但是如果脚本只包含供页面其他脚本调用调用的接口，则会带来问题。这种情况下，你需要跟踪脚本下载完成并准备妥善的情况。可以使用动态<script>节点发出事件得到相关信息。

Firefox, Opera, Chorme, IE11+ 和Safari3+会在<script>节点接收完成之后发出一个load 事件。你可以监听这一事件，以得到脚本准备好的通知：

var script = document.createElement("script")
script.type = "text/javascript";
//Firefox, Opera, Chrome, Safari 3+
script.onload = function(){alert("Script loaded!");
};
script.src = "file1.js";
document.getElementsByTagName_r("head")[0].appendChild(script);

Internet Explorer(IE10及以下版本)支持另一种实现方式，它发出一个readystatechange事件。<script>元素有一个readyState属性，它的值随着下载外部文件的过程而改变。readyState 有五种取值：

uninitialized: 默认状态

loading: 下载开始

loaded: 下载完成

interactive: 下载完成但尚不可用

complete: 所有数据已经准备好

微软文档上说，在<script>元素的生命周期中，readyState 的这些取值不一定全部出现，但并没有指出哪些取值总会被用到。实践中，我们最感兴趣的是“loaded”和“complete”状态。Internet Explorer 对这两个readyState值所表示的最终状态并不一致，有时<script>元素会得到“loader”却从不出现“complete”，但另外一些情况下出现“complete”而用不到“loaded”。最安全的办法就是在readystatechange 事件中检查这两种状态，并且当其中一种状态出现时，删除readystatechange事件句柄（保证事件不会被处理两次）：

var script = document.createElement("script")
script.type = "text/javascript";
//Internet Explorer
script.onreadystatechange = function(){if (script.readyState == "loaded" || script.readyState == "complete"){script.onreadystatechange = null;alert("Script loaded.");}
};
script.src = "file1.js";
document.getElementsByTagName_r("head")[0].appendChild(script);

大多数情况下，你希望调用一个函数就可以实现JavaScript 文件的动态加载。下面的函数封装了标准实现和IE 实现所需的功能：

function loadScript(url, callback){var script = document.createElement ("script")script.type = "text/javascript";if (script.readyState){ //IEscript.onreadystatechange = function(){if (script.readyState == "loaded" || script.readyState == "complete"){script.onreadystatechange = null;callback();}};} else { //Othersscript.onload = function(){callback();};}script.src = url;document.getElementsByTagName_r("head")[0].appendChild(script);
}

<2>异步加载js文件

在实际开发中，为了实现某种效果或者提升用户体验，往往需要控制何时加载js。本文总结了三个场景的js加载需求：在页面加载完成之后加载js，不同条件下动态加载不同的js，项目打包时的异步加载js模块。

一、在页面加载完成之后加载js

由于js的加载需要一定的时间，为了提高用户体验，可以先让页面元素呈现出来，然后在加载js文件。
<code><script type="text/javascript">
$(document).ready(function(){ var userName="xiaoming"; alert(userName);
});
</script> </code>
或者简写：
<code>$(function(){
var userName="xiaoming";
alert(userName);
}); </code>
二、不同条件下动态加载不同的js

在不同条件下动态加载不同的js，当你的代码将在不同的环境中运行的时候，你需要他加载不同的js，一方面减少js的加载量，另一方面防止加载的两个js相互污染，所以要先判断环境，然后根据不同环境选择加载不同的js。这里举了个不恰当的例子，zepto和jquery，只是做个例子而已。
<code>var loadScript;
if(isHomeEncironment){loadJS("https://***/dist/js/public/zepto.min.js");loadScript.onload = function() {//加载结束之后执行回调loadScript.onload = null;callAFun();//回调函数A}
}else{loadJS("https://***/dist/js/public/jquery.js"); loadScript.onload = function() {//加载结束之后执行回调loadScript.onload = null;callBFun(); //回调函数B}
}
function loadJS(url) {//加载jsloadScript = document.createElement("script");loadScript.type = "text/javascript";loadScript.src = url;document.body.appendChild(loadScript);
}
function callBFun(){//zepto方法} 
function callBFun(){//jquery方法} 
</code>
三、项目打包时的异步加载js模块

在commonjs中有一个Modules/Async/A规范，里面定义了require.ensure语法。webpack实现了它，作用是可以在打包的时候进行代码分片，并异步加载分片后的代码。用法如下：
<code>require.ensure([], function(require){var list = require('./list');list.show();
}, 'list');</code>
此时list.js会被打包成一个单独的chunk文件 list.fb874860b35831bc96a8.js。

require.ensure方法有三个参数，关于第一个参数，上例中传了空数组，如果传模块名称，则可以实现预加载懒执行，即当执行到这里时，js文件会加载到浏览器但是不会执行，真正执行的是list = require(‘./list’)list = require(‘./list’)。关于第三个参数，用于定义成成的js文件的名称，该参数不是必须的，如果没有第三个参数，那么生成的js文件为默认的名字

<3>网页里面动态添加js

常见的js动态加载技术之一是把一些逻辑独立的js脚本文件单独加载。这样做的好处是，比如可减少不必要的js脚本文件的加载，以提高网页浏览器的速度。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>动态加载js</title><script type="text/javascript">//动态加载js文件--my.jsfunction loadJs(){//得到html的头部domvar theHead = document.getElementsByTagName('head').item(0);//创建脚本的dom对象实例var myScript = document.createElement('script');myScript.src = './my.js';           //指定脚本路径myScript.type = 'text/javascript';  //指定脚本类型myScript.defer = true;              //程序下载完后再解析和执行theHead.appendChild(myScript);      //把dom挂载到头部}</script>
</head>
<body style="text-align:center"><p><input type="button" value="动态加载JS" onclick="loadJs()"/></p>
</body>
</html>

js代码：

var test = function(){alert("动态加载js文件");
}
test();

效果：

点击按钮之后，执行js代码片段。

解析：本例采用动态创建的方式来动态加载js，这是较为合理的一种方式。首先，创建一个js的DOM对象，然后，为它配置好脚本的地址和类型，最后把它挂载到网页的头部，也就是head部分。只有当用户单击“OK”按钮之后，“my.js”这个脚本文件才会被加载到网页中执行。

<4>使用js加载器加载外部的js文件

使用js加载器动态加载外部Javascript文件

　　今天在网上找到了一个可以动态加载js文件的js加载器，具体代码如下：

JsLoader.js

 1 var MiniSite=new Object();2 /**3  * 判断浏览器4  */5 MiniSite.Browser={   6     ie:/msie/.test(window.navigator.userAgent.toLowerCase()),   7     moz:/gecko/.test(window.navigator.userAgent.toLowerCase()),   8     opera:/opera/.test(window.navigator.userAgent.toLowerCase()),   9     safari:/safari/.test(window.navigator.userAgent.toLowerCase())
10 };
11 /**
12  * JsLoader对象用来加载外部的js文件
13  */
14 MiniSite.JsLoader={
15     /**
16      * 加载外部的js文件
17      * @param sUrl 要加载的js的url地址
18      * @fCallback js加载完成之后的处理函数
19      */
20     load:function(sUrl,fCallback){
21         var _script=document.createElement('script');
22         _script.setAttribute('charset','gbk');
23         _script.setAttribute('type','text/javascript');
24         _script.setAttribute('src',sUrl);
25         document.getElementsByTagName('head')[0].appendChild(_script);
26         if(MiniSite.Browser.ie){
27             _script.onreadystatechange=function(){
28                 if(this.readyState=='loaded'||this.readyStaate=='complete'){
29                     //fCallback();
30                     if(fCallback!=undefined){
31                          fCallback();
32                     }
33
34                 }
35             };
36         }else if(MiniSite.Browser.moz){
37             _script.οnlοad=function(){
38                 //fCallback();
39                 if(fCallback!=undefined){
40                         fCallback();
41                 }
42             };
43         }else{
44             //fCallback();
45             if(fCallback!=undefined){
46                     fCallback();
47             }
48         }
49     }
50 };

JsLoader.js测试

 1 <!DOCTYPE HTML>2 <html>3   <head>4   <!--引入js加载器  -->5    <script type="text/javascript" src="js/JsLoader.js"></script>6     <title>JsLoaderTest.html</title>7     <script type="text/javascript">8         if(MiniSite.Browser.ie){9             //动态加载Js
10             MiniSite.JsLoader.load("js/jquery-1.9.1.js",function(){
11                 alert("动态加载的是jquery-1.9.1.js");
12                 $(function(){
13                     alert("jquery-1.9.1.js动态加载完成之后做的处理操作");
14                 });
15             });
16         }else{
17             MiniSite.JsLoader.load("js/jquery-2.0.3.js",function(){
18                 alert("动态加载的是jquery-2.0.3.js");
19                 $(function(){
20                     alert("jquery-2.0.3.js动态加载完成之后做的处理操作");
21                 });
22             });
23         }
24     </script>
25   </head>
26
27   <body>
28
29   </body>
30 </html>

测试结果如下：

IE浏览器下测试结果：

google浏览器下的测试结果：