Javascript方法的执行顺序和存放位置的关系

时间 2019-12-22

标签 javascript 方法执行顺序存放位置关系栏目 JavaScript 繁體版

原文原文链接

$ is not definedjavascript

问题

今天在运行项目的时候，前台jsp报错，数据没法正常显示，明明jquery导入了，但为何不起做用呢？html

网上查询了一下，这个跟前台代码的执行顺序有关。java

首先Javascript的出现的位置，归纳起来就是三种形式：
1. 内部：Html网页的<body></body>中；
2. 内部：Html网页的<head></head>中；
3. 外部：外部JS文件里。jquery

javaScript的位置
Javascript写在<body></body>中

当浏览器载入网页Body部分的时候，就执行其中的Javascript语句，执行以后输出的内容就显示在网页中。浏览器

<html>
<head></head>
<body>
<script type="text/javascript">....</script>
</body>
</html>

Javascript写在<head></head>中

有时候并不须要一载入HTML就运行Javascript，而是用户点击了HTML中的某个对象，触发了一个事件，才须要调用Javascript。这时候，一般将这样的Javascript放在HTML的<head></head>里。jsp

<html>
<head>
<script type="text/javascript">....</script>
</head>
<body>
</body>
</html>

使用引用js

将Javascript程序放到一个后缀名为.js的文本文件里。在HTML里引用外部文件里的Javascript，应在Head里写一句<script src="文件名"></script>，其中src的值，就是Javascript所在文件的文件路径。函数

示例代码以下：spa

<!-- 引用js可放的三个位置
    在<head></head>和在<body></body>中和body后面<html>-->

<head>
<script src="js/001.js">...</script>
</head>
<body>
<!--<script src="hello.js"></script>-->
</body>
<!--<script src="hello.js"></script>-->
</html>

关于引用js的存放位置，不管在哪里引用js，js的加载顺序是不变的，都是按照页面载入顺序执行的code

那么不一样的引用位置对咱们会有什么影响呢？htm

举例说明没引用 jQuery 的以前，先运行了调用 jQuery 函数的代码，就会报错。你能够控制你本身写的 JS 放在页面最下面，放在 jQuery 下面，可是你没法保证页面上其余地方会不会有人图省事直接在 HTML 代码里面输出 JS。若是有，那么就会报错。

问题出现的缘由也就知道了，在我使用“$”以前尚未引入jquery类库，jquery是在底部导入的，因此就报“$ is not defined”的异常了

因此我建议，类库放在上面加载，其他代码尽量放在最底下加载。

总结：

本身写的js最好放在body标签后面（详细讲解看连接）

引用js，类库放在上面加载，其他代码尽量放在最底下加载。

Javascript方法的执行顺序和存放位置的关系

问题

javaScript的位置

Javascript写在<body></body>中

Javascript写在<head></head>中

使用引用js

总结：