為後端開發人員提供的前端實用指南-js教程-PHP中文網

首頁

web前端

js教程

為後端開發人員提供的前端實用指南

Patricia Arquette

Jan 03, 2025 am 11:42 AM

簡介
絕對基礎知識
客戶端與伺服器端
組件
前端庫
結論

介紹

我是後端開發人員...通常的那種...數學很好但美學很差的那種。我所做的任何設計嘗試總是導致看起來無聊的普通垃圾。我嘗試使用數十種工具，但最終結果總是看起來像是用 Microsoft FrontPage 2003

寫的

我很自覺地看到了這一點，所以我放棄了嘗試。我會寫一份文檔，但前提是你要給我一個現成的 $LaTeX$ 樣式文件。我會寫一篇博客，但僅限於 Markdown，讓其他人擔心視覺吸引力。我將準備一個 DevFest 演示文稿，但前提是組織者提供 PowerPoint 模板。我永遠不會嘗試設計任何東西，無論是按鈕還是登入表單。

然而，我不能只是剃光頭並退回到後端 JSON API 庇護所 --- 我仍然需要為我的寵物項目編寫前端並構建供內部使用的儀表板。但嘗試進入前端世界是非常痛苦的──有數十種框架、函式庫、哲學。在過去的 8 年裡，我一直聽到 React、Angular 或 Node 這些詞，但我太害怕了，不敢真正嘗試去理解它們。學習 C 或 Leetcode 比這更容易。

儘管如此，我強迫自己學習它，現在我想成為一個 Prometheus（我不確定是否已經有一個同名的 JS 框架）並將這些知識帶給我的人民 --- 後端開發者。

作為獎勵，我提供了選擇哪個前端框架的最終建議。我自己在很長一段時間裡都患有決策癱瘓，這將幫助你克服它並開始建立東西而無需過度思考。

絕對基礎

讓我們從絕對基礎知識開始，以確保我們在討論框架之前達成共識。如果您願意，可以跳過此部分。

最小網頁

最小網頁由副檔名為 .html 的文字檔案和內容標籤組成：

<html>
    <div>Hello World!</div>
</html>

要新增格式，您可以新增樣式屬性：

<html>
    <div>



<p>or if you have a lot of formatting, add id to your content and refer to it from <style> tag. The style is formatted using CSS language which looks like an HTML element followed by JSON related to it:<br>


<pre class="brush:php;toolbar:false"><html>
    <div>



<p>This will create static pages that do not change and do not react to any events. To add some interactivity, like checking if you left a form field empty or entered a valid email, you will need JavaScript.</p>

<h3>
  
  
  Running JavaScript
</h3>

<p>Before using any programming language you must first install it on your computer. For C/C++ you need to install a compiler like GCC or Clang, for Python you need to install a CPython interpreter.</p>

<p>To run JavaScript you only need a web browser --- all modern web browsers can run JS code. It is as simple as opening a web browser and going to pressing F12. This will open a JS console:</p>

<p><img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173587576253989.jpg"  class="lazy" alt="A no-nonsense guide to frontend for backend developers" /></p>

<p>You can also create a text file with extension .html  and put a <script> tag on it, open this file in browser, and the outcome will be displayed if you press F12:<br>


<pre class="brush:php;toolbar:false"><!-- myfile.html -->
<html>
    <script>
        // write a JS code here
        console.log('Hello World');
    </script>
</html>

但是，出於安全原因，瀏覽器控制台無法存取您的檔案系統，並且缺少一些其他功能，而這些功能使使用 JS 至少能夠實現其他腳本語言（例如 Python 或 Ruby）的功能成為可能。因此，還有第二種在電腦上運行 JS 程式碼的方法——安裝 Node.js。它本質上是一個 JS 解釋器，可以執行諸如讀取和寫入檔案之類的操作：

//$ node
//Welcome to Node.js v23.3.0.
//Type ".help" for more information.
> console.log('Creating a new directory');
> fs.mkdirSync('new_dir'); // access filesystem using fs

使用 Node.js，您可以在伺服器或 Docker 容器中執行 JS 程式碼，而無需安裝 Web 瀏覽器。我們將在下面看到這非常有用。

古典堆疊

結合上面的部分，我們可以使用經典的 HTML CSS JS 設定來建立一個網頁。

它們可以組合在一個包含 3 個部分的 .html 檔案中：內容本身、樣式和腳本：

<html>
    <div>Hello World!</div>
</html>

scripts.js

<html>
    <div>



<p>or if you have a lot of formatting, add id to your content and refer to it from <style> tag. The style is formatted using CSS language which looks like an HTML element followed by JSON related to it:<br>


<pre class="brush:php;toolbar:false"><html>
    <div>



