从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. 实现静态页面表单

 1<!-- 实现静态页面 -->
 2<form>
 3  Name:
 4  <p id="name-value"></p>
 5  <input type="text" name="name" id="name-input" />
 6  Email:
 7  <p id="email-value"></p>
 8  <input type="email" name="email" id="email-input" />
 9  <input type="submit" />
10</form>

2. 事件绑定

1var nameInputEl = document.getElementById("name-input");
2var emailInputEl = document.getElementById("email-input");
3// 监听输入事件,此时 updateValue 函数未定义
4nameInputEl.addEventListener("input", updateNameValue);
5emailInputEl.addEventListener("input", updateEmailValue);

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

1var nameValueEl = document.getElementById("name-value");
2var emailValueEl = document.getElementById("email-value");
3// 定义 updateValue 函数,用来更新页面内容
4function updateNameValue(e) {
5  nameValueEl.innerText = e.srcElement.value;
6}
7function updateEmailValue(e) {
8  emailValueEl.innerText = e.srcElement.value;
9}

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

数据驱动编程Demo

1. 数据建模
表单中包含了两个数据数据框,name及Email,所以我们定义一个数据模型。

1// 包括一个 name 和 一个 email 的值
2export default {
3  data: {
4    return {
5      name: "",
6      email: ""
7    };
8  }};

2. 将数据与前端展示建立联系,并为相应元素绑定事件

 1<form>
 2  Name:
 3  <p>{{ name }}</p>
 4  <input
 5    type="text"
 6    name="name"
 7    v-bind:value="name"
 8    v-on:input="updateNameValue"
 9  />
10  Email:
11  <p>{{ email }}</p>
12  <input
13    type="email"
14    name="email"
15    v-bind:value="email"
16    v-on:input="updateEmailValue"
17  />
18 <input type="submit" />
19 </form>

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

 1export default {
 2  data: {
 3    return {
 4      name: "",
 5      email: ""
 6    };
 7  },
 8  methods: {
 9    // 绑定 input 事件,获取到输入值,设置到对应的数据中
10    updateNameValue(event) {
11      this.name = event.target.value;
12    },
13    updateEmailValue(event) {
14      this.email = event.target.value;
15    }
16  }};

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

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

·END·

花括号MC

Java·大数据·个人成长

微信号:huakuohao-mc

点一下你会更好看耶

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章