Web 開發相關概念

来源:https://www.cnblogs.com/risejl/archive/2022/09/17/16701895.html
-Advertisement-
Play Games

移動端中的元素內容超出時，對容器設置overflow-x: auto就可以通過手勢水平移動。但是 PC 端只能通過滑鼠滾輪上下滑動，而不能水平移動。 只需要給元素添加一個監聽滑鼠滾輪事件，上下滑動時修改其 scrollLeft 屬性值就可以實現。直接貼上代碼： <div class="horizon ...


Web 開發相關概念

前端 後端 全棧

  • 前端 Front-end：網站中用戶看到的部分
    • HTML CSS JavaScript
    • 庫和框架
    • 設計工具
  • 後端 Back-end：網站中用戶看不到的部分
    • 編程語言
    • 框架
    • 資料庫
    • API
  • 全棧 Full-stack：具備前端和後端的能力
    • 計劃
    • 架構
    • 設計
    • 開發
    • 測試
    • 部署
    • 維護

Web 相關概念

網路和互聯網

網路(network)是指不少於 2 台以上的設備通過有線或無線的方式互相連接。

當網路中的設備數量增多時，需要使用網路交換器（switch）來作為中介。交換器可以連接其他交換器，也可以連接終端設備，否則網路中的終端設備需要兩兩連接，提高了網路的複雜性。

互聯網則是全球的網路互相連接，也被稱為“內部連接網路（interconnected network）”。

互聯網採用 B/S 或者 C/S 架構，由瀏覽器或客戶端訪問互聯網，互聯網訪問伺服器並返回請求。

Web 伺服器

伺服器(server)是指運行應用程式或服務的電腦，它提供給客戶端某種服務。

數據中心(data center)通常包含大量連接到互聯網的，運行不同服務的伺服器。數據中心中有不同的系統保證其運行，連接和冷卻。

許多網站使用離用戶最近的數據中心來保證用戶可以快速訪問網站內容。

根據伺服器的功能不同，其硬體也有所不同，例如存儲大量圖片的伺服器需要大量的硬碟，而執行大量運算的伺服器需要更快的處理器。

Web 伺服器（Web Server）存儲和分發（deliver）用戶請求的網站內容，例如文本，圖片，視頻和應用數據。

Web 伺服器和瀏覽器（客戶端）之間通過 HTTP 通訊，大多數網頁由 HTML 編碼，內容可以是靜態的或者動態的。大多數 Web 伺服器支持服務端腳本語言來編碼業務邏輯進行通訊。Web 伺服器處理請求和響應。

Web 伺服器是伺服器的一種，有以下功能：

  • 網站托管（Web hosting）
  • 內容管理系統（CMS）
  • 資料庫（Databases）
  • 控制面板（Control Panel）
  • 電子郵件（Email）

Web 伺服器使用相同的軟硬體托管一個或多個網站，這被稱為虛擬托管（virtual hosting）。Web 伺服器會限制不同用戶的響應速度，防止某一用戶占有資源

網站,網頁和網路應用程式

網站（website）是由一系列網頁（web pages）組成的，網頁之間互相連接。

網頁是一種可編輯的文本文檔，使用 HTML，CSS，JavaScript 三種技術完成對網頁的編寫。

網站和網路應用程式（web application）之間的界限並不清晰，兩個概念經常混用。它們之間的差別是：交互性的強弱。網站更多時候展示內容，Web App 的交互性更強。

當 Web 伺服器發送完整的網頁到設備時，該設備會根據代碼從上到下一行一行解釋為構件塊，也就是用戶看到的內容，這個過程稱為“頁面渲染（page rendering）”。

瀏覽器

瀏覽器是一種使用戶瀏覽萬維網（world wide web）的軟體，它發送請求給 Web 伺服器並接受響應，然後渲染網頁給用戶。

瀏覽器的地址欄通過輸入 URL 地址來定位網頁和網站，URL 地址通常包含協議（protocol），功能變數名稱（domain name）和文件地址（file path）。

