zoukankan      html  css  js  c++  java
  • Asp.net MVC在View里动态捆绑压缩引用的js

    前言

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

    问题

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

    调用方法

    @Html.BundleScripts(
          @<script src="~/Scripts/jquery-1.7.1.min.js"></script>,
          @<script src="~/Scripts/login.js"></script>,
          @<script src="~/Content/validBox/validBox.js"></script>
    )

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

    BundleScripts的实现

            /// <summary>
            /// 动态捆绑多个脚本
            /// </summary>
            /// <param name="htmlHelper"></param>
            /// <param name="scripts">javscript</param>
            /// <returns></returns>
            public static IHtmlString BundleScripts(this HtmlHelper htmlHelper, params Func<object, object>[] 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<string, string> fixSrc = (src) => applicationPath == "/" ? "~" + src : src.Replace(applicationPath, "~/");
    
                var srcs = inputs.ToString().Matches(@"(?<=src="").+?.js(?="")").Select(item => 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方法是一个对正则表达式的包装。

    提问和思考

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

  • 相关阅读:
    安卓环境配置
    [转载]MinGW安装过程
    [转载]解决Android studio新建项目慢的问题
    [转载]图文详解YUV420数据格式
    视频专家之路【四】:ffmpeg简单实战之获取属性
    视频专家之路【三】:Vs开发环境的搭建
    视频专家之路【二】:ffmpeg工具的使用
    视频专家之路【一】:音视频入门知识基础
    二值信号量和互斥锁到底有什么区别?
    【python标准库模块五】Xml模块学习
  • 原文地址:https://www.cnblogs.com/kewei/p/4072250.html
Copyright © 2011-2022 走看看