從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程序員必讀核心書單—基礎版

做爲一個程序員，你應該知道的編碼知識