在多个页面使用同一个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 相关文章推荐
JS支持带x身份证号码验证函数
Aug 10 Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
Apr 07 Javascript
用jQuery模拟select下拉框的简单示例代码
Jan 26 Javascript
js实现数字每三位加逗号的方法
Feb 05 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
Mar 09 Javascript
JS实现带鼠标效果的头像及文章列表代码
Sep 27 Javascript
jQuery选择器用法实例详解
Dec 17 Javascript
浅谈JavaScript的全局变量与局部变量
Jun 10 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
Jul 24 Javascript
seajs模块压缩问题与解决方法实例分析
Oct 10 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 Javascript
详解Vue结合后台的列表增删改案例
Aug 21 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
图形数字验证代码
2006/10/09 PHP
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
Thinkphp中Create方法深入探究
2014/06/16 PHP
html静态页面调用php文件的方法
2014/11/13 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
window.parent调用父框架时 ie跟火狐不兼容问题
2009/07/30 Javascript
jquery animate图片模向滑动示例代码
2011/01/26 Javascript
javascript中的void运算符语法及使用介绍
2013/03/10 Javascript
jQuery对html元素取值与赋值的方法
2013/11/20 Javascript
iframe里的页面禁止右键事件的方法
2014/06/10 Javascript
浅谈Javascript 数组与字典
2015/01/29 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
jquery实现标题字体变换的滑动门菜单效果
2015/09/07 Javascript
javascript跨域总结之window.name实现的跨域数据传输
2015/11/01 Javascript
JavaScript前端开发之实现二进制读写操作
2015/11/04 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
2015/11/30 Javascript
jquery.validate 自定义验证方法及validate相关参数
2016/01/18 Javascript
在Docker快速部署Node.js应用的详细步骤
2016/09/02 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
2016/12/08 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
2017/02/14 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
vue实现树形菜单效果
2018/03/19 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
2018/09/01 Javascript
[01:13:08]2018DOTA2亚洲邀请赛4.6 淘汰赛 mineski vs LGD 第二场
2018/04/10 DOTA
python基于urllib实现按照百度音乐分类下载mp3的方法
2015/05/25 Python
python在线编译器的简单原理及简单实现代码
2018/02/02 Python
详解python中的装饰器
2018/07/10 Python
利用python-docx模块写批量生日邀请函
2019/08/26 Python
Python如何实现强制数据类型转换
2019/11/22 Python
基于python实现检索标记敏感词并输出
2020/05/07 Python
负责人任命书范本
2014/06/04 职场文书
党的生日活动方案
2014/08/15 职场文书
群众路线教育实践活动对照检查材料
2014/09/22 职场文书
2015年采购员工作总结
2015/04/27 职场文书
Mysql Show Profile
2021/04/05 MySQL