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")[];
window.onload = function() {
para.style.color = "red";
}
window.onload = function() {
para.style.fontSize = "50px";
}
</script>
</body>
</html>

  这时,我们得到的是文字很大(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")[];
window.onload = function() {
para.style.fontSize = "50px";
}
window.onload = function() {
para.style.color = "red";
}
</script>
</body>
</html>

  这时,我们的到文字是默认的16px,但是颜色已经改变了。

  结论: 第二个window.onload确实会覆盖第一个出现的window.onload函数。

  解决方法1: 将所有的语句写在一个window.onload函数中

  解决方法2: 使用《JavaScript DOM编程艺术》一书中所推荐的方法。

  

当页面有多个js文件时,应如何引入?的更多相关文章

  1. Eclipse编辑jsp、js文件时,经常出现卡死现象解决汇总

    使用Eclipse编辑jsp.js文件时,经常出现卡死现象,在网上百度了N次,经过N次优化调整后,卡死现象逐步好转,具体那个方法起到作用,不太好讲.将所有用过的方法罗列如下: 1.取消验证 windo ...

  2. Eclipse编辑jsp、js文件时卡死现象的解决办法汇总

    使用Eclipse编辑jsp.js文件时,经常出现卡死现象,在网上百度了N次,经过N次优化调整后,卡死现象逐步好转,具体那个方法起到作用,不太好讲.将所有用过的方法罗列如下: 1.取消验证 windo ...

  3. 外部调用JS文件时出现中文乱码的解决办法

    若测试网页的编码格式为:gb2312,而调用外部JS文件时出现了乱码(前提是JS文件无错误),则将调用的外部JS文件用记事本打开,然后再保存成编码格式为UTF-8的JS文件即可. 若测试网页的编码格式 ...

  4. JavaScript:引用js文件时的编码格式问题

    JavaScript:引用js文件时的编码格式问题 如果js文件的编码格式是utf-8,并且含有中文,那么按照正常的方法引用,就会出现乱码的情况. 方法/步骤   如果js文件的编码格式是utf-8, ...

  5. webstorm创建js文件时自动生成js注释

    设置webstorm创建js文件时自动生成js注释 settings--Editor--File and Code Temlates 黑色框框里的内容自己填写上去,以下是参考的代码块: /** * @ ...

  6. 360浏览器兼容模式下jsp页面访问不到js文件

    360浏览器兼容模式下jsp页面访问不到js文件 查看自己js中的语法问题,不要用ES6的语法,编译不了故找不到js文件 const var of 码出高效 java 比较 所有整型包装类对象之间值的 ...

  7. 在HTML页面中加载js文件和css文件的方法

    1.在HTML页面加载js文件的方法: function loadScriptFile(filePath){ var script = document.createElement("scr ...

  8. [工具配置]requirejs 多页面,多入口js文件打包总结

    需要明确以下几点: 1.本地前端调试代码肯定是调用原始的路径以及代码,但是线上运行的肯定是通过打包后的另一个路径,这儿就是生成的dist文件夹了. 2.requirejs的引入,线上跟线下的路径怎么控 ...

  9. 一次应用js文件时遇到的怪异现象

    使用thinkphp开发的网页中, 应用js文件 <script  language="JavaScript"  src="__JS__/printer/jquer ...

随机推荐

  1. 编写高质量代码改善C#程序的157个建议——建议85:Task中的异常处理

    建议85:Task中的异常处理 在任何时候,异常处理都是非常重要的一个环节.多线程与并行编程中尤其是这样.如果不处理这些后台任务中的异常,应用程序将会莫名其妙的退出.处理那些不是主线程(如果是窗体程序 ...

  2. gkd

    ## Part 0. 开篇 组长博客:[戳我进入]() 作业博客:[班级博客本次作业的链接](https://edu.cnblogs.com/campus/fzu/Grade2016SE/homewo ...

  3. linux 用户和组

    每个用户拥有一个UID,操作系统实际使用的是用户ID,而非用户名 每个用户属于一个主组,而且属于一个或多个附属组 每个组有一个GroupID 每个进程以一个用户身份运行,并受该用户可访问的资源限制 每 ...

  4. 关于Java中的几种特殊类与接口,及特殊的创建实例的方法

    Java中有一些特殊的类,在教材中讲解的不深,但是确实非常有用的,这里总结一下,里面用到的有网上搜到的内容,这里表示下感谢. 一.成员内部类 成员内部类是在一个内中定义的另外一个类,这个类属于其上的类 ...

  5. Android-SDCard外部存储文件读写

    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> <uses ...

  6. GitHub上创建组织

    4.3. 组织和团队 GitHub 在早期没有专门为组织提供账号,很多企业用户或大型开源组织只好使用普通用户账号作为组织的共享账号来使用.后来,GitHub推出了组织这一新的账号管理模式,满足大型开发 ...

  7. 使用PowerShell自动部署ASP.NetCore程序到IIS

    Windows PowerShell 是一种命令行外壳程序和脚本环境,使命令行用户和脚本编写者可以利用 .NET Framework的强大功能.有关于更多PowerShell的信息,可参阅百度词条 接 ...

  8. 一行代码搞定Dubbo接口调用

    本文来自网易云社区 作者:吕彦峰 在工作中我们经常遇到关于接口测试的问题,无论是对于QA同学还是开发同学都会有远程接口调用的需求.针对这种问题我研发了一个工具包,专门用于远程Dubbo调用,下面就让我 ...

  9. SpringMVC 的使用映射路径展示文件服务器上的图片

    需求: 前端上传图片,返回路径给前端,前端通过路径来访问图片的资源. 解决方案: <mvc:resources mapping="/${mapping_path}/**" l ...

  10. Python进程间通信之共享内存

    前一篇博客说了怎样通过命名管道实现进程间通信,但是要在windows是使用命名管道,需要使用python调研windows api,太麻烦,于是想到是不是可以通过共享内存的方式来实现.查了一下,Pyt ...