第一週技術週報-前端框架演變

前言

在本週接觸了一個關於「前端框架演變」的話題。今天咱們就來聊聊，它究竟是怎麼進行演變的。

前端框架演變

web1.0時代

此時前端展現數據比較簡單，一般是由後臺使用模板引擎直接渲染的。在這個時期都還未產生「前端工程師」，更別談前端的發展能有多快了。這個時代做者經歷的並很少，比較也已通過去了不少年了，這裏就不深究。

web2.0時代

前端展現趨於複雜，因此逐漸就開始先後端分離式架構。此時有一個關鍵詞ugc: user generate content 用戶生成內容，也意味着交互愈來愈複雜，故而逐漸產生了「前端工程師」，專門來維護這些複雜的交互界面，後臺也能夠專一於本該屬於他們本身的業務邏輯以及業務架構中。

第一個時期：DIV+CSS佈局解放：面向 DOM 編程

在面向DOM編程過程很是直觀而且易操做，有一個缺點就是大量的代碼冗餘，例如獲取元素等，因而乎就誕生了偉大的jQuery庫

jquery優點：

1. 輕量級(採用 UglifyJS 壓縮後，大小保持在30kb左右)
2. 強大的選擇器
3. 出色的DOM操做的封裝
4. 可靠的事件處理機制
5. 對Ajax的封裝完善
6. 不污染頂級變量(jQuery只創建一個名爲jQuery的對象)
7. 出色的瀏覽器兼容性
8. 鏈式操做方式
9. 豐富的插件支持

第二個時期：Ajax 動態網頁：面向數據編程

Ajax直接拯救了JavaScript這麼語言。

咱們終於能夠再提交一個表單的時候，不須要再刷新界面了。給了用戶一個很是好的用戶體驗，最初在google的GMAIL中取得巨大的成功。逐漸全世界風靡。彼時的程序員的一個重要考覈標準就是能不能熟練掌握Ajax。

第三個時期：瀏覽器兼容：面向瀏覽器編程

隨着瀏覽器的種類繁多，以及它們都有本身的一套標準，使得研發人員在編寫代碼的時候要兼容多瀏覽器，因而乎就產生了兩種編程思想

• 向下兼容思想(作設計時要考慮到兼容到低版本瀏覽器)
• 漸進加強思想(高版本的瀏覽器使用最新的技術，低版本瀏覽器使用老舊點的技術)

就譬如reset.css就是爲了統一瀏覽器展現而存在的。

第四個時期：SPA 大型前端：面向模塊編程

隨着項目的複雜度越高，前端也開始仿製後端進行模塊化編程，例如如今流行的前端三大框架Angular、React、Vue，都是MV*架構模式

逐漸的咱們能夠開發中用戶體驗更佳的web應用了，用戶調整一個路由不再須要等待後臺的界面返回了，用戶能夠快速的切換各個界面間，而只須要付出極小的「帶寬」

至於將來的前端技術還會如何發展，咱們也須要盡更時代的發展了。

接下來咱們經過技術層面來看看變換

從jquery操做DOM 到 框架的演變

【操做DOM】
普通代碼編寫時，jquery直接操做DOM去作一些增刪改查的工做，當項目的增大，代碼也是愈來愈複雜，很是很差管理。因而這個時候就開始借鑑後端的模板引擎的思想，爲何要一直操做DOM去增刪改查，這樣顯得太麻煩了，爲何不先定義好數據模型，不論什麼操做，咱們先更改模型裏面的數據，而後在經過模板一次性去render到界面上去，這樣就相似react這些框架只操做數據去改變界面了。使得代碼可管理型加強了好多。

【mvc】

基於上圖，因而乎就出現了一個很是知名的前端MVC分層管理框架backbone

M(Model)：數據模型層
V(View)：視圖層，負責展現界面的層
C(Controller)：控制層，主要就是操做數據來渲染視圖的層

【現代框架】

框架是對一個完整代碼組織方法的描述

當你們意識到，每次請求一個頁面都要向後臺去發送一個請求，有時候彷佛是比較浪費資源的，而且一些重複的已經看過的界面任然要去向後臺請求，你們開始思考組件化加上前端自定義路由的重要性，這樣只須要加載一次代碼，經過前端自定義路由實現界面之間的跳轉，不用再向後臺請求界面了，速度和體驗一會兒增長了很多。

正由於這些問題因而乎就誕生了現代框架：Angular Vue React

【優點劣勢】

每一個時期的東西都有每一個時期的優點，不是說咱們使用了react的就能夠徹底拋棄jQuery。再作技術選型時仍是要綜合考慮咱們的項目比較適合哪一種技術，而不是哪一種技術好咱們就使用哪一種技術。

小結

經過本文咱們大概能瞭解到前端的一個發展歷史，以及前端技術的一個演變歷史。