瀏覽器和伺服器之間的通信協議是 HTTP（Hyper Transfer Text Protocol / 超文本傳輸協議），發送時使用 HTTP request，返回時使用 HTTP response。

瀏覽器使用 cookies 保存用戶信息，其可以在用戶下次訪問時識別身份（記住用戶名和密碼）。還有其他 cookies 用於記錄用戶喜好、瀏覽模式（pattern）等。還有些被稱為第三方（third-party） cookies，其可以跨站追蹤並收集用戶信息並把信息賣給其他公司。

瀏覽器引擎

瀏覽器引擎（browser engine）也被稱為排版（layout）引擎、渲染（rendering）引擎，是所有瀏覽器的核心軟體組件。其主要任務是把 HTML 和其他文件轉化為用戶設備上的可交互和可視化內容。

雲計算

雲計算（cloud-computing）是指通過付費在互聯網上獲得所需的 IT 資源。用戶可以從雲服務商獲得計算資源、存儲資源和資料庫資源等，而不用自行建造和維護實體的數據中心。

網站托管

網站托管指的是租用某公司或服務商提供的伺服器來托管用戶的網站，因此用戶不用自己去構建伺服器或數據中心。

幾種不同的托管服務：

  • Shared hosting 共用托管

    • 與其他的帳號 / 網站共同分享一個 Web 伺服器，包括處理器，存儲和帶寬資源，這可能使得你的應用速度變慢。 這種方式適合小網站，低成本的沙盒環境以及有限制的免費內容（廣告等）。

  • Virtual private hosting 虛擬專用托管

    • 這種方式也被稱為 VPS hosting，VPS 是一個運行在物理伺服器上的虛擬伺服器，帶有特定的 CPU，存儲和帶寬。每個物理伺服器下有多個 VPS，每個 VPS 的資源是固定的，因此 VPS 之間互不幹擾。這種托管方式比共用托管更貴，網站的規模也更大。

  • Dedicated hosting 專用托管

    • 這種方式是指所有的硬體資源服務於一個網站。比 VPS 更貴。

  • Cloud hosting 雲托管

    • 在雲托管中，網站運行在由物理伺服器和虛擬伺服器組成的雲環境中，如果某一種伺服器癱瘓，那麼其他伺服器可以保證網站正常運行。這種方式的好處是可以使用任意多的資源不受硬體的限制，費用也更貴，但是網站的規模更大。

動態和靜態內容

靜態內容指的是返回給客戶端的內容是其存儲在服務端的形式，例如：圖片和視頻。

動態內容是客戶端發出 HTTP 請求到 Web 伺服器再到應用程式伺服器後生成的內容。通常 Web 伺服器會調用應用程式伺服器，也就是後端，然後返回給客戶端。

應用程式伺服器 Application Server 的處理比 Web 伺服器更加複雜，一般包括：

  • 運行應用程式邏輯
  • 和資料庫進行交互
  • 檢查許可權

如果每次請求都要應用伺服器做出響應，網站的性能就會比較差。Web 伺服器中通常有緩存（cache）來解決這一問題。當客戶端發出請求後，Web 伺服器會首先檢查請求內容是否在緩存中，如果在就直接返回，如果不在就去應用程式伺服器生成，返回給客戶端並保存一份拷貝到 Web 伺服器。經過一段時間的請求後，Web 伺服器就會保存和更新一定的緩存。這個功能也被稱為“web 加速（acceleration）”。

單頁應用程式

在 JavaScript 框架出現之前，網站幾乎都是多頁應用程式。但是 Web 伺服器一次性響應返回整個頁面會降低網站的性能。如果應用很複雜，網路連接又慢，用戶的體驗會非常差。

單頁應用程式（Single Page Application / SPA）並不是只有一個網頁，而是伺服器僅發送給瀏覽器一個 HTML 頁面，其他的內容會根據用戶的使用來動態更新。

