在多個頁面使用同一個HTML片段《續(xù)》
更新時間:2011年03月04日 01:04:33 作者:
上一篇文章中我們使用textarea來模擬AJAX的返回結(jié)果,造成了一些誤解。 這里我們首先用asp.net的Generic Handler做一個簡單的后臺來重現(xiàn)這個AJAX過程。
1. HTML頁面:
<script type="text/javascript">
$(function() {
$("#clickToInsert").click(function() {
$.get("service.ashx?file=pages2_1.txt", function(data) {
$("#placeholder").html(data);
}, "text");
});
});
</script>
<input type="button" id="clickToInsert" value="Insert HTML" />
<div id="placeholder">
</div>
2. service.ashx 后臺代碼:
public void ProcessRequest(HttpContext context)
{
string filePath = context.Request["file"].ToString();
string fileContent = String.Empty;
using (StreamReader sr = new StreamReader(context.Server.MapPath(filePath)))
{
fileContent = sr.ReadToEnd();
}
context.Response.ContentType = "text/plain";
context.Response.Write(fileContent);
}
3. pages2_1.txt 文件:
<script type="text/javascript">
$(function() {
var parent = $("#complex_page_segment");
$(".previous", parent).click(function() {
$(".content", parent).html("Previous Page Content");
});
$(".next", parent).click(function() {
$(".content", parent).html("Next Page Content");
});
});
</script>
<div id="complex_page_segment">
<input type="button" value="Previous Page" class="previous" />
<input type="button" value="Next Page" class="next" />
<div class="content">Page Content</div>
</div>
將HTML片段中的JavaScript提取為一個文件
這也是自然而然就想到的,特別是HTML片段中JavaScript代碼比較多的情況下,
提取為一個JS文件,讓瀏覽器幫忙緩存不失為一種好方法。
1. 重新定義pages2_2.txt
<script type="text/javascript">
$(function() {
setup();
});
</script>
<script src="pages2_2.js" type="text/javascript"></script>
<div id="complex_page_segment">
<input type="button" value="Previous Page" class="previous" />
<input type="button" value="Next Page" class="next" />
<div class="content">Page Content</div>
</div>
2. pages2_2.js
function setup() {
var parent = $("#complex_page_segment");
$(".previous", parent).click(function() {
$(".content", parent).html("Previous Page Content");
});
$(".next", parent).click(function() {
$(".content", parent).html("Next Page Content");
});
}
3. 運行,居然報錯!

問題分析
錯誤信息是 setup 這個函數(shù)沒有定義,但是從Firebug中我們明顯看到pages2_2.js的確被加載了。
那個極有可能是在 pages2_2.js 加載之前就調(diào)用了 setup 這個函數(shù)。
但是我們的setup 函數(shù)調(diào)用是放在jQuery的 $(function(){ }) 之中的,也就是在頁面加載完畢才調(diào)用的。
其實現(xiàn)在問題已經(jīng)很明顯了,在AJAX返回頁面片段的時候,整個頁面是已經(jīng)加載完成了,也就是DOM Ready。
所以在頁面片段中:
$(function() {
setup();
});
和下面直接調(diào)用是等價的:
setup();
解決問題
對于這個問題,我們有三種解決辦法。
1. 將外部JS文件在頁面中加載,而不是在AJAX返回的HTML片段。
2. 我們可以通過JavaScript先加載外部JS,再加載純粹的HTML片段。
看一下pages2_3.htm的實現(xiàn):
<script type="text/javascript">
$(function() {
$("#clickToInsert").click(function() {
$.getScript("pages2_2.js", function() {
$.get("service.ashx?file=pages2_3.txt", function(data) {
$("#placeholder").html(data);
}, "text");
});
});
});
</script>
<input type="button" id="clickToInsert" value="Insert HTML" />
<div id="placeholder">
</div>
3. 利用JavaScript在頁面上是順序加載的特性,將HTML片段中外部JS引用放在最上面
pages2_4.htm:
<script type="text/javascript">
$(function() {
$("#clickToInsert").click(function() {
$.get("service.ashx?file=pages2_4.txt", function(data) {
$("#placeholder").html(data);
}, "text");
});
});
</script>
<input type="button" id="clickToInsert" value="Insert HTML" />
<div id="placeholder">
</div>
pages2_4.txt:
<script src="pages2_2.js" type="text/javascript"></script>
<script type="text/javascript">
setup();
</script>
<div id="complex_page_segment">
<input type="button" value="Previous Page" class="previous" />
<input type="button" value="Next Page" class="next" />
<div class="content">
Page Content</div>
</div>
可能你會覺得第三種方法沒有必要,但是如果你碰到這樣的需求,你就知道第三種方法的重要性了。
不要在每個頁面都加載這個JS文件
調(diào)用者不知道一個HTML片段關(guān)聯(lián)哪些JS文件
============================================================
關(guān)于JS的順序執(zhí)行特性
可能有人對這個特性并不是很清楚,我就通過一個例子來說明。
<html>
<head>
<title></title>
<script src="js1.js" type="text/javascript"></script>
<script src="js2.js" type="text/javascript"></script>
<script type="text/javascript">
console.log("after js2:" + new Date().toLocaleTimeString());
</script>
</head>
<body>
</body>
</html>
js1.js:
console.log("start load js1:" + new Date().toLocaleTimeString());
// 中間是很長很長的一段JavaScript,有12M之多
console.log("end load js2:" + new Date().toLocaleTimeString());
js2.js:
console.log("load js2:" + new Date().toLocaleTimeString());
我們來看下Firebug的記錄:


