>本教程演示了使用普通JavaScript从头开始构建单页应用程序（SPA），而无需依赖前端框架。 这种方法对水疗体系结构和组件交互提供了更深入的了解。
>
关键概念和技术：
- > 服务器端（node.js＆express）：>
- 客户端（Vanilla JavaScript和jQuery）：使用vanilla javascript和jQuery实现核心应用程序逻辑。>
- >路由（香草路由器）：客户端路由在没有页面重新加载的水疗中心内导航，提供无缝的用户体验。>
>模板（车把）：- handlebars.js简化了基于数据的HTML渲染，促进了关注点的清洁分离。
API（Fixer.io＆Free Currency Converter）：应用程序使用Fixer.io用于货币汇率（需要在服务器上安全处理的API密钥）和免费的货币转换器API用于货币转换。
-
项目结构和设置：
>
该项目被组织成客户端（public/）和服务器端（server.js）组件。 使用NPM管理依赖项。 该文件存储像API键一样的敏感信息。
>应用程序功能：
>
.env>教程构建了一个简单的货币应用程序，并具有以下功能：
>显示最新的货币费率：
提取并从FIXER.IO.IO。
显示当前汇率
货币转换：- 允许用户使用自由货币转换器API在不同货币之间转换。
显示历史货币汇率：
：- 检索并显示了fixer.io的指定日期的历史费率。
- 开发过程：
教程逐步浏览了应用程序的逐步创建，涵盖了：
-
>设置服务器和基本HTML：创建Express Server并提供基本的HTML页面。
-
>创建车把模板：定义不同视图的模板（货币费率，汇率，历史费率和错误处理）。>
>- >实现客户端路由：使用香草路由器在Spa中处理导航。
>- >提取和显示最新的货币汇率：集成fixer.io api并将数据显示在表中。
>- 构建货币转换功能：实施转换UI并集成了免费的货币转换器API。
- 添加历史货币汇率功能：创建用于选择日期和获取历史费率的UI。
缩放的考虑：>
>教程结束时，讨论没有框架，包括DOM性能，浏览器性能优化（捆绑），代码组织和测试的局限性。 它突出了框架在应对这些挑战方面提供的优势。
常见问题（常见问题解答）：
>
>教程包括一个全面的常见问题解答部分，涉及水疗中心和传统Web应用程序之间的关键差异，SEO含义，流行的水疗框架，潜在缺陷，路由机制，性能优化技术，SEO策略和测试方法。 本节为考虑水疗开发的开发人员提供了宝贵的见解。
>
此重写的响应保持原始含义和图像放置，同时显着改善了清晰度和结构。 它还解决了简单地释义原始文本的潜在问题。
以上是构建一个没有框架的JavaScript单页应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！
