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. Postman -- HTTP请求的Chrome插件

    摘要 : Postman是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件. 用户在开发或者调试网络程序或者是网页B/S模式的程序的时候是需要一些方法来跟踪网页请求的,用户可以使用一些网 ...

  2. 查看Linux系统是32位的还是64位的

    方法1: getconf LONG_BIT 上面显示我先用的是32位的系统. 方法2: .uanme -a .uname -m 显示i686或x86就是32位的系统,显示x86_64就是64位系统. ...

  3. .net 线程基础 ThreadPool 线程池

    1. ThreadPool 线程池异步: //public static bool QueueUserWorkItem(WaitCallback callBack); //public static ...

  4. Revel框架学习

    1.准备工作 revel的下载需要git和hg(mercurial)工具,请先安装这两个工具. 配置好GOROOT和GOPATH环境变量,源码会默认下载到GOPATH第一个目录的src目录下. 一般g ...

  5. 微信开发之c#下jssdk签名生成

    参考文章 :微信JS-SDK 权限签名算法 C#版 这篇文章讲解的的比较详细,而且算法准确,但是这篇文章有几个错误的地方需要注意; url必须动态生成 url不能写死,否则就算结果和官方检测的一致,也 ...

  6. Spring Boot - 杂项

    可以使用devtools功能来实现热部署(Hot Swapping),需要加入依赖(如maven):spring-boot-devtools 可以实现修改代码并保存后的自动编译.重启 依赖于Eclip ...

  7. Spring Boot - Spring Cache

    缓存 服务器自身(内存)的缓存 利用java程序中的变量 简单 集群环境中多个实例无法共享同步 缓存服务器(一般支持集群.分布式) Redis Memcached Spring中使用注解使用缓存 启动 ...

  8. Sql2012 AlwaysOn

    准备: 两台宿主机,两台虚拟机,一根交叉线 系统都是windows server 2012 步骤 1.两台虚拟机均为双网卡 2.配置故障转移群集 3.执行AlwaysOn配置(增加Listen此步骤上 ...

  9. Blocks to Cubes

    Bholu the Pandit on this New Year wanted to divide his Cuboidal Packaging block into cubes. But he l ...

  10. php面向对象编程_1

    1, php面向对象编程的三大特征: (1) 封装性,封装就是把抽象出的数据和对数据的操作封装在一起,数据被保护在内部,程序的其它部分只有通过被授权的操作(成员方法)才能对数据进行操作. (2) 继承 ...