# 怎么把JavaScript代碼放入網頁里
JavaScript是構建現代網頁交互功能的核心技術。將JavaScript代碼正確嵌入網頁需要掌握多種方法，每種方式都有其適用場景和最佳實踐。本文將詳細介紹五種主流方法，并分析它們的優缺點。
## 一、內聯腳本（Inline Script）
最直接的方式是將JavaScript代碼直接寫在HTML文件的`<script>`標簽內：
```html
<!DOCTYPE html>
<html>
<head>
<title>內聯腳本示例</title>
</head>
<body>
<button onclick="alert('按鈕被點擊!')">點擊我</button>
<script>
function showMessage() {
console.log('頁面加載完成');
}
window.onload = showMessage;
</script>
</body>
</html>
特點： - 適合快速測試和小段代碼 - 代碼與HTML混合，維護性較差 - 會阻塞HTML解析（當位于head中時）
最佳實踐是將JavaScript代碼分離到獨立的.js文件中：
<!-- index.html -->
<script src="scripts/main.js" defer></script>
// scripts/main.js
document.addEventListener('DOMContentLoaded', () => {
console.log('DOM已完全加載');
});
優勢：
- 代碼可維護性高
- 瀏覽器可以緩存外部文件
- 支持模塊化開發
- 使用async/defer控制加載行為
加載方式對比：
| 屬性 | 執行時機 | 是否阻塞HTML解析 |
|---|---|---|
| 無 | 遇到腳本立即執行 | 是 |
| async | 下載完成后立即執行 | 否（下載期間不阻塞） |
| defer | HTML解析完成后順序執行 | 否 |
雖然技術上可行，但這種方式已被認為是不良實踐：
<button onclick="handleClick()">舊式事件處理</button>
缺點： - 違反了關注點分離原則 - 難以維護和調試 - 無法動態綁定/解綁事件
通過JavaScript動態創建<script>元素：
const script = document.createElement('script');
script.src = 'https://example.com/library.js';
script.onload = () => console.log('腳本加載完成');
document.head.appendChild(script);
使用場景： - 按需加載第三方庫 - 實現代碼分割（Code Splitting） - 條件加載不同環境的腳本
現代瀏覽器支持的模塊系統：
<script type="module" src="module.js"></script>
模塊文件可以包含import/export：
// module.js
import { helper } from './utilities.js';
export default function main() {
console.log(helper());
}
模塊特性： - 自動啟用嚴格模式 - 擁有獨立作用域 - 支持頂層await - 默認延遲執行（defer）
位置選擇：
<body>末尾defer放在<head>性能優化：
<!-- 預加載重要資源 -->
<link rel="preload" href="critical.js" as="script">
代碼組織：
/project
├── index.html
└── assets/
├── js/
│ ├── main.js
│ ├── components/
│ └── libs/
└── css/
現代工具鏈：
Q：腳本執行順序錯亂？
- 使用defer保持順序
- 或改用模塊系統
Q：undefined報錯？ - 確保DOM已加載再操作元素：
document.addEventListener('DOMContentLoaded', init);
Q：跨域問題？ - 配置正確的CORS頭 - 或使用JSONP（傳統方式）
文檔寫入：
document.write('<script src="legacy.js"><\/script>');
（注意：現代開發中應避免使用）
noscript備用：
<noscript>
<p>請啟用JavaScript以獲得完整體驗</p>
</noscript>
類型檢測：
<script>
if(!window.JSON) {
document.write('<script src="json-polyfill.js"><\/script>');
}
</script>
選擇合適的方式取決于項目需求： - 簡單頁面：內聯腳本 - 生產環境：外部模塊化腳本 - 動態功能：按需加載
隨著ES Modules的普及和打包工具的發展，現代Web開發更傾向于使用模塊化的外部腳本。掌握這些嵌入方法將幫助您構建更高效、更易維護的網頁應用。
提示：始終考慮漸進增強和優雅降級原則，確保網站在JavaScript不可用時仍能提供核心功能。 “`
這篇文章共計約1350字，采用Markdown格式編寫，包含： 1. 五種主要嵌入方法 2. 代碼示例和比較表格 3. 最佳實踐建議 4. 常見問題解決方案 5. 高級技巧和結語
可根據需要調整具體細節或擴展某些部分。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
