這是Jerry 2021年的第 16 篇文章，也是汪子熙公眾號(hào)總共第 287 篇原創(chuàng)文章。

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

“母親經(jīng)常說，人生就像一盒巧克力，你永遠(yuǎn)不知道你會(huì)得到什么。”

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

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

2020年8月，我獲得了一個(gè)寶貴的機(jī)會(huì)，得以進(jìn)入一個(gè)全新的開發(fā)領(lǐng)域：基于 Angular 和 TypeScript 的 SAP Spartacus 開發(fā)。

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

如今我已經(jīng)是 SAP Spartacus 全球開發(fā)團(tuán)隊(duì)的一員，在一支技術(shù)氛圍濃厚的開發(fā)團(tuán)隊(duì)中工作，每天我都覺得收獲滿滿。

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

最近因?yàn)橐橘Y料，打開 SAP 官方幫助網(wǎng)站：help.sap.com，赫然發(fā)現(xiàn)該網(wǎng)站原來基于 AngularJs 實(shí)現(xiàn)。

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

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

AngularJS 1.0 是 Google 發(fā)布的第一個(gè) MVVM 框架，為前端開發(fā)帶來了很多新的思路。AngularJS 1.x 基于 JavaScript . 從 Angular 2 開始，采取 TypeScript 全新實(shí)現(xiàn)，是 AngularJS 1.x的全新改版，架構(gòu)和設(shè)計(jì)理念同 1.x 版本的 AngularJS 相比，均有了很大不同。

時(shí)至今日，AngularJS 和 Angular 具有完全不同的官網(wǎng)：

AngularJS 1.x: https://angularjs.org/
Angular 2 及其之后的版本：https://angular.io/

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

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

在 help.sap.com index.html 的注釋里，已經(jīng)解釋了引入 bootstrap 的原因：用于實(shí)現(xiàn)響應(yīng)式和移動(dòng)設(shè)備布局。

為什么 jQuery 也會(huì)一并引入? 因?yàn)?bootstrap 直到版本 5，才會(huì)移除對 jQuery 的依賴。

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

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

在 help.sap.com 的搜索欄輸入關(guān)鍵字 spa：

會(huì)依次調(diào)用 querySuggestionsProducts 和 querySuggestionsDocuments 兩個(gè)函數(shù)，向后臺(tái)發(fā)起搜索，分別返回匹配該關(guān)鍵字的產(chǎn)品和文檔。

這里仍然使用了 jQuery的 ajax 函數(shù)，發(fā)起 HTTP 請求。

返回的 ajax 響應(yīng)里，包含了 5 個(gè) 其名稱出現(xiàn)了 spa 字符串的 SAP 產(chǎn)品，及其對應(yīng)的 SAP 幫助文檔鏈接。

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

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

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

在我登錄后向 后臺(tái)發(fā)起請求時(shí)，這些 cookie 字段會(huì)自動(dòng)添加到 HTTP 請求的頭部中去。

而 SAP Spartacus 的 Local Storage, 存儲(chǔ)的則是當(dāng)前用戶的 userId，購物車 ID ，以及用于調(diào)用 SAP Commerce Cloud OCC API 的 access_token.

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

答案是 React，而且版本號(hào)不算低：16.14.0.

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

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

以上是生活随笔為你收集整理的SAP官方帮助网站，help.sap.com 背后那些事儿的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。