快捷導(dǎo)航

合并網(wǎng)頁中的多個script引用實現(xiàn)思路及代碼

更新時間：2013年02月18日 10:59:49 作者：

為了更好的進行封裝，每個實現(xiàn)不同功能的js代碼應(yīng)該有自己的js文件，這樣如果一個網(wǎng)頁中引用了多個js文件會很難管理，所以就出現(xiàn)了合并js這以說,感興趣的朋友不妨參考下本文希望對你有所幫助

為了更好的進行封裝，每個實現(xiàn)不同功能的js代碼應(yīng)該有自己的js文件，這樣如果一個網(wǎng)頁中引用了多個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> 

這樣網(wǎng)頁會向服務(wù)器發(fā)送3個請求，請求3個js文件，其實完全沒有必要發(fā)這么多的請求，一個足矣，下面就來介紹如何用Handler實現(xiàn)
新建一個HttpHandler

復(fù)制代碼代碼如下:

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

配置文件中添加節(jié)點

復(fù)制代碼代碼如下:

 
<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> 

頁面調(diào)用

復(fù)制代碼代碼如下:

就這樣，一個script引用就完成了多個js文件的請求，并且對文件進行了壓縮處理