最佳作法

注意

Adobe建議針對需要單頁應用程式架構用戶端轉換的專案使用SPA編輯器(例如React)。 了解更多.

建立AEM Mobile隨選服務應用程式與建立直接在Cordova(或PhoneGap)殼層中執行的應用程式不同。 開發人員應熟悉:

  • 現成可支援的外掛程式,以及AEM Mobile專用的外掛程式。
注意

若要深入瞭解外掛程式,請參閱下列資源:

  • 使用外掛程式功能的範本,應以在瀏覽器中仍可授權的方式編寫,而不需使用外掛程式橋接器。

    • 例如,請務必先等待​deviceready​函式,再嘗試存取外掛程式的API。

AEM開發人員的准則

下列准則將協助想要建立行動應用程式範本和元件的資深網站AEM開發人員:

建構AEM網站範本,以鼓勵重複使用和擴充性

  • 比單一整體式檔案更偏好多個元件指令碼檔案

    • 提供許多空的擴充點,例如​customheaderlibs.html​和​customfooterlibs.html,允許開發人員在盡可能少複製核心代碼的同時變更頁面範本
    • 然後,範本可透過Sling的​sling:resourceSuperType​機制擴充和自訂
  • 相較於JSP,偏好Sightly/HTL做為範本語言

    • 使用它可讓程式碼與標籤分離,提供內建XSS保護的選件,並提供更熟悉的語法

最佳化裝置上效能

  • 文章特定指令碼和樣式表應包含在文章裝載中,使用dps-article contentsync範本
  • 應透過dps-HTMLResources內容同步範本,將多個文章共用的指令碼和樣式表納入共用資源
  • 不要引用任何渲染阻止的外部指令碼
注意

您可以詳細瞭解有關渲染阻止外部指令碼的資訊,請參閱

偏好應用程式專用的用戶端JS和CSS程式庫,而非網頁專用的程式庫

  • 若要避免在jQuery Mobile等程式庫中產生負擔,以處理大量裝置和瀏覽器
  • 當範本在應用程式的Web檢視中執行時,您可以控制應用程式將要支援的平台和版本,以及JavaScript支援將會存在的知識。 例如,相較於jQuery Mobile和Onsen UI,偏好Ion(可能只是CSS),而非Bootstrap。
注意

若要深入瞭解jQuery mobile,請按一下這裡

偏好微型程式庫而非完整堆疊

  • 將內容放在裝置玻璃上所花的時間,會因您的文章所依賴的每個資料庫而減慢。 當使用新的網頁檢視來轉換每篇文章時,會加劇此速度變慢,因此每個資料庫必須從頭開始重新初始化
  • 如果您的文章未建置為SPA(單頁應用程式),您可能不需要包含完整的堆疊資料庫,例如Angular
  • 偏好較小的單一用途程式庫,以協助您新增頁面所需的互動功能,例如FastclickVelocity.js

將文章有效載荷的大小降到最低

  • 以合理的解析度,使用最小的資產,以有效覆蓋您所支援的最大檢視區
  • 在影像上使用​ImageOptim​等工具,移除多餘的中繼資料

搶先一步

若要進一步瞭解其他兩個角色和責任,請參閱以下資源:

本頁內容

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now