Javascript方法的執行順序和存放位置的關係

時間 2019-12-22

標籤 javascript 方法執行順序存放位置關係欄目 JavaScript 简体版

原文原文鏈接

$ is not definedjavascript

問題

今天在運行項目的時候，前臺jsp報錯，數據沒法正常顯示，明明jquery導入了，但爲何不起做用呢？html

網上查詢了一下，這個跟前臺代碼的執行順序有關。java

首先Javascript的出現的位置，歸納起來就是三種形式：
1. 內部：Html網頁的<body></body>中；
2. 內部：Html網頁的<head></head>中；
3. 外部：外部JS文件裏。jquery

javaScript的位置
Javascript寫在<body></body>中

當瀏覽器載入網頁Body部分的時候，就執行其中的Javascript語句，執行以後輸出的內容就顯示在網頁中。瀏覽器

<html>
<head></head>
<body>
<script type="text/javascript">....</script>
</body>
</html>

Javascript寫在<head></head>中

有時候並不須要一載入HTML就運行Javascript，而是用戶點擊了HTML中的某個對象，觸發了一個事件，才須要調用Javascript。這時候，一般將這樣的Javascript放在HTML的<head></head>裏。jsp

<html>
<head>
<script type="text/javascript">....</script>
</head>
<body>
</body>
</html>

使用引用js

將Javascript程序放到一個後綴名爲.js的文本文件裏。在HTML裏引用外部文件裏的Javascript，應在Head裏寫一句<script src="文件名"></script>，其中src的值，就是Javascript所在文件的文件路徑。函數

示例代碼以下：spa

<!-- 引用js可放的三個位置
    在<head></head>和在<body></body>中和body後面<html>-->

<head>
<script src="js/001.js">...</script>
</head>
<body>
<!--<script src="hello.js"></script>-->
</body>
<!--<script src="hello.js"></script>-->
</html>

關於引用js的存放位置，不管在哪裏引用js，js的加載順序是不變的，都是按照頁面載入順序執行的code

那麼不一樣的引用位置對咱們會有什麼影響呢？htm

舉例說明沒引用 jQuery 的以前，先運行了調用 jQuery 函數的代碼，就會報錯。你能夠控制你本身寫的 JS 放在頁面最下面，放在 jQuery 下面，可是你沒法保證頁面上其餘地方會不會有人圖省事直接在 HTML 代碼裏面輸出 JS。若是有，那麼就會報錯。

問題出現的緣由也就知道了，在我使用「$」以前尚未引入jquery類庫，jquery是在底部導入的，因此就報「$ is not defined」的異常了

因此我建議，類庫放在上面加載，其他代碼儘量放在最底下加載。