SPA 使得用戶無需下載新的網頁，而是根據用戶操作重寫當前網頁。

SPA 有兩種提供代碼和資源的服務：

1. bundling 打包：伺服器把所有需要的 HTML，CSS 和 JS 文件發送到瀏覽器。也就是把所有視圖都發送給瀏覽器
2. lazy-loading 懶載入 / code splitting 代碼分割：伺服器僅發送剛好滿足需要的 HTML，CSS 和 JS 資源，其他資源當需要時再下載。也就是發送必要的視圖給瀏覽器

傳統的 Web APP 會返回整個頁面，然後瀏覽器渲染；SPA 會把頁面視為視圖 View 和模板 Template，然後發送 JSON 到瀏覽器，瀏覽器動態載入 JSON 的內容。

Internet 的核心技術

協議

IP

當在互聯網上傳輸數據時，需要 IP 地址作為傳輸的目的地。

IP （Internet Protocol）也叫網際協議，有 IPv4 和 IPv6 兩個常用的版本。其中 IPv4 使用 "." 來分割數字，總共有 4 個組成部分，例如：192.0.2.235；IPv6 使用 ":" 來分割數字，總共有 8 個組成部分，例如：4527:0a00:1567:0200:ff00:0042:8329。

互聯網上傳輸的數據是被稱為 IP 數據包（packet / data gram 數據報）的一系列信息。IP 數據包由以下組成：

  • IP Header 報頭：由目的地址和源地址以及一些附加信息組成
  • IP Data 數據：具體要傳輸的數據

IP 數據包在傳送時可能出現以下情況：

  • 數據包不按預定順序到達
  • 數據包傳輸過程中受損
  • 數據包傳輸過程中丟失

為解決上述問題，IP 數據包中還包含其他協議的信息，例如：TCP（Transmission Control Protocol / 傳輸控制協議）和 UDP（User Datagram Protocol /用戶數據報協議）。

TCP 可以解決上述三種問題，但是會導致一定的傳輸延遲，並且必須用於按順序到達的數據，例如文本，圖片。

UDP 只能解決數據包傳輸受損問題，並且數據報可能不按順序到達或者根本不能到達，用於可以承受一定損失的數據，例如流媒體（視頻）和錄音。

HTTP

HTTPS 是比 HTTP 更安全的協議，會使用密碼（secret code）對數據進行加密。

HTTP 是用於瀏覽器和伺服器傳輸之間的協議，用於傳輸 HTML 文檔，CSS 樣式，圖片，文件等。

HTTP 是基於請求-響應的。

HTTP 請求

請求行

所有的 HTTP 請求以請求行（request line）開始。請求行由 HTTP 方法，請求資源和 HTTP 協議版本組成。

```http
GET / HTTP/1.1
```

HTTP 請求由請求行，請求頭，請求體組成。

```http
GET / HTTP/1.1
Host: developer.mozilla.org
Accept-Lanuage: en
```
  • 方法描述了客戶端想要訪問資源的方式，常用的有 4 種：
    • GET：獲取 Web Server 的數據
    • POST：發送數據給 Web Server
    • PUT：更新 Web Server 數據
    • DELETE：刪除 Web Server 數據
  • 路徑描述了資源被存放在伺服器的位置
  • 最常用的版本是 1.1 和 2.0
  • 請求頭包含了請求的附加信息。
請求頭

請求頭是大小寫敏感的，以 `:` 結尾，並帶有一個值.

```http
Host: example.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
Accept: */*
Accept-Language: en​
Content-type: text/json
```
  • Host 頭：表示伺服器的主機和請求的來源
  • User-Agent 頭：告知 Web 伺服器請求發出方所在的應用程式，通常包括操作系統，版本和瀏覽器
  • Accept 頭：告知 Web 伺服器，客戶端接受資源的內容類型
  • Accept-Language 頭：表示客戶端偏好的語言
  • Content-type 頭：表示發送的 request body (請求體)中的內容類型