<p>This will create static pages that do not change and do not react to any events. To add some interactivity, like checking if you left a form field empty or entered a valid email, you will need JavaScript.</p>

<h3>
  
  
  Running JavaScript
</h3>

<p>Before using any programming language you must first install it on your computer. For C/C++ you need to install a compiler like GCC or Clang, for Python you need to install a CPython interpreter.</p>

<p>To run JavaScript you only need a web browser --- all modern web browsers can run JS code. It is as simple as opening a web browser and going to pressing F12. This will open a JS console:</p>

<p><img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173587576253989.jpg"  class="lazy" alt="A no-nonsense guide to frontend for backend developers" /></p>

<p>You can also create a text file with extension .html  and put a <script> tag on it, open this file in browser, and the outcome will be displayed if you press F12:<br>


<pre class="brush:php;toolbar:false"><!-- myfile.html -->
<html>
    <script>
        // write a JS code here
        console.log('Hello World');
    </script>
</html>

此設定的最大問題是，如果您查看 HTML 元素，例如

無論如何，這種設定已經在網路上使用了幾十年。

客戶端與伺服器端

太棒了！我們已經介紹了基礎知識。現在讓我們來談談有關前端框架選擇和應用程式架構的所有討論背後的主要困境。在開始之前，我們先澄清一些術語：客戶端是指用戶在其中消費您的內容的瀏覽器或應用程序，而伺服器端通常是存儲內容的後端伺服器.登入信息，可以訪問資料庫，總體而言是整個應用程式的支柱。現在我們準備更深入地研究。

經典 HTML 生成

在任何顯示任何類型資料的重要 Web 應用程式中，我們都需要一種自動產生 HTML 腳本的方法。否則，每當資料更新時，就必須有人手動更新 HTML 標籤。

由於 HTML 是一個簡單的文字文件，因此任何腳本語言都可以輕鬆地將其建立為字串。有很多圖書館都這樣做。例如，使用 Jinja2 函式庫，我們可以使用類似 Python 的語言將清單 mylist = [1,2,3,4,5] 的所有元素寫入表格行：

//$ node
//Welcome to Node.js v23.3.0.
//Type ".help" for more information.
> console.log('Creating a new directory');
> fs.mkdirSync('new_dir'); // access filesystem using fs

當然，瀏覽器不會理解這一點--- 您需要透過在Python 中執行特殊命令來將這個Jinja2 腳本渲染為實際的HTML，這將渲染.html 檔案：

<html>
    <!-- page HTML content here -->
    <div>



<p>You can see that we have a button that triggers a function sayHelloWorld(), which is defined inside  <script> tags and it has font size of 40pt, which is defined inside <style> tags.</p>

<p>Also note that the comment symbols are different in all 3 sections:</p>

inside pure HTML it is
inside CSS it is /* */
inside JS it is //.

This shows that the browser understands that these are 3 different languages. So, the usual practice is not to clutter .html file too much and separate it into 3 files and call styles and scripts by file path:

content.html

<html>
    <div>



<p><strong>styles.css</strong><br>
</p>

<pre class="brush:php;toolbar:false">#mytext {color:red; font-size:20pt}
button {font-size: 40pt}

這個功能非常重要，甚至有一個特殊的名字－模板化。我想強調一件事：這種從模板產生 HTML 的方式發生在伺服器中，使用您選擇的語言（Python/Ruby/Java/C#），通常是編寫後端程式碼的語言。瀏覽器本身並不理解這些語言--- 他們只懂 JS，所以我們向他們發送預先渲染的 HTML 檔案。這在以後會變得很重要。

JSON 與 HTML API

在上一節中，我們看到了後端如何產生 HTML 腳本並用資料庫中的資料和其他資訊填充它們。例如，如果使用者在某些社群媒體貼文上按下喜歡按鈕，後端必須更新喜歡的貼文頁面的內容以包含該新貼文。這可以透過兩種方式完成：

1) 後端有一個 HTML 模板，其中包含一些 Jinja2 腳本，並使用資料庫中的最新查詢結果來呈現它：

<html>
    <div>Hello World!</div>
</html>

這裡渲染的 HTML 與 CSS 樣式和 JS 腳本一起直接傳送到前端。瀏覽器只是顯示後端已經準備好的內容，並不知道頁面上的資料類型或任何邏輯。

2) 後端傳送 JSON，以瀏覽器可以理解的格式指定資料庫的 like_posts 表的查詢結果：

<html>
    <div>



<p>or if you have a lot of formatting, add id to your content and refer to it from <style> tag. The style is formatted using CSS language which looks like an HTML element followed by JSON related to it:<br>


<pre class="brush:php;toolbar:false"><html>
    <div>



