基於MVC4+EasyUI的Web開發框架經驗總結（11）--使用Bundles處理簡化頁面代碼

本文轉載自查看原文 2014-11-04 12:09 23312 Web開發框架

在Web開發的時候，我們很多時候，需要引用很多CSS文件、JS文件，隨着使用更多的插件或者獨立樣式文件，可能我們的Web界面代碼會越來越臃腫，看起來也很累贅，在MVC里面提供了一個Bundle的對象，用來簡化頁面代碼非常方便，本文主要介紹在我的MVC框架里面，如何使用bundles來簡化頁面的代碼的。

1、常規的頁面代碼

我們知道，隨着使用更多的一些效果，我們可能不斷引入一些新的JS和CSS文件，已達到Web界面更好的表現效果。這樣也就逐步增加了文件代碼的行數，造成相對比較臃腫的場景，如下面的我正常使用的Web界面，頭部需要引入很多JS和CSS文件。

    @*添加Jquery EasyUI的樣式*@
    <link href="~/Content/JqueryEasyUI/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/JqueryEasyUI/themes/icon.css" rel="stylesheet" type="text/css" />

    <link href="~/Content/themes/Default/style.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/themes/Default/default.css" rel="stylesheet" type="text/css" />

    @*添加Jquery，EasyUI和easyUI的語言包的JS文件*@
    <script type="text/javascript" src="~/Content/JqueryEasyUI/jquery.min.js"></script>
    <script type="text/javascript" src="~/Content/JqueryEasyUI/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="~/Content/JqueryEasyUI/locale/easyui-lang-zh_CN.js"></script>

    @*日期格式的引用*@
    <script src="~/Content/datapattern.js"></script>
    
    <!--引用EasyUI擴展-->
    <link href="~/Content/JQueryTools/jQuery.easyui-extend/extend/themes/easyui.extend.css" rel="stylesheet" />
    <link href="~/Content/JQueryTools/jQuery.easyui-extend/extend/themes/icon.css" rel="stylesheet" />
    <script src="~/Content/JQueryTools/jQuery.easyui-extend/jquery.easyui.extend.min.js"></script>

    @*引用提示控件*@
    <link rel="stylesheet" type="text/css" href="~/Content/JQueryTools/jNotify/jquery/jNotify.jquery.css" media="screen" />
    <script type="text/javascript" src="~/Content/JQueryTools/jNotify/jquery/jNotify.jquery.js"></script>

    @*常用的一些組件業務腳本函數*@
    <script type="text/javascript" src="~/Scripts/ComponentUtil.js"></script>

然后這樣的文件總是在不斷的復制做，非常不雅觀，維護也不方便。

在ASP.NET MVC出來之后，引入了一個叫做Bundle的東西，它用來將js和css文件捆綁為一個塊進行輸出，能夠極大簡化界面代碼，並默認對這些內容進行壓縮處理，提高效率。

最終簡化的界面代碼如下所示。

    @using System.Web.Optimization;
    @Scripts.Render("~/bundles/jquery")
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/jquerytools")
    @Styles.Render("~/Content/jquerytools")

2、使用bundles優化的界面操作

為了實現上面的效果，我們需要進行幾步的操作處理。

