javaScript代码何时执行

最新推荐文章于 2023-04-16 23:11:29 发布

armwind

最新推荐文章于 2023-04-16 23:11:29 发布

阅读量778

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/armwind/article/details/114456476

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

javaScript引入位置

一般在Head标签中引入css
在body最后引入js文件

好久没用JavaScript了，这里开始学习下。在学习WEUI时(http://www.jqweui.cn/download)，下面的注释引起了我的注意。这里看着他们引入的位置还是有区别的。

<!-- head 中 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">

<!-- body 最后 -->
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>

<!-- 如果使用了某些拓展插件还需要额外的JS -->
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/swiper.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/city-picker.min.js"></script>

为此特意百度了一下,加上自己实验,才有了一些理解。

javacript是根据 <script>顺序来执行的,写在前面的标签中的代码会被先执行。

上面的注释告诉我们导入js代码写在body的最后，为什么会这样?
因为一般情况下，在文档标签中包含js脚本或者导入的js文件。这意味着必须等到全部js代码都被执行完以后才能继续解析后面的HTML部分。

下面是实验时的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>armwind</title>
    <link rel="stylesheet" href="jquery-weui.min.css">
    <link rel="stylesheet" href="weui.min.css">
    <script>
        alert("armwind1")
    </script>
</head>
<body>
<a href="javascript:;" class="weui-btn weui-btn_primary">按钮</a>

<script src="jquery-weui.min.js"></script>
<script src="jquery.min.js"></script>

<script>
  alert("armwind2");
</script>
<script>
  alert("armwind3");
</script>
</body>
</html>

执行结果:
下面能够看到在先显示armwind1，然后在显示armwind2的时候，绿色按钮已经被渲染到浏览器中了。这说明解析JavaScript和解析body的html标签是同时进行的。所以在上面的注释中说要把js文件放到body标签的最后。
在这里插入图片描述
上面测测试例子，我把JavaScript放到body标签内部了。这在正式开发时，代码会显示有点乱。一般会在外面body外面在加一个<scritp>标签.

<body>
<script>
    console.log("this is body");
</script>
</body>
<script>
  console.log("hello world1")

  (function() {
    console.log('this is armwind');
  })();

运行结果：
这里运行结果能在最后面看到一个错误，这个需要在console.log("hello world1")后面加一个;就可以解决了。
在这里插入图片描述
正确的结果

上面能看到body中的<script>比下面的<script>要提前运行。此外在在body下面的script可以执行，所以我目前总结2条JavaScript执行顺序

直接调用：
不言而喻，直接调用JavaScript方法执行
方法定义时调用
这个是在定义函数时直接调用,形如下面的定义和调用。

  (function() {
    console.log('this is armwind');
  })();

armwind

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javaScript代码何时执行

javaScript引入位置一般在Head标签中引入css在body最后引入js文件好久没用JavaScript了，这里开始学习下。在学习WEUI时(http://www.jqweui.cn/download)，下面的注释引起了我的注意。这里看着他们引入的位置还是有区别的。<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
复制链接

扫一扫