前端发展史

作为一个前端，必须要了解下前端的发展历史。

一、 浏览器发展阶段

• 1991年 World Wide Web 浏览器发布，这是第一款Web浏览器，只可以显示基本的样式表。
• 后来几年陆续出了几款浏览器，直到1995年IE的发布，引发了一次浏览器战争
• 1996年Opera发布，2003年苹果Safari发布，2004年FireFox发布，引发了第二次浏览器之争。
• 最后到2008年 Google发布了Chrome ，以轻量级，快，异常稳固让这款浏览器成为不可轻视的对手。

二、 HTML是构成Web世界的基石

• 1993年6月互联网工程工作小组发布工作草案
• 1997年 1月HTML3.2 发布，W3C 推荐标准。
• 1997年 12月 HTML4.0发布
• 1999年12月HTML4.01发布，有了微小的改进
• 2014年 HTML5 发布

三、 CSS发展历史

• 1996年12月 ，推出第一个版本
• 1998年 ，发布了CSS2.0
• 2011年，发布了CSS3.0 ，被分为多个模块单独升级。
• less,sass 简化、功能更多的css语言，postcss 是一种css处理程序，可以做css的tree-shaking

四、JavaScript的发展历史

• 1995年发布了LiveScript，后来改名叫Javascript，对外宣称是java的补充,后来微软出了一个JScript, 迫于压力加入ECMA组织，改叫ECMAScript

• 1997年 ECMAScript1.0 发布

• 2011年ECMAScript5.1发布，成为ISO标准，到了2012年所有浏览器都支持ECMAScript5.1的全部功能。

• 2015年 ECMAScript6发布，又叫ECMAScript 2015。相对前一个版本有了大幅度的修改。目前浏览器的支持并不完全。

• 随后每个一年增加一个版本，到了2019年出现了 ECMAScript 2019

• js包括ECMAScript 、DOM和BOM, ECMAScript是语法和语义上的标准

  • 基本语法：借鉴C语言和java语言
  • 数据结构：借鉴java语言，将值分为原始值和对象两大类
  • 函数用法：借鉴Schema语言和AWK 语言，引入了闭包
  • 原型继承模型：借鉴Self语言
  • 正则表达式：借鉴Perl 语言
  • 字符串和数组处理：借鉴Python语言

• javascript 模块化发展过程

  • 无模块的时候只是用来处理一些表单以及简单的动画效果，后来ajax被提出来后，传统网页慢慢转变成富客户端，出现了一系列问题：全局变量冲突、函数命名冲突、依赖关系混乱。

  • 2009年 nodejs 出现，使得可以使用js来写服务端代码，伴随着node的还有叫 commonjs的规范，它主要分三部分：

    • require(模块引用)
    • export(模块定义并暴露)
    • module(模块标记，其中module.exports 被认为是默认导出的变量)

  • AMD(Asynchronous Module Definition)异步模块定义

    require([module],callback)
    // AMD 默认推荐的是
    require(['./a', './b'], function(a, b) { 
      // 将依赖 a, b 模块放进数组
      //  加载成功回调
      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 模块引用静态化，编译时就能确定模块的依赖关系

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

五、 网页的开发历程

• 静态页面阶段 这个时候的前后端是一体的，前端页面是静态的，只是负责数据的展示。后端做了三件事：后端收到浏览器请求、生成静态页面、发送页面到浏览器。
• 2004年出现了AJAX，此时可以动态获取后台数据，进行处理并局部刷新页面。此时的前端功能开始丰富起来。
• MVC框架的出现 2010年 ，Backbone.js 作为第一个MVC前端框架，具有读写数据，展示数据的功能，缺少了Controller， 因为他认为数据处理应该放在后端。
• MVVM就是（Model 数据模型，View 视图， View-Model 视图模型，View 和 View-Model绑定），通过View和View-Model的双向绑定实现了：
  • 用户在View层修改数据，View-Model发生改变
  • View-Model层数据变了，View层也会发生改变
• SPA （single page application）即是单页面应用。从此前端开发从开发页面变成了开发应用。目前比较热门的是 Vue, React, Angular。

六、 三大框架的发展历程

• Vue的发展

  • 2013年据说因为一场失恋，在Google的尤雨溪受到Angular的启发，从中提取部分，做成轻量级框架，命名Seed。同年12月更名叫Vue,版本号是0.6.0

  • 2014年 Vue正式发布，版本号为0.8.0

  • 2015年 里程碑的1.0.0版本发布，同年vue-router、veux、vue-cli相继发布，这个时候Vue从一个视图层演变成了渐进式的框架，降低框架作为工具等复杂度。

    • 添加了指令缩写 v-bind:src -> :src 和 v-on:click -> @click
    • 提高了渲染效率，增强了vue-loader和vueify
    • 数据绑定采用数据劫持的方式，其原理是通过Object.defineProperty 对对象的属性进行get和set劫持。

  • 2016年 2.0.0版本发布，吸收了React 的虚拟DOM渲染（平层diff等优化方案），同时支持服务端渲染

    • 借鉴React 虚拟DOM 的思想，将template编译为render函数，该函数返回virtual DOM对象，然后由patch函数调用，输出DOM，被浏览器渲染。主要是通过diff进行渲染优化，减小刷新范围，有利于多端展示。
    • Render 函数 编译模版作用，将运行时转为编译时，提高效率
    • 增加服务器渲染 ，能更好SEO，更快的首屏渲染

  • 2019年 2.6.0作为最后一个2.x版本发布因为接下来就是3.x版本了

  • 3.0.0 的预想 这个版本会发生很大的改变

    其中观察机制 针对Object.defineProperty 函数的局限性:

    • 检测属性的添加和删除；
    • 检测数组索引和长度的变更；
    • 支持 Map、Set、WeakMap 和 WeakSet。

    解决方案即是基于Proxy 的observer实现,提供全语言覆盖的反应性跟踪。

    另外还有高级API变更，源码架构，其他运行时，编译器改进等

• React的发展

  • 2010年Facebook开源了PHP的一个扩展XHP，和JSX很像，这个新语法后来引入到了React中。
  • 2011年Jordan Walke 创建了FaxJS , 这是React js的早期原型
  • 2012年Facebook为解决广告难管理问题开始React原型
  • 2013年 宣布React 正式开源
  • 2014年 创建了React 社区
  • 2015年Facebook 发布第一版React Native，后续实现了for iOS 以及for Android 的版本
  • 2018 React v16.3.0发布
  • 目前2020年2月16最新版本v16.13.0

• Argular的发展

  • 2009年开发，2010年发布初始版本，使用Javascript，又叫Angular JS ，目前1.7.9 版本于2019年11月发布
  • 2014年宣布Angular2 ，并在2015年推出一个发布版本。不再受JS的作用域、控制性等特性要求，使用组件等特性，用TypeScript替代Javascript
  • 2017年 发布Angular4，完全向下兼容Angular2，同年发布Angular5
  • 2018年发布Angular6，该版本改进了工具链，对开发者更加友好，同年年底发布Angular7，同步依赖TypeScript3.1， RxJs6.3和Node10
  • 2019年 发布Angular8， 同年年底发布Angular9
  • 更新很快，不过资料基本都是外文，国内使用比较少。

以上是我对前端发展的整理，希望能帮到大家，如果能够帮到您，希望不吝点个赞哦；如果哪里写的不对或者缺失，还望告知～～

参考资料

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

https://www.jianshu.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/

https://www.jianshu.com/p/aa2446510c97