• 当页面有多个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编程艺术》一书中所推荐的方法。

      

  • 相关阅读:
    必懂的wenpack优化
    必懂的webpack高级配置
    webpack基础知识
    vue-cli
    codemirror使用
    js实现二叉树
    react-生命周期
    window 批量修改或去除文件后缀名
    十分钟搞清字符集和字符编码
    php判断一个值是否在一个数组中,区分大小写-也可以判断是否在键中
  • 原文地址:https://www.cnblogs.com/zhuzhenwei918/p/6487916.html
Copyright © 2020-2023  润新知