在没有框架的情况下构建 JavaScript 单页应用程序

Build a JavaScript Single Page App Without a Framework - SitePoint

前端框架很棒。它们抽象出构建单页应用程序 (SPA) 的大部分复杂性，并帮助您随着项目的发展以一种可理解的方式组织代码。

然而，也有不利的一面：这些框架会带来一定程度的开销，并且可能会引入它们自己的复杂性。

这就是为什么在本教程中，我们将学习如何在不使用客户端 JavaScript 框架的情况下从头开始构建 SPA。这将帮助您评估这些框架实际上为您做了什么，以及在什么时候使用它们是有意义的。它还将让您了解构成典型 SPA 的各个部分以及它们是如何连接在一起的。

让我们开始吧 …

先决条件

对于本教程，您需要具备现代 JavaScript和jQuery的基础知识。一些使用Handlebars、Express和Axios的经验会派上用场，尽管这不是绝对必要的。您还需要在您的环境中进行以下设置：

节点.js
适用于 Window 用户的Git或Git Bash。

您可以在我们的GitHub 存储库中找到已完成的项目。

构建项目

我们将构建一个简单的货币应用程序，它将提供以下功能：

显示最新汇率
从一种货币转换为另一种货币
根据指定日期显示过去的货币汇率。

我们将使用以下免费的在线 REST API 来实现这些功能：

fixer.io API
免费货币转换器 API。

Fixer 是一个完善的 API，提供外汇和货币转换 JSON API。不幸的是，这是一项商业服务，免费计划不允许货币兑换。所以我们还需要使用免费货币转换器 API。转换 API 有一些限制，幸运的是不会影响我们应用程序的功能。无需 API 密钥即可直接访问。但是，Fixer 需要 API 密钥来执行任何请求。只需在他们的网站上注册即可获得免费计划的访问密钥。

理想情况下，我们应该能够在客户端构建整个单页应用程序。但是，由于我们将处理敏感信息（我们的 API 密钥），因此无法将其存储在我们的客户端代码中。这样做会使我们的应用程序容易受到攻击，并且任何初级黑客都可以绕过该应用程序并直接从我们的 API 端点访问数据。为了保护此类敏感信息，我们需要将其放入服务器代码中。因此，我们将设置一个Express服务器来充当客户端代码和云服务之间的代理。通过使用代理，我们可以安全地访问此密钥，因为服务器代码永远不会暴露给浏览器。下图说明了我们完成的项目将如何工作。

记下每个环境将使用的 npm 包——即浏览器（客户端）和服务器。既然您知道我们将要构建什么，请转到下一部分开始创建项目。

项目目录和依赖项

前往您的工作区目录并创建文件夹single-page-application。在 VSCode 或您喜欢的编辑器中打开文件夹，然后使用终端创建以下文件和文件夹：

touch .env .gitignore README.md server.js
mkdir public lib
mkdir public/js
touch public/index.html
touch public/js/app.js

打开.gitignore并添加这些行：

node_modules
.env

打开README.md并添加这些行：

# Single Page ApplicationThis is a project demo that uses Vanilla JS to build a Single Page Application.

接下来，package.json通过在终端中执行以下命令来创建文件：

npm init -y

您应该获得为您生成的以下内容：

{"name": "single-page-application","version": "1.0.0","description": "This is a project demo that uses Vanilla JS to build a Single Page Application.","main": "server.js","directories": {"lib": "lib"},"scripts": {"test": "echo \"Error: no test specified\" && exit 1","start": "node server.js"},"keywords": [],"author": "","license": "ISC"
}

看看 npm 命令有多方便？内容是根据项目结构生成的。现在让我们安装项目所需的核心依赖项。在终端中执行以下命令：

npm install jquery semantic-ui-css handlebars vanilla-router express dotenv axios

软件包安装完成后，转到下一部分开始构建应用程序的基础。

应用基础

在我们开始编写前端代码之前，我们需要实现一个服务器-客户端基础来工作。这意味着从 Express 服务器提供的基本 HTML 视图。node_modules出于性能和可靠性的原因，我们将直接从文件夹中注入前端依赖项。我们必须以一种特殊的方式设置我们的 Express 服务器来完成这项工作。打开server.js并添加以下内容：

