構(gòu)建實(shí)時(shí)服務(wù)監(jiān)控面板！
我們的服務(wù)監(jiān)控面板將實(shí)時(shí)顯示真實(shí)數(shù)據(jù)。它將以近乎實(shí)時(shí)的、異步的、非阻塞的方式向我們展示服務(wù)器和微服務(wù)上發(fā)生的情況。
點(diǎn)擊此處查看完整客戶端示例。
觀看使用D3.js可視化數(shù)據(jù)，用JavaScript闡述你的數(shù)據(jù)！ 
觀看此課程 觀看此課程 此處展示服務(wù)器演示。
我們將使用AngularJS框架和許多炫酷的實(shí)時(shí)圖表以及大量實(shí)時(shí)數(shù)據(jù)來構(gòu)建此監(jiān)控面板的簡化版本。我們還將使用.NET 4.5的SignalR和Web API庫構(gòu)建我們的服務(wù)。
關(guān)鍵要點(diǎn)
- 利用AngularJS和SignalR創(chuàng)建一個(gè)實(shí)時(shí)監(jiān)控面板，異步且非阻塞地顯示服務(wù)器和微服務(wù)的活動(dòng)。
- 使用純文本文件或Visual Studio設(shè)置項(xiàng)目，依賴項(xiàng)包括AngularJS、jQuery、Bootstrap、SignalR以及各種圖表庫，如D3.js和Epoch。
- 在服務(wù)器端實(shí)現(xiàn)SignalR中心來管理實(shí)時(shí)數(shù)據(jù)傳輸，利用.NET處理異步請(qǐng)求和向客戶端推送通知的能力。
- 開發(fā)AngularJS服務(wù)和控制器來處理從SignalR中心接收的數(shù)據(jù)，實(shí)時(shí)更新UI以反映服務(wù)器性能指標(biāo)的變化。
- 集成ng-epoch和n3-pie等圖表解決方案來直觀地表示數(shù)據(jù)，增強(qiáng)監(jiān)控面板的交互性和用戶參與度。
技術(shù)架構(gòu)
客戶端
AngularJS開箱即用地強(qiáng)制執(zhí)行良好的應(yīng)用程序開發(fā)實(shí)踐。所有內(nèi)容都是注入的，這意味著依賴項(xiàng)的耦合度低。此外，Angular在視圖、模型和控制器之間具有良好的分離。
Angular在這裡補(bǔ)充了.NET，允許服務(wù)器端代碼保持小巧、易於管理和可測試。服務(wù)器端代碼僅用於發(fā)揮其優(yōu)勢——進(jìn)行繁重的處理。
服務(wù)器端
將SignalR與.NET 4.5的Web API一起使用與將Node.js與Socket.IO一起使用非常相似，並允許從服務(wù)器到訂閱客戶端進(jìn)行相同類型的非阻塞、異步推送。 SignalR在底層使用WebSockets，但因?yàn)樗橄罅送ㄐ?，所以在Angular內(nèi)部運(yùn)行時(shí)，它將回退到客戶端瀏覽器支持的任何技術(shù)。 （例如，對(duì)於舊版瀏覽器，它可能會(huì)回退到長輪詢。）
此外，借助動(dòng)態(tài)標(biāo)籤和Json.NET的魔力，.NET框架將JavaScript視為一等公民。事實(shí)上，通過JavaScript使用Web API和SignalR技術(shù)通常比通過原生.NET客戶端更容易，因?yàn)樗鼈兪强紤]到JavaScript而構(gòu)建的。
核心內(nèi)容
開始設(shè)置
本教程中使用的所有AngularJS代碼都可以在此處找到。
我將介紹如何使用您最喜歡的文本編輯器和純文件夾以及Visual Studio來創(chuàng)建它，這取決於創(chuàng)建項(xiàng)目的工具。
使用純文本文件進(jìn)行設(shè)置
文件夾和文件結(jié)構(gòu)如下所示：
<code>root
app (Angular應(yīng)用程序特定的JavaScript)
Content (CSS等)
Scripts (引用的JavaScript等)
...
index.html</code>
主要依賴項(xiàng)
您需要下載以下文件：
- jQuery（選擇“下載壓縮的生產(chǎn)jQuery 2.1.1”鏈接）
- AngularJS（單擊大型“下載”選項(xiàng)，然後單擊Angular 1.3 的最新版本）
- Bootstrap（單擊“下載Bootstrap”選項(xiàng)）
- SignalR（單擊右側(cè)的“下載ZIP”按鈕）
- D3.js（單擊頁面中間的“d3.zip”鏈接）
- Epoch（單擊“下載v0.6.0鏈接”）
- ng-epoch（單擊右側(cè)的“下載ZIP”按鈕）
- n3-pie（單擊右側(cè)的“下載ZIP”按鈕）
在我們的Scripts文件夾中，我們需要：
- jquery-2.1.1.min.js
- angular.min.js
- bootstrap.min.js
- jquery.signalR.min.js
- d3.min.js
- epoch.min.js
- pie-chart.min.js
在我們的Content文件夾中：
- bootstrap.min.css
- epoch.min.css
使用Visual Studio進(jìn)行設(shè)置
如果您覺得文本文件過於簡單，則通過Visual Studio進(jìn)行設(shè)置非常簡單。
只需通過轉(zhuǎn)到文件 -> 新建 -> 項(xiàng)目，然後選擇Web作為模板類型來設(shè)置一個(gè)空的Web應(yīng)用程序。
然後只需右鍵單擊項(xiàng)目，轉(zhuǎn)到管理Nuget包，搜索並下載jQuery、AngularJS、Bootstrap、D3和SignalR JavaScript客戶端。
下載並安裝這些後，您應(yīng)該在Scripts和Contents文件夾中看到它們。此外，在已安裝的Nuget包下，您將看到以下內(nèi)容：
最後，Nuget不包含Epoch、ng-epoch和n3圖表庫，因此您需要手動(dòng)添加它們。只需按照上一節(jié)中詳細(xì)介紹的步驟即可獲取這些庫。
讓我們編寫我們的應(yīng)用程序
現(xiàn)在我們準(zhǔn)備編寫一些代碼了。
首先，讓我們創(chuàng)建我們的基本index.html文件，它將容納我們的Angular JavaScript代碼。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>AngularJS - SignalR - ServiceDashboard</title> <link rel="stylesheet" href="Content/bootstrap.min.css" /> <link rel="stylesheet" href="Content/epoch.min.css" /> <??> <??> <??> <??> <??> <??> <??> <??> <??> <??> <??> <??> </head> <body ng-app="angularServiceDashboard"> </body> </html>
這裡有一些事情需要注意。首先，我們添加了所有依賴項(xiàng)以便它們加載。其次，我們引用了一些尚不存在的新文件（app文件夾中的所有文件）。我們接下來將編寫這些文件。
讓我們進(jìn)入我們的app文件夾並創(chuàng)建我們的app.js文件。這是一個(gè)非常簡單的文件。
<code>root
app (Angular應(yīng)用程序特定的JavaScript)
Content (CSS等)
Scripts (引用的JavaScript等)
...
index.html</code>
此文件為我們做了幾件事。它設(shè)置了我們的主應(yīng)用程序模塊angularServiceDashboard，並註入了兩個(gè)外部引用——ng.epoch（這是我們的Epoch.js Angular指令）和n3-pie-chart（這是一個(gè)為Angular製作的、結(jié)構(gòu)良好的圖表庫）。
如果您注意到，我們還為backendServerUrl注入了一個(gè)值，它當(dāng)然託管在其他地方，我們計(jì)劃在這裡使用它。
讓我們創(chuàng)建一個(gè)服務(wù)工廠類，它將綁定到服務(wù)器的URL。這將是我們HTML中引用的services.js文件，它將進(jìn)入app文件夾：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>AngularJS - SignalR - ServiceDashboard</title> <link rel="stylesheet" href="Content/bootstrap.min.css" /> <link rel="stylesheet" href="Content/epoch.min.css" /> <??> <??> <??> <??> <??> <??> <??> <??> <??> <??> <??> <??> </head> <body ng-app="angularServiceDashboard"> </body> </html>
這段代碼使用了流行的on和off（這裡不需要off）訂閱模式，並通過使用Angular工廠封裝了與我們應(yīng)用程序的SignalR的所有通信。
這段代碼乍一看可能有點(diǎn)讓人不知所措，但當(dāng)我們構(gòu)建控制器時(shí)，您會(huì)更好地理解它。它所做的只是獲取後端SignalR服務(wù)器的URL和SignalR中心名稱。 （在SignalR中，您可以在同一服務(wù)器中使用多個(gè)中心來推送數(shù)據(jù)。）
此外，這段代碼允許SignalR服務(wù)器（位於其他地方的某個(gè)盒子中）通過on方法調(diào)用我們的應(yīng)用程序。它允許我們的應(yīng)用程序通過invoke方法調(diào)用SignalR服務(wù)器內(nèi)部的函數(shù)。
接下來，我們需要我們的控制器，它將把我們的數(shù)據(jù)從服務(wù)綁定到我們的作用域。讓我們?cè)谖覀兊腶pp文件夾中創(chuàng)建一個(gè)名為controllers.js的文件。
'use strict';
var app = angular.module('angularServiceDashboard', ['ng.epoch','n3-pie-chart']);
app.value('backendServerUrl', 'http://sitepointsignal.cloudapp.net/');
此控制器在這裡做了一些事情。它創(chuàng)建了我們的Angular服務(wù)對(duì)象並將其綁定一個(gè)回調(diào)函數(shù)，以便服務(wù)器在我們的控制器中調(diào)用某些內(nèi)容。
您會(huì)看到，每次服務(wù)器回調(diào)我們時(shí)，我們都會(huì)遍歷服務(wù)器返回的JSON數(shù)組。然後我們?yōu)槊糠N性能類型都有一個(gè)switch語句?，F(xiàn)在，我們將設(shè)置RAM，然後返回並填充其餘部分。
至於我們的指令，我們實(shí)際上只需要一個(gè)用於我們的Epoch圖表。我們將使用一個(gè)名為ng-epoch.js的開源指令，我們?cè)谖覀兊膇ndex.html存根文件中已經(jīng)對(duì)其進(jìn)行了引用。
我們可以將所有這些圖表拆分為不同的指令，使用一些模板並使用UI-Router，但是為了本教程的簡單起見，我們將把所有視圖都放在我們的index.html文件中。
現(xiàn)在讓我們將我們的視圖添加到index.html文件中。我們可以通過在body標(biāo)籤下添加以下內(nèi)容來實(shí)現(xiàn)：
'use strict';
app.factory('backendHubProxy', ['$rootScope', 'backendServerUrl',
function ($rootScope, backendServerUrl) {
function backendFactory(serverUrl, hubName) {
var connection = $.hubConnection(backendServerUrl);
var proxy = connection.createHubProxy(hubName);
connection.start().done(function () { });
return {
on: function (eventName, callback) {
proxy.on(eventName, function (result) {
$rootScope.$apply(function () {
if (callback) {
callback(result);
}
});
});
},
invoke: function (methodName, callback) {
proxy.invoke(methodName)
.done(function (result) {
$rootScope.$apply(function () {
if (callback) {
callback(result);
}
});
});
}
};
};
return backendFactory;
}]);
這將簡單地創(chuàng)建一個(gè)位置，讓服務(wù)器將RAM數(shù)據(jù)推回。數(shù)據(jù)將首先進(jìn)入我們的服務(wù)，然後進(jìn)入控制器，最後進(jìn)入視圖。
它應(yīng)該看起來像這樣：
現(xiàn)在讓我們添加一些圖表，這正是我們真正想要做的。我們將為epoch.js時(shí)間線添加一個(gè)名為timestamp的變量。我們還將添加一個(gè)名為chartEntry的數(shù)組，我們將將其綁定到我們的epoch.ng指令。
<code>root
app (Angular應(yīng)用程序特定的JavaScript)
Content (CSS等)
Scripts (引用的JavaScript等)
...
index.html</code>
然後讓我們映射switch語句中的數(shù)據(jù)並添加其餘所需的epoch.js數(shù)據(jù)項(xiàng)。當(dāng)然，我們可以進(jìn)一步分解它（例如，使用更多函數(shù)和過濾器），但為了本教程的簡單起見，我們將保持簡單。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>AngularJS - SignalR - ServiceDashboard</title> <link rel="stylesheet" href="Content/bootstrap.min.css" /> <link rel="stylesheet" href="Content/epoch.min.css" /> <??> <??> <??> <??> <??> <??> <??> <??> <??> <??> <??> <??> </head> <body ng-app="angularServiceDashboard"> </body> </html>
我們的控制器看起來更完善了。我們?cè)谧饔糜蛑刑砑恿艘粋€(gè)realtimeAreaFeed，我們將通過ng-epoch指令將其綁定到我們的視圖，並且我們還在作用域中添加了areaAxes，它決定了區(qū)域圖的佈局。
現(xiàn)在讓我們將指令添加到index.html並顯示傳入的CPU值數(shù)據(jù)：
'use strict';
var app = angular.module('angularServiceDashboard', ['ng.epoch','n3-pie-chart']);
app.value('backendServerUrl', 'http://sitepointsignal.cloudapp.net/');
chart-class指的是D3.js的顏色方案，chart-height是您猜測的內(nèi)容，chart-stream是從SignalR服務(wù)器返回的數(shù)據(jù)。
有了它，我們應(yīng)該看到圖表實(shí)時(shí)出現(xiàn)：
現(xiàn)在讓我們將大量數(shù)據(jù)點(diǎn)連接到此圖表，並從n3-pie框架添加另一個(gè)圖表（因?yàn)檎l不喜歡餅圖！）。
要從n3-pie框架添加餅圖，只需將以下內(nèi)容添加到我們的控制器中：
'use strict';
app.factory('backendHubProxy', ['$rootScope', 'backendServerUrl',
function ($rootScope, backendServerUrl) {
function backendFactory(serverUrl, hubName) {
var connection = $.hubConnection(backendServerUrl);
var proxy = connection.createHubProxy(hubName);
connection.start().done(function () { });
return {
on: function (eventName, callback) {
proxy.on(eventName, function (result) {
$rootScope.$apply(function () {
if (callback) {
callback(result);
}
});
});
},
invoke: function (methodName, callback) {
proxy.invoke(methodName)
.done(function (result) {
$rootScope.$apply(function () {
if (callback) {
callback(result);
}
});
});
}
};
};
return backendFactory;
}]);
當(dāng)然，該值將由SignalR服務(wù)器更新。您可以在我們控制器的完整代碼中看到這一點(diǎn)。
我們還應(yīng)該花點(diǎn)時(shí)間考慮一下我們視圖的完整代碼。
我們應(yīng)該在屏幕上看到以下數(shù)據(jù)：
我們已經(jīng)看到Angular可以非常輕鬆地連接到SignalR——只需在AngularJS服務(wù)或工廠中插入端點(diǎn)即可。 AngularJS工廠是一種與SignalR通信的封裝機(jī)制。 “結(jié)合”後，誰知道AngularJS和.NET會(huì)如此完美地協(xié)同工作？
服務(wù)器的核心方面
我將介紹一些.NET代碼，這些代碼允許在後端進(jìn)行此通信。 （您可以在此處找到源代碼。）
首先，要開始構(gòu)建服務(wù)器代碼，您需要在Visual Studio解決方案中運(yùn)行SignalR。為此，只需按照ASP.NET上的優(yōu)秀教程即可運(yùn)行基本的SignalR解決方案。 （這是最簡單的。）
運(yùn)行後，將C# Hub類更改為以下內(nèi)容：
'use strict';
app.controller('PerformanceDataController', ['$scope', 'backendHubProxy',
function ($scope, backendHubProxy) {
console.log('trying to connect to service')
var performanceDataHub = backendHubProxy(backendHubProxy.defaultServer, 'performanceHub');
console.log('connected to service')
$scope.currentRamNumber = 68;
performanceDataHub.on('broadcastPerformance', function (data) {
data.forEach(function (dataItem) {
switch(dataItem.categoryName) {
case 'Processor':
break;
case 'Memory':
$scope.currentRamNumber = dataItem.value;
break;
case 'Network In':
break;
case 'Network Out':
break;
case 'Disk Read Bytes/Sec':
break;
case 'Disk Write Bytes/Sec':
break;
default:
//default code block
break;
}
});
});
}
]);
更改Hub類後，Visual Studio將報(bào)錯(cuò)，您需要添加一個(gè)性能模型（由於Json.NET，它在服務(wù)器推送時(shí)會(huì)自動(dòng)轉(zhuǎn)換為JSON）：
<code>root
app (Angular應(yīng)用程序特定的JavaScript)
Content (CSS等)
Scripts (引用的JavaScript等)
...
index.html</code>
JsonProperty元數(shù)據(jù)只是告訴Json.NET在為此模型轉(zhuǎn)換為JSON時(shí)自動(dòng)將屬性名稱轉(zhuǎn)換為小寫。 JavaScript喜歡小寫。
讓我們添加一個(gè)PerformanceEngine類，它將通過SignalR將真實(shí)性能數(shù)據(jù)推送到任何偵聽的客戶端。該引擎通過異步後臺(tái)線程通過SignalR向任何偵聽的客戶端發(fā)送這些消息。
由於其長度，您可以在我們的GitHub存儲(chǔ)庫中找到代碼。
此代碼基本上在每次while迭代中將一系列性能指標(biāo)推送到任何已訂閱的客戶端。這些性能指標(biāo)被注入到構(gòu)造函數(shù)中。從服務(wù)器推送的速度在構(gòu)造函數(shù)參數(shù)pollIntervalMillis上設(shè)置。
請(qǐng)注意，如果您使用OWIN作為自託管來託管SignalR，這將運(yùn)行良好，如果您使用Web工作線程，它也應(yīng)該運(yùn)行良好。
最後要做的事情當(dāng)然是在服務(wù)的OnStart()或Startup類中的某個(gè)地方啟動(dòng)後臺(tái)線程。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>AngularJS - SignalR - ServiceDashboard</title> <link rel="stylesheet" href="Content/bootstrap.min.css" /> <link rel="stylesheet" href="Content/epoch.min.css" /> <??> <??> <??> <??> <??> <??> <??> <??> <??> <??> <??> <??> </head> <body ng-app="angularServiceDashboard"> </body> </html>
啟動(dòng)後臺(tái)線程的兩行代碼（正如您猜到的那樣）是我們實(shí)例化PerformanceEngine和調(diào)用OnPerformanceMonitor()的地方。
現(xiàn)在，我知道您可能認(rèn)為我正在隨機(jī)化來自服務(wù)器的數(shù)據(jù)，這是事實(shí)。但是要推送真實(shí)指標(biāo)，只需使用System.Diagnostics庫和Windows提供的PerformanceCounter即可。我試圖保持簡單，但這就是代碼的樣子：
'use strict';
var app = angular.module('angularServiceDashboard', ['ng.epoch','n3-pie-chart']);
app.value('backendServerUrl', 'http://sitepointsignal.cloudapp.net/');
結(jié)論
我們已經(jīng)了解瞭如何通過Angular使用SignalR數(shù)據(jù)，並且我們已經(jīng)將該數(shù)據(jù)連接到Angular端的實(shí)時(shí)圖錶框架。
此處顯示客戶端最終版本的演示，您可以從此處獲取代碼。
此處顯示服務(wù)器最終版本的演示，您可以從此處獲取代碼。
我希望您喜歡這個(gè)演練。如果您嘗試過類似的方法，請(qǐng)?jiān)谠u(píng)論中告訴我們！
使用AngularJS構(gòu)建實(shí)時(shí)SignalR監(jiān)控面板的常見問題解答 (FAQ)
如何在AngularJS中設(shè)置SignalR？
在AngularJS中設(shè)置SignalR涉及幾個(gè)步驟。首先，您需要使用NuGet或npm安裝SignalR庫。安裝後，您可以在服務(wù)器上創(chuàng)建一個(gè)新的SignalR中心。此中心將負(fù)責(zé)發(fā)送和接收消息。在客戶端，您需要引用SignalR JavaScript庫並創(chuàng)建到您的中心的連接。然後，您可以啟動(dòng)連接並定義處理傳入消息的函數(shù)。
如何處理SignalR中的連接錯(cuò)誤？
SignalR提供了一種處理連接錯(cuò)誤的內(nèi)置機(jī)制。您可以使用中心連接上的.error()函數(shù)來定義一個(gè)回調(diào)函數(shù)，該函數(shù)將在發(fā)生錯(cuò)誤時(shí)調(diào)用。此回調(diào)函數(shù)可以向用戶顯示錯(cuò)誤消息或嘗試重新連接到中心。
我可以將SignalR與其他JavaScript框架一起使用嗎？
是的，SignalR可以與任何支持AJAX和WebSockets的JavaScript框架一起使用。這包括流行的框架，如React、Vue.js和Angular。您只需要將SignalR JavaScript庫包含在您的項(xiàng)目中並像在任何其他JavaScript應(yīng)用程序中一樣創(chuàng)建一個(gè)中心連接即可。
如何使用SignalR將消息從服務(wù)器發(fā)送到客戶端？
要將消息從服務(wù)器發(fā)送到客戶端，您可以使用中心的Clients屬性。此屬性提供方法，用於將消息發(fā)送到所有連接的客戶端、特定客戶端或客戶端組。您可以從服務(wù)器代碼的任何部分調(diào)用這些方法，以將實(shí)時(shí)更新發(fā)送到您的客戶端。
如何保護(hù)我的SignalR應(yīng)用程序？
SignalR提供了幾個(gè)保護(hù)應(yīng)用程序的選項(xiàng)。您可以使用[Authorize]屬性來限制對(duì)您的中心和中心方法的訪問。您還可以使用Global.asax文件中的MapHubs()方法為您的中心指定自定義授權(quán)器。此外，您可以使用SSL來加密SignalR流量並防止竊聽。
如何處理SignalR中的斷開連接？
SignalR會(huì)自動(dòng)處理斷開連接並嘗試重新連接。但是，您也可以使用中心連接上的.disconnected()函數(shù)手動(dòng)處理斷開連接。此函數(shù)允許您定義一個(gè)回調(diào)函數(shù)，該函數(shù)將在連接丟失時(shí)調(diào)用。
我可以在非.NET服務(wù)器上使用SignalR嗎？
SignalR是一個(gè).NET庫，旨在與.NET服務(wù)器一起使用。但是，可以通過使用兼容的WebSocket庫在非.NET服務(wù)器上使用SignalR。您需要在服務(wù)器上實(shí)現(xiàn)SignalR協(xié)議並自行處理連接和消息傳遞邏輯。
如何測試我的SignalR應(yīng)用程序？
您可以使用Postman或Fiddler等工具向您的中心發(fā)送HTTP請(qǐng)求並驗(yàn)證響應(yīng)來測試您的SignalR應(yīng)用程序。您還可以為您的中心方法和客戶端函數(shù)編寫單元測試。
我可以在移動(dòng)應(yīng)用程序中使用SignalR嗎？
是的，您可以在移動(dòng)應(yīng)用程序中使用SignalR。 SignalR JavaScript庫可以在使用Cordova或Ionic構(gòu)建的混合移動(dòng)應(yīng)用程序中使用。對(duì)於原生移動(dòng)應(yīng)用程序，iOS和Android都提供了SignalR客戶端。
如何擴(kuò)展我的SignalR應(yīng)用程序？
SignalR提供了幾個(gè)擴(kuò)展應(yīng)用程序的選項(xiàng)。您可以使用Azure SignalR服務(wù)，這是一個(gè)完全託管的服務(wù)，它為您處理所有SignalR連接。您還可以使用後端，這是一個(gè)軟件層，用於在多個(gè)服務(wù)器之間分發(fā)消息。
以上是用AngularJS構(gòu)建實(shí)時(shí)信號(hào)儀表板的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣圖片
Undresser.AI Undress
人工智慧驅(qū)動(dòng)的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費(fèi)的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費(fèi)的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強(qiáng)大的PHP整合開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級(jí)程式碼編輯軟體(SublimeText3)
熱門話題
如何在JS中與日期和時(shí)間合作？
Jul 01, 2025 am 01:27 AM
JavaScript中的日期和時(shí)間處理需注意以下幾點(diǎn)：1.創(chuàng)建Date對(duì)像有多種方式，推薦使用ISO格式字符串以保證兼容性；2.獲取和設(shè)置時(shí)間信息可用get和set方法，注意月份從0開始；3.手動(dòng)格式化日期需拼接字符串，也可使用第三方庫；4.處理時(shí)區(qū)問題建議使用支持時(shí)區(qū)的庫，如Luxon。掌握這些要點(diǎn)能有效避免常見錯(cuò)誤。
為什麼要將標(biāo)籤放在的底部？
Jul 02, 2025 am 01:22 AM
PlacingtagsatthebottomofablogpostorwebpageservespracticalpurposesforSEO,userexperience,anddesign.1.IthelpswithSEObyallowingsearchenginestoaccesskeyword-relevanttagswithoutclutteringthemaincontent.2.Itimprovesuserexperiencebykeepingthefocusonthearticl
什麼是在DOM中冒泡和捕獲的事件？
Jul 02, 2025 am 01:19 AM
事件捕獲和冒泡是DOM中事件傳播的兩個(gè)階段，捕獲是從頂層向下到目標(biāo)元素，冒泡是從目標(biāo)元素向上傳播到頂層。 1.事件捕獲通過addEventListener的useCapture參數(shù)設(shè)為true實(shí)現(xiàn)；2.事件冒泡是默認(rèn)行為，useCapture設(shè)為false或省略；3.可使用event.stopPropagation()阻止事件傳播；4.冒泡支持事件委託，提高動(dòng)態(tài)內(nèi)容處理效率；5.捕獲可用於提前攔截事件，如日誌記錄或錯(cuò)誤處理。了解這兩個(gè)階段有助於精確控制JavaScript響應(yīng)用戶操作的時(shí)機(jī)和方式。
如何減少JavaScript應(yīng)用程序的有效載荷大小？
Jun 26, 2025 am 12:54 AM
如果JavaScript應(yīng)用加載慢、性能差，問題往往出在payload太大，解決方法包括：1.使用代碼拆分（CodeSplitting），通過React.lazy()或構(gòu)建工具將大bundle拆分為多個(gè)小文件，按需加載以減少首次下載量；2.移除未使用的代碼（TreeShaking），利用ES6模塊機(jī)制清除“死代碼”，確保引入的庫支持該特性；3.壓縮和合併資源文件，啟用Gzip/Brotli和Terser壓縮JS，合理合併文件並優(yōu)化靜態(tài)資源；4.替換重型依賴，選用輕量級(jí)庫如day.js、fetch
JavaScript模塊上的確定JS綜述：ES模塊與COMPORJS
Jul 02, 2025 am 01:28 AM
ES模塊和CommonJS的主要區(qū)別在於加載方式和使用場景。 1.CommonJS是同步加載，適用於Node.js服務(wù)器端環(huán)境；2.ES模塊是異步加載，適用於瀏覽器等網(wǎng)絡(luò)環(huán)境；3.語法上，ES模塊使用import/export，且必須位於頂層作用域，而CommonJS使用require/module.exports，可在運(yùn)行時(shí)動(dòng)態(tài)調(diào)用；4.CommonJS廣泛用於舊版Node.js及依賴它的庫如Express，ES模塊則適用於現(xiàn)代前端框架和Node.jsv14 ；5.雖然可混合使用，但容易引發(fā)問題
如何在node.js中提出HTTP請(qǐng)求？
Jul 13, 2025 am 02:18 AM
在Node.js中發(fā)起HTTP請(qǐng)求有三種常用方式：使用內(nèi)置模塊、axios和node-fetch。 1.使用內(nèi)置的http/https模塊無需依賴，適合基礎(chǔ)場景，但需手動(dòng)處理數(shù)據(jù)拼接和錯(cuò)誤監(jiān)聽，例如用https.get()獲取數(shù)據(jù)或通過.write()發(fā)送POST請(qǐng)求；2.axios是基於Promise的第三方庫，語法簡潔且功能強(qiáng)大，支持async/await、自動(dòng)JSON轉(zhuǎn)換、攔截器等，推薦用於簡化異步請(qǐng)求操作；3.node-fetch提供類似瀏覽器fetch的風(fēng)格，基於Promise且語法簡單
編寫清潔和可維護(hù)的JavaScript代碼的最佳實(shí)踐是什麼？
Jun 23, 2025 am 12:35 AM
要寫出乾淨(jìng)、可維護(hù)的JavaScript代碼，應(yīng)遵循以下四點(diǎn)：1.使用清晰一致的命名規(guī)範(fàn)，變量名用名詞如count，函數(shù)名用動(dòng)詞開頭如fetchData()，類名用PascalCase如UserProfile；2.避免過長函數(shù)和副作用，每個(gè)函數(shù)只做一件事，如將更新用戶信息拆分為formatUser、saveUser和renderUser；3.合理使用模塊化和組件化，如在React中將頁面拆分為UserProfile、UserStats等小組件；4.寫註釋和文檔時(shí)點(diǎn)到為止，重點(diǎn)說明關(guān)鍵邏輯、算法選
垃圾收集如何在JavaScript中起作用？
Jul 04, 2025 am 12:42 AM
JavaScript的垃圾回收機(jī)制通過標(biāo)記-清除算法自動(dòng)管理內(nèi)存，以減少內(nèi)存洩漏風(fēng)險(xiǎn)。引擎從根對(duì)像出發(fā)遍歷並標(biāo)記活躍對(duì)象，未被標(biāo)記的則被視為垃圾並被清除。例如，當(dāng)對(duì)像不再被引用（如將變量設(shè)為null），它將在下一輪迴收中被釋放。常見的內(nèi)存洩漏原因包括：①未清除的定時(shí)器或事件監(jiān)聽器；②閉包中對(duì)外部變量的引用；③全局變量持續(xù)持有大量數(shù)據(jù)。 V8引擎通過分代回收、增量標(biāo)記、並行/並發(fā)回收等策略優(yōu)化回收效率，降低主線程阻塞時(shí)間。開發(fā)時(shí)應(yīng)避免不必要的全局引用、及時(shí)解除對(duì)象關(guān)聯(lián)，以提升性能與穩(wěn)定性。