<p>This will create static pages that do not change and do not react to any events. To add some interactivity, like checking if you left a form field empty or entered a valid email, you will need JavaScript.</p>

<h3>
  
  
  Running JavaScript
</h3>

<p>Before using any programming language you must first install it on your computer. For C/C++ you need to install a compiler like GCC or Clang, for Python you need to install a CPython interpreter.</p>

<p>To run JavaScript you only need a web browser --- all modern web browsers can run JS code. It is as simple as opening a web browser and going to pressing F12. This will open a JS console:</p>

<p><img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173587576253989.jpg"  class="lazy" alt="A no-nonsense guide to frontend for backend developers" /></p>

<p>You can also create a text file with extension .html  and put a <script> tag on it, open this file in browser, and the outcome will be displayed if you press F12:<br>


<pre class="brush:php;toolbar:false"><!-- myfile.html -->
<html>
    <script>
        // write a JS code here
        console.log('Hello World');
    </script>
</html>

瀏覽器運行特殊的 JS 函數來請求此類 JSON，當它們收到它時，它們會從中提取資料並在瀏覽器本身上產生 HTML：

//$ node
//Welcome to Node.js v23.3.0.
//Type ".help" for more information.
> console.log('Creating a new directory');
> fs.mkdirSync('new_dir'); // access filesystem using fs

選項 2 出於某種原因很受歡迎，儘管它更複雜。在此設定中，您僅向客戶端公開前端端口，它將為靜態 HTML JS 應用程式提供服務，而不需要後端。只有當需要從後端取得資料時，前端才會連接到後端本身，從而從瀏覽器中抽像出此功能。當然，要做到這一點，前端現在需要自己的路由器。基本上，這是前端嘗試做後端該做的事情。

成分

到目前為止，我們已經介紹瞭如何編寫工作前端程式碼及其位置的基礎知識。我們已經看到如何自動產生 HTML，但是到目前為止，我們假設 JS 部分是手動編寫的。在現實生活中的前端開發中，情況通常並非如此。手動編寫 JS 腳本很麻煩，而且你的程式碼結構很快就會變得非常混亂。此外，如果您需要重複使用腳本，則必須進行老式的複製和貼上。所以，從一開始，開發者就使用一些類型的函式庫來讓 JS 開發變得更簡單、更結構化。

jQuery

早期，使用 vanilla JS 尋找和修改元素或向伺服器發送 AJAX 請求非常麻煩。因此，許多開發人員使用 JQuery，這是在普通 JS 之上的簡潔語法糖。許多附加元件都是用 JQuery 編寫的，例如 Datatables（具有搜尋、分頁、開箱即用排序功能的互動式表格）或動畫時鐘或計數器等。使用其他人預先編寫的此類元件非常簡單 --- 只是下載程式碼並將其添加到您的 HTML 頁面的 <script> 下標籤。回顧上面的範例，我們可以使用 JQuery 更輕鬆地在表中加入一行：<br> </script>

<html>
    <div>Hello World!</div>
</html>

或向後端 API 發送 AJAX 請求將需要一個用於 vanilla JS 的完整獨立庫，而這可以在 JQuery 中輕鬆完成：

<html>
    <div>



<p>or if you have a lot of formatting, add id to your content and refer to it from <style> tag. The style is formatted using CSS language which looks like an HTML element followed by JSON related to it:<br>


<pre class="brush:php;toolbar:false"><html>
    <div>



<p>This will create static pages that do not change and do not react to any events. To add some interactivity, like checking if you left a form field empty or entered a valid email, you will need JavaScript.</p>

<h3>
  
  
  Running JavaScript
</h3>

<p>Before using any programming language you must first install it on your computer. For C/C++ you need to install a compiler like GCC or Clang, for Python you need to install a CPython interpreter.</p>

<p>To run JavaScript you only need a web browser --- all modern web browsers can run JS code. It is as simple as opening a web browser and going to pressing F12. This will open a JS console:</p>

<p><img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173587576253989.jpg"  class="lazy" alt="A no-nonsense guide to frontend for backend developers" /></p>

<p>You can also create a text file with extension .html  and put a <script> tag on it, open this file in browser, and the outcome will be displayed if you press F12:<br>


<pre class="brush:php;toolbar:false"><!-- myfile.html -->
<html>
    <script>
        // write a JS code here
        console.log('Hello World');
    </script>
</html>

隨著時間的推移，儘管如此，vanilla JS 和 HTML 標準本身添加了許多功能，使得 JQuery 有點過時了。例如，現在 HTML 中內建了用於選擇日期的彈出日曆。儘管如此，目前的許多 Web 都以某種方式依賴 JQuery。

引導程式

