当页面有多个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")[];
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文件时，应如何引入？的更多相关文章
- Eclipse编辑jsp、js文件时，经常出现卡死现象解决汇总
使用Eclipse编辑jsp.js文件时,经常出现卡死现象,在网上百度了N次,经过N次优化调整后,卡死现象逐步好转,具体那个方法起到作用,不太好讲.将所有用过的方法罗列如下: 1.取消验证 windo ...
- Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
使用Eclipse编辑jsp.js文件时,经常出现卡死现象,在网上百度了N次,经过N次优化调整后,卡死现象逐步好转,具体那个方法起到作用,不太好讲.将所有用过的方法罗列如下: 1.取消验证 windo ...
- 外部调用JS文件时出现中文乱码的解决办法
若测试网页的编码格式为:gb2312,而调用外部JS文件时出现了乱码(前提是JS文件无错误),则将调用的外部JS文件用记事本打开,然后再保存成编码格式为UTF-8的JS文件即可. 若测试网页的编码格式 ...
- JavaScript：引用js文件时的编码格式问题
JavaScript:引用js文件时的编码格式问题 如果js文件的编码格式是utf-8,并且含有中文,那么按照正常的方法引用,就会出现乱码的情况. 方法/步骤 如果js文件的编码格式是utf-8, ...
- webstorm创建js文件时自动生成js注释
设置webstorm创建js文件时自动生成js注释 settings--Editor--File and Code Temlates 黑色框框里的内容自己填写上去,以下是参考的代码块: /** * @ ...
- 360浏览器兼容模式下jsp页面访问不到js文件
360浏览器兼容模式下jsp页面访问不到js文件 查看自己js中的语法问题,不要用ES6的语法,编译不了故找不到js文件 const var of 码出高效 java 比较 所有整型包装类对象之间值的 ...
- 在HTML页面中加载js文件和css文件的方法
1.在HTML页面加载js文件的方法: function loadScriptFile(filePath){ var script = document.createElement("scr ...
- [工具配置]requirejs 多页面，多入口js文件打包总结
需要明确以下几点: 1.本地前端调试代码肯定是调用原始的路径以及代码,但是线上运行的肯定是通过打包后的另一个路径,这儿就是生成的dist文件夹了. 2.requirejs的引入,线上跟线下的路径怎么控 ...
- 一次应用js文件时遇到的怪异现象
使用thinkphp开发的网页中, 应用js文件 <script language="JavaScript" src="__JS__/printer/jquer ...
随机推荐
- zrender源码分析3--初始化Painter绘图模块
接上次分析到初始化ZRender的源码,这次关注绘图模块Painter的初始化 入口1:new Painter(dom, this.storage); // zrender.js /** * ZRen ...
- review一个javascript功能函数
近半年来一直觉得自己在技术上好像左右挣扎,技术没啥提升,看书看不进,自学还挺慢.写出来的东西,自己都觉得不满意.让自己也用庸人自扰的感觉. 最近,在工作中,有一个小小的功能需要实现,这个功能非常简单, ...
- Digester学习笔记(三)转载
总觉得,Digester不仅仅能作配置文件解析,而且可以作得更多. 配置属性 Digester用来解析应用系统的配置文件,其本身也有很可配置的属性. 属性 描述 classLoader 指定类装载器( ...
- 基于SSH的网上购物商城系统-JavaWeb项目-有源码
开发工具:Myeclipse/Eclipse + MySQL + Tomcat 项目简介: 基于WEB的网上购物系统主要功能包括:前台用户登录退出.注册.在线购物.修改个人信息.后台商品管理等等.本系 ...
- Java50道经典习题-程序2 输出素数
题目:判断101-200之间有多少个素数,并输出所有素数 分析:判断素数的方法:用一个数分别去除2到(这个数-1)的数,如果能被整除,则表明此数不是素数,反之是素数. public class Pro ...
- html中的table导出Excel
演示地址: http://www.jq22.com/yanshi3312 具体代码: <!DOCTYPE html> <html lang="zh-CN"> ...
- C# 读Autofac源码笔记（2）
刚看了下Autofac属性注入的源码 首先看看WithProperty方法 image.png Autofac将我们的属性值,存在了一个list集合中 image.png 然后将这个集合传递到 ...
- NGrinder操作指南
一.使用nGrinder谷歌插件录制性能测试脚本: 1.下载录制插件压缩包ngrinder-recorder-1.0.7z,解压到本地目录. 2.打开Chrome浏览器,URL框内输入chrome:/ ...
- 为啥我的Andrid百度SDK不能正常运行？
首先,百度SDK运行时候需要加载API Key,这个API Key是通过百度账号在百度里面申请到的,但是很可能大家没有注意到百度这个API Key申请的过程,其中很重要的一个步骤没有做好,而导致不能正 ...
- PHP删除一个目录下的所有文件，不删除文件夹
/*删除指定目录下的文件,不删除目录文件夹*/ function delFile($dirName){ if(file_exists($dirName) && $handle=open ...