事件驱动
什么是 事件驱动
前端开发在实现功能的时候,会更倾向于使用事件驱动,这是因为受到 JavaScript 语言的设计和使用场景的影响。
作为浏览器脚本语言,JavaScript 的主要用途是与用户互动、操作 DOM,实现页面 UI 和交互操作,属于 GUI(图形用户界面)编程。而 GUI 则是基于事件 I/O 模式的编程方式。
GUI 与事件
GUI 应用程序注重与用户的交互,大部分的程序执行需要等到用户的交互动作发生之后,所以 GUI 程序的执行取决于与用户的实时交互情况。
然而,用户在访问程序期间,与程序进行交互的频率并不高。若不停轮询获取用户输入(类似 HTTP 短轮询),不仅资源利用率低,还无法做到真正的同步。因此,GUI 程序会将执行流程交由用户控制,当用户触发事件的时候进行响应,调用预先绑定好的代码来对事件进行处理。
实例
我们在写代码实现页面功能的时候,思路常常是这样的:
- 编写静态页面(HTML 和样式);
- 在特定的元素上添加事件监听,监听用户交互(点击、输入、拖拽)等事件;
- 将事件绑定到对应的函数和处理逻辑,比如获取用户输入/应用状态、计算并更新状态等;
- 根据计算后的数据状态,更新相应的页面元素。
通俗地说,事件驱动思维是从事件响应出发,来完成应用的设计和编程。这种编程方式实现起来既简单又清晰,所以很多开发者会选择(或是下意识地)使用事件驱动方式来写代码。
数据驱动和事件驱动的差异
数据驱动和事件驱动的最大差异是开发的视角。
- 事件驱动会关注于“操作”和“响应”,基于流程实现编码。
- 数据驱动则会关注于“数据”和“数据的变化”,基于状态实现编码。
数据驱动和事件驱动的区别
- 数据驱动更容易将视图与逻辑解绑,能快速适应变更和调整。
简单来说,基于数据模型设计的代码,即使经历了需求变更、页面结构调整、服务器接口调整,也可以快速地实现更新和支持。 - 事件驱动更倾向于流程式开发,数据驱动倾向于数据状态的变更和流动。
事件驱动的方式相比于数据驱动,少了数据抽象设计的一部分,因此开发的时候可能很快就完成某个功能的实现。但从维护和拓展的角度来说,习惯数据驱动的方式,在遇到功能变更和迭代时可以更高效、更合理地进行调整。