請求體

HTTP 請求選擇性地包含一個請求體，請求體通常使用 POST 或 PUT 方法傳送數據。

```http
POST /users HTTP/1.1
Host: example.com
{"key1": "value1"
    "key2": "value2"
    "array1": ["value3", "value4"]
}
```

```http
PUT /users/1 HTTP/1.1
Host: example.com
Content-type: text/json

{"key1": "value1"}
```

HTTP 響應

當 Web 伺服器完成 HTTP 請求的處理後，會發送 HTTP 響應。

狀態行

HTTP 響應以狀態行（status line）開始，指示處理成功與否。狀態行以 HTTP 版本，狀態碼和原因短語（reason phrase）組成。原因短語是狀態碼的文本表示。

```http
HTTP/1.1 200 OK
Date: sat, 01 Jan 2022 22:04:01 GMT
Server: Apache/2.4.52(CentOS) mod_ssl/2.8.31 OpenSSL/1.1.1m
Last-Modified: Mon, 01 Nov 2021 09:01:13 GMT
Content-Length: 50
Content-Type: text/html

<html>
<body>
</body>
</html>
```

響應頭下有信息體（message body），其包含了要返回的內容。

狀態碼

狀態碼（Status codes）和狀態信息（Status message）在響應頭中，表示了對請求的響應狀態，狀態碼取值 100 - 599。狀態碼的首位顯示其所屬的類別。

狀態碼共有 5 類：

1. Informational 消息 100-199：通常包含來自伺服器的暫時（Provisonal / Interim）響應，常見的是 

   1. 100 CONTINUE，表示伺服器已經接收了請求頭，並且應該繼續發送請求體。
   2. 101 Switching Protocols：客戶端請求服務端更換協議，服務端也同意了。

2. Successful 成功 200-299：表示請求已經成功被伺服器處理，常見的是 

   1. 200 OK：
      1. GET 對應找到目標
      2. POST 對應成功發送到伺服器
      3. PUT 對應成功發送到伺服器
      4. DELETE 對應成功刪除
   2. 201 Created：伺服器成功處理請求並且資源已經被創建
   3. 202 Accepted：伺服器接收了請求處理，但是處理還沒有完成
   4. 204 No Content：伺服器成功處理請求，但是沒有返回任何內容

3. Redirection 重定向 300-399：表示客戶端請求的資源被移動，常見的是

   1. 301 MOVED PERMANENTLY 永久移動：當前和未來的請求應該轉發到返回的地址
   2. 302 FOUND 找到：當前請求應該轉發到返回的地址

   這類狀態碼的響應頭中會包含資源的地址。

4. Client error 客戶端錯誤 400-499：表示請求的語法有錯或者內容不能被伺服器處理，常見的有：

   1. 400 Bad Request：客戶端或者瀏覽器提交了錯誤的數據或者數據太大，伺服器不能處理請求
   2. 401 Unauthorized：用戶必須登錄帳號
   3. 403 Forbidden：請求有效，但是伺服器拒絕處理。這通常是因為用戶的許可權不夠
   4. 404 Not Found：在 Web 伺服器上找不到請求資源
   5. 405 Method Not Allowed：Web 伺服器不支持使用的 HTTP 方法

5. Server error 服務端錯誤 500-599：表示伺服器處理請求的過程中出錯，常見的是

   1. 500 Internal Server Error 內部服務錯誤：一種常見的伺服器錯誤，處理請求的過程中出錯或者出現未預料到的錯誤
   2. 502 Bad Gateway：Web 伺服器收到來自應用程式伺服器的無效（invalid）請求
   3. 503 Service Unavailable：Web 伺服器不能處理請求

響應頭

和請求頭類似，響應頭的選擇也很多，常見的：

```http
Date: Fri, 11 Feb 2022 15:00:00 GMT+2​
Server: Apache/2.2.14 (Linux)​
Content-Length: 84​
Content-Type: text/html​
```