require('dotenv').config(); // read .env files
const express = require('express');const app = express();
const port = process.env.PORT || 3000;// Set public folder as root
app.use(express.static('public'));// Allow front-end access to node_modules folder
app.use('/scripts', express.static(`${__dirname}/node_modules/`));// Listen for HTTP requests on port 3000
app.listen(port, () => {console.log('listening on %d', port);
});

这为我们提供了一个基本的 Express 服务器。我已经评论了代码，所以希望这能让您对正在发生的事情有一个相当好的了解。接下来，打开public/index.html并输入：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="scripts/semantic-ui-css/semantic.min.css"><title>SPA Demo</title>
</head>
<body><div class="ui container"><!-- Navigation Menu --><div class="ui four item inverted orange menu"><div class="header item"><i class="money bill alternate outline icon"></i>Single Page App</div><a class="item" href="/">Currency Rates</a><a class="item" href="/exchange">Exchange Rates</a><a class="item" href="/historical">Historical Rates</a></div><!-- Application Root --><div id="app"></div></div><!-- JS Library Dependencies --><script src="scripts/jquery/dist/jquery.min.js"></script><script src="scripts/semantic-ui-css/semantic.min.js"></script><script src="scripts/axios/dist/axios.min.js"></script><script src="scripts/handlebars/dist/handlebars.min.js"></script><script src="scripts/vanilla-router/dist/vanilla-router.min.js"></script><script src="js/app.js"></script>
</body>
</html>

我们使用语义 UI 进行样式设置。请参阅语义 UI 菜单文档以了解用于我们导航栏的代码。转到您的终端并启动服务器：

npm start

在浏览器中打开localhost:3000 。您应该有一个空白页面，其中仅显示导航栏：

现在让我们为我们的应用程序编写一些视图模板。

前端骨架模板

我们将使用Handlebars来编写我们的模板。JavaScript 将用于根据当前 URL 呈现模板。我们将创建的第一个模板将用于显示错误消息，例如 404 或服务器错误。将此代码放在public/index.html导航部分之后：

<!-- Error Template -->
<script id="error-template" type="text/x-handlebars-template"><div class="ui {{color}} inverted segment" style="height:250px;"><br><h2 class="ui center aligned icon header"><i class="exclamation triangle icon"></i><div class="content">{{title}}<div class="sub header">{{message}}</div></div></h2></div>
</script>

接下来，添加以下模板，这些模板将代表我们在导航栏中指定的每个 URL 路径的视图：

<!-- Currency Rates Template -->
<script id="rates-template" type="text/x-handlebars-template"><h1 class="ui header">Currency Rates</h1><hr>
</script><!-- Exchange Conversion Template -->
<script id="exchange-template" type="text/x-handlebars-template"><h1 class="ui header">Exchange Conversion</h1><hr>
</script><!-- Historical Rates Template -->
<script id="historical-template" type="text/x-handlebars-template"><h1 class="ui header">Historical Rates</h1><hr>
</script>

接下来，让我们将所有这些模板编译到public/js/app.js. 编译后，我们将渲染rates-template并查看它的样子：

window.addEventListener('load', () => {const el = $('#app');// Compile Handlebar Templatesconst errorTemplate = Handlebars.compile($('#error-template').html());const ratesTemplate = Handlebars.compile($('#rates-template').html());const exchangeTemplate = Handlebars.compile($('#exchange-template').html());const historicalTemplate = Handlebars.compile($('#historical-template').html());const html = ratesTemplate();el.html(html);
});

请注意，我们将所有 JavaScript 客户端代码包装在一个load事件中。这只是为了确保所有依赖项都已加载并且 DOM 已完成加载。刷新页面，看看我们有什么：

我们正在取得进展。现在，如果您单击除Currency Rates之外的其他链接，浏览器将尝试获取新页面并最终显示如下消息Cannot GET /exchange：

我们正在构建一个单页应用程序，这意味着所有操作都应该发生在一个页面中。我们需要一种方法来告诉浏览器在 URL 更改时停止获取新页面。

客户端路由

为了控制浏览器环境中的路由，我们需要实现客户端路由。有许多客户端路由库可以帮助解决这个问题。对于我们的项目，我们将使用vanilla router，这是一个非常易于使用的路由包。