可以看到,雖然js2.js更早的被加載,但是還是js1.js執(zhí)行結(jié)束之后,才開始執(zhí)行js2.js。
源代碼下載
復(fù)制代碼 代碼如下:
<script type="text/javascript">
$(function() {
$("#clickToInsert").click(function() {
$.get("service.ashx?file=pages2_1.txt", function(data) {
$("#placeholder").html(data);
}, "text");
});
});
</script>
<input type="button" id="clickToInsert" value="Insert HTML" />
<div id="placeholder">
</div>
2. service.ashx 后臺代碼:
復(fù)制代碼 代碼如下:
public void ProcessRequest(HttpContext context)
{
string filePath = context.Request["file"].ToString();
string fileContent = String.Empty;
using (StreamReader sr = new StreamReader(context.Server.MapPath(filePath)))
{
fileContent = sr.ReadToEnd();
}
context.Response.ContentType = "text/plain";
context.Response.Write(fileContent);
}
3. pages2_1.txt 文件:
復(fù)制代碼 代碼如下:
<script type="text/javascript">
$(function() {
var parent = $("#complex_page_segment");
$(".previous", parent).click(function() {
$(".content", parent).html("Previous Page Content");
});
$(".next", parent).click(function() {
$(".content", parent).html("Next Page Content");
});
});
</script>
<div id="complex_page_segment">
<input type="button" value="Previous Page" class="previous" />
<input type="button" value="Next Page" class="next" />
<div class="content">Page Content</div>
</div>
將HTML片段中的JavaScript提取為一個文件
這也是自然而然就想到的,特別是HTML片段中JavaScript代碼比較多的情況下,
提取為一個JS文件,讓瀏覽器幫忙緩存不失為一種好方法。
1. 重新定義pages2_2.txt
復(fù)制代碼 代碼如下:
<script type="text/javascript">
$(function() {
setup();
});
</script>
<script src="pages2_2.js" type="text/javascript"></script>
<div id="complex_page_segment">
<input type="button" value="Previous Page" class="previous" />
<input type="button" value="Next Page" class="next" />
<div class="content">Page Content</div>
</div>
2. pages2_2.js
復(fù)制代碼 代碼如下:
function setup() {
var parent = $("#complex_page_segment");
$(".previous", parent).click(function() {
$(".content", parent).html("Previous Page Content");
});
$(".next", parent).click(function() {
$(".content", parent).html("Next Page Content");
});
}
3. 運行,居然報錯!

