当页面有多个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 ...
随机推荐
- MyEclipse中安装反编译插件
如何查看MyEclipse中Spring等框架的源文件. 首先先下载一个插件:http://pan.baidu.com/share/link?shareid=644034672&uk=3508 ...
- You must restart adb and Eclipse.
打开Eclipse运行android 程序发现虚拟机启动不了提示 You must restart adb and Eclipse. 如下方式适用于端口占用的情况: 1.netstat -ano|f ...
- zigzag数组实现
题目出自面试宝典8.3.2 题目描述: 输入n,求一个n*n的矩阵,规定矩阵沿45度线递增,形成一个zigzag数组(JPEG编码里去像素数据的排列顺序),请问如何用C++实现? 例如: n=2 0 ...
- PMBOK项目管理PMI主义\IPMA概述
PMP(Project Management Professional)指项目管理专业人士资格认证,是美国项目管理协会(Project Management Institute,PMI)在全球180多 ...
- Replication--Alwayson+复制发布
场景:主服务器:RepServer1从服务器:RepServer2监听者:RepListener分发库:DisServer发布数据库:RepDB1配置:1>设置DisServer为分发服务器,在 ...
- HBase介绍(4)---常用shell命令
进入hbase shell console$HBASE_HOME/bin/hbase shell如果有kerberos认证,需要事先使用相应的keytab进行一下认证(使用kinit命令),认证成功之 ...
- [java]基于UDP的Socket通信Demo
java课编程作业:在老师给的demo的基础上实现客户端发送数据到服务器端,服务器端接受客户端后进行数据广播. 整体功能类似于聊天室,代码部分不是太难,但是在本机测试的时候出现这样的问题: 服务端通过 ...
- mysql 循环插入
在mysql添加测试数据,想和mssql一样用循环实现,发现不管怎么样都执行失败 经查询发现mysql不支持匿名块,只能先创建出一个存储过程,执行,然后删除 CREATE PROCEDURE test ...
- 配合前端开发,调试前端页面bug
同事开发的H5页面 在iOS10.1的手机上会有bug 先下载ios10.1的模拟器,安装到xcode上,注意给电脑腾出足够的空间 https://stackoverflow.com/questio ...
- php-fpm 操作命令
以下内容转自 https://www.cnblogs.com/alibai/p/4070076.html 和 https://blog.csdn.net/wzx19840423/article/det ...