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文件的写法

使用onload或者jQuery中的$(document).ready(function)

2.外部引入的js如何写

1.head内引入，并且有dom操作

一般情况下，按照在html文件中script的格式写及可，但是当有dom操作时，加载js文件时有dom操作时，此时放到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的代码
});

$(document).ready是在表单DOM加载后，图片等请求加载前执行，将代码放到里面，html引入的时候，不管是引入到head里还是body后面，都不会报错了！

2.放到body结尾或没有dom操作

没有dom操作，或者放到body结尾时，此时不用考虑报错问题，但是一般情况下也不会写代码，而是通过匿名函数的方式，目的是为了防止windows对象的污染

(function(){
  // 具体代码实现
}())

举例说明，当没有使用匿名函数的时候

var a="111";
console.log("111");

运行时，可以通过在windows上拿到a的值

javascript 使用外部常量 js外部引用_匿名函数


使用匿名函数

(function(){
    var a="111";
    console.log(a);
}())

运行时

javascript 使用外部常量 js外部引用_匿名函数_02