Using the same HTML fragment on multiple pages 'Continued'_javascript skills

1. HTML页面：

复制代码 代码如下:

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 文件：

复制代码 代码如下:

Page Content

将HTML片段中的JavaScript提取为一个文件
这也是自然而然就想到的，特别是HTML片段中JavaScript代码比较多的情况下，
提取为一个JS文件，让浏览器帮忙缓存不失为一种好方法。
1. 重新定义pages2_2.txt

复制代码 代码如下:

Page Content

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 这个函数没有定义，但是从Firebug中我们明显看到pages2_2.js的确被加载了。
那个极有可能是在 pages2_2.js 加载之前就调用了 setup 这个函数。
但是我们的setup 函数调用是放在jQuery的 $(function(){ }) 之中的，也就是在页面加载完毕才调用的。

其实现在问题已经很明显了，在AJAX返回页面片段的时候，整个页面是已经加载完成了，也就是DOM Ready。
所以在页面片段中：

复制代码 代码如下:

$(function() {
setup();
});

is equivalent to the following direct call:

Copy code The code is as follows:

setup();

Solving the problem
For this problem, we have three solutions.
1. Load external JS files into the page instead of the HTML fragment returned by AJAX.

2. We can load external JS through JavaScript first, and then load pure HTML fragments.
Look at the implementation of pages2_3.htm:

Copy the code The code is as follows:

< ;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");
});
});
});

3. Use the sequential loading feature of JavaScript on the page to add HTML The external JS reference in the fragment is placed at the top
pages2_4.htm:

Copy the code The code is as follows:

pages2_4.txt:

Copy code The code is as follows:

Page Content

You may think that the third method is unnecessary, but if you encounter such a need, you will know the importance of the third method.

Do not load this JS file on every page
The caller does not know which JS files are associated with an HTML fragment
================== ===========================================
About the order of JS Execution Features
Some people may not be very clear about this feature, so I will illustrate it with an example.

Copy code The code is as follows:

js1.js:

Copy code The code is as follows:

console.log("start load js1 :" new Date().toLocaleTimeString());
// In the middle is a very long piece of JavaScript, as much as 12M
console.log("end load js2:" new Date().toLocaleTimeString ());

js2.js:

Copy code The code is as follows:

console.log("load js2:" new Date().toLocaleTimeString());

Firebug 레코드를 살펴보겠습니다.






js2.js가 이전 버전이었지만 이를 볼 수 있습니다. 이지만, js1.js의 실행이 완료된 후에야 js2.js가 실행되기 시작합니다.
소스코드 다운로드