JS基礎----JS的編寫位置
阿新 • • 發佈：2020-09-13
js的集中編寫位置
1.巢狀在HTML標籤中
<button onclick="alert('hello world')">點我一下</button> <a href="javascript:alert('hello world');">點我這個連結</a>
<a href="javascript:;">點我這個連結</a>
以上寫法在實際專案中基本不會使用，因為這樣子不利於專案維護，
想一想若是都擠在HTML標籤裡面，頁面標籤那麼多，光看著就頭暈，要是想修改js程式碼還要去找簡直難上加難
但對於a標籤來說，當你採用上述方式的時候
會發現連結是不會進行頁面跳轉的，因此若在開發過程中要a標籤不進行跳轉可使用此方式。
一般我們會選擇吧js抽離出來，專業點叫把頁面的展示和行為分離出來，方便維護
因此就有以下大概兩種方式
2.寫在script標籤內
<script type="text/javascript">
alert('hello world');
</script>
這種沒啥好說的，在開發中也比較少見。
3.單獨寫在js檔案中並引用
這個就把js單獨寫在一個 .js的檔案裡面，然後我們去HTML裡面引用那個檔案，可以進行模組化的抽離，
簡單說一個功能就一個js檔案，這樣子如果我們需要修改哪個功能就直接去對應的js檔案去找，而且不會影響到其他js功能
///js檔案 alert（‘hello world’）; <!--js引用--> <script src="js路徑"></script>
注意一旦script標籤用來引用js檔案後，裡面就不能寫js程式碼了
<script src="a.js">
alert('不要在這裡寫js，沒用的');
</script>
這種寫法是錯誤的
最後提下js的script標籤的編寫位置，
一般就兩種，寫在head標籤裡面
寫在body標籤裡面並且是在body裡面所有HTML標籤的末尾
<html>
<head>
<title>js的位置</title>
<script src="a.js"></script>
<script>
console.log('我head裡面');
</script>
</head>
<body>
<button>我是按鈕</button>
<script>
alert('我在body的最後');
</script>
</body>
</html>
這個寫法我們可以注意一下，一般頁面在載入的時候，是從上到下載入的，
對於一個專案來說，js程式碼肯定特別多，如果我們都把所有的js寫在head裡面
那麼會先載入js然後載入HTML標籤，
很可能造成頁面在載入中會是一片空白，HTML顯示出現慢，不利於使用者體驗，
因此我們大多時候都除了把一些關鍵的js程式碼（js框架的載入）放在head標籤裡面，
把功能實現的js程式碼（點選事件之類的），寫在body的最後面，
這樣子在載入中就能夠先顯示頁面，提高使用者體驗。