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

  为了更好的进行封装,每个实现不同功能的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文件的请求,并且对文件进行了压缩处理