[面試][前端]在使用後端的資料前，你有先做驗證嗎？

13th鐵人賽前端面試前端驗證 jsonschema 前端設計

寶寶出頭天

團隊自虐病友團

2021-09-27 08:27:06

4186 瀏覽

分享至

筆者背鍋小故事

回想當年還是前端菜鳥時，我完全信任後端前輩回傳的資料；記得當年有個產品上線前的測試一切正常，但上線幾天後 PM 就接到客戶回報系統上有頁面顯示不全的 Bug；因為網頁前端是我負責的，所以第一個被抓去興師問罪。

經驗不足的我在收到 Bug 後，先用本機的環境模擬客戶遇到的問題，但弄了老半天始終查不出問題發生的原因；最後到客戶的正式機上查看顯示不全的頁面，才發現原來是後端忘記更新正式機的 API 版本；把狀況跟後端的前輩溝通後，才順利解決這個 Bug。

為了避免這種狀況再次發生；之後在寫前端時，都會先驗證後端回傳的資料是否符合規定的 JSON 資料結構。

大綱

在使用後端的資料前，你有先做驗證嗎？
- 1.1 面試官為什麼會問？
- 1.2 面試官想從答案確認什麼？
- 1.3 筆者提供的簡答
回答問題所需具備的知識
- 2.1 認識「JSON schema」
- 2.2 安裝「jsonschema」並了解它的優點
- 2.3 「jsonschema」驗證範例
衍伸問題
- 3.1 前端開發時會考慮哪些問題

1. 在使用後端的資料前，你有先做驗證嗎？

1.1 面試官為什麼會問？

這算是常見面試題，主要確認你的前端技術力，這類題目範圍非常廣泛；有興趣的朋友可以看我放在參考資源的「前端工程師面試問題集」；因為問題太過廣泛，幾乎無從準備，所以面試時就看個人基本功夠不夠深，經手的專案有沒有用到了。

1.2 面試官想從答案確認什麼？

你過去的專案是否有做這塊的基礎驗證
你的基本功是否紮實

1.3 筆者提供的簡答

現在的專案採前後端分離的架構，在前端使用後端的資料前，我會先透過「jsonschema」這款套件驗證 JSON 資料結構，確認後端回傳的欄位是否齊全、格式是否正確；以此避免前端顯示有問題的資訊，在遇到問題時也可以快速釐清是前端還是後端造成的。

2. 回答問題所需具備的知識

2.1 認識「JSON schema」

在介紹套件前，先讓大家對「JSON schema」有一個基礎認知；它是一種基於 JSON 格式定義 JSON 資料結構的規範，下面放上一段範例讓大家快速了解：

const person_schema = {
  type: "object",
  properties: {
    name: { type: "string" },
    age: { type: "number", maximum: 150 },
  },
  required: ["name", "age"],
};

我相信上面這個「JSON schema」應該是非常簡單易懂，他要求 JSON 的格式需要符合以下要求：

name 為 string
age 為 number 且最大值不得超過 150
name 與 age 都是必需的

2.2 安裝「jsonschema」並了解它的優點

現在有許多套件提供驗證 JSON 格式的功能，今天筆者用自己熟悉的套件：「jsonschema」來跟讀者們分享，了解使用的邏輯後，想換成其他套件都非常容易。

安裝步驟

SETP 1：建立一個專案資料夾。
SETP 2：在終端機輸入 npm init 初始化專案。
SETP 3：在終端機輸入 npm i jsonschema 安裝套件。

套件優點

如果後端 API 版本變更、 DB 的 Table 欄位變更沒有通知前端，前端頁面就可能發生新資料沒有位置放、舊資料部分欄位為空的狀況；如果沒有這個套件守護前端，工程師可能就要背黑鍋了。

可以詳細定義要驗證的 JSON 資料結構，包含內部所有參數的型態（string/number/array/object）。
驗證到錯誤格式時，會明確說明錯誤的原因。
可客製化錯誤訊息，轉換成好理解的文字。
學習及使用非常直覺。

2.3 「jsonschema」驗證範例

SETP 1：在專案資料夾下建立「simple.js」來了解如何驗證 JSON 資料結構。

STEP 2：以剛剛的 person_schema 作為範例來跟大家做講解，程式如下：

var Validator = require("jsonschema").Validator;
var v = new Validator();

const personSchema = {
  type: "object",
  properties: {
    name: { type: "string" },
    age: { type: "number", maximum: 150 },
  },
  required: ["name", "age"],
};
var person = {
  name: "baobao",
  age: 14,
};
let result = v.validate(person, personSchema);
console.log("valid：" + result.valid);
console.log(result);

STEP 3：在終端機輸入 node simple.js，會看到如下的驗證結果：

valid：true
ValidatorResult {
  instance: { name: 'baobao', age: 14 },
  schema: {
      type: 'object',
      properties: { name: [Object], age: [Object] },
      required: [ 'name', 'age' ]
  },
  options: {},
  path: [],
  propertyPath: 'instance',
  errors: [],
  throwError: undefined,
  throwFirst: undefined,
  throwAll: undefined,
  disableFormat: false
}

STEP 4：了解輸出參數的意義
- valid：用布林（boolean）型態回傳驗證是否通過（true/false）。
- instance：這是我們想要驗證的資料，此範例要驗證的資料是person這個變數。
- schema：我們提供驗證的規則（JSON schema）。
- errors：會以陣列的形式顯示驗證發現的錯誤，你可以透過這個參數在前端顯示錯誤原因；因此次驗證的資料結構正確，故回傳空陣列。
STEP 5：將person改為錯誤的資料結構：
- 將必填參數name移除
- 把 age 的數字填寫超過最大值
```
var person = {
  age: 200,
};
```

STEP 6：在終端機輸入 node simple.js，確認驗證結果的 errors 是否捕捉到錯誤。

errors: [
    ValidationError {
      path: [Array],
      property: 'instance.age',
      message: 'must be less than or equal to 150',
      schema: [Object],
      instance: 200,
      name: 'maximum',
      argument: 150,
      stack: 'instance.age must be less than or equal to 150'
    },
    ValidationError {
      path: [],
      property: 'instance',
      message: 'requires property "name"',
      schema: [Object],
      instance: [Object],
      name: 'required',
      argument: 'name',
      stack: 'instance requires property "name"'
    }
],

透過以上範例，相信大家都明白「jsonschema」套件的基礎使用方式，有興趣深入研究的朋友請參考官網文件；如果沒接觸過「JSON schema」的朋友建議自己手動實做看看，這算是非常重要的前端概念。