Day18 - Interpreting Machines - 1 ：什麽是 Interpret ？

还记得我们在 Day 09、Day 10 有 2 个自制版本的 createMacine

[Day 09] 的 createMacine 是 Pure function - 无状态版，要自己另外储存 previousState, nextState

[Day 10] 的 createMacine 是 有状态版，会回传我们一个 machine 的 object instance ，里面记忆着当前的状态(currentState)。

Day 16 介绍了第一个 XState API createMacine ，也是无状态 Pure function 版的 stateMachine 。

const doorMachine = createMachine(machineConfig);
const state0 = doorMachine.initialState;
console.log(state0);
const state1 = doorMachine.transition(state0, "开门");
console.log(state1);
const state2 = doorMachine.transition(state1, "关门");
console.log(state2);

今天要来介绍的就是第二种： 有状态版

1. Interpreting your Machine... Interpret??

第一版 Pure Function 固然美好，纯函数、有弹性、可测试...，但现实世界的应用场景

• 需要持续追踪当前的 state ，并且保存它！（浪费这麽多变数储存似乎不妥？）
• 需要执行 Side Effects (包含操控 I/O、Call API、写入档案、印出萤幕...)
• 延迟处理 or 处理延迟的 转移 (Transition) 及 事件 (Event)
• 跟外部的服务(Service)沟通

所以我们这才需要第二种版本，可储存状态的状态机，也就是当初 Day 10 我们的小练习采用一个 object 实作，而 XState 官方在 interpret API这里的描述提到了 Interpreter、Instance、Service，我也想在这边尝试着解释，见以下原文描述

TLDR :简言之，interpret API 就像是我们 Day 10 实作的有状态版 Machine 进阶版，若对官文文件描述没兴趣的人，可以直接跳过今天的介绍

1.1 Interpreter 是什麽？

TLDR : 以下这段原文是为了带出官方文件所指的 interpreter，我将在後面继续介绍

The interpreter is responsible for interpreting the state machine/statechart and doing all of the above - that is, parsing and executing it in a runtime environment. An interpreted, running instance of a statechart is called a service. by XState

Interpreter 中文翻译有 直译器、同步口译、表演者、演绎者，当初似乎没能找到适合的翻译，所以一开始这段没能理解很透彻

这边尝试用 Wiki 中的 Interpreter解释

TLDR : 这边尝试透过 Wiki 的解说，看能不能找到更多 Interpreter 的解释

In computer science, an interpreter is a "computer program" that directly executes instructions written in a programming or scripting language, without requiring them previously to have been compiled into a machine language program. An interpreter generally uses one of the following strategies for program execution:

1. Parse the source code and perform its behavior directly;

// 剖析原始码、直接执行原始码的行为

2. Translate source code into some efficient intermediate representation or object code and immediately execute that;

// 将原始码（人类读得懂的程序码）翻译成更高效的中介程序码、目的码（机器读得懂的程序码、CPU 可直接解读的、二进位档案），并立即执行程序码

3. Explicitly execute stored precompiled code[1] made by a compiler which is part of the interpreter system.

// 明确执行已经预先被储存、被 Compiler 预先编译过的程序码，这 compiler 是来自於某个 interpreter system 的一部分。
by Wiki - Interpreter

这边看完似乎仍一头雾水，但 Ken 认为...

Ken 的见解

我认爲 XState 文件提及的 interpreter API，比较接近 Wiki 的第 1 点解释，可被执行地、已经被预存的一些程序码（我们传入了 Machine Config ）被 XState interpreter API 解析好，我们就可以在 Runtime 执行我们所需要的这些 状态转换、Side Effect 执行、与外部沟通等等，以及如 Wiki 第一行，an interpreter is a "computer program"... ，这 Interpreter，就像另外一个程序，帮我们执行特别的任务。

1.2 Instance 是什麽？

An interpreted, running instance of a statechart is called a service. by XState

Instance 一词，在 OOP 中相当常见、相对容易理解

程序开发中，我们常用物件模拟现实世界的各种物体等等，以汽车举例：
汽车有各种特点、属性（如：厂牌、颜色、制造年份）及各种行为（加速前进、後退、转弯等），我们可以透过 class 这个模板、像工厂一般。我们只要发订单给工厂（car class）说我要制作一台 2022 玫瑰金 特斯拉，这个汽车 class 就可以帮我制作出一台我的特斯拉(car object)。而我这台可实际被执行、被我开上路的特斯拉就被称为实体（Instance），

如果我的描述不够清楚，可以另外参考
什麽是物件导向（2）：Object, Class, Instance

1.3 Service 是什麽？

An interpreted, running instance of a statechart is called a service. by XState

Service 一词，在学习 DI 时也很容易看见，以 Angular 官网举例
服务是一个广义的概念，它包括应用所需的任何值、函式或特性。狭义的服务是一个明确定义了用途的类别。它应该做一些具体的事，并做好。

Service is a broad category encompassing any value, function, or feature that an app needs. A service is typically a class with a narrow, well-defined purpose. It should do something specific and do it well. by Angular TW

Service 在 OOP 也可想成是那些形塑 商业逻辑 、可执行商业逻辑行为(behavior)的物件 (object)

by stack overflow - What is the service class in programming?

A service is an interpreted machine; i.e., an actor that represents a machine. by XState - Glossary

这边还有提到 Actor 由於篇幅的关系，有机会再开另外一篇解释

Actor 简言之，就是一个可拥有自己内部状态、并且与外部互动沟通的一个小程序码单位

Actor model 也是另外一种数学运算模型，我们这边先知道 每个小 State Machine Service or Instance 就是一个 Actor 即可。

小回顾

The interpreter is responsible for interpreting the state machine/statechart and doing all of the above - that is, parsing and executing it in a runtime environment. An interpreted, running instance of a statechart is called a service. by XState

这段文字也是我当初在阅读官方文件时，一头雾水、无感，需要补齐许多知识脉络的地方，希望透过上面的解释，能读者们更理解，之前提到的这一段英文描述的意思。

所以说 Machine Config 是一个充满我们商业逻辑的设定，根据这个商业逻辑所生产的 object instance 我们也把它称为是一个 service。

关於本篇的描述，若有解释不佳或不适当的地方，也请大家多多指教、谢谢！

明天我们将继续带大家实际操作 XState interpret API

参考文献

https://xstate.js.org/docs/guides/interpretation.html#interpreting-machines
https://xstate.js.org/docs/about/glossary.html#service
https://stackoverflow.com/questions/29715105/what-is-the-service-class-in-programming