服务器之家

服务器之家 > 正文

合并网页中的多个script引用实现思路及代码

时间:2019-10-24 11:52     来源/作者:脚本之家

为了更好的进行封装,每个实现不同功能的js代码应该有自己的js文件,这样如果一个网页中引用了多个js文件,如下 

复制代码代码如下:


<script type="text/javascript" src="limit.js"></script> 
<script type="text/javascript" src="select.js"></script> 
<script type="text/javascript" src="rating.js"></script> 


这样网页会向服务器发送3个请求,请求3个js文件,其实完全没有必要发这么多的请求,一个足矣,下面就来介绍如何用Handler实现 
新建一个HttpHandler 

复制代码代码如下:


public class Handler1 : IHttpHandler 

public void ProcessRequest(HttpContext context) 
{//原文链接:blog.csdn.net/bluceyoung 
string[] js = context.Request.Url.LocalPath.Substring(1, context.Request.Url.LocalPath.Length - 5).Split('.'); 
StringBuilder sb = new StringBuilder(); 
foreach (string j in js) 

sb.Append(ReadFile(j+".js")); 

context.Response.Write(CompressStr(sb)); 

private string ReadFile(string fileName) 

string directory = @"D:\SRC\bluceyoung\"; 
if (!File.Exists(directory + fileName)) 

return ""; 

string result; 
using (FileStream fs = new FileStream(directory + fileName, FileMode.Open)) 

using (StreamReader sr = new StreamReader(fs)) 

result = sr.ReadToEnd(); 


return result; 

private string CompressStr(StringBuilder sb) 

while (true) 

int length = sb.Length; 
sb.Replace(" ", " "); 
if (length == sb.Length) 
break; 

sb.Replace("\r\n", "").Replace("\t", "").Replace("; ", ";").Replace(" }", "}").Replace("} ", "}").Replace(" ;", ";").Replace(" {", "{").Replace("{ ", "{"); 
return sb.ToString(); 

public bool IsReusable 

get 

return false; 



配置文件中添加节点 

复制代码代码如下:


<configuration> 
<system.web> 
<compilation debug="true" targetFramework="4.0" /> 
<httpHandlers> 
<add path="*.jsx" verb="*" type="BluceYoung.Handler1"/> 
</httpHandlers><!--原文博客:blog.csdn.net/bluceyoung --> 
</system.web> 
</configuration> 


页面调用 

复制代码代码如下:


<script src="limit.select.rating.jsx" type="text/javascript"></script> 


就这样,一个script引用就完成了多个js文件的请求,并且对文件进行了压缩处理

相关文章

热门资讯

玄元剑仙肉身有什么用 玄元剑仙肉身境界等级划分
玄元剑仙肉身有什么用 玄元剑仙肉身境界等级划分 2019-06-21
男生常说24816是什么意思?女生说13579是什么意思?
男生常说24816是什么意思?女生说13579是什么意思? 2019-09-17
华为nova5pro和p30pro哪个好 华为nova5pro和华为p30pro对比详情
华为nova5pro和p30pro哪个好 华为nova5pro和华为p30pro对比详情 2019-06-22
超A是什么意思 你好a表达的是什么
超A是什么意思 你好a表达的是什么 2019-06-06
抖音撒撒累累是什么歌 撒撒累累张艺兴歌曲名字
抖音撒撒累累是什么歌 撒撒累累张艺兴歌曲名字 2019-06-05
返回顶部