笔者背锅小故事

回想当年还是前端菜鸟时，我完全信任後端前辈回传的资料；记得当年有个产品上线前的测试一切正常，但上线几天後 PM 就接到客户回报系统上有页面显示不全的 Bug；因为网页前端是我负责的，所以第一个被抓去兴师问罪。

经验不足的我在收到 Bug 後，先用本机的环境模拟客户遇到的问题，但弄了老半天始终查不出问题发生的原因；最後到客户的正式机上查看显示不全的页面，才发现原来是後端忘记更新正式机的 API 版本；把状况跟後端的前辈沟通後，才顺利解决这个 Bug。

为了避免这种状况再次发生；之後在写前端时，都会先验证後端回传的资料是否符合规定的 JSON 资料结构。

大纲

1. 在使用後端的资料前，你有先做验证吗？

   • 1.1 面试官为什麽会问？
   • 1.2 面试官想从答案确认什麽？
   • 1.3 笔者提供的简答

2. 回答问题所需具备的知识

   • 2.1 认识「JSON schema」
   • 2.2 安装「jsonschema」并了解它的优点
   • 2.3 「jsonschema」验证范例

3. 衍伸问题

   • 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」的朋友建议自己手动实做看看，这算是非常重要的前端概念。

3. 衍伸问题

3.1 前端开发时会考虑哪些问题

这就是个大哉问，每个人都有自己考虑的点，我建议回答自己擅长且真的有导入专案的部分，因为通常後续会有更深入的问题。

考点：透过一个广泛的问题，了解你开发时最在意的点

为了减少设计变更，在开始前会先请 UI/UX 设计好 Wireframe（Figma），并向使用者说明流程取得共识，直到双方确认都没问题後再进入开发阶段；为了让网页风格一致，前端在设计时会遵循 Material Design。

为了提升开发效率，会先思考哪个 Framework 较适合这个专案；在依照设计提供的 Protype 完成设计後，会先用Responsively这款工具，确认网页在不同解析度的装置上是否会跑版。

完成前期开发後，会思考如何优化效能，像是用 lazy loading 提升页面载入速度、减少页面 Request 数量及 Response 时间，透过这些设计让使用者有更好的体验。

感谢大家的阅读，如果喜欢我的文章可以订阅接收通知；如果有帮助到你，按Like可以让我更有写文的动力，我们明天见～

参考资源

1. 拒当前端黑锅侠！用「jsonschema」来验证後端回传的 json 资料结构(笔者部落格)
2. ajv-validator/ajv
3. 验证资料的好帮手 - JSON Schema Validator
4. 前端工程师面试问题集

我在 Medium 平台 也分享了许多技术文章
❝ 主题涵盖「MIS & DEVOPS、资料库、前端、後端、MICROSFT 365、GOOGLE 云端应用、自我修炼」希望可以帮助遇到相同问题、想自我成长的人。❞