使用jQuery的extend方法扩展window自定义对象

一、基础知识

1、window.jQuery

        window.jQuery 是用于在浏览器中访问 jQuery 对象的全局变量。jQuery 是一种流行的 JavaScript 库，广泛用于简化 HTML 文档遍历、事件处理、动画和 Ajax 交互等任务。

        通过将 window.jQuery 设置为一个变量，可以方便地在代码中使用 jQuery。例如：

var $ = window.jQuery;  
  
// 使用 $ 变量访问 jQuery  
$(document).ready(function() {  
  // 在页面加载完成后执行代码  
});

        这种用法通常出现在需要在同一页面中使用多个 JavaScript 库或框架的情况下。通过将 window.jQuery 分配给一个新的变量（如 $），可以避免与其他库中的 $ 符号冲突，并确保 jQuery 的正确使用。 

2、$.extend()

        在JavaScript中，符号$通常与jQuery库相关。.extend() 是 jQuery 的一个方法，它用于将一个或多个对象的内容合并到目标对象。这是一个非常有用的工具，因为它允许您创建一个包含多个对象属性的新对象，或者将属性从一个对象复制到另一个对象。

        基本语法：$.extend(target, object1, object2, ...)

        其中：

   a、target 是您希望将属性复制到的目标对象。

         b、object1, object2, ... 是您希望复制属性的源对象。

         示例：

var obj1 = {name: "Tom"};  
var obj2 = {age: 25};  
  
$.extend(obj1, obj2);  
  
console.log(obj1); // 输出：{name: "Tom", age: 25}

        在这个例子中，obj1 是目标对象，obj2 是源对象。通过调用 $.extend(obj1, obj2)，obj2 中的属性被复制到 obj1 中，所以最后 obj1 包含了 obj2 的所有属性。

        注意：如果多个对象具有相同的属性，那么后面的对象的属性值将覆盖前面的对象的属性值。

3、use strict指令

        "use strict" 是一种指令，用于在 JavaScript 代码中启用严格模式。严格模式是一种特殊的代码执行模式，它使得一些通常的 JavaScript 行为会产生错误。这有助于你避免常见的错误，并允许你更好地控制你的代码。 

        使用 "use strict" 指令很简单，只需在你的 JavaScript 文件的顶部添加这行代码即可：

"use strict";

        启用严格模式后，JavaScript 将更严格地进行错误检查，这意味着一些在正常情况下被忽略的错误将产生错误消息。例如，变量必须被声明，未捕获的变量会产生错误，八进制字面量不再被允许，删除变量、函数和函数参数会产生错误等等。

使用严格模式可以帮助你编写更可靠、更易于调试的代码。它也可以帮助你避免在生产环境中出现意外的行为，因为你的代码在开发期间就会暴露出更多的问题。

4、bundleconfig.json文件

        bundleconfig.json 文件是与.NET Core项目一起使用的配置文件，用于定义应用程序的打包和部署设置。它通常与项目的生成和发布过程结合使用。

在 bundleconfig.json 文件中，您可以定义以下内容：

1. webRoot：指定应用程序的Web根目录。这通常是应用程序的入口点，例如 wwwroot 目录。
2. entryPoints：定义应用程序的入口点。您可以指定每个入口点的文件路径和生成的输出文件名。
3. spaFallback：用于单页应用程序（SPA）的设置。您可以指定在SPA客户端应用程序加载之前要使用的回退页面。
4. sourceMapMapping：定义源代码映射文件的路径和URL。这对于调试生产环境的客户端脚本非常有用。
5. includes：指定要包含在生成包中的文件或文件夹。
6. excludes：指定要从生成包中排除的文件或文件夹。
7. minify：指定是否对JavaScript和CSS文件进行压缩（minification）。
8. contentHash：指定是否对静态文件（如JavaScript、CSS、图像等）使用内容哈希进行缓存控制。
9. extensions：指定要使用的自定义扩展。

以下是一个示例 bundleconfig.json 文件的内容：

[  
  {  
    "outputFileName": "wwwroot/js/site.min.js",  
    "inputFiles": [  
      "wwwroot/js/site.js"  
    ],  
    "minify": {  
      "enabled": true,  
      "renameLocals": true  
    },  
    "sourceMap": false  
  },  
  {  
    "outputFileName": "wwwroot/css/site.min.css",  
    "inputFiles": [  
      "wwwroot/css/site.css"  
    ],  
    "minify": {  
      "enabled": true  
    },  
    "sourceMap": false  
  }  
]

        在这个示例中，定义了两个入口点，一个是JavaScript文件 site.js，另一个是CSS文件 site.css。生成过程将压缩这些文件，并将输出文件命名为 site.min.js 和 site.min.css。 

5、_Form.cshtml

        _Form.cshtml 是一个用于生成表单的 Razor 视图模板，通常用于 ASP.NET MVC 应用程序中。该模板可以包含各种表单元素，例如文本框、下拉列表、单选按钮、复选框等，用于收集用户输入并将其提交到服务器进行处理。

        以下是一个简单的示例 _Form.cshtml 模板，用于创建一个包含文本框和提交按钮的表单：

@using (Html.BeginForm())  
{  
    <div>  
        @Html.LabelFor(model => model.Name)  
        @Html.TextBoxFor(model => model.Name)  
    </div>  
    <div>  
        <input type="submit" value="Submit" />  
    </div>  
}

        在这个示例中，Html.BeginForm() 方法用于创建一个表单，并使用 @using 块确保表单被正确关闭。Html.LabelFor() 和 Html.TextBoxFor() 方法用于创建标签和文本框，它们使用 model 对象中的 Name 属性作为数据源。最后，一个提交按钮被添加到表单中，以便用户可以提交表单。

