在多个页面使用同一个HTML片段《续》


Posted in Javascript onMarch 04, 2011

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. 运行,居然报错! 

在多个页面使用同一个HTML片段《续》

问题分析
错误信息是 setup 这个函数没有定义,但是从Firebug中我们明显看到pages2_2.js的确被加载了。
那个极有可能是在 pages2_2.js 加载之前就调用了 setup 这个函数。
但是我们的setup 函数调用是放在jQuery的 $(function(){ }) 之中的,也就是在页面加载完毕才调用的。

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

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

和下面直接调用是等价的:
setup();

解决问题
对于这个问题,我们有三种解决办法。
1. 将外部JS文件在页面中加载,而不是在AJAX返回的HTML片段。

2. 我们可以通过JavaScript先加载外部JS,再加载纯粹的HTML片段。
看一下pages2_3.htm的实现:

<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文件
调用者不知道一个HTML片段关联哪些JS文件
============================================================
关于JS的顺序执行特性
可能有人对这个特性并不是很清楚,我就通过一个例子来说明。

<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的记录: 

在多个页面使用同一个HTML片段《续》

在多个页面使用同一个HTML片段《续》

可以看到,虽然js2.js更早的被加载,但是还是js1.js执行结束之后,才开始执行js2.js。
源代码下载

Javascript 相关文章推荐
ext实现完整的登录代码
Aug 08 Javascript
ext combobox动态加载数据库数据(附前后台)
Jun 17 Javascript
一个获取第n个元素节点的js函数
Sep 02 Javascript
javascript实现淘宝幻灯片广告展示效果
Apr 27 Javascript
全系IE支持Bootstrap的解决方法
Oct 19 Javascript
jQuery操作cookie
Aug 08 Javascript
JS实现JSON.stringify的实例代码讲解
Feb 07 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
Apr 09 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
Apr 11 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
May 16 Javascript
Node绑定全局TraceID的实现方法
Nov 14 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
Oct 24 Javascript
在多个页面使用同一个HTML片段的代码
Mar 04 #Javascript
如何确保JavaScript的执行顺序 之实战篇
Mar 03 #Javascript
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
Mar 03 #Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
Mar 03 #Javascript
jQuery 操作option的实现代码
Mar 03 #Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
Mar 03 #Javascript
jquery中实现简单的tabs插件功能的代码
Mar 02 #Javascript
You might like
php实现ping
2006/10/09 PHP
PHP+iframe模拟Ajax上传文件功能示例
2019/07/02 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
2010/03/04 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
引用 js在IE与FF之间的区别详细解析
2013/11/20 Javascript
详解JavaScript中undefined与null的区别
2014/03/29 Javascript
再JavaScript的jQuery库中编写动画效果的指南
2015/08/13 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
2015/09/24 Javascript
理解javascript函数式编程中的闭包(closure)
2016/03/08 Javascript
JavaScript运动框架 多物体任意值运动(三)
2017/05/17 Javascript
原生JS发送异步数据请求
2017/06/08 Javascript
JavaScript框架Angular和React深度对比
2017/11/20 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
2019/03/07 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
2019/07/19 Javascript
JavaScript判断数据类型有几种方法及区别介绍
2020/09/02 Javascript
[51:27]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
TensorFlow实现AutoEncoder自编码器
2018/03/09 Python
Python入门学习指南分享
2018/04/11 Python
Sanic框架应用部署方法详解
2018/07/18 Python
Python笔试面试题小结
2019/09/07 Python
Pytorch 多维数组运算过程的索引处理方式
2019/12/27 Python
python 通过exifread读取照片信息
2020/12/24 Python
如何用canvas实现在线签名的示例代码
2018/07/10 HTML / CSS
外语学院毕业生的自我鉴定
2013/11/28 职场文书
倡导文明标语
2014/06/16 职场文书
社保委托书怎么写
2014/08/02 职场文书
2015年财政局工作总结
2015/05/21 职场文书
一个独生女的故事观后感
2015/06/04 职场文书
领导干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
2019银行竞聘书
2019/06/21 职场文书
退休劳动合同怎么写?
2019/10/25 职场文书
nginx日志格式分析和修改
2022/04/28 Servers
Windows server 2012搭建FTP服务器
2022/04/29 Servers
处理canvas绘制图片模糊问题
2022/05/11 Javascript
如何解决flex文本溢出问题小结
2022/07/15 HTML / CSS