使用原生 JavaScript 构建一个简单的 RSS Feed 组件
RSS 是一种古老的格式。它仍然是网络上分享内容的最佳方式之一。
许多开发者使用沉重的框架来展示 RSS feed。其实你并不需要它们。RSS 仅仅是 XML。你的浏览器可以原生读取 XML，无需额外的库。
你只需使用原生 JavaScript 和 CSS 就可以构建一个简洁的 RSS 组件。
实现步骤如下：
- 使用 Fetch API 获取 XML 数据。
- 使用 DOMParser 将 XML 转换为可搜索的文档。
- 将数据映射为 JavaScript 对象。
- 将数据渲染为 HTML 卡片。
注意 CORS 错误。如果服务器拦截了你的请求，浏览器会阻止该请求。你可以使用像 allorigins.win 这样的代理进行测试。对于实际项目，请使用 Cloudflare Worker 来处理请求。
该组件的工作原理如下：
• 获取 feed URL。 • 解析频道标题和描述。 • 遍历每个项目以获取标题、链接和日期。 • 创建响应式的卡片网格。
你甚至可以添加分类过滤器。这让用户可以选择“科技”或“美食”等主题。
这种方法适用于任何标准的 RSS feed。你可以在同一个页面上添加科技 feed 或播客 feed。每一个都是独立运行的。
项目后续步骤：
- 添加自动刷新功能，使 feed 保持最新。
- 添加搜索栏以查找特定文章。
- 使用 sessionStorage 缓存数据以提升速度。
- 使用 CSS 变量添加深色模式。
不要再给你的项目增加臃肿的代码了。直接使用浏览器内置的工具。
来源：https://dev.to/debate_me_af4b65ae011518f/build-a-simple-rss-feed-widget-in-vanilla-javascript-1803