最佳作法

注意

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

建置AEM Mobile On-demand Services應用程式與直接在Cordova（或PhoneGap）殼層中執行的應用程式不同。 開發人員應熟悉：

  • 立即支援的外掛程式，以及AEM Mobile專用外掛程式。
注意

若要深入了解外掛程式，請參閱下列資源：

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

    • 例如，嘗試存取外掛程式的API前，請務必等候​deviceready​函式。

AEM開發人員指南

下列指引將協助經驗豐富的網站AEM開發人員，協助他們建立行動應用程式範本和元件：

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

  • 與單個整體式指令碼檔案相比，首選多個元件指令碼檔案

    • 提供一些空的擴充點，例如​customheaderlibs.html​和​customfooterlibs.html，這可讓開發人員在盡可能少複製核心程式碼的同時變更頁面範本
    • 接著，您可透過Sling的​sling:resourceSuperType​機制擴充和自訂範本

  • 使用Sightly/HTL而非JSP作為範本語言

    • 使用此功能可促進程式碼與標籤、內建XSS保護的選件分離，且有更熟悉的語法

針對設備效能進行優化

  • 應使用dps-article contentsync模板將特定文章指令碼和樣式表包含在文章裝載中
  • 應透過dps-HTMLResources contentsync範本，將多篇文章共用的指令碼和樣式表納入共用資源中
  • 請勿參考任何呈現封鎖的外部指令碼
注意

您可以在此處詳細了解關於呈現封鎖外部指令碼的詳細資訊。

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

  • 避免jQuery Mobile等程式庫的額外負荷，以處理大量裝置和瀏覽器
  • 當範本在應用程式的網頁檢視中執行時，您可以控制應用程式將要支援的平台和版本，以及了解將會有JavaScript支援。 例如，偏好Ionic（可能只是CSS）而非jQuery Mobile，偏好Onsen UI，而非Bootstrap。
注意

若要深入了解jQuery行動裝置，請按一下這裡。

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

  • 將內容放到裝置玻璃上所花的時間，會因您文章所依賴的每個程式庫而減少。 使用新的網頁檢視來轉譯每篇文章時，速度會更加緩慢，因此每個程式庫必須從頭再次初始化
  • 如果您的文章未建置為SPA（單頁應用程式），則您可能不需要包含完整堆疊程式庫，如Angular
  • 偏好使用較小的單一用途程式庫來協助新增頁面所需的互動功能，例如Fastclick或Velocity.js

將文章有效負載的大小減到最小

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

搶先一步

若要深入了解其他兩個角色和責任，請參閱下列資源：

本頁內容