阿川私房教材：
學 JavaScript 前端，帶作品集去面試！

63 個專案實戰，寫出作品集，讓面試官眼前一亮！

立即開始免費試讀！

小編精選 - 技術文章翻譯 · 05月17日

您可以使用這些方法替換流行的框架！ 🔥

TL;DR當然，我意識到當今大多數主要網站都是用它們編寫的，我只是提供一種替代方案。

大家好！如今，如此多的網站使用 Next.js、Nuxt.js 等框架，你不禁會認為這是無望的，但事實並非如此！

在本文中，我們將介紹可用於建立 Web 應用程式的主要方法。

讓我們開始吧！

📦 Web 元件（原始自訂元素）

是的，可能想到的最簡單的解決方案就是只建立元件，而不建立框架。雖然是小事，但效果卻相當顯著。

class MyComponent extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<button>Hello World</button>`;
  }
}
customElements.define('my-component', MyComponent);

當然，在原生 JavaScript 中，早就有了諸如CustomElementRegistry介面之類的解決方案，我們可以在範例中透過customElements屬性來存取它，或者使用舊的template標籤來存取它。

這在今天是一個相當小眾的東西，但儘管如此，它是一項官方支援的技術，因此它將長期具有相關性，並且不會依賴任何模組。

🌐 Ajax 和 HTML

第二種方法現在越來越流行，即直接從標記中從伺服器獲取資料。我們描述請求的小設置，模組將接收元件。

<div>
  {{#request src="/api/title"}}{{/request}}
  <button data-action="increment" id="btn">Click!</button>
  <div>
    Clicks: {{#request src="/api/clicks" after="click:#btn"}}{{/request}}
  </div>
</div>

這種方法的一大優點是我們可以將元件帶到伺服器並重複使用它們，而不管網域如何。此外，這種結構相當輕。在範例中，使用了HMPL語法。

{% cta https://github.com/hmpl-language/hmpl %}💎 看 HMPL{% endcta %}

🗄️ 內容管理系統

這是最古老的方法，如今許多開發人員不再考慮它，但它對業務的好處是不可否認的——這是一個內容管理系統。

WordPress

無論網頁開發如何發展，即使 20 年後人們仍然會使用WordPress和其他類似的平台，因為它很方便並且為企業提供了許多現成的解決方案。

{% cta https://wordpress.org %}💎 看 WordPress{% endcta %}

🪨靜態站點產生器

這也是一種古老但仍然適用的網站建立方式。在這裡，當我們不處理來自使用者的內容而只顯示靜態資料時，它非常適合建立部落格或文件。

傑基爾

當然，作為例子，我們可以引用Jekyll——這可能是為 Web 1.0 設計建立的靜態部落格最受歡迎的工具，但儘管如此，它也是一種建立網站的很酷的方式。 Jekyll 上的程式碼範例：

---
layout: default
title: Home
---

# Welcome!

This is the homepage of my Jekyll website.

## Latest Posts
<ul>
  {% for post in site.posts %}
    <li>
      <a href="{{ post.url }}">{{ post.title }}</a>
      ({{ post.date | date: "%m/%d/%Y" }})
    </li>
  {% endfor %}
</ul>

是的，大部分內容都是透過Markdown產生的，所以這個方法適合我之前寫的內容。

{% cta https://jekyllrb.com %}💎 查看 Jekyll{% endcta %}