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

時間 2019-11-16

標籤基於 mvc4+easyui mvc easyui web 開發框架經驗總結使用 bundles 處理簡化頁面代碼欄目 HTML 简体版

原文原文鏈接

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

一、常規的頁面代碼

咱們知道，隨着使用更多的一些效果，咱們可能不斷引入一些新的JS和CSS文件，已達到Web界面更好的表現效果。這樣也就逐步增長了文件代碼的行數，形成相對比較臃腫的場景，以下面的我正常使用的Web界面，頭部須要引入不少JS和CSS文件。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>

而後這樣的文件老是在不斷的複製作，很是不雅觀，維護也不方便。html

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

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

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

二、使用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的腳本和樣式，方便統一化管理。post

默認的狀況下，Bundle是按照字母順序進行排序的，若是須要按照增長的次序進行排序，這須要寫一個自定義的排序規則進行處理，以下所示優化

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

而後在調用的時候，修改對象的排序規則便可。ui

            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"/>