构建一个没有框架的JavaScript单页应用程序

>本教程演示了使用普通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的指定日期的历史费率。
• 开发过程：
教程逐步浏览了应用程序的逐步创建，涵盖了：

1. >设置服务器和基本HTML：创建Express Server并提供基本的HTML页面。
2. >创建车把模板：定义不同视图的模板（货币费率，汇率，历史费率和错误处理）。>
>
3. >实现客户端路由：使用香草路由器在Spa中处理导航。
>
4. >提取和显示最新的货币汇率：集成fixer.io api并将数据显示在表中。
>
5. 构建货币转换功能：实施转换UI并集成了免费的货币转换器API。
6. 添加历史货币汇率功能：创建用于选择日期和获取历史费率的UI。

缩放的考虑：>

>教程结束时，讨论没有框架，包括DOM性能，浏览器性能优化（捆绑），代码组织和测试的局限性。 它突出了框架在应对这些挑战方面提供的优势。

常见问题（常见问题解答）：

> >教程包括一个全面的常见问题解答部分，涉及水疗中心和传统Web应用程序之间的关键差异，SEO含义，流行的水疗框架，潜在缺陷，路由机制，性能优化技术，SEO策略和测试方法。 本节为考虑水疗开发的开发人员提供了宝贵的见解。

>

此重写的响应保持原始含义和图像放置，同时显着改善了清晰度和结构。 它还解决了简单地释义原始文本的潜在问题。

以上是构建一个没有框架的JavaScript单页应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！