在App_Start里面的BundleConfig里面增加幾行處理代碼，如下所示。

    public class BundleConfig
    {
        // 有關 Bundling 的詳細信息，請訪問 http://go.microsoft.com/fwlink/?LinkId=254725
        public static void RegisterBundles(BundleCollection bundles)
        {
            //為了減少太多的Bundles命名，定義的CSS的Bundle為："~/Content/css"、"~/Content/jquerytools"
            //定義的Script的Bundles為："~/bundles/jquery"、"~/bundles/jquerytools"

            //Jquery必備的StyleBundle和ScriptBundle
            StyleBundle css = new StyleBundle("~/Content/css");
            ScriptBundle jquery = new ScriptBundle("~/bundles/jquery");

            //添加Jquery EasyUI的樣式
            css.Include("~/Content/JqueryEasyUI/themes/default/easyui.css", 
                        "~/Content/JqueryEasyUI/themes/icon.css",
                        "~/Content/themes/Default/style.css",
                        "~/Content/themes/Default/default.css");

            //添加Jquery，EasyUI和easyUI的語言包的JS文件，日期格式的引用
            jquery.Include("~/Content/JqueryEasyUI/jquery.min.js",
                        "~/Content/JqueryEasyUI/jquery.easyui.min.js",
                        "~/Content/JqueryEasyUI/locale/easyui-lang-zh_CN.js",
                        "~/Content/datapattern.js");

            //常用的一些組件業務腳本函數（建議放到最后）
            jquery.Include("~/Scripts/ComponentUtil.js");



            //擴展的StyleBundle和ScriptBundle
            StyleBundle cssExtend = new StyleBundle("~/Content/jquerytools");
            ScriptBundle jqueryExtend = new ScriptBundle("~/bundles/jquerytools");

            //引用EasyUI擴展
            cssExtend.Include("~/Content/JQueryTools/jQuery.easyui-extend/extend/themes/easyui.extend.css",
                "~/Content/JQueryTools/jQuery.easyui-extend/extend/themes/icon.css");
            jqueryExtend.Include("~/Content/JQueryTools/jQuery.easyui-extend/jquery.easyui.extend.min.js");

            //引用消息提示控件
            cssExtend.Include("~/Content/JQueryTools/jNotify/jquery/jNotify.jquery.css");
            jqueryExtend.Include("~/Content/JQueryTools/jNotify/jquery/jNotify.jquery.js");

            
            //其他一些輔助腳本和樣式


            //全部增加到集合里面去
            bundles.Add(css);
            bundles.Add(jquery);
            bundles.Add(cssExtend);
            bundles.Add(jqueryExtend);
        }
    }

上面代碼，我們增加一些必要的Jquery和一些擴展給的JqueryTool的腳本和樣式，方便統一化管理。

默認的情況下，Bundle是按照字母順序進行排序的，如果需要按照增加的次序進行排序，這需要寫一個自定義的排序規則進行處理，如下所示

    /// <summary>
    /// 自定義Bundles排序
    /// </summary>
    internal class AsIsBundleOrderer : IBundleOrderer
    {
        public virtual IEnumerable<BundleFile> OrderFiles(BundleContext context, IEnumerable<BundleFile> files)
        {
            return files;
        }
    }

然后在調用的時候，修改對象的排序規則即可。

            ScriptBundle jqueryExtend = new ScriptBundle("~/bundles/jquerytools");
            jqueryExtend.Orderer = new AsIsBundleOrderer();

接着在Global.asa.cs里面，增加對Bundle的注冊，如下所示。

        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();
            BundleConfig.RegisterBundles(BundleTable.Bundles);

            WebApiConfig.Register(GlobalConfiguration.Configuration);
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
        }

最后在MVC的視圖里面，就可以使用Bundle來簡化界面代碼了。簡化后的界面代碼如下所示。

<!DOCTYPE html>
<html>
    <head>
    <title>用戶管理</title>
    <meta name="viewport" content="width=device-width" />
    @using System.Web.Optimization;
    @Scripts.Render("~/bundles/jquery")
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/jquerytools")
    @Styles.Render("~/Content/jquerytools")

...............

運行界面，雖然使用了簡化版本的代碼，依舊正常運行

頁面代碼輸出則還是和原先未優化的一致。

<!DOCTYPE html>
<html>
    <head>
    <title>用戶管理</title>
    <meta name="viewport" content="width=device-width" />
    <script src="/Content/JqueryEasyUI/jquery.min.js"></script>
    <script src="/Content/JqueryEasyUI/jquery.easyui.min.js"></script>
    <script src="/Content/JqueryEasyUI/locale/easyui-lang-zh_CN.js"></script>
    <script src="/Content/datapattern.js"></script>
    <script src="/Scripts/ComponentUtil.js"></script>

    <link href="/Content/JqueryEasyUI/themes/default/easyui.css" rel="stylesheet"/>
    <link href="/Content/JqueryEasyUI/themes/icon.css" rel="stylesheet"/>
    <link href="/Content/themes/Default/style.css" rel="stylesheet"/>
    <link href="/Content/themes/Default/default.css" rel="stylesheet"/>

    <script src="/Content/JQueryTools/jQuery.easyui-extend/jquery.easyui.extend.min.js"></script>
    <script src="/Content/JQueryTools/jNotify/jquery/jNotify.jquery.js"></script>

    <link href="/Content/JQueryTools/jQuery.easyui-extend/extend/themes/easyui.extend.css" rel="stylesheet"/>
    <link href="/Content/JQueryTools/jQuery.easyui-extend/extend/themes/icon.css" rel="stylesheet"/>
    <link href="/Content/JQueryTools/jNotify/jquery/jNotify.jquery.css" rel="stylesheet"/>