前端发展史

2020-03-12 本文已影响0人优迪

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

一、浏览器发展阶段

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
- 更新很快，不过资料基本都是外文，国内使用比较少。