關於jQuery的load()方法
傳統的網站頁面包含多個header、footer、siderbar、tip(提示框/輸入框)等多個公共元件，如果一味的複製貼上，頁面將會相當臃腫和難以維護。這裡介紹jqurey的load(）方法。目的：實現頁面的元件化，方便管理和維護。如果你是Vue和React使用者，請無視此文。
jquery load方法是jQuery.ajax()的一個方法，語法：$(selector).load(url,data,function(response,status,xhr))
現在，我的index.html只有一些動態載入的元件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<!-- 頭部 -->
<div id="header"></div>
<!-- 主頁內容 -->
<div class="main"></div>
<!-- 提示框 -->
<div id="tip"></div>
<!-- 側邊欄 -->
<div id="sideBar"></div>
<!-- 頁尾 -->
<div id="footer"></div>
</body>
<script>
$('#header').load('header.html',function(responseTxt,statusTxt,xhr){
if(statusTxt=='success'){
console.log('頭部載入成功!')
}
});
//.........動態載入其他的元件
$('#footer').load('footer.html',function(responseTxt,statusTxt,xhr){
if(statusTxt=='success'){
console.log('footer載入成功!')
}
});
</script>
然後，我們來看看header.html
<div class="my_nav">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">首頁</a></li>
<li><a href="#">產品</a></li>
<li><a href="index.html">解決方案</a></li>
<li><a href="aboutUs.html">關於我們</a></li>
</ul>
</div>
<!-- script內容 -->
<script>
$(window).scroll(function(){
if($(window).scrollTop() > 100) {
$(".my_nav").addClass("active");
} else {
$(".my_nav").removeClass("active");
}
})
</script>
注意，這裡本人推薦只用html片段而非標準html格式
您會遇到的兩個坑：
1.元件的js載入失敗，在index.html中元件定義的方法和函式無效報錯。如果你使用的標準hhtml格式，可能遇到這個問題。
index.html介面最終其實是jq通過ajax請求過來內容，在append到目標區域。而通過ajax請求方法的responseText又只會抓去完整html片段中<body>裡面的內容。標準格式正好把js寫在了body外面所以導致js沒執行。也就是說當load()這個老司機開車的時候，body的內容上車了，js卻被留在了車外。當老司機到達index.html的時候，由於之前js定義的函式和方法沒有上車,index頁面的控制檯只能幫你報警...
2.用jquery的load方法後：jQuery獲取元件dom物件失敗。
載入完畢後試試在index的script裡操作下 $(".my_nav").html("設定內容失敗！")
原因：只有在元素完全載入完之前繫結load的處理函式,才會在他載入完後觸發。如果之後再繫結就不會觸發了。所以不要在$(document).ready()裡繫結load事件，因為jQuery會在所有DOM載入完成後再繫結load事件，也就是執行在前，載入在後。
我的寫法（不一定好用）：
$(function(){
$('#header').load('header.html',function(responseTxt,statusTxt,xhr){
if(statusTxt=='success'){
var _li=$(".navbar-nav").find("li");//用變數儲存多次呼叫的Dom物件,可以減少開銷
_li.eq(0).removeClass("active")
_li.eq(3).addClass("active")
console.log('頭部載入成功!')
}
});
$('#footer').load('footer.html',function(responseTxt,statusTxt,xhr){
if(statusTxt=='success'){
//載入完畢前要處理的事件
console.log('footer載入成功!')
}
});
})
在load方法的回撥函式裡面提前繫結dom。
原創不易，請輕噴，Vue、React元件化框架使用者請無視，如有問題請回復我！