当用户在浏览器中查看此页面时，他们将看到一个带有标签和文本框的表单。当用户输入他们的姓名并点击提交按钮时，表单数据将被提交到服务器进行处理。

二、Razor框架中的示例

        本示例代码和配置实在.NET Core MVC Razor框架中编写设计的。将一些日期时间处理函数添加绑定到window对象中，实现全局调用和代码复用，减少代码量。

1、在wwwroot/tool/dateHelper.js文件中新建一个window成员对象，供全局使用

// 添加到页面的window对象上面，在页面中用dh.进行访问
; window.dh = {};

2、使用$.extend()将函数成员绑定到dh上，并注册调用

(function ($, dh) {
	"use strict";
	$.extend(dh, {
		//将时间转为"yyyy/MM/dd HH:mm:ss"的格式
		getFormattedDate: function(dateParam) {
			var date = new Date(dateParam);
			var formatter = new Intl.DateTimeFormat('zh-CN', {
				year: 'numeric',
				month: '2-digit',
				day: '2-digit',
				hour: '2-digit',
				minute: '2-digit',
				second: '2-digit',
				hour12: false
			});
			var formattedDate = formatter.format(date);
			return formattedDate;
		},
        // 格式为 yyyy-MM-dd HH:mm:ss
        formatDate: function (v, format) {
            if (!v) return "";
            var d = v;
            if (typeof v === 'string') {
                if (v.indexOf("/Date(") > -1)
                    d = new Date(parseInt(v.replace("/Date(", "").replace(")/", ""), 10));
                else
                    d = new Date(Date.parse(v.replace(/-/g, "/").replace("T", " ").split(".")[0]));
            }
            var o = {
                "M+": d.getMonth() + 1,  //month
                "d+": d.getDate(),       //day
                "H+": d.getHours(),      //hour
                "m+": d.getMinutes(),    //minute
                "s+": d.getSeconds(),    //second
                "q+": Math.floor((d.getMonth() + 3) / 3),  //quarter
                "S": d.getMilliseconds() //millisecondjsonca4
            };
            if (/(y+)/.test(format)) {
                format = format.replace(RegExp.$1, (d.getFullYear() + "").substr(4 - RegExp.$1.length));
            }
            for (var k in o) {
                if (new RegExp("(" + k + ")").test(format)) {
                    format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
                }
            }
            return format;
        }
    })
})(window.jQuery, window.dh);//注意调用

3、dateHelper.js文件配置到bundleconfig.json 文件中

{
    "outputFileName": "wwwroot/tool/dateHelper.min.js",
    "inputFiles": [
        "wwwroot/tool/dateHelper.js"
    ],
    "minify": {
        "enabled": true,
        "renameLocals": true
    }
}

4、通过后端动态生成js文件注入代码，返回HtmlString

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Microsoft.AspNetCore.Html;
using Newtonsoft.Json;

/// <summary>
/// Adapted from https://github.com/madskristensen/BundlerMinifier/wiki/Unbundling-scripts-for-debugging
/// 
/// Areas modified:
///  - Modified it to make it work with aspnetcore.
///  - Accept both scripts and styles.
///  - Read config from wwwroot
///  - Accept baseFolder since DI not suited for static methods
///  - Style nitpicks
/// </summary>
public class BundlerHelper
{
    private static long version = DateTime.Now.Ticks;

    public static HtmlString Render(string baseFolder, string bundlePath)
    {
        string configFile = Path.Combine(baseFolder, "bundleconfig.json");
        Bundle bundle = GetBundle(configFile, bundlePath);
        if (bundle == null)
            return null;

        // Clean up the bundle to remove the virtual folder that aspnetcore provides.
        List<string> inputFiles = bundle.InputFiles;
        if (GlobalContext.SystemConfig.Debug)
        {
            inputFiles = inputFiles.Select(file => file.Replace("wwwroot", GlobalContext.SystemConfig.VirtualDirectory.ParseToString())).ToList();
        }
        List<string> outputString = bundlePath.EndsWith(".js") ?
            inputFiles.Select(inputFile => $"<script src='{inputFile}?v=" + version + "' type='text/javascript' ></script>").ToList() :
            inputFiles.Select(inputFile => $"<link rel='stylesheet' href='{inputFile}?v=" + version + "' />").ToList();

        return new HtmlString(string.Join("\n", outputString));
    }
}

class Bundle
{
    [JsonProperty("outputFileName")]
    public string OutputFileName { get; set; }

    [JsonProperty("inputFiles")]
    public List<string> InputFiles { get; set; } = new List<string>();
}

        在Views/Shared/_Form.cshtml文件中注入dateHelper.min.js文件（系统根据上面第3点中的配置自动生成的）。

@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment HostingEnvironment

@BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/tool/dateHelper.min.js"))

5、页面调用

        新建Views/Shared/_FormWhite.cshtml。使用【@await Html.PartialAsync("_Form.cshtml")】引入文件代码，返回指定部分视图的HTML标记。。

<!--Areas文件夹下表单页面白色背景模板-->
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment HostingEnvironment
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />

    @await Html.PartialAsync("_Form.cshtml")

    @RenderSection("header", false)
    <script type="text/javascript">
        var ctx = '@Url.Content("~/")';
    </script>
</head>
<body class="white-bg">
    @RenderBody()
    @RenderSection("footer", false)
</body>
</html>

        在需要的页面（如：TestForm.cshtml）中引入_FormWhite.cshtml文件，就可以使用window.dh中的函数方法了。

@{
    Layout = "~/Views/Shared/_FormWhite.cshtml";
}

<div></div>

<script type="text/javascript">
    //调用window.dh中绑定的方法
    var date = dh.getFormattedDate(new Date());
</script>