* Date 頭：表示 HTTP 響應生成的時間和日期
* Server 頭：描述生成響應使用的 Web 伺服器軟體
* Content-Length 頭：描述響應的長度
* Content-Type 頭：描述了返回資源的媒體類型

響應體

位於響應頭之下，是響應的主體內容。可能包含 HTML，圖片，視頻和其他媒體。

```http
HTTP/1.1 200 OK​
Date: Fri, 11 Feb 2022 15:00:00 GMT+2​
Server: Apache/2.2.14 (Linux)​
Content-Length: 84​
Content-Type: text/html​

<html>
  <head><title>Test</title></head>
  <body>Test HTML page.</body>
</html>
```

DHCP

當電腦連接到一個網路時，動態主機配置協議（Dynamic Host Configuration Protocol）分配給電腦一個 IP 地址。你的電腦通過用戶數據報協議(UDP)使用協議與一種稱為 DHCP 伺服器的伺服器進行通信。這個伺服器追蹤網路上的電腦和它們的 IP 地址。它將為你的電腦分配一個 IP 地址並通過協議做出響應，讓它知道要使用哪個 IP 地址。當你的電腦有了 IP 地址後就可以和其他電腦通信了。

DNS

當你通過瀏覽器訪問網站時，電腦需要知道該網站的 IP 地址。功能變數名稱系統協議（Domain Name System Protocol）提供該功能。電腦隨後檢查與該功能變數名稱相聯繫的 DNS 伺服器然後返回正確的 IP 地址。

IMAP

你的設備需要下載郵件或者管理伺服器郵箱中存儲的郵件，網際網路消息訪問協議（Internet Message Access Protocol）提供該功能。

SMTP

簡單郵件傳輸協議（Simple Mail Transfer Protocol）用於發送郵件。該協議使得郵件客戶端通過一個 SMTP 伺服器發送提交的郵件。SMTP 也可以用於接收郵件，但是 IMAP 用得更多。

POP

郵局協議（Post Office Protocol）是下載郵件到郵件客戶端的舊版本協議。POP 和 IMAP 的不同在於：一旦郵件在本地設備下載成功，POP 會立刻刪除伺服器上的郵件。儘管該協議不再常用，但開發者會用 POP 實現自動化的郵件服務，因為比 IMAP 更直接。

FTP

如何實現本地電腦和伺服器的文件傳輸？文件傳輸協議（File Transfer Protocol）可以列出，發送，接收和刪除伺服器上的文件。這需要在伺服器上運行 FTP 伺服器併在本機使用 FTP 客戶端。

SSH

如何遠程登錄並和伺服器交互？使用安全外殼協議（Secure Shell Protocol）可以做到這一點。使用 SSH 客戶端連接到伺服器上的 SSH 伺服器來對遠程的電腦進行操作。所有通過 SSH 發送的數據都是加密的，第三方不能理解傳輸的數據。

SFTP

SSH 文件傳輸協議 / 安全外殼的文件傳輸協議用於通過 SSH 協議傳輸文件，這保證了傳輸的安全性。大多數 FTP 客戶端都支持 SFTP 協議。

HTML CSS JavaScript

  • HTML: 網頁的架構
  • CSS: 網頁的樣式
  • JavaScript: 網頁的動態交互

文檔對象模型

文檔對象模型（Document Object Model / DOM）是針對 HTML 和 XML 的編程 API，它定義了文檔的邏輯結構和訪問修改文檔的方式，使得 JavaScript 可以操縱 HTML 元素。

DOM 是一種樹形結構模型，其作為 JS 對象保存在瀏覽器的記憶體中。瀏覽器會為每個已下載的網頁生成 DOM。

編輯本地網頁的 DOM 並不會影響保存在伺服器的文檔。

開發者工具