如果你还记得，我们之前已经在index.html. 因此，我们可以立即调用Router该类。删除您添加的最后两个语句app.js并将它们替换为以下代码：

// Router Declaration
const router = new Router({mode: 'history',page404: (path) => {const html = errorTemplate({color: 'yellow',title: 'Error 404 - Page NOT Found!',message: `The path '/${path}' does not exist on this site`,});el.html(html);},
});router.add('/', () => {let html = ratesTemplate();el.html(html);
});router.add('/exchange', () => {let html = exchangeTemplate();el.html(html);
});router.add('/historical', () => {let html = historicalTemplate();el.html(html);
});// Navigate app to current url
router.navigateTo(window.location.pathname);// Highlight Active Menu on Refresh/Page Reload
const link = $(`a[href$='${window.location.pathname}']`);
link.addClass('active');$('a').on('click', (event) => {// Block browser page loadevent.preventDefault();// Highlight Active Menu on Clickconst target = $(event.target);$('.item').removeClass('active');target.addClass('active');// Navigate to clicked urlconst href = target.attr('href');const path = href.substr(href.lastIndexOf('/'));router.navigateTo(path);
});

花一些时间浏览代码。我在各个部分添加了评论来解释正在发生的事情。您会注意到，在路由器的声明中，我们指定了page404使用错误模板的属性。现在让我们测试链接：

链接现在应该可以工作了。但是我们有一个问题。单击/exchange或historical链接，然后刷新浏览器。我们得到与以前相同的错误 - Cannot GET /exchange。要解决此问题，请转到server.js并在监听代码之前添加此语句：

// Redirect all traffic to index.html
app.use((req, res) => res.sendFile(`${__dirname}/public/index.html`));

您必须使用Ctrl+C和执行重新启动服务器npm start。返回浏览器并尝试刷新。您现在应该可以看到页面正确呈现。现在，让我们尝试在 URL 中输入一个不存在的路径，例如/exchanges. 该应用程序应显示 404 错误消息：

我们现在已经实现了必要的代码来创建我们的单页应用程序框架。现在让我们开始列出最新的货币汇率。

兑换兑换

对于货币转换，我们将使用两个端点：

Fixer 的符号端点
免费货币转换器端点。

我们需要符号端点来获取支持的货币代码列表。我们将使用这些数据来填充用户将用来选择要转换的货币的下拉列表。在函数后面打开lib/fixer-service.js并添加这一行getRates()：

getSymbols: () => get('/symbols'),

创建另一个帮助文件 ,lib/free-currency-service.js并添加以下代码：

require('dotenv').config();
const axios = require('axios');const api = axios.create({baseURL: 'https://free.currencyconverterapi.com/api/v5',timeout: process.env.TIMEOUT || 5000,
});module.exports = {convertCurrency: async (from, to) => {const response = await api.get(`/convert?q=${from}_${to}&compact=y`);const key = Object.keys(response.data)[0];const { val } = response.data[key];return { rate: val };},
};

这将帮助我们免费获得从一种货币到另一种货币的兑换率。在客户端代码中，我们必须通过将金额乘以费率来计算转换金额。现在让我们将这两个服务方法添加到我们的 Express 服务器代码中。打开server.js并相应更新：

const { getRates, getSymbols, } = require('./lib/fixer-service');
const { convertCurrency } = require('./lib/free-currency-service');
...
// Insert right after get '/api/rates', just before the redirect statement// Fetch Symbols
app.get('/api/symbols', async (req, res) => {try {const data = await getSymbols();res.setHeader('Content-Type', 'application/json');res.send(data);} catch (error) {errorHandler(error, req, res);}
});// Convert Currency
app.post('/api/convert', async (req, res) => {try {const { from, to } = req.body;const data = await convertCurrency(from, to);res.setHeader('Content-Type', 'application/json');res.send(data);} catch (error) {errorHandler(error, req, res);}
});

现在我们的代理服务器应该能够获取符号和转换率。请注意，这/api/convert是一个 POST 方法。我们将在客户端使用一个表单来构建货币转换 UI。随意使用该test功能来确认两个端点都在工作。这是一个例子：

