首页 >web前端 >js教程 >为后端开发人员提供的前端实用指南

为后端开发人员提供的前端实用指南

Patricia Arquette原创: 2025-01-03 11:42:40401浏览

简介
绝对基础知识
客户端与服务器端
组件
前端库
结论

介绍

我是一名后端开发人员...通常的那种...数学很好但审美很差的那种。我所做的任何设计尝试总是导致看起来无聊的普通垃圾。我尝试使用数十种工具，但最终结果总是看起来像是用 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="https://img.php.cn/upload/article/000/000/000/173587576253989.jpg" 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="https://img.php.cn/upload/article/000/000/000/173587576253989.jpg" 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="https://img.php.cn/upload/article/000/000/000/173587576253989.jpg" 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="https://img.php.cn/upload/article/000/000/000/173587576253989.jpg" 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="https://img.php.cn/upload/article/000/000/000/173587576253989.jpg" 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 数据，推荐使用。

选择哪个框架？

我会尽量简单化和不屑一顾，因为如果我客观地分析利弊，除了“看情况”之外，你不会得到任何有用的信息。我将偏向于设置用户界面所需的最少动作，并尽可能避免构建步骤。所以，这是我的最终建议：

A no-nonsense guide to frontend for backend developers

结论

在这篇博文中，我想分享我作为后端开发人员学到的有关前端的所有知识。看起来这个东西过于复杂和令人生畏，尽管在挖掘后，我意识到它有一个逻辑和结构。我希望我能向您传达我的理解，并且您认为这篇文章有用。

以上是为后端开发人员提供的前端实用指南的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：Fewer Files, More Lines vs. More Files, Fewer Lines of Code下一篇：JavaScript vs. TypeScript

查看更多