作為一個前端，必須要了解下前端的發(fā)展歷史蜈彼。

一、 瀏覽器發(fā)展階段

• 1991年 World Wide Web 瀏覽器發(fā)布俺驶，這是第一款Web瀏覽器幸逆，只可以顯示基本的樣式表。
• 后來幾年陸續(xù)出了幾款瀏覽器暮现，直到1995年IE的發(fā)布还绘，引發(fā)了一次瀏覽器戰(zhàn)爭
• 1996年Opera發(fā)布，2003年蘋果Safari發(fā)布栖袋，2004年FireFox發(fā)布拍顷，引發(fā)了第二次瀏覽器之爭。
• 最后到2008年 Google發(fā)布了Chrome 塘幅，以輕量級昔案，快，異常穩(wěn)固讓這款瀏覽器成為不可輕視的對手电媳。

二踏揣、 HTML是構成Web世界的基石

• 1993年6月互聯(lián)網(wǎng)工程工作小組發(fā)布工作草案
• 1997年 1月HTML3.2 發(fā)布，W3C 推薦標準匆背。
• 1997年 12月 HTML4.0發(fā)布
• 1999年12月HTML4.01發(fā)布呼伸，有了微小的改進
• 2014年 HTML5 發(fā)布

三、 CSS發(fā)展歷史

• 1996年12月 钝尸，推出第一個版本
• 1998年 括享，發(fā)布了CSS2.0
• 2011年，發(fā)布了CSS3.0 珍促，被分為多個模塊單獨升級铃辖。
• less,sass 簡化、功能更多的css語言猪叙，postcss 是一種css處理程序娇斩，可以做css的tree-shaking

四、JavaScript的發(fā)展歷史

• 1995年發(fā)布了LiveScript穴翩，后來改名叫Javascript犬第，對外宣稱是java的補充,后來微軟出了一個JScript, 迫于壓力加入ECMA組織，改叫ECMAScript

• 1997年 ECMAScript1.0 發(fā)布

• 2011年ECMAScript5.1發(fā)布芒帕，成為ISO標準歉嗓，到了2012年所有瀏覽器都支持ECMAScript5.1的全部功能。

• 2015年 ECMAScript6發(fā)布背蟆，又叫ECMAScript 2015鉴分。相對前一個版本有了大幅度的修改哮幢。目前瀏覽器的支持并不完全。

• 隨后每個一年增加一個版本志珍，到了2019年出現(xiàn)了 ECMAScript 2019

• js包括ECMAScript 橙垢、DOM和BOM, ECMAScript是語法和語義上的標準

  • 基本語法：借鑒C語言和java語言
  • 數(shù)據(jù)結構：借鑒java語言，將值分為原始值和對象兩大類
  • 函數(shù)用法：借鑒Schema語言和AWK 語言伦糯，引入了閉包
  • 原型繼承模型：借鑒Self語言
  • 正則表達式：借鑒Perl 語言
  • 字符串和數(shù)組處理：借鑒Python語言

• javascript 模塊化發(fā)展過程

  • 無模塊的時候只是用來處理一些表單以及簡單的動畫效果柜某，后來ajax被提出來后，傳統(tǒng)網(wǎng)頁慢慢轉變成富客戶端舔株，出現(xiàn)了一系列問題：全局變量沖突莺琳、函數(shù)命名沖突、依賴關系混亂载慈。

  • 2009年 nodejs 出現(xiàn)惭等，使得可以使用js來寫服務端代碼，伴隨著node的還有叫 commonjs的規(guī)范办铡，它主要分三部分：

    • require(模塊引用)
    • export(模塊定義并暴露)
    • module(模塊標記辞做，其中module.exports 被認為是默認導出的變量)

  • AMD(Asynchronous Module Definition)異步模塊定義

    require([module],callback)
    // AMD 默認推薦的是
    require(['./a', './b'], function(a, b) { 
      // 將依賴 a, b 模塊放進數(shù)組
      //  加載成功回調
      a.doSomething()   
      ...
      b.doSomething()   
      ...
    }) 
    

  • CMD(Common Module Definition)通用模塊定義, 依賴就近書寫。

    //CMD
    define(function(require, exports, module) {   
       // 依賴可以就近書寫   
       let a = require('./a'); 
       a.doSomething();
       ···
       let b = require('./b'); 
       b.doSomething();
       ... 
    })
    

  • UMD 是commonjs 寡具、AMD和CMD的兼容寫法秤茅。

    ((root, factory) => {
        if (typeof define === 'function' && define.amd) {
            //AMD
            define(['jquery'], factory);
        } else if (typeof exports === 'object') {
            //CommonJS
            var $ = requie('jquery');
            module.exports = factory($);
        } else {
            root.testModule = factory(root.jQuery);
        }
    })(this, ($) => {
        //todo
    });
    

  • ES6 模塊引用靜態(tài)化，編譯時就能確定模塊的依賴關系

    import { stat, exists, readFile} from 'fs'
    const fs = require('fs')
    

五童叠、 網(wǎng)頁的開發(fā)歷程