每個瀏覽器都內置了開發者工具（developer tools），常用的幾個功能：

  • Console 控制台：可以運行 JavaScript 代碼，可以給出日誌和錯誤信息
  • Sources 資源：顯示當前網頁的所有內容
  • Network 網路：顯示 HTTP 請求和響應的時間線
  • Performance 性能：測試網頁的性能
  • Memory 存儲：顯示使用存儲資源最多的代碼段
  • Elements 元素：可以看到 HTML 和 CSS 代碼

框架和庫

框架（framework）和庫（libraries）對關鍵問題完成封裝，使得開發速度變得更快。

框架和庫可以是開源的（open-source）也可以是專有的（proprietary）。

這兩個詞有時也是混用的，其區別是：庫是可重用（re-usable）的代碼，用於解決某個特定問題。而框架則給了開發者一種構建的結構。

一個應用程式通常使用一個框架，一個框架通常使用多個庫。一個應用程式使用了一個框架的同時還可以使用其他庫。

框架比庫要更加 opinionated，自由度更小。

框架-應用-庫流：框架調用應用程式，應用程式調用庫，框架包含庫。

框架和庫在使用前需要引入，否則應用會報錯，所以它們也被稱為“依賴（dependency）”。

框架的優點：

  • 節省時間
  • 結構化
  • 最佳實踐

框架的缺點：

  • 結構限制
  • 相容性

庫的優點：

  • 可以替換為更好的庫

庫的缺點：

  • 需要挑選一系列庫
  • 相容性

API 和服務

API（Application programming interface / 應用程式介面）是一種服務，應用程式，介面，它以簡單的語法提供了高級功能。

API 是一系列函數和序列用於訪問操作系統，應用程式或服務的特征或者數據。API 經常作為組建和應用之間的橋梁。所以 API 也被稱為網關（Gateway）或者中間件（Middleware）。

對於 Web 開發，常見的 API：

1. 瀏覽器 API 或 Web API：內置於瀏覽器，拓展了瀏覽器的功能，常見的有：
  • DOM API：把 HTML 文檔流轉化為樹形的 JavaScript 對象。
  • Geolocation API 地理位置 API：獲得瀏覽器當前所在的地理位置坐標
  • Fetch API：獲取數據
  • Canvas API：做 Canvas 圖像
  • History API：保存歷史數據
  • Web Storage API：客戶端存儲
2. REST API 或 Restful API：給 Web 和移動應用提供數據。

REST 是用於構建高效 API 的一系列原則。這類 API 經常用於發送和取得資料庫的數據。

3. 基於感測器的 API：IOT 應用，感測器之間使用 API 通訊，並且可以追蹤和響應物理數據。

API web servers 提供了取得資料庫數據的能力，包括 GET，POST，PUT 和 DELETE 幾種方法。這些 API 使用斷點（endpoints）表示不同的資源如何被訪問。斷點包含在 URL 中，一旦斷點被激活，API 就會產生響應。常見的兩種響應是：

1. 完整的網頁 2. JavaScript Object Notation（JSON）

IDE

IDE（Integrated Development Environment / 集成開發環境）類似文本編輯器，可以編寫代碼。IDE 通常支持多種編程語言。

IDE 通常有擴展，語法高亮，自動補全，錯誤提示，協作，重構等功能。

依賴和包管理器

框架和庫有時被稱為依賴。

依賴可能會形成樹形結構，被稱為依賴樹。

包管理器（package manager）用來自動下載和安裝依賴，也可以發佈自己的包。包管理器可以保證你的依賴版本和團隊中其他人所使用的是同一版本。

最常用的包管理器是 NPM（Node Package Manager）。

打包工具

打包工具（bundler）把所有的依賴包裝為單一的文件，也可以把過大的依賴分割為多個包。