// Test Symbols Endpoint
const test = async() => {const data = await getSymbols();console.log(data);
}// Test Currency Conversion Endpoint
const test = async() => {const data = await convertCurrency('USD', 'KES');console.log(data);
}

您必须为每次测试重新启动服务器。一旦您确认代码到目前为止工作正常，请记住注释掉测试。现在让我们处理我们的货币转换 UI。通过将现有代码替换为以下代码来打开public/index.html并更新：exchange-template

<script id="exchange-template" type="text/x-handlebars-template"><h1 class="ui header">Exchange Rate</h1><hr><div class="ui basic loading segment"><form class="ui form"><div class="three fields"><div class="field"><label>From</label><select class="ui dropdown" name="from" id="from"><option value="">Select Currency</option>{{#each symbols}}<option value="{{@key}}">{{this}}</option>{{/each}}</select></div><div class="field"><label>To</label><select class="ui dropdown" name="to" id="to"><option value="">Select Currency</option>{{#each symbols}}<option value="{{@key}}">{{this}}</option>{{/each}}</select></div><div class="field"><label>Amount</label><input type="number" name="amount" id="amount" placeholder="Enter amount"></div></div><div class="ui primary submit button">Convert</div><div class="ui error message"></div></form><br><div id="result-segment" class="ui center aligned segment"><h2 id="result" class="ui header">0.00</h2></div></div>
</script>

花点时间阅读脚本并了解正在发生的事情。我们正在使用语义 UI 表单来构建界面。我们还使用 Handlebars 符号来填充下拉框。下面是 Fixer 的 Symbols 端点使用的 JSON 格式：

{"success": true,"symbols": {"AED": "United Arab Emirates Dirham","AFN": "Afghan Afghani","ALL": "Albanian Lek","AMD": "Armenian Dram",}
}

请注意，符号数据是地图格式。这意味着信息被存储为键值{{@key}}对{{this}}。现在让我们更新public/js/app.js并使其与新模板一起使用。打开文件并将现有的路由代码替换为/exchange以下内容：

// Perform POST request, calculate and display conversion results
const getConversionResults = async () => {// Extract form dataconst from = $('#from').val();const to = $('#to').val();const amount = $('#amount').val();// Send post data to Express(proxy) servertry {const response = await api.post('/convert', { from, to });const { rate } = response.data;const result = rate * amount;$('#result').html(`${to} ${result}`);} catch (error) {showError(error);} finally {$('#result-segment').removeClass('loading');}
};// Handle Convert Button Click Event
const convertRatesHandler = () => {if ($('.ui.form').form('is valid')) {// hide error message$('.ui.error.message').hide();// Post to Express server$('#result-segment').addClass('loading');getConversionResults();// Prevent page from submitting to serverreturn false;}return true;
};router.add('/exchange', async () => {// Display loader firstlet html = exchangeTemplate();el.html(html);try {// Load Symbolsconst response = await api.get('/symbols');const { symbols } = response.data;html = exchangeTemplate({ symbols });el.html(html);$('.loading').removeClass('loading');// Validate Form Inputs$('.ui.form').form({fields: {from: 'empty',to: 'empty',amount: 'decimal',},});// Specify Submit Handler$('.submit').click(convertRatesHandler);} catch (error) {showError(error);}
});

刷新页面。您现在应该有以下视图：

选择您选择的一些货币并输入金额。然后点击转换按钮：

哎呀！我们刚刚遇到了一个错误场景。至少我们知道我们的错误处理代码是有效的。要找出错误发生的原因，请返回服务器代码并查看/api/convert函数。具体来说，请查看 const { from, to } = req.body;.

Express 似乎无法从request对象中读取属性。为了解决这个问题，我们需要安装可以帮助解决这个问题的中间件：

npm install body-parser

接下来，更新服务器代码如下：

const bodyParser = require('body-parser');
.../** Place this code right before the error handler function **/// Parse POST data as URL encoded data
app.use(bodyParser.urlencoded({extended: true,
}));// Parse POST data as JSON
app.use(bodyParser.json());

再次启动服务器并刷新浏览器。尝试进行另一次转换。它现在应该可以工作了。

现在让我们关注最后一点——历史货币汇率。让我们从视图开始。

历史货币汇率

实现此功能就像组合第一页和第二页中的任务。我们将构建一个小表单，用户需要在其中输入日期。当用户点击提交时，指定日期的汇率将以表格形式显示。我们将使用来自 Fixer API 的历史汇率端点来实现这一点。API 请求如下所示：

https://data.fixer.io/api/2013-12-24? access_key = API_KEY& base = GBP& symbols = USD,CAD,EUR

响应将如下所示：

{"success": true,"historical": true,"date": "2013-12-24","timestamp": 1387929599,"base": "GBP","rates": {"USD": 1.636492,"EUR": 1.196476,"CAD": 1.739516}
}

像这样打开lib/fixer-service.js和历史汇率端点：

.../** Place right after getSymbols **/getHistoricalRate: date => get(`/${date}&symbols=${symbols}&base=EUR`),
...

打开server.js并添加以下代码：

...
const { getRates, getSymbols, getHistoricalRate } = require('./lib/fixer-service');
...
/** Place this after '/api/convert' post function **/// Fetch Currency Rates by date
app.post('/api/historical', async (req, res) => {try {const { date } = req.body;const data = await getHistoricalRate(date);res.setHeader('Content-Type', 'application/json');res.send(data);} catch (error) {errorHandler(error, req, res);}
});
...

如果您对代码的排列方式有任何疑问，请参阅GitHub 上server.js的完整文件。随意编写一个快速测试来确认历史端点是否正常工作：

const test = async() => {const data = await getHistoricalRate('2012-07-14');console.log(data);
}test();

确认一切正常后，请记住注释掉测试块。现在让我们处理客户端代码。

打开index.html. 删除historical-template我们用作占位符的现有内容，并将其替换为以下内容：

<script id="historical-template" type="text/x-handlebars-template"><h1 class="ui header">Historical Rates</h1><hr><form class="ui form"><div class="field"><label>Pick Date</label><div class="ui calendar" id="calendar"><div class="ui input left icon"><i class="calendar icon"></i><input type="text" placeholder="Date" id="date"></div></div></div><div class="ui primary submit button">Fetch Rates</div><div class="ui error message"></div></form><div class="ui basic segment"><div id="historical-table"></div></div>
</script>

先看一下表格。我想指出的一件事是语义 UI 没有正式的日期输入。然而，感谢Michael de Hoog的贡献，我们可以使用Semantic-UI-Calendar模块。只需使用 npm 安装它：

npm install semantic-ui-calendar

返回public/index.html并将其包含在脚本部分中：

...
<script src="scripts/semantic-ui-css/semantic.min.js"></script>
<script src="scripts/semantic-ui-calendar/dist/calendar.min.js"></script>
....

为了显示历史汇率，我们将简单地重复使用rates-template. 接下来打开public/js/app.js并更新现有的路线代码/historical：

const getHistoricalRates = async () => {const date = $('#date').val();try {const response = await api.post('/historical', { date });const { base, rates } = response.data;const html = ratesTemplate({ base, date, rates });$('#historical-table').html(html);} catch (error) {showError(error);} finally {$('.segment').removeClass('loading');}
};const historicalRatesHandler = () => {if ($('.ui.form').form('is valid')) {// hide error message$('.ui.error.message').hide();// Indicate loading status$('.segment').addClass('loading');getHistoricalRates();// Prevent page from submitting to serverreturn false;}return true;
};router.add('/historical', () => {// Display formconst html = historicalTemplate();el.html(html);// Activate Date Picker$('#calendar').calendar({type: 'date',formatter: { //format date to yyyy-mm-dddate: date => new Date(date).toISOString().split('T')[0],},});// Validate Date input$('.ui.form').form({fields: {date: 'empty',},});$('.submit').click(historicalRatesHandler);
});

再一次，花时间阅读评论并理解代码和它在做什么。然后重新启动服务器，刷新浏览器并导航到/historical路径。选择 1999 年之前的任何日期，然后单击Fetch Rates。你应该有这样的东西：

如果您选择 1999 年之前的日期或未来的日期，提交表单时将显示错误横幅。

概括

现在我们已经结束了本教程，您应该会看到，在不使用框架的情况下构建由 REST API 支持的单页应用程序并不难。但是有几点我们应该关注：

DOM 性能。在我们的客户端代码中，我们直接操作 DOM。随着项目的发展，这很快就会失控，导致 UI 变得迟缓。
浏览器性能。我们已经将很多前端库作为脚本加载到中index.html，这对于开发目的来说是可以的。对于生产部署，我们需要一个捆绑所有脚本的系统，以便浏览器使用单个请求来加载必要的 JavaScript 资源。
单片代码。对于服务器代码，将代码分解为模块化部分更容易，因为它在 Node 环境中运行。然而，对于客户端代码，除非你使用像webpack这样的打包器，否则在模块中组织起来并不容易。
测试。到目前为止，我们一直在进行手动测试。对于一个生产就绪的应用程序，我们需要建立一个像 Jasmine、Mocha 或 Chai 这样的测试框架来自动化这项工作。这将有助于防止重复出现错误。

当您在不使用框架的情况下进行项目开发时，这些只是您将面临的众多问题中的一小部分。使用诸如 Angular、React 或 Vue 之类的东西将帮助您减轻很多这些担忧。我希望本教程对您有所帮助，并能帮助您成为一名专业的 JavaScript 开发人员。

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

SPIE西部光电展重返线下，成功举办科学和工程盛会
全球首屈一指的年度光子学盛会与SPIE AR/VR/MR会议重返线下，展示生物医学光学、量子和激光技术的最新成果华盛顿州贝灵汉--(美国商业资讯)--1月22日至27日，国际光电工程学会(SPIE)在满足安全要求的情况下成功迎接国际光子学界人士重返旧金山莫斯康中心…...
2024/4/13 9:36:10
Vue3+TypeScript笔记1
Vue3TypeScript笔记1 学习链接：https://www.bilibili.com/video/BV1of4y1v7tB 1.ts文件中的函数中的形参，如果使用了某个类型进行修饰，那么最终在翻译的js文件中是没有这个类型的 2.ts文件中的变量使用的是let进行修饰，编译的j…...
2024/4/8 20:02:06
寒假打卡第七天——拓扑排序
首先，什么是拓扑序列？ 拓扑序列是顶点活动网中将活动按发生的先后次序进行的一种排列。. 拓扑排序，是对一个有向无环图 (Directed Acyclic Graph简称DAG)G进行拓扑排序，是将G中所有顶点排成一个线性序列，使得图中任意一…...
2024/4/19 12:56:30
JAVA标识符
1.所有的标识符都应该以字母、￥、或下划线开头 2.不能使用关键字作变量/方法名 3.大小写敏感 4.避免中文命名...
2024/4/30 19:47:59
Spring中的Bean实例化时机
今天我们来测试Bean实例化的时机 Person类的定义 public class Person {public Person(){//打印输出，方便看到方法调用System.out.println("无参构造被调用.");} }application.xml <?xml version"1.0" encoding"UTF-8"?&…...
2024/4/13 2:51:01
搜狗收录提交入口之搜狗泛目录实现
搜狗进行了大更新，增加了资质提交、网站管理员权限，验证推送从之前的单站点提交200条到现在的不限制提交数量，非验证从之前的单账号单日只能提交200条到现在的不限制提交数量。搜狗的资质提交需要提交网站对应的ICP备案信息，进行对…...
2024/4/19 5:10:12
1.Pandas教程-金融分析教程(1)
注意： 教程内容来自 https://nbviewer.jupyter.org/github/twiecki/financial-analysis-python-tutorial/tree/master/ 这不是完整的系统的pandas教程，此外源教程测试demo老旧，新版本pandas可能无法兼容源程序，本教程是在原教程基…...
2024/4/19 14:13:00
java小农养成记第三十五天
day35 今日内容 XML 概念语法解析 XML 1. 概念：可扩展标记语言（Extensible Markup Language）* 可扩展：标签都是自定义的。\<user>\<student>* 功能* 存储数据：1. 配置文件2. 在网络中传输* xml与html…...
2024/4/13 2:51:11
李宏毅 2020 深度学习与人类语言处理 DLHLP-Coreference Resolution-p21
前言本文是李宏毅 2020 深度学习与人类语言处理 DLHLP 课程中 Coreference Resolution 指代消解部分的笔记。 https://speech.ee.ntu.edu.tw/~hylee/dlhlp/2020-spring.html 课程官网李宏毅老师2020新课深度学习与人类语言处理_哔哩哔哩_bilibili -p21 哔哩哔哩搬运内容…...
2024/4/13 2:51:16
1. Pandas教程-10MintoPandas
介绍：这部分程序是10分钟进入pandas教程. 教程在Windows10环境，使用Anaconda，jupyter下测试的。注意版本区别，若版本有更新某些函数被弃用，请以官方手册为准。文章是jupyter编辑器转化成的markdown，可能会有…...
2024/4/20 4:11:34
（一）计算机四大学科-----操作系统之计算机系统概述
一：操作系统的基本概念 1.操作系统是指：控制和管理整个计算机系统的硬件与软件资源，合理地组织、调度计算机的工作与资源的分配，进而为用户和其他软件提供方便接口与环境的程序集合。 2.操心系统是一个最基本的系统软件。 3.操…...
2024/4/13 2:50:56
学习数据结构的笔记——时间、空间复杂度
知识总结： 1.数据结构非常重要，在校园的招聘笔试中经常出现，这关乎一份好的offer 2.重要的学习方法，力扣的算法题， 3..递归的时间复杂度递归次数*每次递归函数中次数递归的空间复杂度递归的深度 4.O&#xf…...
2024/4/13 2:51:26
seleniumbase学习总结1 - 简介及原理
1、为什么给这个UI框架投入精力？ 想找一款基于pytest封装的UI自动化框架，github搜到这个2.6星，另外自己对slenium比较熟悉，就选了这款框架用来快速落地UI自动化脚本，并最终结合jenkins形成服务化。 2、ing...
2024/4/8 20:01:58
Android 启动其他应用Activity/Service失败问题
本文仅针对Android11，如果你的模拟器或设备是Android11的话，请继续看下去。一、提出问题最近在使用一个应用绑定另外一个应用的Service时，无论如何都绑定不上，现象是Service的onCreate()和onStartCommand()回调都没有执行。说…...
2024/4/13 2:51:56
Java基础面试题
JDK 和 JRE 有什么区别？ 具体来说 JDK 其实包含了 JRE，同时还包含了编译 java 源码的编译器 javac，还包含了很多 java 程序调试和分析的工具。简单来说：如果你需要运行 java 程序，只需安装 JRE 就可以了，如…...
2024/4/8 20:01:56
Java——基础简介
基础简介一、发展历史 1991年。James Gosling在SUN公司的工程师小组想要设计这样一种小型计算机语言。该语言主要用于像电视盒这样的消费类电子产品。另外,由于不同的厂商选择不同的CPU和操作系统，因此，要求该语言不能和特定的体系结构绑在一起,要…...
2024/4/20 15:19:22
今天面了个支付宝拿35K出来的，真是砂纸擦屁股，给我露了一手啊
今年的春招已经开始了，很多小伙伴收获不错，有的已经拿到了心仪的 offer。各大论坛和社区里也看见不少小伙伴慷慨地分享了常见的面试题和八股文，为此咱这里也统一做一次大整理和大归类，这也算是划重点了。俗话说得好&#xff0…...
2024/4/17 13:53:32
C++基础知识 - 赋值构造函数
赋值构造函数如果没有定义赋值构造函数，编译器会自动定义“合成的赋值构造函数”， 与其他合成的构造函数，是“浅拷贝”（又称为“位拷贝”）。 Human.h #pragma once #include <string> #include <iostream&…...
2024/4/13 2:51:46
Collections工具类的使用（学习Java第18天）
目录一.Collections工具类概述二.public static void shuffle(List list) :打乱集合顺序。三.public static void sort(List list):将集合中元素按照默认规则排序。四.public static void sort(List list，Comparator com ):将集合中元素按照指定规则排序。…...
2024/4/13 2:51:56
cyberRT源码浅层解析（二） mainboard
mainboard模块是cyber的程序入口，启动模块，我们可以使用类似roslaunch的方式启动，cyberRT的launch也是封装了mainboard模块，也可以直接使用mainboard -p <process_group> -d … &启动某一个模块。 minaboard模块中一共有…...
2024/4/13 2:52:06