SAP官方幫助網站，help.sap.com 背后那些事兒

這是Jerry 2021年的第 16 篇文章，也是汪子熙公眾號總共第 287 篇原創文章。

“My momma always said life was like a box o’chocolates. You never know what you gonna get.”

“母親經常說，人生就像一盒巧克力，你永遠不知道你會得到什么。”

這段話用在程序員的職場生涯上也同樣成立。

就在2020年8月前，Jerry 在 SAP 成都研究院的開發工作，一直專注在后臺開發領域，使用的編程語言和平臺是 ABAP，Java 和 nodejs. 雖然在2014年到2016年之間，也曾短時間做過 SAP CRM Fiori 應用的開發，但現在回顧，當時無非是用 javaScript 編寫一些簡單的業務邏輯罷了。作為一個 SAP UI5 應用開發人員，得益于 SAP UI5 提供的完善的用于企業級 Web 應用開發的控件庫，當時我們整個開發團隊，并沒有在 UI5 應用的頁面布局上花費太多的心思。

2020年8月，我獲得了一個寶貴的機會，得以進入一個全新的開發領域：基于 Angular 和 TypeScript 的 SAP Spartacus 開發。

剛剛接觸 Angular 這款以學習曲線陡峭著稱的前端框架時，我也度過了一段短暫卻很抓狂的時光，不過好在終于熬過來了。

如今我已經是 SAP Spartacus 全球開發團隊的一員，在一支技術氛圍濃厚的開發團隊中工作，每天我都覺得收獲滿滿。

我的開發重心轉到前端之后，一個職業習慣被無限放大了：訪問一個網站，第一件事就是F12，激活開發者工具，然后像年輕時玩 RPG 游戲時操作主角到房間里一陣翻箱倒柜一樣，在該網站的實現代碼里到處折騰。

最近因為要查資料，打開 SAP 官方幫助網站：help.sap.com，赫然發現該網站原來基于 AngularJs 實現。

地址欄里輸入 help.sap.com 之后，返回的第一個響應，里面包含的一系列以 ng 為前綴的 HTML 元素屬性，以及雙重大括號圍繞變量的 Interpolation 語法，能夠讓我們識別出該網站基于 AngularJS 開發而成。

從這個 index 頁面請求的響應里，我們能看出 help.sap.com 用到的前端框架，除了 AngularJS 1.4.8 之外，還有 Bootstrap 3.1.1 和 jQuery.

AngularJS 1.0 是 Google 發布的第一個 MVVM 框架，為前端開發帶來了很多新的思路。AngularJS 1.x 基于 javaScript . 從 Angular 2 開始，采取 TypeScript 全新實現，是 AngularJS 1.x的全新改版，架構和設計理念同 1.x 版本的 AngularJS 相比，均有了很大不同。

時至今日，AngularJS 和 Angular 具有完全不同的官網：

AngularJS 1.x: https://angularjs.org/

Angular 2 及其之后的版本：https://angular.io/

help.sap.com 使用的 AngularJS 版本號是 1.4.8，而SAP Spartacus 3.0 使用的 Angular 版本號是：10.2.4

在復雜前端應用中，類似 help.sap.com 網站這種多前端框架混搭的做法是一種很常見的開發方式，比如 SAP Spartacus 就和 help.sap.com 一樣，采取 Angular 和 bootstrap 混用的方式：

在 help.sap.com index.html 的注釋里，已經解釋了引入 bootstrap 的原因：用于實現響應式和移動設備布局。

為什么 jQuery 也會一并引入? 因為 bootstrap 直到版本 5，才會移除對 jQuery 的依賴。

https://blog.getbootstrap.com/2019/02/11/bootstrap-4-3-0/

因此，無論是 help.sap.com, 還是 SAP Spartacus，目前都無法避免對 jQuery 的依賴。

在 help.sap.com 的搜索欄輸入關鍵字 spa：

會依次調用 querySuggestionsProducts 和 querySuggestionsDocuments 兩個函數，向后臺發起搜索，分別返回匹配該關鍵字的產品和文檔。

這里仍然使用了 jQuery的 ajax 函數，發起 HTTP 請求。

返回的 ajax 響應里，包含了 5 個 其名稱出現了 spa 字符串的 SAP 產品，及其對應的 SAP 幫助文檔鏈接。

后臺 API 返回的搜索結果，通過 ng-if, ng-repeat 等 Angular Structural 指令，顯示到前臺頁面上。

help.sap.com Local Storage 里存儲的值：國家，省，市的名稱：

Cookie 里存儲了我登錄 SAP Help Portal 的用戶 ID 和用戶名：

在我登錄后向 后臺發起請求時，這些 cookie 字段會自動添加到 HTTP 請求的頭部中去。

而 SAP Spartacus 的 Local Storage, 存儲的則是當前用戶的 userId，購物車 ID ，以及用于調用 SAP Commerce Cloud OCC API 的 access_token.

本文只是簡單地窺探了一些 help.sap.com 網站的前端實現。那么，SAP 的門戶網站，sap.com, 又是基于什么前端框架來實現的呢？

答案是 React，而且版本號不算低：16.14.0.

至此肯定有些朋友會問，為什么這些 SAP 自己的網站，沒有采用 SAP UI5，而采取 Google 的 Angular 或者 Facebook 的 React 來實現？其實如果對 SAP UI5，Angular 和 React 的強項，以及各自擅長的使用場合有所了解的話，也就不難回答這個問題了。作為 SAP 員工，我不方便在社交媒體上將自家產品同其他公司的產品做比較，本文就此結束，感謝閱讀。

web前端 網站

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。