理解数据驱动 - Githubissues

数据驱动（Data-Driven）是一个形容词，意思是所有的决策和过程都是由数据决定的。常用于技术和商业领域，例如时下很火的大数据，根据大数据做相应决策的机制，就可以称这种机制为“数据驱动”的。

参考资料：Data Driven

在前端领域，要理解“数据驱动”，首先要理解“数据”的意义。

数据是什么

在MVC（Model-View-Controller）模式中，数据是Model；

在Web页面上，对于浏览器而言，数据是呈现页面之前的需要加载和处理的信息；

在前端开发中，数据是接口请求返回的内容，以及在代码运行过程中维护的状态。

归纳为：数据是指程序运行中的可变内容。

数据怎么来

内部赋值
```
function getA(){
const A = 'A'
return A
}
```
'A'是写在函数体内的数据

外部输入

function input( val ){
const output = val
return output
}

参数val是外部输入的数据

数据怎么用

数据是指程序运行中的可变内容，那么程序运行中的不变内容，就可能是数据的用途（数据也可能根本就没被用到）。

例如一个基本具备输入输出的函数：

function sum(a, b){
  return a + b
}

输入的参数a、b，函数运行的输出结果，都是可变内容，不变的是这个函数的运行逻辑。

上述概念是“数据驱动”中”数据“的意义。

数据驱动是什么

”数据驱动“是一种根据数据来决定程序执行逻辑的程序设计思想。

举个Web前端例子：

<div onclick="doSomething">click here</div>
<script>
  function doSomething(){
    //...
  }
</script>

常规的Web前端开发中，JavaScript是基于事件驱动的，事件被触发则执行相应的代码。上面的例子是当发生点击则执行逻辑。

如果加入数据驱动，会像这样：

<div onclick="clickHandler">click here</div>
<script>
  let data = 'did not click yet'
  function clickHandler(){
    data = 'clicked'    //改变数据
    canDo()
  }
  function canDo(){
    if(data === 'clicked') doSomething()    //根据数据判断是否执行
  }
  function doSomething(){
    //...
  }
</script>

这个例子就在事件驱动的基础上，融入了数据驱动：

doSomething()是否执行是由data决定的，即数据驱动doSomething()，而不是因为点击事件。

虽然源头仍是点击事件，但在其他事件里调用canDo()，也可以达到一样的目的。

在JavaScript里，事件驱动了程序的运行，是不可避免的。

在上述基础上，数据驱动仍然可以作为一种程序设计思想来使用。

为了方便地阅读和使用“数据驱动”的思想，本文引入Vue.js框架来继续说明：

<template>
  <div @click="changeData">{{data}}</div>
</template>
<script>
  export default {
    data(){
      return {
        data: 'did not change yet'
      }
    },
    methods:{
      changeData(){
        this.data = 'changed'
      },
    },
  }
</script>

这个Vue单文件组件例子内容是：在页面上渲染did not change yet，当点击后渲染内容变为changed。

需要开发的代码逻辑有：

初始赋值data、函数changeData()
页面渲染data内容
渲染元素绑定点击事件，事件回调函数为changeData()

整个逻辑比上个数据驱动的例子更清晰：因为data更新，所以页面视图更新。这称为”数据驱动视图“。

数据驱动的用途

在理解了数据是指程序运行中的可变内容，数据驱动是根据数据来决定程序执行逻辑之后，就基本掌握了数据驱动这一思想。

下面例举一些用途：

函数设计

函数的条件分支判断，就可以理解为”数据驱动“。

例如：

function foo(val){
  switch (val){
    case 1: return doA()
    case 2: return doB()
  }
}

组件设计

组件是前端开发中的一类代码单元，它可以小到一个函数，大到控制页面中的一部分区域展示。

在组件设计中使用数据驱动的思想，可以将组件的可变部分作为外部输入的数据，不变部分才进行硬编码。

例如：

一个商品展示组件，商品的标题、价格等字段作为数据从外部输入，组件内部完成对输入数据的展示逻辑。

接口设计

接口本就是数据传递的一种方式，用数据驱动的思想来设计接口，目的在于对数据进行抽象。

例如：

需求是提供查询用户等级的接口，而业务逻辑上用户等级又是因为用户经验值（EXP）达到等级要求（Lv）。

那么尽管服务端存储的数据是用户的经验值（EXP），但接口返回则是处理过后的用户等级（Lv）。

更复杂的，若执行某种前端逻辑需要根据多个服务端存储数据进行判断，那么接口应当输出判断结果。

小结

Data Driven 是一个很普及的开发宗旨，旨在化硬编码为灵活的数据，提升设计师的掌控力与开发过程中的迭代速度。

——怎么理解游戏开发中的“Data-Driven Design”？ - 迷途吧的回答 - 知乎

数据驱动在前端领域是一种程序设计思想，它是指根据数据来决定程序执行逻辑。

相较于事件驱动可以理解为”发生了什么时，该干什么“，则数据驱动可以描述为“什么情况下，该干什么”。

luoway / blog

理解数据驱动 #20