关于引用JS文件无效的问题

本来以为JS文件的引用是理所当然的事,偶尔失效也认为是浏览器缓存的问题。最近遇到次数多了,清浏览器缓存也没用,不得不总结下了
页面随便写2个按钮,分别在前后位置引入js

<body>
<script type="text/javascript" src="/js/test1.js">script>
<button onclick="a1()">js前置button>
<button onclick="a2()">js后置button>

<script type="text/javascript" src="/js/test2.js">script>
body>

两个js文件中的代码只是方法名不同

function a2() {
    alert("a2")
}

首先 是onclick事件调用js文件中的方法,这时引用位置在DOM之前,会报Uncaught TypeError: a1 is not a function方法未定义的错误;JS引用在DOM后面则正常。

再来 试下jQuery的写法,按钮给个ID属性(要先引入jQuery)

<body>
<script type="text/javascript" src="/js/test1.js">script>
<button onclick="a1()">js前置button>
<button onclick="a2()">js后置button>
<button id="a1">id js前置button>
<button id="a2">id js后置button>
<script type="text/javascript" src="/js/test2.js">script>
body>

js中分别加上jQuery点击事件

$("#a2").on("click", function () {
    alert("a2");
})

测试结果同样是后置的正常,但这回前置的不但没效果,连提示都没有了。

最后 看看绑定立即执行函数加载事件又是怎么样的?在JS代码中都加上$(function ()

$(function () {
    function a2() {
        alert("a2")
    }

    $("#a2").on("click", function () {
        alert("a2");
    })
})

关于引用JS文件无效的问题_第1张图片
这么写不管是前置还是后置,js定义的方法都认不到了。但是jQuery点击事件都能正常运行。

记得之前学这一块的时候,得到的建议是尽量把js代码都放在后面,理由是方便维护。因为不懂个中原理,对引用位置想当然了。现在看来,如果涉及到对DOM的操作,最后把JS引用放在后面。

你可能感兴趣的:(关于引用JS文件无效的问题)