JavaScript 庫和 WordPress:你需要知道的
已發表: 2017-10-24我之前說過,我再說一遍:如果您是 WordPress 用戶,您需要熟悉 JavaScript。 這只是網絡的方式。 那麼,真正的問題是您必須整理的令人不安的 JavaScript 庫數量。
有 Ember、React、Angular。 Vue 和 Preact。 並且不要忘記 Ionic、Express 或 Node。 jQuery、Meteor 和 Bootstrap 也值得一提。 哦,還有……
你明白我的意思。 (而這些只是我可以在不打開新標籤頁的情況下說出的那些。)JavaScript 庫隨處可見,因為它們對於開發非常重要。
無論您想要 DOM 操作、MVC 框架、AJAX 調用,還是其他完全不同的東西,您都可以從中提取一個庫來幫助您。
作為 WordPress 用戶,這應該是您耳中的音樂,這就是原因。
到底什麼是 JavaScript 庫?
簡單:一堆預先編寫的代碼。 沒有什麼花哨。 不過,你可以用它們做一堆花哨的東西。 這就是為什麼他們很棒。
通過使用預先編寫的代碼並將其拉入您的網站,您可以添加功能來節省您的時間,但也可能填補您的專業知識空白。 你很擅長你的工作,當然,但你是一名 WordPress 開發人員——而不是 JavaScript 開發人員。
沒關係。
當您在 WordPress 中使用 JavaScript 庫時,您就是在利用其他人的專業知識來增強您的網站和用戶體驗。
第一件事
作為 WordPress 用戶,您可以訪問 Core 中已有的一系列 JavaScript 庫及其依賴項。 查看 Codex 以獲取完整列表以及如何將wp_enqueue_script與內置和外部 JS 一起使用。
JavaScript 庫……它們有什麼用?
很多人在談論 JavaScript 庫時都會感到困惑,因為它們經常被錯誤地標記為JavaScript 框架,它們是不同的。 框架是一種庫,但功能與大多數不同。
框架是您用來構建完整應用程序或網站的工具。 本質上,JS 框架的功能與 WordPress 本身相同——為您正在從事的任何項目提供支柱。 它們在使用方面比非框架庫更加結構化。
框架可以分為幾類:前端框架、後端框架和全棧框架。 如果您不熟悉這些術語,前端是用戶與之交互的部分,後端是處理服務器端問題的部分,全棧處理前端和後端。
您可能聽說過一些最常見/流行的框架:
- 角
- 節點.js
- Vue.js
- 反應
- 餘燼
這一切如何在 WordPress 中發揮作用?
其中一些庫沒有。 這就是我想說的重點:如果您使用 WordPress,則不需要後端框架(在這種情況下,也不需要全棧框架)。 我們令人愉快的核心已經為我們處理了這種級別的結構。 (請注意,如果您是一名專門為 Core 做出貢獻和/或自己進行大量定制的開發人員,那麼這是一個有爭議的問題。)
您需要學習使用(或至少理解)的是前端框架和 DOM 操作庫。 這些發揮作用的次數遠遠多於任何其他類型的JavaScript庫。
PHP 是一種很棒的語言。 它為我們提供了今天所熟知的 WP,並且非常有效地將各種邏輯和功能置於用戶手中。 但是 JavaScript 庫獲得了這種力量並呈指數級增長。
某些插件,如 NinjaForms,雖然是用 PHP 編寫的——因為 WordPress 是這樣寫的——使用 JavaScript 庫來為用戶提供更好的體驗和更多的功能。 WPNinjas 使用 Backbone 和 Marionette 庫來實現這一點。

哎呀,即使在 Elegant Themes,Divi 3.0(這很棒,你應該完全加入以在所有網站上使用)也是用 React 編寫的。
即將推出的 Gutenberg 編輯器(至少目前是這樣)和名為 Calypso(以及 Jetpack)的 WordPress.com 管理面板也是如此。哎呀,您在 .org 儀表板中所做的幾乎所有事情都由 JavaScript 提供支持,直到發生某些變化在服務器上,需要保存。
但即便如此,這也可能很快就會改變……多虧了 WP REST API。
WP REST API + JavaScript 庫 = BFF
您現在可能已經聽說過 WP REST API。 簡而言之,它為 WordPress JavaScript 開發注入了大量活力,因為您不必通過 JavaScript 而不是依賴 PHP 發出服務器請求。
是的,您現在可以直接從前端訪問站點的後端,而不必費力地使用 PHP,從而減慢響應時間並限制功能。 WPMU 有使用 REST API 的細分,您也應該查看。
你可以用 JS 和 REST 做很多事情,想想幾乎是可怕的。 當您使用 React(特別是React Native)時,您可以使用 WordPress 數據庫作為您的移動應用程序的後端,而無需接觸 PHP。 您可以通過 REST API 通過 JSON 直接與 MySQL 交互。
在某種程度上,這種交互使 WordPress 的工作方式與我們上面討論的後端 JavaScript 框架非常相似,提供應用程序和數據庫管理的結構,而無需任何 PHP 中介。 WP 像這樣工作並不是什麼新鮮事——畢竟 CMS 就是這樣做的——但是與 JavaScript 庫和 JSON 的實現和集成是
雖然 React Native 特別能夠為移動應用程序做到這一點,但你也可以使用任何前端框架或庫來做同樣的事情——Vue.js 和 Ember 以及普通的舊 React(或者 Preact,如果你很討厭的話)。
如果你真的很討厭,你可以使用這些庫中的一個,製作你的網站,並使用足夠多的 Java Swift 將它包裝在 Web 視圖中,並通過 REST API 將它扔到 App Store 上。 這有點難看,但它應該工作。
WordPress 的未來
馬特去年表示,所有 WordPress 開發人員都應該“深入學習 JavaScript”。
我想,是時候讓我們都聽聽了。 老實說,您選擇先學習哪個或多個 JavaScript 庫並不重要。 一旦您熟悉了一兩個如何工作並與 WordPress 交互,您就很容易成為 JS 生態系統的一部分,進而成為 WP 的未來。
無論您是想為您的插件(如 Divi 或 Ninja Forms)打造出色的客戶端體驗,還是想為用戶需要快速流暢更新的出色 Web 應用程序,還是僅使用 WordPress 作為後端數據庫的移動應用程序,都有 JavaScript那裡的圖書館。
創意思想/shutterstock.com 的文章縮略圖