逻辑在jamstack网站上去哪里？

Jamstack 架构下逻辑代码的最佳位置选择

构建 Jamstack 网站时，一个关键问题是确定逻辑代码的最佳放置位置。本文通过一个音乐场馆网站的例子，探讨了四种不同的逻辑处理方式，并分析了各自的优缺点。

假设该网站的核心功能是展示音乐会列表，包含已结束和即将举行的活动，需要根据日期进行区分。

方案一：直接写入 HTML

最直接的方法是将所有活动信息直接写入 HTML 文件。这种方法简单易懂，但缺点是每次更新活动信息都需要手动修改 HTML 文件并重新部署，效率低下且容易出错。

<h1 id="即将举行-Bill-的班卓琴之夜">即将举行：Bill 的班卓琴之夜</h1>
<h1 id="已结束-Jill-的-年代经典音乐会">已结束：Jill 的 70 年代经典音乐会</h1>

方案二：构建时处理结构化数据

更有效率的方法是使用结构化数据（例如 Markdown 文件或 headless CMS）存储活动信息，然后使用静态网站生成器（例如 Eleventy）在构建过程中处理逻辑。此方法允许在构建时执行复杂的逻辑操作，例如日期比较、API 调用等。

例如，使用 Markdown 文件表示活动：

---
title: Bill 的班卓琴之夜
date: 2020-09-02
---

活动描述...

构建时使用模板进行日期判断：

{% if event.date > now %}
  <h1 id="即将举行-event-title">即将举行：{{event.title}}</h1>
{% else %}
  <h1 id="已结束-event-title">已结束：{{event.title}}</h1>
{% endif %}

然而，这种方法的日期比较只在构建时执行一次。这意味着活动结束后，需要重新构建网站才能更新信息。虽然可以自动化构建过程，但频繁构建可能会增加成本，并且仍然存在数据滞后的风险。

方案三：边缘计算处理逻辑

随着边缘计算技术的成熟，可以在 CDN 层运行代码处理逻辑。这能够确保每次请求都获取最新的数据，并提供极高的性能。然而，目前边缘计算技术尚不普及。

// 此代码示例不完整，仅供参考
import eventsList from "./eventsList.json"
function onRequest(request) {
  const now = new Date();
  eventList.forEach(event => {
    if (event.date > now) {
      event.upcoming = true;
    }
  })
  const props = {
    events: events,
  }
  request.respondWith(200, render(props), {})
}

方案四：运行时处理逻辑

最后，可以将结构化数据直接传递到前端，然后使用 JavaScript 在用户设备上执行逻辑操作，动态更新 DOM。这种方法可以根据用户的语言和时区调整日期显示方式，并确保信息始终是最新的。

例如，使用数据属性存储日期信息：

<h1 id="event-title">{{event.title}}</h1>

然后使用 JavaScript 进行日期比较：

function processEvents(){
  const now = new Date()
  events.forEach(event => {
    const eventDate = new Date(event.getAttribute('data-date'))
    if (eventDate > now){
        event.classList.add('upcoming')
    } else {
        event.classList.add('past')
    }
  })
}

结论：逻辑位置选择取决于具体需求

选择哪种逻辑处理方式取决于具体需求。对于静态内容，直接写入 HTML 或构建时处理即可；对于经常变化的内容，建议使用 CMS 和构建时处理；对于实时性要求高的内容，则需要考虑边缘计算或运行时处理。 需要权衡效率、成本和数据实时性等因素，选择最合适的方案。

以上是逻辑在jamstack网站上去哪里？的详细内容。更多信息请关注PHP中文网其他相关文章！