當頁面有多個js文件時,應如何引入?


  1. 我們知道如果一個頁面有多個js文件,並且這些js文件有的還有依賴關系的時候,我們就要特別注意他們之間的引入順序,否則就會報錯。

   如:一個js文件依賴jquery,我們就要先引入jquery,然后再引入這個js文件,否則,就會報錯$ is not defined。

  

  2. 當一個頁面有多個js文件的時候,另一個可能出現的問題就是 window.onload = function() { // doSomething() };這個函數出現了多次,這樣,只有最后一次出現的才會執行,而之前被引入的js文件的window.onload 函數會被后面引入的包含的window.onload函數覆蓋,這一點需要格外注意。舉例如下:

例1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>window.onload</title>
</head>
<body>
    <div class="test">這是一段文字</div>
    <script>
        var para = document.getElementsByClassName("test")[0];
        window.onload = function() {    
            para.style.color = "red";
        }
        window.onload = function() {
            para.style.fontSize = "50px";
        }
    </script>
</body>
</html>
View Code

  這時,我們得到的是文字很大(50px),顏色還是默認的黑色。

例2:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>window.onload</title>
</head>
<body>
    <div class="test">這是一段文字</div>
    <script>
        var para = document.getElementsByClassName("test")[0];
        window.onload = function() {
            para.style.fontSize = "50px";
        }
        window.onload = function() {    
            para.style.color = "red";
        }
    </script>
</body>
</html>
View Code

  這時,我們的到文字是默認的16px,但是顏色已經改變了。

  結論: 第二個window.onload確實會覆蓋第一個出現的window.onload函數。 

  解決方法1: 將所有的語句寫在一個window.onload函數中

  解決方法2: 使用《JavaScript DOM編程藝術》一書中所推薦的方法。

 

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM