前端开发笔记——自己写的js文件外部引入及封装
Posted wl夏白
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端开发笔记——自己写的js文件外部引入及封装相关的知识，希望对你有一定的参考价值。
1.外部引入js引入
当引入外部js的时候，一般放在html的head中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="vueTest.js"></script>
</head>
<body>
<div id="app">
<span v-bind:name="spanName">{{ message }}</span>
</div>
</body>
</html>
但是有时候外部引入的js文件中会使用html中的DOM，此时如果在html文件的head中引入，执行引入文件的时候，因为DOM不存在而导致报错。
这种情况下应该如何解决呢？
1. 将script的引入放到body最后面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<span v-bind:name="spanName">{{ message }}</span>
</div>
<script src="vueTest.js"></script>
</body>
</html>
2. 修改外部引入的js文件的写法
2.外部引入的js如何写
一般情况下，按照在html文件中script的格式写及可，但是这种情况下放到head中会有问题，那么该如何修改呢？
1.使用window.onload
在写的外部js文件的时候，外部包上window.onload
window.onload=function(){
//你写的js文件
}
这种可以将js在header中引用而不报错，但是，onload是无法多次执行的，如果你有多个js文件需要引用，使用多个onload方法的话，第二个onload方法会将第一个onload覆盖，导致报错
2.使用jQuery中的$(document).ready(function)
现在html中引入jQuery库
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
在外部引用的js代码用$(document).ready(function)包起来
$(document).ready(function)的3种写法
第一种方式
$(document).ready(function(){
// 你写的js的代码
});
第二种方式
$().ready(function（）{
// 你写的js的代码
});
第三种方式
// 最简单的写法
$(function（）{
// 你写的js的代码
});
以上是关于前端开发笔记——自己写的js文件外部引入及封装的主要内容，如果未能解决你的问题，请参考以下文章