• 【ASP.NET MVC 学习笔记】- 18 Bundle(捆绑)


    本文参考:http://www.cnblogs.com/willick/p/3438272.html

    1、捆绑(Bundle),一个在 View 和 Layout 中用于组织优化浏览器请求的 CSS 和 JavaScript 文件的技术。

    2、当我们创建一个MVC工程时,VS在Scripts文件夹下默认引入了以下js:

    • jquery-1.8.2.js,这个就不用解释了。
    • jquery-ui-1.8.24.js,在jQuery 基础上的一套界面工具,包括了网页上常见的很多插件和动画特效。
    • jquery.validate.js,用于验证用户在表单内input元素输入的数据。
    • knockout-2.2.0.js,是一个轻量级的UI类库,通过应用MVVM模式使JavaScript前端UI简单化。
    • modernizr-2.6.2.js,一个开源的JS库,它使得那些基于访客浏览器的不同(指对新标准支持性的差异)而开发不同级别体验的设计师的工作变得更为简单。它使得设计师可以在支持HTML5和CSS3的浏览器中充分利用HTML5和CSS3的特性进行开发,同时又不会牺牲其他不支持这些新技术的浏览器的控制。
    • jquery.unobtrusive-ajax.js,MVC 框架中使用 Unobtrusive Ajax 的库。
    • jquery.validate.unobtrusive.js,基于 jquery.unobtrusive-ajax.js。
    •  _references.js,它的作用是通过下面这种方式放入该文件中的JS文件可以被VS智能感知:
    /// <reference path="jquery-1.7.1.js" />
    /// <reference path="jquery-ui-1.8.20.js" />
    /// <reference path="jquery.validate.js" />
    /// <reference path="jquery.validate.unobtrusive.js" />
    /// <reference path="knockout-2.1.0.debug.js" />
    /// <reference path="modernizr-2.5.3.js" />

    2、“捆绑”作用是把一类脚本或样式文件捆绑在一起,在需要用的时候调用一句代码就行,极大地方便了脚本和样式文件的管理;而且可以把脚本的普通和 min 两个版本都捆绑起来,MVC也会根据是否为Debug模式智能地选择脚本文件的版本。

    3、使用Bundle的方便之一:可以在 /App_Start/BundleConfig.cs 中通过注册来统一管理脚本和样式文件。

    public class BundleConfig {
    //RegisterBundles 参数对象的 Add 方法添加,该方法的参数需要一个ScriptBundle 类 或 StyleBundle 类的实例对象。
    //脚本文件用的是 ScriptBundle 类,样式文件用的是 StyleBundle 类,它们的构造参数代表着捆绑在一起的文件的引用。
    //Include 方法用于包含具体要捆绑的文件。其中的 {version} 是文件版本的占位符,MVC会在相应的目录下定位到最新的一个版本文件。
    public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/*.css")); bundles.Add(new ScriptBundle("~/bundles/clientfeaturesscripts").Include( "~/Scripts/jquery-{version}.js", "~/Scripts/jquery.validate.js", "~/Scripts/jquery.validate.unobtrusive.js", "~/Scripts/jquery.unobtrusive-ajax.js")); } }

          方便之二:不用引入一大坨js、css文件,而是通过下列优雅的方式进行:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>@ViewBag.Title</title>
        @Styles.Render("~/Content/css")
    </head>
    <body>
        @Scripts.Render("~/bundles/clientfeaturesscripts")
        @RenderBody()
    </body>
    </html>

          方便之三:减少带宽并使捆绑请求的链接减少。在发布模式下,响应客户端请求时,MVC整合并最小化了JavaScript文件和样式文件,并使得一个捆绑中的内容在一个请求中加载。


  • 相关阅读:
    二叉树【基础算法题】
    大话数据结构笔记——第五章 串
    大话数据结构笔记——第四章 栈与队列
    矩阵【基础算法题】
    大话数据结构笔记——第三章 线性表
    十大经典排序算法(Javascript版)
    比较器
    荷兰国旗问题
    好听的字
    mongodb 命令
  • 原文地址:https://www.cnblogs.com/wangwust/p/6393038.html
Copyright © 2020-2023  润新知