Vue、React、Angular

Vue、React、Angular 常被一起稱(chēng)作三大框架、現(xiàn)代框架。

三大框架是目前驅(qū)動(dòng)前端項(xiàng)目底層的最常用的框架。隨著前端行業(yè)從業(yè)人員的增加，更易上手的 Vue 和 React 占據(jù)了更大部分市場(chǎng)。

本章節(jié)不會(huì)探討這些框架的具體用法

1. 前端框架改變了什么

隨著 AJAX 的普及以及瀏覽器性能的提升，前端的交互越來(lái)越復(fù)雜，前端工程師的工作職責(zé)也在變廣。

其中最容易讓代碼變得復(fù)雜的業(yè)務(wù)邏輯就是 DOM 操作。

在沒(méi)有任何框架的情況下，給一個(gè)按鈕切換文案可能是這樣的：

var btn = document.querySelector('.btn');

btn.addEventListener('click', function() {
  var txt = btn.innerText;

  if (txt === '開(kāi)') {
    btn.innerText = '關(guān)';
  } else {
    btn. innerText = '開(kāi)';
  }
});

如果要往里面插入各種邏輯，如發(fā)起請(qǐng)求，請(qǐng)求后對(duì)應(yīng)界面上的某個(gè) DOM 的復(fù)雜改變，代碼就會(huì)變得越來(lái)越難維護(hù)。

如果有維護(hù)過(guò)老項(xiàng)目，對(duì)這方面的印象會(huì)更深刻。老項(xiàng)目可能會(huì)充斥著各種字符串拼接 HTML，代碼可讀性差，邏輯難以被后人擴(kuò)充維護(hù)，小模塊的重構(gòu)又怕影響到項(xiàng)目根基，這些問(wèn)題會(huì)隨著時(shí)間慢慢暴露出來(lái)。

再就是花了太多時(shí)間在 DOM 操作上，為了取某個(gè)父級(jí)會(huì)經(jīng)歷多次 .parentNode，導(dǎo)致經(jīng)常要去數(shù)數(shù)等這些問(wèn)題。

不管是性能還是可維護(hù)性，總歸來(lái)講就是在 DOM 操作上吃了太多虧，這一點(diǎn)也是出現(xiàn)這些前端框架的出要原因：UI 與 數(shù)據(jù)的同步太費(fèi)事兒。

對(duì)于新人，剛學(xué)習(xí)前端框架感到最震撼的點(diǎn)通常都是框架對(duì) DOM 操作的解放，以 Vue2.x 為例：

<template>
	<button @click="toggle">
    {{ text }}
  </button>
</template>

<script>
	export default {
    data() {
      return {
        text: '開(kāi)',
      }
    },
    method: {
      toggle() {
        this.text = (this.text === '開(kāi)') ? '關(guān)' : '開(kāi)';
      },
    },
  };
</script>

以數(shù)據(jù)來(lái)驅(qū)動(dòng)視圖，特別是在列表渲染上，這個(gè)特性的優(yōu)點(diǎn)就能被放的很大，其具體實(shí)現(xiàn)原理可以學(xué)習(xí)對(duì)應(yīng)框架的底層細(xì)節(jié)。

所以前端框架帶來(lái)的最大改變，就是解放了大量的操作 DOM 的工作，讓開(kāi)發(fā)者更注重邏輯上的表現(xiàn)。

其他的改變，還有組件化、工程化等，具體開(kāi)發(fā)就能體會(huì)到。

2. 小結(jié)

前端框架是目前必備技能，可以選其一針對(duì)學(xué)習(xí)研究，再擴(kuò)展其他。

慕課網(wǎng)有 Vue 相關(guān)的 Wiki，相信閱讀完會(huì)有更多的收獲。