這是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 員工，我不方便在社交媒體上將自家產品同其他公司的產品做比較，本文就此結束，感謝閱讀，
更多Jerry的原創文章，盡在：“汪子熙”:
CSDN認證博客專家
前端框架
Node.js
SAP
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/264816.html
標籤：其他
上一篇：IOC容器的Unity的使用介紹