2010 年左右，Bootstrap 被建立為一個可重複使用元件庫，例如漂亮的按鈕、響應式表單和彈出視窗。 Bootstrap的主要特點是它依賴HTML語法，試圖最大限度地減少開發人員編寫實際JS程式碼所花費的時間和精力。它在底層使用了 JQuery 和 CSS，但它為用戶完全抽象化了它們。基本上，使用 Bootstrap 就像向 HTML 元素添加類別一樣簡單。

例如，您想要寫一個按鈕，按下時顯示或隱藏文字。在 JS 中，這看起來像：

//$ node
//Welcome to Node.js v23.3.0.
//Type ".help" for more information.
> console.log('Creating a new directory');
> fs.mkdirSync('new_dir'); // access filesystem using fs

網頁瀏覽器無法理解此 element，所以最後一步就是將這個 JSX 程式碼編譯成 HTML JS。結果將類似：

<html>
    <!-- page HTML content here -->
    <div>



<p>You can see that we have a button that triggers a function sayHelloWorld(), which is defined inside  <script> tags and it has font size of 40pt, which is defined inside <style> tags.</p>

<p>Also note that the comment symbols are different in all 3 sections:</p>

inside pure HTML it is
inside CSS it is /* */
inside JS it is //.

content.html

<html>
    <div>



<p><strong>styles.css</strong><br>
</p>

<pre class="brush:php;toolbar:false">#mytext {color:red; font-size:20pt}
button {font-size: 40pt}

然而，這種方法還沒有真正流行起來。

JS 元件庫

對於那些猶豫是否使用 React.js 這樣的函式庫的人，有一些 JS 函式庫提供了預編譯元件，例如 Chart.js，您可以使用它來使用 vanilla JS 建立圖表：

function sayHelloWorld() {
    console.log('Hello World');
}

這不是寫動態頁面最直觀的方式。

它是一個函式庫，支援眾多用於路由和狀態管理的第三方工具。這就是為什麼它對於初學者來說太靈活且不太直觀。

結論：不建議。

Vue.js

簡要摘要：
使用模板將JS加入HTML中：

<table>
    {% for item in mylist %}
        <tr> <td> {{ item }} </td> </tr>
    {% endfor %}
</table>

這是一個最小的框架。你會發現自己編寫了大量普通 JS 程式碼來實作一些在 Vue.js 中很容易實現的功能

結論：不建議。

Alpine.js

簡單總結：一個沒有建置步驟的最小函式庫 --- 整個函式庫是一個 15 KB 的 JS 檔案。

使用範本，如Vue.js和Svelte，但你可以直接在HTML屬性中寫JS，而不需要任何<script>;環境：<br> </script>

<html>
    <div>Hello World!</div>
</html>

它將自己定位為 JQuery 的現代替代品，並且無需複雜的用戶介面即可添加一點互動性，這真的很酷。

結論：如果您需要一點互動性和處理 JSON，建議使用。

HTMX

簡要總結：一個庫，它提倡將所有邏輯放在後端並請求 HTML 而不是 JSON。

提倡使用任何後端範本庫（如 Jinja2）來產生所需的 HTML，然後將此 HTML 片段傳送到用戶端，而無需任何 JS。

<html>
    <div>



<p>or if you have a lot of formatting, add id to your content and refer to it from <style> tag. The style is formatted using CSS language which looks like an HTML element followed by JSON related to it:<br>


<pre class="brush:php;toolbar:false"><html>
    <div>



<p>This will create static pages that do not change and do not react to any events. To add some interactivity, like checking if you left a form field empty or entered a valid email, you will need JavaScript.</p>

<h3>
  
  
  Running JavaScript
</h3>

<p>Before using any programming language you must first install it on your computer. For C/C++ you need to install a compiler like GCC or Clang, for Python you need to install a CPython interpreter.</p>

<p>To run JavaScript you only need a web browser --- all modern web browsers can run JS code. It is as simple as opening a web browser and going to pressing F12. This will open a JS console:</p>

<p><img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173587576253989.jpg"  class="lazy" alt="A no-nonsense guide to frontend for backend developers" /></p>

<p>You can also create a text file with extension .html  and put a <script> tag on it, open this file in browser, and the outcome will be displayed if you press F12:<br>


<pre class="brush:php;toolbar:false"><!-- myfile.html -->
<html>
    <script>
        // write a JS code here
        console.log('Hello World');
    </script>
</html>

後端發送的不是 JSON，而是 HTML 片段：

//$ node
//Welcome to Node.js v23.3.0.
//Type ".help" for more information.
> console.log('Creating a new directory');
> fs.mkdirSync('new_dir'); // access filesystem using fs

支援所有 HTTP 動詞（GET/POST/PUT/PATCH/DELETE）。

結論：如果您不需要 JSON 數據，建議使用。