問題分析
錯誤信息是 setup 這個函數(shù)沒有定義,但是從Firebug中我們明顯看到pages2_2.js的確被加載了。
那個極有可能是在 pages2_2.js 加載之前就調(diào)用了 setup 這個函數(shù)。
但是我們的setup 函數(shù)調(diào)用是放在jQuery的 $(function(){ }) 之中的,也就是在頁面加載完畢才調(diào)用的。
其實現(xiàn)在問題已經(jīng)很明顯了,在AJAX返回頁面片段的時候,整個頁面是已經(jīng)加載完成了,也就是DOM Ready。
所以在頁面片段中:
復(fù)制代碼 代碼如下:
$(function() {
setup();
});
和下面直接調(diào)用是等價的:
復(fù)制代碼 代碼如下:
setup();
解決問題
對于這個問題,我們有三種解決辦法。
1. 將外部JS文件在頁面中加載,而不是在AJAX返回的HTML片段。
2. 我們可以通過JavaScript先加載外部JS,再加載純粹的HTML片段。
看一下pages2_3.htm的實現(xiàn):
復(fù)制代碼 代碼如下:
<script type="text/javascript">
$(function() {
$("#clickToInsert").click(function() {
$.getScript("pages2_2.js", function() {
$.get("service.ashx?file=pages2_3.txt", function(data) {
$("#placeholder").html(data);
}, "text");
});
});
});
</script>
<input type="button" id="clickToInsert" value="Insert HTML" />
<div id="placeholder">
</div>
3. 利用JavaScript在頁面上是順序加載的特性,將HTML片段中外部JS引用放在最上面
pages2_4.htm:
復(fù)制代碼 代碼如下:
<script type="text/javascript">
$(function() {
$("#clickToInsert").click(function() {
$.get("service.ashx?file=pages2_4.txt", function(data) {
$("#placeholder").html(data);
}, "text");
});
});
</script>
<input type="button" id="clickToInsert" value="Insert HTML" />
<div id="placeholder">
</div>
pages2_4.txt:
復(fù)制代碼 代碼如下:
<script src="pages2_2.js" type="text/javascript"></script>
<script type="text/javascript">
setup();
</script>
<div id="complex_page_segment">
<input type="button" value="Previous Page" class="previous" />
<input type="button" value="Next Page" class="next" />
<div class="content">
Page Content</div>
</div>
可能你會覺得第三種方法沒有必要,但是如果你碰到這樣的需求,你就知道第三種方法的重要性了。
不要在每個頁面都加載這個JS文件
調(diào)用者不知道一個HTML片段關(guān)聯(lián)哪些JS文件
============================================================
關(guān)于JS的順序執(zhí)行特性
可能有人對這個特性并不是很清楚,我就通過一個例子來說明。
復(fù)制代碼 代碼如下:
<html>
<head>
<title></title>
<script src="js1.js" type="text/javascript"></script>
<script src="js2.js" type="text/javascript"></script>
<script type="text/javascript">
console.log("after js2:" + new Date().toLocaleTimeString());
</script>
</head>
<body>
</body>
</html>
js1.js:
復(fù)制代碼 代碼如下:
console.log("start load js1:" + new Date().toLocaleTimeString());
// 中間是很長很長的一段JavaScript,有12M之多
console.log("end load js2:" + new Date().toLocaleTimeString());
js2.js:
復(fù)制代碼 代碼如下:
console.log("load js2:" + new Date().toLocaleTimeString());
我們來看下Firebug的記錄:


可以看到,雖然js2.js更早的被加載,但是還是js1.js執(zhí)行結(jié)束之后,才開始執(zhí)行js2.js。
源代碼下載
相關(guān)文章
深入學(xué)習js函數(shù)的隱式參數(shù) arguments 和 this
這篇文章主要介紹了 深入學(xué)習js函數(shù)的隱式參數(shù) arguments 和 this,arguments是一個類數(shù)組結(jié)構(gòu),它保存了調(diào)用時傳遞給函數(shù)的所有實參;this是函數(shù)執(zhí)行時的上下文對象, 這個對象有些讓人感到困惑的行為。 下面分別對他們進行討論。,需要的朋友可以參考下2019-06-06JS中Map、WeakMap和Object的區(qū)別解析
Map、WeakMap和Object都是JavaScript中用于存儲鍵值對的數(shù)據(jù)結(jié)構(gòu),它們在鍵類型、垃圾回收、可枚舉性、方法和操作、以及繼承等方面存在一些區(qū)別,適用于不同的場景,本文給大家詳細講解js map、weakmap和object區(qū)別,需要的朋友可以參考下2023-04-04JS變量中有var定義和無var定義的區(qū)別以及es6中l(wèi)et命令和const命令
這篇文章主要介紹了JS變量中有var定義和無var定義的區(qū)別以及es6中l(wèi)et命令和const命令,需要的朋友可以參考下2017-02-02JavaScript 基礎(chǔ)表單驗證示例(純Js實現(xiàn))
下面小編就為大家?guī)硪黄狫avaScript 基礎(chǔ)表單驗證示例(純Js實現(xiàn))。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-07-07