IT资讯
当前位置:东方科技网-科技生活门户 > 业界 > 科学频道 >

在多个页面使用同一个HTML片段方法 let it be 吉他

2018-05-30 16:29 网络整理 科学频道 编辑:admin 浏览数:草根网

 上一篇文章中我们使用textarea来模拟AJAX的返回结果,造成了一些误解。 这里我们首先用asp.net的Generic Handler做一个简单...


上一篇文章中我们使用textarea来模拟AJAX的返回结果,造成了一些误解。

这里我们首先用asp.net的Generic Handler做一个简单的后台来重现这个AJAX过程。
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(); });

和下面直接调用是等价的:

setup();



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

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


3. 利用JavaScript在页面上是顺序加载的特性,将HTML片段中外部JS引用放在最上面

pages2_4.htm:

pages2_4.txt:

Page Content


可能你会觉得第三种方法没有必要,但是如果你碰到这样的需求,你就知道第三种方法的重要性了。

不要在每个页面都加载这个JS文件

调用者不知道一个HTML片段关联哪些JS文件



============================================================
关于JS的顺序执行特性
可能有人对这个特性并不是很清楚,我就通过一个例子来说明。

分享到:
上一篇:小米新零售分销渠道:截至2018年3月1日,已有3
下一篇:临沂中心支公司参展临沂第五届资本交易大会

版权与免责声明:

凡未注明"稿件来源"的内容均为转载稿,本网转载出于传递更多信息的目的;如转载稿涉及版权问题,请作者联系我们,同时对于用户评论等信息,本网并不意味着赞同其观点或证实其内容的真实性;


本文地址:http://www.eastkjw.com/yejie/pindao/199.html

转载本站原创文章请注明来源:草根网

行业聚焦

主流游戏电脑主机 5000元锐龙R5 东京食尸鬼

 信英IT网(http://www.xinlintouzi.com):主流游戏电脑主机 5000元锐龙R5-1400配1066独显电脑 目前的性价比最好的主流的电脑...[详细]

未来的固态硬盘长什么样? 天天色综合网

2.5寸SATA:SATA接口问世已有多年,但依然活力旺盛,东芝在推出消费级3D闪存固态硬盘时就首选了SATA接口。SATA固态硬...[详细]

宅家娱乐选好本 热销还促销的笔记本大排行

信英IT网(http://www.xinlintouzi.com):宅家娱乐选好本 热销还促销的笔记本大排行 笔记本行业经过细分,使用户更快捷...[详细]

B站陈睿回应雷军《小米是谁,小米为什么而

5月4日消息 相信有了解的朋友都清楚,小米董事长雷军在该公司近日提交给港交所的IPO招股书中还发布了一封题为《...[详细]

C罗个人音频品牌ROC进入国内市场:耳机499元

IT之家5月10日消息 今天下午C罗个人音频品牌ROC LIVE LIFE LOUD(睿响)正式进入国内市场,目前已上架京东,共推出3款耳...[详细]

推荐内容

更多

热点内容

更多

诺基亚X6值得买吗 诺基亚

 

5月16日下午,由HDM运营的Noika在北京民生现代美术馆召开新品发布会,正式发布了新款诺基亚X6手机。诺基亚X采用今年...[详细]

联通和电信5G共建共享,市

 

  走进经济生活里的一切 导读:9月9日,中国电信与中国联通(600050,股吧)签署了《5G网络共建共享框架合作协议书》。 消息发布...[详细]

微软Build 2018大会:Win10用

 

  近日,微软一年一度的Build开发者大会正式召开,会上宣布Win10用户量破7亿,同时Win10实现Alexa和小娜语音助手整合,...[详细]

特朗普拒手机安检 至少有

 

  特朗普拒手机安检,至少有两部苹果手机!有媒体报道,美国总统特朗普习惯使用手机拨打电话和在社交网站留言,...[详细]

3000块治好选择恐惧症 这

 

  这几天一直纠结2000-3000元预算究竟买啥手机好,但看到近来一大波主打全面屏及4800万像素的新机辈出,更是目不暇接不知该...[详细]

  • 诺基亚X6值得买吗 诺基亚
  • 联通和电信5G共建共享,市
  • 微软Build 2018大会:Win10用
  • 特朗普拒手机安检 至少有
  • 3000块治好选择恐惧症 这
一周排行每月关注