常用的打包工具是 Gulp 和 Webpack。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 1. 文件與I/O
    內核是如何處理系統調用 每個系統調用被賦予了一個系統調用號 在i386平臺上，執行一個系統調用是通過int 0X80指令完成的 eax存放系統的調用號 ebx，ecx，edx，esi，edi存儲系統調用的參數，對於超過5個參數的系統調用，用一個寄存器指向用戶空間存儲所有的系統調用的參數 錯誤的處理 ...
  • Oracle 刪除大量表記錄操作總結
    By：授客 QQ：1033553122 刪除表數據操作 清空所有表記錄 TRUNCATE TABLE your_table_name; 或者批量刪除滿足條件的表記錄 BEGIN LOOP DELETE FROM your_table_name WHERE rownum <= 50000; EXIT ...
  • SQL Server -- 解決存儲過程傳入參數作為sql語句條件值時，執行阻塞問題
    成本核算程式執行某個存儲過程一直阻塞，排查發現類似以下語句阻塞： select tbl1.product_id,sum(isnull(tbl1.qty,0) * isnull(tbl2.unit_other_cost,0)) as other_cost from tbl1.p_id=@pId and ...
  • MySQL日誌管理之通用日誌和慢查詢日誌
    MySQL的通用日誌： 用來記錄對資料庫的通用操作，包括錯誤的sql語句等信息。 通用日誌可以保存在：file（預設值）或 table（mysql.general_log表） mysql通用日誌的設置： general_log=ON|OFF 是否啟用通用日誌 general_log_file=HOS ...
  • 2021年3月-第03階段-前端基礎-JavaScript基礎語法-JavaScript基礎第01天
    1 - 編程語言 1.1 編程 編程： 就是讓電腦為解決某個問題而使用某種程式設計語言編寫程式代碼，並最終得到結果的過程。 電腦程式： 就是電腦所執行的一系列的指令集合，而程式全部都是用我們所掌握的語言來編寫的，所以人們要控制電腦一定要通過電腦語言向電腦發出命令。 1.2 電腦語言 計 ...
  • 2021年3月-第02階段-前端基礎-移動WEB開發-移動WEB開發_rem佈局
    移動web開發之rem佈局 rem基礎 rem單位 rem (root em)是一個相對單位，類似於em，em是父元素字體大小。 不同的是rem的基準是相對於html元素的字體大小。 比如，根元素（html）設置font-size=12px; 非根元素設置width:2rem; 則換成px表示就是2 ...
  • 從零打造“乞丐版” React（一）——從命令式編程到聲明式編程
    這個系列的目的是通過使用 JS 實現“乞丐版”的 React，讓讀者瞭解 React 的基本工作原理，體會 React 帶來的構建應用的優勢 1 HTML 構建靜態頁面 使用 HTML 和 CSS，我們很容易可以構建出上圖中的頁面 <!DOCTYPE html> <html lang="en"> < ...
  • [JS]原型的基本概念
    原型(prototype)是函數特有的屬性。只要創建了一個函數，這個函數就會自動創建一個prototype屬性（顯式原型），並指向該函數的原型對象。原型對象上都有一個constructor屬性，指向prototype屬性所在的函數(即函數本身)。而對於每一個構造函數創建出的實例對象，內部都會有一個[... ...
一周排行
    -Advertisement-
    Play Games
  • C#自增運算符詳解：++i與i++的區別及應用場景
    概述：在C#中，++i和i++都是自增運算符，其中++i先增加值再返回，而i++先返回值再增加。應用場景根據需求選擇，首碼適合先增後用，尾碼適合先用後增。詳細示例提供清晰的代碼演示這兩者的操作時機和實際應用。 在C#中，++i 和 i++ 都是自增運算符，但它們在操作上有細微的差異，主要體現在操作的 ...
  • Taurus.MVC 性能壓力測試（ap 壓測 和 linux 下wrk 壓測）：.NET 版本
    上次發佈了：Taurus.MVC 性能壓力測試（ap 壓測 和 linux 下wrk 壓測）：.NET Core 版本，今天計劃準備壓測一下 .NET 版本，來測試並記錄一下 Taurus.MVC 框架在 .NET 版本的性能，以便後續持續優化改進。 為了方便對比，本文章的電腦環境和測試思路，儘量和... ...
  • 一文讀懂.NET WebAPI中FromRoute、FromQuery、FromBody的關鍵角色與用法
    .NET WebAPI作為一種構建RESTful服務的強大工具，為開發者提供了便捷的方式來定義、處理HTTP請求並返迴響應。在設計API介面時，正確地接收和解析客戶端發送的數據至關重要。.NET WebAPI提供了一系列特性，如[FromRoute]、[FromQuery]和[FromBody]，用 ...
  • WPF/C#實現圖像濾鏡優化方案：打造炫目視覺體驗！
    原因：我之所以想做這個項目，是因為在之前查找關於C#/WPF相關資料時，我發現講解圖像濾鏡的資源非常稀缺。此外，我註意到許多現有的開源庫主要基於CPU進行圖像渲染。這種方式在處理大量圖像時，會導致CPU的渲染負擔過重。因此，我將在下文中介紹如何通過GPU渲染來有效實現圖像的各種濾鏡效果。 生成的效果 ...
  • Bogus 實戰：使用 Bogus 和 EFCore 生成模擬數據和種子數據【完整教程】
    引言 上一章我們介紹了在xUnit單元測試中用xUnit.DependencyInject來使用依賴註入，上一章我們的Sample.Repository倉儲層有一個批量註入的介面沒有做單元測試，今天用這個示例來演示一下如何用Bogus創建模擬數據 ，和 EFCore 的種子數據生成 Bogus 的優 ...
  • WPF隨筆收錄-實時繪製心率曲線
    一、前言 在自己的項目中，涉及到實時心率曲線的繪製，項目上的曲線繪製，一般很難找到能直接用的第三方庫，而且有些還是定製化的功能，所以還是自己繪製比較方便。很多人一聽到自己畫就害怕，感覺很難，今天就分享一個完整的實時心率數據繪製心率曲線圖的例子；之前的博客也分享給DrawingVisual繪製曲線的方 ...
  • wpf程式修改啟動入口註意事項
    如果你在自定義的 Main 方法中直接使用 App 類並啟動應用程式，但發現 App.xaml 中定義的資源沒有被正確載入，那麼問題可能在於如何正確配置 App.xaml 與你的 App 類的交互。 確保 App.xaml 文件中的 x:Class 屬性正確指向你的 App 類。這樣，當你創建 Ap ...
  • 記一次 .NET某爐膛鍋爐檢測系統 崩潰分析
    一：背景 1. 講故事 上個月有個朋友在微信上找到我，說他們的軟體在客戶那邊隔幾天就要崩潰一次，一直都沒有找到原因，讓我幫忙看下怎麼回事，確實工控類的軟體環境複雜難搞，朋友手上有一個崩潰的dump，剛好丟給我來分析一下。 二：WinDbg分析 1. 程式為什麼會崩潰 windbg 有一個厲害之處在於 ...
  • 一個.NET內置依賴註入的小型強化版
    前言 .NET生態中有許多依賴註入容器。在大多數情況下，微軟提供的內置容器在易用性和性能方面都非常優秀。外加ASP.NET Core預設使用內置容器，使用很方便。 但是筆者在使用中一直有一個頭疼的問題：服務工廠無法提供請求的服務類型相關的信息。這在一般情況下並沒有影響，但是內置容器支持註冊開放泛型服 ...
  • WPF隨筆收錄-DataGrid固定右側列
    一、前言 在項目開發過程中，DataGrid是經常使用到的一個數據展示控制項，而通常表格的最後一列是作為操作列存在，比如會有編輯、刪除等功能按鈕。但WPF的原始DataGrid中，預設只支持固定左側列，這跟大家習慣性操作列放最後不符，今天就來介紹一種簡單的方式實現固定右側列。（這裡的實現方式參考的大佬 ...
所有分類