从Jquery到Vue 一次编程思惟的转换

原创：花括号MC(微信公众号：huakuohao-mc)。关注JAVA基础编程及大数据，注重经验分享及我的成长。

已经不少年没有写前端代码了，个人前端水平还停留在Jquery一统天下的年代。最近想趁着假期，恶补一下前端的知识，因而就看了一下最近特别流行的Vue.js。这一看没关系，发现本身已经落后了整整一个时代。

前端编程思想已经由Jquery 时代的事件驱动编程 模型过渡到了以Vue.js 为表明的数据驱动编程 时代。

前端编程思想由事件驱动 到 数据驱动 的转变我以为意义重大，跟后端的MVC的思想同样，都具备划时代的意义。

能够说全部新的技术及编程思想的出现都是时代发展的必然产物。后端的MVC 思想出现，是由于当时后端逻辑变得愈来愈复杂，代码维护起来难度愈来愈大。为了让项目结构更清晰，维护起来更容易，人们提出了代码分层的概念; 因此出现了Model 层，View 层，以及Controller层。

如今前端页面也变得愈来愈复杂，特别是随着移动互联网时代的到来，为了可以更好的维护愈来愈复杂的前端代码，前端也提出了分层的概念，将代码也分为三层，分别是Model 层，VIew 层，以及ViewModel层。这就是VUE 框架的指导思想，简称MVVC。

前端的 MVVC跟后端的 MVC本质是同样的，这也印证了不少朴素的真理其实都是通用的这句话。

跟不少后端程序员都聊过，他们表示前端很难学，甚至无心中还会流露出某种羡慕嫉妒恨的表情。有个知名技术大咖曾经开玩笑说，你连JavaScript都学的会，还学不会C++。

其实后端程序员以为前端难学的缘由，大概有两点，其一是由于JavaScript语法自己的特性，灵活多变，而且JavaScript走的是原型继承的路线，跟其余面向对象语言大相径庭；第二点缘由就是编程思惟方式不同，大部分前端程序员都是事件驱动的编程思惟，而不少后端程序员都是数据驱动的编程思惟。

数据驱动VS事件驱动

数据驱动编程：

所谓的数据驱动编程，就是一切从数据的角度出发，把全部的东西都抽象成数据模型，而后进行数据建模。后端程序员大部分都是这种数据驱动的编程思惟。 举个简单的例子。若是要实现一个博客系统，那么后端程序员，特别是Java程序员，首先考虑的是先建立一个Blog 对象模型，该模型包含了，标题，做者，内容，发布时间等属性。而后才会考虑针对 Blog 有哪些操做，好比新增 Blog，查询 Blog，删除以及修改 Blog。这就是典型的数据驱动编程，编程以前思考的更多的是数据模型，以及数据模型之间的关系和变化。

事件驱动编程：

所谓的事件驱动编程，就是一切从事件的角度出发，以事件为思考点。由于前端更多的是处理页面与用户的互动关系，好比点击某个元素呈现不一样的页面内容，点击某个按钮进行表单提交等，这些都是由事件触发的，因此前端程序员大部分都是事件驱动编程的思惟方式。

VUE的出现

Jquery 是事件编程的表明，而VUE 则是数据驱动编程的表明，也是前端MVVC思想的具体体现。

下面咱们经过“监听页面表单元素变化”这个小功能，来体会一下两种编程方式的区别。

事件驱动编程Demo

1. 实现静态页面表单

<!-- 实现静态页面 -->
<form>
  Name:
  <p id="name-value"></p>
  <input type="text" name="name" id="name-input" />
  Email:
  <p id="email-value"></p>
  <input type="email" name="email" id="email-input" />
  <input type="submit" />
</form>
复制代码

2. 事件绑定

var nameInputEl = document.getElementById("name-input");
var emailInputEl = document.getElementById("email-input");
// 监听输入事件，此时 updateValue 函数未定义
nameInputEl.addEventListener("input", updateNameValue);
emailInputEl.addEventListener("input", updateEmailValue);
复制代码

3. 事件触发，更新页面内容

var nameValueEl = document.getElementById("name-value");
var emailValueEl = document.getElementById("email-value");
// 定义 updateValue 函数，用来更新页面内容
function updateNameValue(e) {
  nameValueEl.innerText = e.srcElement.value;
}
function updateEmailValue(e) {
  emailValueEl.innerText = e.srcElement.value;
}
复制代码

这就是事件驱动编程方式。整个编写代码的过程当中，咱们一直围绕事件在思考，也就是触发了什么事件，这个事件将带来什么结果。

数据驱动编程Demo

1. 数据建模 表单中包含了两个数据数据框，name及Email，因此咱们定义一个数据模型。

// 包括一个 name 和 一个 email 的值
export default {
  data： {
    return {
      name: "",
      email: ""
    };
  }};
复制代码

2. 将数据与前端展现创建联系，并为相应元素绑定事件

<form>
  Name:
  <p>{{ name }}</p>
  <input type="text" name="name" v-bind:value="name" v-on:input="updateNameValue" />
  Email:
  <p>{{ email }}</p>
  <input type="email" name="email" v-bind:value="email" v-on:input="updateEmailValue" />
 <input type="submit" />
 </form>
复制代码

3. 给数据模型添加相应的处理逻辑

export default {
  data: {
    return {
      name: "",
      email: ""
    };
  },
  methods: {
    // 绑定 input 事件，获取到输入值，设置到对应的数据中
    updateNameValue(event) {
      this.name = event.target.value;
    },
    updateEmailValue(event) {
      this.email = event.target.value;
    }
  }};
复制代码

这就是VUE 的数据驱动编程思想的体现。一直以数据为思考中心，考虑的是数据的变化，并非事件的变化。若是你是个后端程序员，特别是Java程序员，应该很容易接受这种编程方式。

以上就是我学习Vue的一些体会，事件驱动编程跟数据驱动编程 能够混合使用，毕竟咱们的世界不是非黑即白，主要看咱们真实项目的使用场景。另外本篇文章主要参考《深刻理解Vue.js实战》这本书，文中代码样例也来自于此。

---

推荐阅读：

这也许就是产品和开发互撕的本质缘由吧

Java程序员必读核心书单—基础版

做为一个程序员，你应该知道的编码知识