记一次编写前端js代码中js不生效BUG定位

前因

博主在项目中编写前端页面的时候，编写了如下js代码：

<script type="text/javascript">
    $(function(){
        alert("xxx");
    });
</script>
<script type="text/javascript" src="jquery/jquery.pagination.js"/>
<script type="text/javascript">
    $(function(){
        alert("yyy");
    });
</script>

然后在运行的时候只执行了alert(“xxx”)，而没有执行alert(“yyy”)，这就给我整不明白了。

BUG定位

首先我想到了多个$(function())冲突的可能性，因为$(function(){})这个代码是在页面加载的时候执行的，我怀疑是不是在页面加载的时候只能执行其中一个。
在百度的时候，看到有位老哥说，想知道两个会不会冲突，那你写一下不就知道了，虽然我这里已经有两个$(function(){})，我还是尝试着再加一个进去，代码如下：

<script type="text/javascript">
    $(function(){
        alert("xxx");
    });
</script>
<script type="text/javascript" src="jquery/jquery.pagination.js"/>
<script type="text/javascript">
    $(function(){
        alert("zzz");
    });
</script>
<script type="text/javascript">
    $(function(){
        alert("yyy");
    });
</script>

此时运行的结果变成了只执行alert(“xxx”)和alert(“yyy”)，而不执行alert(“zzz”)，错误已经很明显了，肯定是这句代码出问题了，导致跟在它后面的代码无法执行：

<script type="text/javascript" src="jquery/jquery.pagination.js"/>

将上述代码与网上引入js文件的代码进行对比，很容易的就可以发现，网上的代码是这样的：

<script></script>

而我的是这样的

<script/>

我的这种写法导致引入pagination.js文件的《script》标签与后续需要执行代码的《/script》相匹配，从而导致代码未执行。

BUG修复

修改代码如下：

<script type="text/javascript">
    $(function(){
        alert("xxx");
    });
</script>
<script type="text/javascript" src="jquery/jquery.pagination.js"></script>
<script type="text/javascript">
    $(function(){
        alert("yyy");
    });
</script>