@[toc]

Site Context 的實現位於 `core\src\` 資料夾之下。

![](https://img-blog.csdnimg.cn/img_convert/20d5509309b65c486971c49cdd5b6ece.png)

實現總共分下列八大部分：

![](https://img-blog.csdnimg.cn/img_convert/b1e3f0d7567b7ea654d70df7d0128e4c.png)

# site-context.module.ts

絕大多數 import 都是 `site-context` 資料夾自身的子資料夾提供的：

![](https://img-blog.csdnimg.cn/img_convert/93c1f68412f2d4da73d3476cefca1c2c.png)

上圖第一行，從 `@angular/core` 匯入 `ModuleWithProviders`，這是一個包裝器：

將 NgModule 與provider關聯的 NgModule 的包裝器。不推薦使用沒有泛型型別的用法。
該 Module 對外只暴露了兩個方法：

![](https://img-blog.csdnimg.cn/img_convert/ca8a482a2ee1d1fac9b7870830efe6d1.png)

## initSiteContextConfig

注入值：

- `SiteContextConfigInitializer`
- `SiteContextConfig`

![](https://img-blog.csdnimg.cn/img_convert/a211a4e5abc4cbd4c67606c14f531ae0.png)

如果 context 的 context 值被填充，那麼就返回 SiteContextConfigInitializer 例項，否則返回 null.

第 27 行的 `|` 代表聯合型別。

## forRoot

提供 global provider：
![](https://img-blog.csdnimg.cn/img_convert/9fdd39b5d76f18d9858c6225d7bbebd2.png)

這個 forRoot 方法在 base-core.module.ts 的 `imports` 區域被呼叫。

![](https://img-blog.csdnimg.cn/img_convert/23bedf4207582bccaf9718f08080ece2.png)

# config

先檢視 index.ts，從三個 TypeScript 檔案匯入：

```typescript
export * from './config-loader/site-context-config-initializer';
export * from './context-config-utils';
export * from './site-context-config';
```

![](https://img-blog.csdnimg.cn/img_convert/bb1e34693406f35cce2d73d2e40326e7.png)

## config-loader/site-context-config-initializer.js

還是先看其 import 部分，從 site-context 的上層目錄，即 `core/src` 裡匯入了：

- ConfigInitializer
- BaseSite
- JavaRegExpConverter
- WindowRef
![](https://img-blog.csdnimg.cn/img_convert/eb845bebb892ee4c95222a07f3b04447.png)

實現了 configInitializer 介面。

![](https://img-blog.csdnimg.cn/img_convert/2bb93f9ff14e94444a8e73457685b898.png)

這個介面定義在 `config` 資料夾裡，包含了字串陣列型別的 scopes 屬性，以及 configFactory，後者是一個函式，返回 Config 的 Promise.

![](https://img-blog.csdnimg.cn/img_convert/ca314ff477b8f1c3392ee428e60215b7.png)

Config 是一個純虛 class：

```typescript
export abstract class Config {}
```

所以為了實現該介面，依次定義了 scopes 值為 `context` 字串常量，以及呼叫自己的 `resolveConfig` 方法，返回一個 promise 物件。

![](https://img-blog.csdnimg.cn/img_convert/efd1e993df367b5a2437773f1deb4184.png)

建構函式里注入的三個屬性，都是從 `config` 裡匯入的。

### resolveConfig

呼叫 baseSiteService，取得所有的 baseSite，然後呼叫第 40 行的 find 方法，返回滿足 predicate 函式的 `單個` site 例項：
![](https://img-blog.csdnimg.cn/img_convert/af43ad42d0d67723abe1127a44c33831.png)

從錯誤訊息 `Error: Cannot get base site config! Current url (${this.currentUrl}) doesn't match any of url patterns of any base sites.` 似乎能看出，第 40 行程式碼根據當前 url 來判斷是否能 match 到某個定義好的 base site.

最後，在第 50 行的 map 裡，執行 projection，將 baseSite 對映成其配置資訊。

### getConfig

就是把輸入的 `source` 變數，型別為 BaseSite, 的對應屬性返回。

![](https://img-blog.csdnimg.cn/img_convert/2ec6cf8fa1e8e69538b3e7ef990ca5a4.png)

### isCurrentBaseSite

將第 79 行透過依賴注入得到的當前 url，`currentUrl` 同 site 的 `urlPatterns` 陣列做比較，透過正規表示式實現。如果匹配，說明當前 url 代表的就是一個 base site.

![image](https://img-blog.csdnimg.cn/img_convert/069894c2fd2925d27b5fb8b0688bfe8a.png)

### getUrlParams

將 OCC 裡用的 `Storefront` 字面量，對映成 Spartacus 裡使用的常量 `baseSite`：
![](https://img-blog.csdnimg.cn/img_convert/5f70424621cc1e6a09cdcbccd250130f.png)

## site-context-config.ts (SiteContextConfig 類)

匯入了 `core/config` 資料夾裡的 Config 類，這個類是一個純虛類，原始碼 `export abstract class Config {}`。給其增添了 `context` 欄位。下圖第 15 行是 TypeScript 的 Module Argumentation 語法，參考筆者這篇[文章](https://blog.csdn.net/i042416/article/details/121659101)。

![](https://img-blog.csdnimg.cn/img_convert/7ea5ab4cd573da1b0e3cf21224f8dadd.png)

## context-config-utils.ts (兩個工具函式)

### getContextParameterValues

工具方法，返回 `string[]`, 避免出現 null

![](https://img-blog.csdnimg.cn/img_convert/5ca082ea6aba9d5b62a7a5a165020efb.png)

### getContextParameterDefault

由此可知，返回 Context Parameter 預設引數的邏輯就是，陣列裡 index 為 0 的元素，就是預設引數。

![](https://img-blog.csdnimg.cn/img_convert/90682cd4d7cf26dd4da790188e67c565.png)

## default-site-context-config (defaultSiteContextConfigFactory)

只有一個 function，負責返回預設的 site context，全是硬編碼的 currency 和 language：

![](https://img-blog.csdnimg.cn/img_convert/663f000e4c633852dde09f1df916cbd5.png)

![](https://img-blog.csdnimg.cn/img_convert/26392dd5eee477e0a8d020f84b2f65a2.png)

這是一個工廠函式，用於 `SiteContextModule` 的 `forRoot` 靜態方法裡，返回 global providers 定義：

![](https://img-blog.csdnimg.cn/img_convert/a3cfc3d59b6a44e52e262e7e7129232f.png)

使用工廠函式返回預設 site context 配置：
![](https://img-blog.csdnimg.cn/img_convert/1a9667c13dd9456715c35807df562c34.png)

## base-site-config-validator.ts

這個檔案比較簡單，就包含一個 validator 校驗器，沒什麼複雜邏輯：

```typescript
export function baseSiteConfigValidator(config: SiteContextConfig) {
  if (getContextParameterDefault(config, BASE_SITE_CONTEXT_ID) === undefined) {
    return 'Please configure context.parameters.baseSite before using storefront library!';
  }
}
```

檢查是否配置了預設的 baseSite.

SAP Spartacus Site Context 實現專題頁面

相關文章