• 靜態(tài)頁面階段 這個時候的前后端是一體的框喳，前端頁面是靜態(tài)的，只是負責數(shù)據(jù)的展示厦坛。后端做了三件事：后端收到瀏覽器請求五垮、生成靜態(tài)頁面、發(fā)送頁面到瀏覽器杜秸。
• 2004年出現(xiàn)了AJAX放仗，此時可以動態(tài)獲取后臺數(shù)據(jù)，進行處理并局部刷新頁面撬碟。此時的前端功能開始豐富起來诞挨。
• MVC框架的出現(xiàn) 2010年 ，Backbone.js 作為第一個MVC前端框架呢蛤，具有讀寫數(shù)據(jù)惶傻，展示數(shù)據(jù)的功能，缺少了Controller其障， 因為他認為數(shù)據(jù)處理應該放在后端达罗。
• MVVM就是（Model 數(shù)據(jù)模型，View 視圖， View-Model 視圖模型粮揉，View 和 View-Model綁定），通過View和View-Model的雙向綁定實現(xiàn)了：
  • 用戶在View層修改數(shù)據(jù)抚笔，View-Model發(fā)生改變
  • View-Model層數(shù)據(jù)變了扶认，View層也會發(fā)生改變
• SPA （single page application）即是單頁面應用。從此前端開發(fā)從開發(fā)頁面變成了開發(fā)應用殊橙。目前比較熱門的是 Vue, React, Angular辐宾。

六、 三大框架的發(fā)展歷程

• Vue的發(fā)展

  • 2013年據(jù)說因為一場失戀膨蛮，在Google的尤雨溪受到Angular的啟發(fā)叠纹，從中提取部分，做成輕量級框架敞葛，命名Seed誉察。同年12月更名叫Vue,版本號是0.6.0

  • 2014年 Vue正式發(fā)布，版本號為0.8.0

  • 2015年 里程碑的1.0.0版本發(fā)布惹谐，同年vue-router持偏、veux、vue-cli相繼發(fā)布氨肌，這個時候Vue從一個視圖層演變成了漸進式的框架鸿秆，降低框架作為工具等復雜度。

    • 添加了指令縮寫 v-bind:src -> :src 和 v-on:click -> @click
    • 提高了渲染效率怎囚，增強了vue-loader和vueify
    • 數(shù)據(jù)綁定采用數(shù)據(jù)劫持的方式卿叽，其原理是通過Object.defineProperty 對對象的屬性進行get和set劫持。

  • 2016年 2.0.0版本發(fā)布恳守，吸收了React 的虛擬DOM渲染（平層diff等優(yōu)化方案）考婴，同時支持服務端渲染

    • 借鑒React 虛擬DOM 的思想，將template編譯為render函數(shù)井誉，該函數(shù)返回virtual DOM對象蕉扮，然后由patch函數(shù)調用，輸出DOM颗圣，被瀏覽器渲染喳钟。主要是通過diff進行渲染優(yōu)化，減小刷新范圍在岂，有利于多端展示奔则。
    • Render 函數(shù) 編譯模版作用，將運行時轉為編譯時蔽午，提高效率
    • 增加服務器渲染 易茬，能更好SEO，更快的首屏渲染

  • 2019年 2.6.0作為最后一個2.x版本發(fā)布因為接下來就是3.x版本了

  • 3.0.0 的預想 這個版本會發(fā)生很大的改變

    其中觀察機制 針對Object.defineProperty 函數(shù)的局限性:

    • 檢測屬性的添加和刪除；
    • 檢測數(shù)組索引和長度的變更抽莱；
    • 支持 Map范抓、Set、WeakMap 和 WeakSet食铐。

    解決方案即是基于Proxy 的observer實現(xiàn),提供全語言覆蓋的反應性跟蹤匕垫。

    另外還有高級API變更，源碼架構虐呻，其他運行時象泵，編譯器改進等

• React的發(fā)展

  • 2010年Facebook開源了PHP的一個擴展XHP，和JSX很像斟叼，這個新語法后來引入到了React中偶惠。
  • 2011年Jordan Walke 創(chuàng)建了FaxJS , 這是React js的早期原型
  • 2012年Facebook為解決廣告難管理問題開始React原型
  • 2013年 宣布React 正式開源
  • 2014年 創(chuàng)建了React 社區(qū)
  • 2015年Facebook 發(fā)布第一版React Native，后續(xù)實現(xiàn)了for iOS 以及for Android 的版本
  • 2018 React v16.3.0發(fā)布
  • 目前2020年2月16最新版本v16.13.0

• Argular的發(fā)展

  • 2009年開發(fā)朗涩，2010年發(fā)布初始版本忽孽，使用Javascript，又叫Angular JS 馋缅，目前1.7.9 版本于2019年11月發(fā)布
  • 2014年宣布Angular2 扒腕，并在2015年推出一個發(fā)布版本。不再受JS的作用域萤悴、控制性等特性要求瘾腰，使用組件等特性，用TypeScript替代Javascript
  • 2017年 發(fā)布Angular4覆履，完全向下兼容Angular2蹋盆，同年發(fā)布Angular5
  • 2018年發(fā)布Angular6，該版本改進了工具鏈硝全，對開發(fā)者更加友好栖雾，同年年底發(fā)布Angular7，同步依賴TypeScript3.1伟众， RxJs6.3和Node10
  • 2019年 發(fā)布Angular8析藕， 同年年底發(fā)布Angular9
  • 更新很快，不過資料基本都是外文凳厢，國內使用比較少账胧。

以上是我對前端發(fā)展的整理，希望能幫到大家先紫，如果能夠幫到您治泥，希望不吝點個贊哦；如果哪里寫的不對或者缺失遮精，還望告知～～

參考資料

https://www.yuque.com/ant-design/course/sc1lvc

http://www.reibang.com/p/6e61bf5c4d23

https://www.cnblogs.com/wenha/p/12079168.html

https://juejin.im/post/5c7c97f6f265da2de7136c59

https://www.infoq.cn/article/vue-3.0-roadmap

https://blog.risingstack.com/the-history-of-react-js-on-a-timeline/

http://www.reibang.com/p/aa2446510c97