jQueryのextendメソッドを使用してウィンドウカスタムオブジェクトを拡張する

1. 基礎知識

1、window.jQuery

        window.jQuery ブラウザーで jQuery オブジェクトにアクセスするために使用されるグローバル変数です。jQuery は、HTML ドキュメントの走査、イベント処理、アニメーション、Ajax インタラクションなどのタスクを簡素化するために広く使用されている人気のある JavaScript ライブラリです。

        jQuery を変数として設定することで、 window.jQuery コード内で簡単に jQuery を使用できます。例えば：

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

        通常、この使用法は、複数の JavaScript ライブラリまたはフレームワークを同じページで使用する必要がある場合に発生します。window.jQuery 新しい変数 ( など) に割り当てる ことで $、他のライブラリのシンボルとの競合を回避し $ 、jQuery を正しく使用できるようになります。 

2、$.extend()

        JavaScript では、通常、記号 $ は jQuery ライブラリに関連付けられます。.extend() は、1 つ以上のオブジェクトの内容をターゲット オブジェクトにマージするために使用される 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」は、JavaScript コードで strict モードを有効にするディレクティブです。厳密モードは、一部の一般的な JavaScript 動作によってエラーが発生する特殊なコード実行モードです。これにより、よくある間違いを回避し、コードをより細かく制御できるようになります。 

        「use strict」ディレクティブの使用は、JavaScript ファイルの先頭に次のコード行を追加するだけで簡単です。

"use strict";

        厳密モードを有効にすると、JavaScript のエラー チェックがより厳密になります。つまり、通常は無視される一部のエラーがエラー メッセージを生成することになります。たとえば、変数は宣言する必要がある、キャッチされない変数はエラーを生成する、8 進数リテラルは許可されなくなった、変数、関数、関数パラメーターを削除するとエラーが生成される、などです。

厳密モードを使用すると、より信頼性が高く、デバッグが容易なコードを作成できます。また、開発中にコードにより多くの問題が発生するため、本番環境での予期しない動作を回避するのにも役立ちます。

4.bundleconfig.json書類

        bundleconfig.json ファイルは、アプリケーションのパッケージ化と展開の設定を定義するために .NET Core プロジェクトで使用される構成ファイルです。通常、プロジェクトのビルドおよびリリースのプロセスと組み合わせて使用​​されます。

bundleconfig.json ファイルでは 次を定義できます。

1. webRoot : アプリケーションの Web ルート ディレクトリを指定します。wwwroot これは通常、ディレクトリなどのアプリケーションへのエントリ ポイントです 。
2. entryPoints : アプリケーションのエントリ ポイントを定義します。各エントリ ポイントのファイル パスと生成された出力ファイル名を指定できます。
3. spaFallback : シングル ページ アプリケーション (SPA) の設定。SPA クライアント アプリケーションがロードされる前に使用するフォールバック ページを指定できます。
4. sourceMapMapping : ソース コード マッピング ファイルのパスと URL を定義します。これは、運用環境でクライアント スクリプトをデバッグする場合に役立ちます。
5. include : ビルド パッケージに含めるファイルまたはフォルダーを指定します。
6. excludes : ビルド パッケージから除外するファイルまたはフォルダーを指定します。
7. minify : JavaScript ファイルと CSS ファイルを縮小するかどうかを指定します。
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  
  }  
]

        この例では、2 つのエントリ ポイントが定義されています。1 つは JavaScript ファイルで site.js、もう 1 つは 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() 使用するラベルとテキスト ボックスを作成するために使用されます 。最後に、ユーザーがフォームを送信できるように、送信ボタンがフォームに追加されます。modelName

ユーザーがブラウザでこのページを表示すると、ラベルとテキスト ボックスのあるフォームが表示されます。ユーザーが名前を入力して送信ボタンをクリックすると、フォーム データが処理のためにサーバーに送信されます。

2. Razor フレームワークの例

        このサンプル コードと構成は、.NET Core MVC Razor フレームワークで記述および設計されています。いくつかの日時処理関数をウィンドウ オブジェクトに追加してバインドして、グローバル呼び出しとコードの再利用を実現し、コードの量を削減します。

1. グローバルに使用するために、wwwroot/tool/dateHelper.js ファイルに新しいウィンドウ メンバー オブジェクトを作成します。

// 添加到页面的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>();
}

        dateHelper.min.js ファイルを Views/Shared/_Form.cshtml ファイルに挿入します (上記のポイント 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>

        _FormWhite.cshtml ファイルを必要なページ (TestForm.cshtml など) に導入すると、window.dh の関数メソッドを使用できるようになります。

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

<div></div>

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