1. Базовые знания
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(цель, объект1, объект2, ...)
в:
a、target — целевой объект, в который вы хотите скопировать свойства.
б) 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. Строгий режим — это специальный режим выполнения кода, который приводит к возникновению ошибок в некоторых типичных действиях JavaScript. Это поможет вам избежать распространенных ошибок и позволит вам лучше контролировать свой код.
Использовать директиву use strict так же просто, как добавить эту строку кода в начало вашего файла JavaScript:
"use strict";Когда строгий режим включен, JavaScript будет иметь более строгую проверку ошибок, а это означает, что некоторые ошибки, которые обычно игнорируются, будут выдавать сообщения об ошибках. Например, переменные должны быть объявлены, неперехваченные переменные будут генерировать ошибки, восьмеричные литералы больше не допускаются, удаление переменных, функций и параметров функций будет генерировать ошибки и т. д.
Использование строгого режима может помочь вам написать более надежный и простой в отладке код. Это также может помочь вам избежать неожиданного поведения в рабочей среде, поскольку во время разработки ваш код вызовет больше проблем.
4. bundleconfig.jsonДокументы
bundleconfig.json Файлы — это файлы конфигурации, используемые в проектах .NET Core для определения параметров упаковки и развертывания вашего приложения. Обычно он используется в сочетании с процессом сборки и выпуска проекта.
В bundleconfig.json файле вы можете определить следующее:
- webRoot : указывает корневой веб-каталог приложения. Обычно это точка входа в приложение, например
wwwrootкаталог. - enterPoints : определяет точки входа приложения. Вы можете указать путь к файлу и имя сгенерированного выходного файла для каждой точки входа.
- spaFallback : настройки для одностраничных приложений (SPA). Вы можете указать резервную страницу, которая будет использоваться перед загрузкой клиентского приложения SPA.
- sourceMapMapping : определяет путь и URL-адрес файла сопоставления исходного кода. Это полезно для отладки клиентских сценариев в производственных средах.
- включает в себя : указывает файлы или папки, которые будут включены в пакет сборки.
- исключает : укажите файлы или папки, которые нужно исключить из пакета сборки.
- minify : укажите, следует ли минимизировать файлы JavaScript и CSS.
- contentHash : указывает, использовать ли хеширование контента для статических файлов (таких как JavaScript, CSS, изображения и т. д.) для управления кешем.
- 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 в качестве источника данных. Наконец, в форму добавляется кнопка отправки, чтобы пользователь мог отправить форму.
Когда пользователи просматривают эту страницу в браузере, они увидят форму с метками и текстовыми полями. Когда пользователь вводит свое имя и нажимает кнопку отправки, данные формы передаются на сервер для обработки.
2. Примеры в Razor Framework
Этот пример кода и конфигурации написан и разработан в среде .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>