頁面中引入js的幾種方法

通常大家最為熟悉的是一下兩種方法：

1. 在頁面中直接寫入<script type="text/javascript">js代碼</script>。
2. 在頁面中引入外部文件<script src="xx.js"></script>。

下面再介紹幾種頁面引入js的代碼：

1. 在js中引入外部js，通過document.wirite("scr"+"ipt src='xx.js'></scr"+"ipt">。此時：<script></script>被拆解為"<scr"+"ipt .....</scr"+"ipt">，如果不這樣拆解，瀏覽器可能會把父級js片段關閉掉，從而導致出錯。
2. 在js中引用其他js片段，document.write("<scr"+"ipt>alert(xxx)</scr"+"ipt>");
3. 通過DOM添加：var scr=document.createElement("script"); scr.src="xxx.js";

下面測試下，不同的方式引入js，加載的時間順序：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="2.js" type="text/javascript"></script>
        <script type="text/javascript">
             document.write("<scr"+"ipt>alert(4)</scr"+"ipt>");//通過第四種方式引入
             document.write("<scr"+"ipt src='3.js'></scr"+"ipt>");//通過第三種方式引入
             alert(1);
             document.write("<scr"+"ipt src='3.js'></scr"+"ipt>");
             alert(5);
        </script>
    </head>
    <body>
    </body>
</html>

執行順序：2-4-1-5-3-3

第三種和第四種交換順序后：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="2.js" type="text/javascript"></script>
        <script type="text/javascript">
             document.write("<scr"+"ipt src='3.js'></scr"+"ipt>");//通過第三種方式引入
             document.write("<scr"+"ipt>alert(4)</scr"+"ipt>");//通過第四種方式引入 
             alert(1);
             document.write("<scr"+"ipt src='3.js'></scr"+"ipt>");
             alert(5);
        </script>
    </head>
    <body>
    </body>
</html>

執行順序：2-1-5-3-4-3

可以看出第三種方式：document.wirite("scr"+"ipt src='xx.js'></scr"+"ipt">引入js的代碼，執行會遲與直接寫入的js文本。

同時，第四種方式引入js的執行和直接寫入的文本是按順序執行。

總結下，常用的一下幾種方式引入js代碼：

1. 在頁面中直接寫入<script type="text/javascript">js代碼</script>。
2. 在頁面中引入外部文件<script src="xx.js"></script>。
3. 在js中引入外部js，通過document.wirite("scr"+"ipt src='xx.js'></scr"+"ipt">。
4. 在js中引用其他js片段，document.write("<scr"+"ipt>alert(xxx)</scr"+"ipt>")。
5. 通過DOM添加：var scr=document.createElement("script"); scr.src="xxx.js";