javaScript代码何时执行

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');
  })();
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值