基于MVC4+EasyUI的Web开发框架经验总结(11)--使用Bundles处理简化页面代码

简介:

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

基于MVC4+EasyUI的Web开发框架的系列文章:

基于MVC4+EasyUI的Web开发框架形成之旅--总体介绍

基于MVC4+EasyUI的Web开发框架形成之旅--MVC控制器的设计

基于MVC4+EasyUI的Web开发框架形成之旅--界面控件的使用

基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用

基于MVC4+EasyUI的Web开发框架形成之旅--框架总体界面介绍

基于MVC4+EasyUI的Web开发框架形成之旅--基类控制器CRUD的操作

基于MVC4+EasyUI的Web开发框架形成之旅--权限控制

基于MVC4+EasyUI的Web开发框架经验总结(1)-利用jQuery Tags Input 插件显示选择记录

基于MVC4+EasyUI的Web开发框架经验总结(2)- 使用EasyUI的树控件构建Web界面

基于MVC4+EasyUI的Web开发框架经验总结(3)- 使用Json实体类构建菜单数据

基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts

基于MVC4+EasyUI的Web开发框架经验总结(5)--使用HTML编辑控件CKEditor和CKFinder

基于MVC4+EasyUI的Web开发框架经验总结(6)--在页面中应用下拉列表的处理

基于MVC4+EasyUI的Web开发框架经验总结(7)--实现省份、城市、行政区三者联动

基于MVC4+EasyUI的Web开发框架经验总结(8)--实现Office文档的预览

基于MVC4+EasyUI的Web开发框架经验总结(9)--在Datagrid里面实现外键字段的转义操作

基于MVC4+EasyUI的Web开发框架经验总结(10)--在Web界面上实现数据的导入和导出

基于MVC4+EasyUI的Web开发框架经验总结(11)--使用Bundles处理简化页面代码

基于MVC4+EasyUI的Web开发框架经验总结(12)--利用Jquery处理数据交互的几种方式

基于MVC4+EasyUI的Web开发框架经验总结(13)--DataGrid控件实现自动适应宽带高度

基于MVC4+EasyUI的Web开发框架经验总结(14)--自动生成图标样式文件和图标的选择操作

本文转自博客园伍华聪的博客,原文链接:基于MVC4+EasyUI的Web开发框架经验总结(11)--使用Bundles处理简化页面代码,如需转载请自行联系原博主。



目录
相关文章
|
1月前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
57 2
|
1月前
|
前端开发 Java
【案例+源码】详解MVC框架模式及其应用
【案例+源码】详解MVC框架模式及其应用
68 0
|
2月前
|
存储
在 Web 中判断页面是不是刷新
【9月更文挑战第10天】在Web开发中,判断页面是否刷新有多种方法:1) 监听`popstate`事件,检测用户是否通过历史记录访问页面;2) 记录并比较页面加载时间戳,若相差极小,则可能为刷新;3) 利用本地存储设置特定值,若该值不存在或不符合预期,则页面可能被刷新。然而,这些方法并非绝对准确。
174 3
html,web页面朗读文字,朗读中文,朗读英文
html,web页面朗读文字,朗读中文,朗读英文
|
3月前
|
数据处理 开发者 UED
FastAPI 的模板引擎简直太神奇啦!这就是构建动态 Web 页面的终极秘籍,快来一探究竟!
【8月更文挑战第31天】FastAPI 是一款高性能异步 Web 框架,可通过集成模板引擎(如 Jinja2 或 Mako)实现动态页面渲染。使用模板引擎可分离页面结构与数据,简化代码并提升可维护性。此外,它还提供丰富的语法支持,如循环和条件判断,从而增强页面展示效果及开发效率。通过简单的配置步骤,即可在 FastAPI 中启用模板引擎,显著改善用户体验。
331 1
|
3月前
|
XML JavaScript 测试技术
Web自动化测试框架(基础篇)--HTML页面元素和DOM对象
本文为Web自动化测试入门指南,介绍了HTML页面元素和DOM对象的基础知识,以及如何使用Python中的Selenium WebDriver进行元素定位、操作和等待机制,旨在帮助初学者理解Web自动化测试中的关键概念和操作技巧。
54 1
|
2月前
|
数据处理 Python
Django视图:构建动态Web页面的核心技术
Django视图:构建动态Web页面的核心技术
|
3月前
|
设计模式 存储 前端开发
MVC 框架的主要问题是什么?
【8月更文挑战第30天】
77 0
|
3月前
【Azure 应用服务】Web.config中设置域名访问限制,IP地址限制访问特定的页面资源 (Rewrite)
【Azure 应用服务】Web.config中设置域名访问限制,IP地址限制访问特定的页面资源 (Rewrite)
下一篇
无影云桌面