Javascript加载机制

一、js代码的加载次序

1、当js代码直接嵌入到html中时：

<html>
<head></head>
<body>
      <input type="button" value="我是 button" id="bu">
      <script type="text/javascript">
           var bObj=document.getElementById("bu");
           bObj.onclick= objclick;
          function objclick()
          {
            alert(this.value)
          };
      </script>
</body>
</html>

当你在浏览器中运行以上代码时，点击这个input元素，则正常弹出 “我的button”
你再运行以下代码，对比两个效果：

<html>
<head></head>
<body>
      <script type="text/javascript">
           var bObj=document.getElementById("bu");
           bObj.onclick= objclick;
          function objclick()
          {
            alert(this.value)
          };
      </script>
      <input type="button" value="我是 button" id="bu">
</body>
</html>

此时就不是弹出 "我是button" 这些文字了，而是没反应，浏览器还会给你报个 Uncaught TypeError: Cannot set property 'onclick' of null 错误。

其实你了解了html的加载机制后，就会懂得报错的原因了。
因为在html中，元素的加载是从上往下加载的。
第一段代码浏览器先加载了 <input type="button" value="我是 button" id="bu">,所以后面的js能获得到 bu的对象。

第二段代码浏览器则是先加载了 bu 的对象，可是这时，input type="button" value="我是 button" id="bu">这个根本还没有加载，js获取不到，当然只能报错了。

2、从外部引入js文件

<html>
<head>
      <script src="./test.js"></script>
</head>
      <input type="button" value="我是 button" id="bu">
</html>

以下是相应的test.js文件

var bObj=document.getElementById("bu");
bObj.onclick= objclick;
function objclick()
{
    alert(this.value)
};
</script>

以上代码运行，则会报错，原因和前面的类似，也是因为还未加载到 html 中的input元素，js就开始先获取bu的对象，然而却获取不到，只能报错。

<html>
      <input type="button" value="我是 button" id="bu">
      <script src="./test.js"></script>
</html>

以上代码运行，则正常执行，点击 input ，也正常输出 “我是button”, 原因如上

二、区块加载

工作时，遇到了个很有趣的现象，

<html>
<head></head>
<body>
<script>
      alert('11');
      alert('1111');
</script>

<script>
      ale('22');
       alert('2222');
</script>
</body>
</html>

当浏览器运行这个文件时，猜猜，它会输出什么？？？？

想到了吗，这里由我来告诉你吧
它会输出 11 、1111
这里其实可以把js的加载看作是一个像区块的加载

前面一个区块，没有语法错误，不会影响到当前区块里面其他js代码的执行。

<script>
      alert('11');
      alert('1111');
</script>

而这个区块中的ale 语法错误，导致浏览器报错，影响了这个区块的执行
可是这里的报错，却不会影响到其他区块代码的执行。所以能够输出 11、1111

<script>
      ale('22');
       alert('2222');
</script>

<br />

所以我总结，每个<script>...</script>中的代码在报错机制中，是独立运行，互不干扰的。

Javascript加载机制

一、js代码的加载次序

二、区块加载

推荐阅读更多精彩内容