合并网页中的多个script引用实现思路及代码
更新时间：2021年9月22日 10:16 点击：1580
为了更好的进行封装，每个实现不同功能的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文件的请求，并且对文件进行了压缩处理
复制代码 代码如下:
<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文件的请求，并且对文件进行了压缩处理
相关文章
Vue初始化中的选项合并之initInternalComponent详解
这篇文章主要介绍了Vue初始化中的选项合并之initInternalComponent的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-06-11- 这篇文章主要介绍了JavaScript数组合并案例讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下...2021-08-16
- 这篇文章主要为大家详细介绍了C#合并及拆分PDF文件的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要介绍了ES2020系列之空值合并运算符 '??'，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-07-22
- 这篇文章主要为大家详细介绍了C#合并多种格式文件为PDF的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要介绍了C#实现简单合并word文档的方法,涉及C#针对word文档的读取、插入、保存等技巧,非常具有实用价值,需要的朋友可以参考下...2020-06-25
- 今天小编就为大家分享一篇Python-numpy实现灰度图像的分块和合并方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-04-27
- 今天小编就为大家分享一篇TensorFlow2.0:张量的合并与分割实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-04-22
- 这篇文章主要介绍了pandas 实现某一列分组,其他列合并成list的案例。具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-26
- 这篇文章主要介绍了postgresql数据合并,多条数据合并成1条的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-05
- C# 合并GriewView相同列的小例子，需要的朋友可以参考一下...2020-06-25
Queryable.Union 方法实现json格式的字符串合并的具体实例
这篇文章介绍了Queryable.Union 方法实现json格式的字符串合并的具体实例，有需要的朋友可以参考一下...2021-09-22- 这篇文章主要介绍了使用itextpdf解决PDF合并的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2021-07-07
- 网站页面的响应速度与用户体验息息相关,直接影响到用户是否愿意继续访问你的网站,所以这篇文章主要给大家介绍了关于Vue项目打包、合并及压缩优化网页响应速度的相关资料,需要的朋友可以参考下...2021-07-07
ASP.NET中GridView和Repeater重复数据如何合并
这篇文章主要介绍了ASP.NET中GridView和Repeater重复数据合并的方法，感兴趣的小伙伴们可以参考一下...2021-09-22- 这篇文章主要给大家介绍了关于PostgreSQL实现批量插入、更新与合并操作的相关资料，文中通过图文以及示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧...2020-07-11
pandas中DataFrame数据合并连接（merge、join、concat)
这篇文章主要给大家介绍了关于pandas中DataFrame 数据合并连接（merge、join、concat)的相关资料，文中介绍的非常详细，需要的朋友可以参考下...2021-05-30- 下面小编就为大家带来一篇前端js文件合并的三种方式推荐。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-05-20
- 这篇文章主要介绍了Oracle - 如何将多张表中的列合并到一张表中,需要的朋友可以参考下...2020-07-11
- 这篇文章主要介绍了详解R语言数据合并一行代码搞定，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-05-06