這是Jerry 2021年的第 15 篇文章，也是汪子熙公衆号總共第 286 篇原創文章。
Jerry 之前寫過一篇文章 介紹一個免費的雲開發工具：Cloud Shell，這個工具其實就是在浏覽器裡使用的遠端 Linux Shell 環境，預裝了 Java，npm，git，nodejs，docker 等常用的開發和部署工具。
本文介紹另一個在浏覽器裡使用的線上 IDE .
Jerry 所在的團隊，使用 Visual Studio Code 進行 SAP Spartacus 的 TypeScript 開發。
除了 Visual Studio Code 之外，StackBlitz 是另一個我們團隊經常使用的線上 IDE：
StackBlitz 無需注冊，使用 Github 賬号即可登入。其界面風格和 Visual Studio Code 極為相似，支援前端三駕馬車 Angular，React 和 Vue 項目的建立，包含 Web 項目線上開發，自動管理項目依賴，自動編譯，頁面效果實時預覽等實用功能。
[此處插入動畫]
StackBlitz 一個典型的使用場景：Jerry 在開發過程中發現某個 Angular 功能點，沒有按照我期望的方式工作。顯然是我使用的方法不對，我想尋求團隊内 Angular 大佬的幫助。
簡單地把我遇到問題的代碼和錯誤截圖發給大佬們，顯然是一種不禮貌的做法。僅僅憑借靜态代碼和錯誤提示遠遠不夠，最好能提供一個大佬能夠在其本地友善地複現問題的環境：StackBlitz 就是一個比較好的選擇。
于是我在 StackBlitz 裡建立一個簡單的 Angular 工程，把我遇到的問題在這個 Angular 工程裡複現，然後通過下圖的 Share 按鈕，将項目 url 發生給團隊大佬。對方在浏覽器裡打開該 url，就可立即複現我的問題。
StackBlitz 能否作為 SAP UI5 開發的線上 IDE 呢？Jerry 簡單試了試，雖然 StackBlitz 無法像原生支援 Angular，React 和 Vue 那樣支援 SAP UI5，但仍然可以用來做一些簡單的 SAP UI5 應用的驗證工作，比如測試某些 SAP UI5 控件的行為。
之前 Jerry 的文章 一個用于SAP UI5學習的腳手架應用，沒有任何背景API的依賴 介紹的腳手架應用，運作在 nodejs express 架構上。同樣，我們可以把這個腳手架應用遷移到 StackBlitz 上。
看一個實際的使用 SAP UI5 腳手架應用的需求。
下圖是 SAP Spartacus 使用者編輯頁面，每個使用者可以配置設定若幹個角色，除了點選下圖紅色每種角色對應的圓角正方形框之外，點選綠色的文本框，也需要能選中對應的角色。
這是一個 Accessibility 的需求，為了確定使用者在螢幕尺寸較小的移動裝置上，也能毫不費力的勾選某個角色。
現在我想驗證 SAP UI5 的 Checkbox 控件，是否也同樣具有該 Accessibility 功能，即點選 Checkbox 的文本本身，也能選中該 Checkbox.
StackBlitz 中建立一個基于 HTML/JS/CSS 的 Static 項目：
把下圖的27行代碼粘貼到 StackBlitz 正中的 HTML 編輯器裡去：
螢幕最右邊區域中，StackBlitz 的嵌入伺服器，會自動把 index.html 的内容渲染出來。
渲染出的 SAP UI5 頁面裡，我看到了期望出現的 Customer Checkbox，并且點選 Customer 文本，發現前面的小勾也自動被勾上了，說明 SAP UI5 的 Checkbox 控件，和 Spartacus 一樣，也滿足 Accessibility 的需求。
檢視渲染出的 HTML 源代碼可知道實作原理：sap.m.Checkbox 在運作時會渲染出 div( role 為 checkbox ) 和 label 元素，label 元素的 for 屬性的值，等于 div 元素的 id，進而建立起二者的綁定關系。浏覽器即可確定，label 被點選時，其關聯到的 role 為 checkbox 的 div 元素也自動被選中。
遺憾的是，通過 StackBlitz 向導建立的 Static Web 項目，隻支援加載 HTML/CSS/JS/JSON 類型的資源，而 SAP UI5 XML 視圖，因為其格式為 xml，無法正常被 StackBlitz 加載。是以，在 StackBlitz 裡進行 SAP UI5 開發，隻能使用基于 JavaScript 的視圖類型。
如果有朋友找到在 StackBlitz 裡使用 SAP UI5 XML 視圖的辦法，歡迎分享給大家。
當然，大家也可以嘗試 Visual Studio Code 這些和 SAP UI5 相關的 Extensions，感謝閱讀。
————————————————
版權聲明：本文為CSDN部落客「汪子熙」的原創文章，遵循CC 4.0 BY-SA版權協定，轉載請附上原文出處連結及本聲明。
原文連結：
https://blog.csdn.net/i042416/article/details/113497933