[譯] 正在消失的小型網站

玉兒Qi發表於2019-03-08
網站

網站正在日益增大，JavaScript 也在飛速發展、升級，為了能跟上時代，你需要將你的程式碼從最新的版本轉譯成瀏覽器相容的模式（儘管這非常複雜，但相信 babel 能搞定）。此外，你也可以使用其他語言編寫網頁，比如 typescript。而在 typescript 之前，已經有過很多相關嘗試(1，2，3 等等)，但一個重要的事實是，typescript 被建議要廣泛應用於專門處理大型應用的場景。

單頁面應用（SPA）之路

在歷史上，小型頁面是由靜態 HTML 和一些零散的 JavaScript 組成的。我敢打賭現在很多傳統的服務端渲染應用（比如 Django 或者 Ruby on Rails）還是這樣做的，但是這樣的方式一點也不酷了，所以就算還有人使用它們，可能也僅僅是 API。這些頁面（不管是靜態頁面或者服務端渲染頁面）都有很多特設指令碼，它們看上去都一團糟。維護和測試就更像是噩夢，這些程式碼要麼就是非常長，要麼就是以某種奇怪的方式連線起來。

而當這樣的指令碼轉變成了單頁應用，這絕對是一件好事 —— 現在，至少我們的應用是部分可維護的了，使用了合適的模組引入，以及許多允許開發者處理複雜介面，路由，多屏資料共享，跨應用甚至整個網站（例如開源元件）的 UI 元素複用的閃亮框架。但是，本篇文章並不是關於它們的 —— 我已經吐槽過現在人們已經將 SPA 作為所有專案的預設選項；這篇文章是關於小型網站的。

jQuery 的興衰

在這之前，jQuery還是主宰，它有龐大的外掛生態圈，提供滑動視窗，圖片展示以及豐富的動態效果等等。同時，它的整合簡單，通常只是用某些引數（甚至是預設值就可以）初始化一些外掛，並提供元素 id。其他內容通常都在標記中指定（或需要特定的標記規則），HTML 作為一種宣告式語言，完全可以辨認出指定的內容。事實上，jQuery 使用範圍如此之廣，很多人們都很奇怪為什麼不把 jQuery 預設的載入到瀏覽器中。jQuery 也有很多很方便的功能（甚至可以稱為 DOM 缺失的標準庫），它讓已經簡單的互動變得極其簡單。

事實上，我相信 jQuery 依舊在被廣泛的使用著（我沒有任何資料，只是我自己的直覺），但是有了很重要的改變。如今，jQuery 已經不那麼讓人滿意，你也不會發現有很多教程，教你如何不用很瞭解 JavaScript 就快速寫出一個頁面小指令碼。同時，大約五年前，庫的標準就是：

  • 在一些 CDN 上儲存最小化後的程式碼
  • 把它提供的功能繫結在全域性變數上（比如 window.Backbone）

現在一些庫依舊會打包構建全域性模組定義（UMD），它其實就是一個載入庫的全域性變數版，但是很多庫已經不這樣做了。現在，出現了更多的新的框架，這些小外掛都是專門服務於框架的了，而你不僅僅是需要它們（如果你需要 jQuery 外掛，那麼你也需要 jQuery 這個庫），而是需要用這個框架來完成你所有的頁面！

現代解決方案

當然，這個問題已經解決，解決方法就是在已有基礎上提供啟動方式或者特定框架，然後你就可以使用這些小外掛並編譯為一個靜態網站。此外，它們會在後臺使用上述工具載入模組或者編譯程式碼，所以你可以使用 JavaScript 的最新版本，並將邏輯拆分為最佳可複用的單元。這種方式的一個很好的例子就是 GatsbyJS 和 Nuxt.js。啟動方式通常是命令列，例如 create-react-app，它將繁瑣的步驟都隱藏了起來，並且僅僅需要給應用一個指令 —— “只管執行”，然後你就可以開始編寫元件了。

儘管如此，這種變化帶來了哪些問題呢？程式碼的維護性更高了（這都多虧了模組），你可以使用最新版的 JavaScript，還能保證所有不支援的功能都有可以替代的補丁，這在之前是很容易出現問題的地方。但是其實，問題有很多，在我看來：

  • 現在你必須非常瞭解 JavaScript（需要比之前更深的理解）
  • 不僅是 JavaScript，你可能還需要知道 webpack（為了處理靜態資源載入 —— 想象一下你忽然發現程式碼中在引用影象）
  • 現在，你的工作包括了使用大約 200MB 的檔案構建應用（而不是編寫文件）。
  • 讓你的小應用膨脹起來是像滑下坡那麼容易的事情。

我認為最後一部分是最值得關注的。很多教程都會建議你新增一些高階資料管理庫，用某些特定的，“更宣告式”的方法重構你的程式碼（想想那些人經常試圖說服你重構 HTML 結構），然後很多人就會按照教程建議的做了！這些建議是好的，但是可能只適用於大型網站，而不是那種小型的，用 5 個 .html 檔案就能完成的。是的，你不能複用這個選單，但是你可以直接複製它們（同時 CSS 類讓它在某種形式上能複用了）。

總結

也許我是錯的，也許並沒有那麼糟糕。但是使用網際網路、閱讀部落格、檢視網頁時，我覺得這些曾經每個人只要有 HTML 的只是和極少的 JS 技術就能完成的小型網站，正在慢慢消失，現在更多的網站被替換為更加“可擴充套件”的應用了。

如果發現譯文存在錯誤或其他需要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可獲得相應獎勵積分。文章開頭的 本文永久連結 即為本文在 GitHub 上的 MarkDown 連結。

掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。

相關文章