在開發網頁的工作中，我們會經常遇到一個事情，多個頁面的某一個或某幾個部分是相同的，如何復用這些部分從而節省開發時間呢，在asp，jsp開發中就有引用模塊的概念，現在我們來利用ajax實現模塊引用，請看一段html代碼
<html>
<head></head>
<body>
<div>假設這是公共的部分，很多頁面都會引用這部分</div>
</body>
</html>
我們可以將公共部分用一個在html中沒有的自定義標簽包裹起來，然后當頁面的文檔加載完畢之后，遍歷自定義標簽，通過自定義標簽的地址屬性訪問對應的模塊，並將自身替換，我們可以將html結構修改為如下
<html>
<head></head>
<body>
<tpl src="your.html"></tpl>
</body>
</html>
然后是js代碼，為了方便我直接使用了jquery庫
$(function () {
var tplList = $("tpl");
for (var i = 0; i < tplList.length; i++) {
var tpl = $(tplList[i]);
var src = tpl.attr("src");
(function (tpl) {
$.get(src, function (data) {
tpl.replaceWith(data);
});
})(tpl);
}
});
這里使用了閉包來保護變量，關於閉包的知識在園內有很多講解，在此就不做贅述。