Asp.net MVC在View里动态捆绑压缩引用的js

前言

Asp.net MVC 4以上版本多了BundleConfig.RegisterBundles方法,可以把要捆绑的脚本或样式进行捆绑压缩,以减少客户端的请求次数从而提高了客户端的访问速度。

问题

但世上懒人的数量还是很多,我也是一个,觉得这个方法还不够方便。在实际中,一些小的页面或独立页面,开了一些开源的js库之后,js文件比较多,而且每个页面引用的js又不太一样,如果能不在BundleConfig描述如何捆绑,像传统一样把js拉过来就能自动达到捆绑后的效果,是懒人多想要的结果。正是朝着这个目标,本随笔将实现一个html的扩展方法,来完成这个功能。你只要像传统一样把js拉到view上,改几个字符,就可以达到了效果了,引入的js还是有智能提示的。

调用方法

@Html.BundleScripts(
      @%26lt;script src="~/Scripts/jquery-1.7.1.min.js"%26gt;%26lt;/script%26gt;,
      @%26lt;script src="~/Scripts/login.js"%26gt;%26lt;/script%26gt;,
      @%26lt;script src="~/Content/validBox/validBox.js"%26gt;%26lt;/script%26gt;
)

如上,把要捆绑的js都当BundleScripts的参数就可以了,效果如下:

BundleScripts的实现

        /// %26lt;summary%26gt;
        /// 动态捆绑多个脚本
        /// %26lt;/summary%26gt;
        /// %26lt;param name="htmlHelper"%26gt;%26lt;/param%26gt;
        /// %26lt;param name="scripts"%26gt;javscript%26lt;/param%26gt;
        /// %26lt;returns%26gt;%26lt;/returns%26gt;
        public static IHtmlString BundleScripts(this HtmlHelper htmlHelper, params Func%26lt;object, object%26gt;[] scripts)
        {
            if (scripts == null)
            {
                throw new ArgumentNullException("scripts");
            }

            var inputs = new StringBuilder();
            foreach (var script in scripts)
            {
                inputs.AppendLine(script.Invoke(null).ToString().ToLower());
            }

            var applicationPath = htmlHelper.ViewContext.HttpContext.Request.ApplicationPath;
            Func%26lt;string, string%26gt; fixSrc = (src) =%26gt; applicationPath == "/" ? "~" + src : src.Replace(applicationPath, "~/");

            var srcs = inputs.ToString().Matches(@"(?%26lt;=src="").+?\.js(?="")").Select(item =%26gt; fixSrc(item)).ToArray();
            var path = string.Format("~/{0}", Math.Abs(string.Join(string.Empty, srcs).GetHashCode()));

            if (BundleTable.Bundles.GetBundleFor(path) == null)
            {
                BundleTable.Bundles.Add(new ScriptBundle(path).Include(srcs));
            }
            return Scripts.Render(path);
        }

注:Matches方法是一个对正则表达式的包装。

提问和思考

你觉得此方法的关键之处在哪里?欢迎提问,我们一起探讨,最好能实现一个比此方法更方便的方法来。

%26nbsp;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值