前端生存指南

2020-04-10 前端发展史评论字数统计: 7190字阅读时长: 15分

文章简介

这是一份个人总结的前端生存指南。

包括前端发展史、人物、书籍、编程相关知识。

针对人群主要是前端新人，部分内容为了保持简单易懂（对我来说），会写得很简单或者说是片面甚至部分有误，若觉得不对的，请自行点开链接查看来源原文。

前端发展史简述

静态页面阶段，主要使用 HTML\CSS\JavaScript，纯内容展示，页面主要靠跳转。例如新浪、网易这样的门户网站。

动态页面阶段，主要使用 AJAX，交互丰富，页面布局刷新，例如 Gmail、Google Maps。

框架阶段，主要使用 Angular、React、Vue 之类的 MVVM 框架，可以比较容易地构建单页应用。模块化、组件化、自动化，webpack，TypeScript，花样真多。

前端各项技术的重要性

HTML、CSS、JavaScript - 必学，重点学好HTML5、CSS3、ES3、ES5、ES6。

jQuery - 多用就会，可以不深入，但是 jQuery 有很多精妙的设计可以参考。

Angular、React、Vue - 精通一个

Webpack - 学会常用配置

HTTP - 必学

浏览器渲染原理 - 必学

git - 必修

Node - 选修

TypeScript - 选修

前端以外

数据结构与算法 - 懂算法的人善于计算时空复杂度，相当于在你做事情前，懂得怎么去衡量效率和开销。

计算机操作系统

计算机网络

数据库系统

计算机组成原理

编译原理 - 将源语言转化为目标语言,也就是将一门语言转化为另一门语言。

设计模式 - 编程套路。

现在的前端能做什么

游戏开发(Egret Layabox coco2d-js)
web开发(pc 移动端设备)
webApp开发(Dcloud RN weex ionic)
图形开发WebGl(three.js)
小程序/快应用
后端(nodejs)
桌面应用(electron)
嵌入式开发(Ruff)

前端可以关注的人

阮一峰

方应杭

司徒正美

张鑫旭

尤雨溪

廖雪峰

前端可以关注的网站

MDN

CSS-Trick

前端可以看的书

《代码大全》

名称：Code Complete

作者：Steve McConnell

出版时间：

第1版：1993

第2版：2004

评价：据说可以看十年，遇到什么问题想不通，可以看。

《ECMAScript 6入门》

名称：ECMAScript 6入门

作者：阮一峰

出版时间：

第3版：2017

评价：阮一峰的书，而且网络开源更新，看。

《你不知道的JavaScript》

名称：You Don’t Know JS Yet

作者：Kyle Simpson

出版时间：

上：2015

中：2016

下：2018

评价：还算比较新，可以看。

《JavaScript忍者秘籍》

名称：Secrets of the JavaScript Ninja

作者：John Resig / Bear Bibeault

出版时间：

第1版：2013

第2版：2018

评价：jQuery 作者的书，看就完事。

《JavaScript高级程序设计》

名称：Professional JavaScript for Web Developers

作者：Nicholas C.Zakas

出版时间：

第3版：2012

评价：经典书，但年代久远，ES6都出来了，大人时代变了！有空再看，或者抽重点部分看。

《JavaScript权威指南》

名称：JavaScript: The Definitive Guide

作者：David Flanagan

出版时间：

第1版：2006

第6版：2012

评价：经典书，但年代久远，ES6都出来了，大人时代变了！有空再看，或者抽重点部分看。

《JavaScript语言精粹》

名称：JavaScript: The Good Parts

作者：Douglas Crockford

出版时间：

第1版：2008

评价：经典书，但年代久远，ES6都出来了，大人时代变了！有空再看，或者抽重点部分看。

《图解HTTP》

名称：图解HTTP

作者：上野宣

出版时间：

第1版：2014

评价：很多图解，看。

《JavaScript DOM编程艺术》

名称：DOM Scripting: Web Design with JavaScript and the Document Object Model

作者：Jeremy Keith

出版时间：

第2版：2011年

评价：JavaScript入门很适合看。

《JavaScript设计模式》

名称：Learning JavaScript Design Patterns

作者：Addy Osmani

出版时间：

第1版：2013年

评价：JavaScript设计模式的书不多，但是书太旧，有空再看。

《编写可维护的JavaScript》

名称：Maintainable JavaScript

作者：Nicholas C. Zakas

出版时间：

第1版：2012

评价：经典书，但年代久远，ES6都出来了，大人时代变了！有空再看，或者抽重点部分看。

《HTTP权威指南》

名称：HTTP: The Definitive Guide

作者：David Gourley

出版时间：

第1版：2012

评价：经典书，但年代久远，ES6都出来了，大人时代变了！有空再看，或者抽重点部分看。

《写给大家看的设计书》

名称：The Non-Designer’s Design Book

作者：Robin Williams

出版时间：

第4版：2016

评价：设计方面的书，万一想不开，自己去设计网页呢。

1989 - World Wide Web（万维网）

名称：World Wide Web（万维网）

创建者：Tim Berners-Lee

目的：

Tim Berners-Lee 在欧洲核子研究组织 (CERN) 工作时，那里有来自世界各地的人，他们带着差异性很大的电脑，电脑里面有不同格式的文档、文件系统。而他需要文档里的数据。他想把文档都放在一起，点一下，就跳转到某一个文档。于是他发明了万维网（World Wide Web）。

TED-The next web：

主要相关技术：

URI、HTML、HTTP

1989 - URI（Uniform Resource Identifier）

名称：URI 统一资源标识符

创建者：Tim Berners-Lee

目的：保证资源统一、明确。

主要相关技术：

URI 分为 URN 和 URL

URN（Uniform Resource Name）是名称统一，例如通过 ISBN 0-486-27557-4 可以在图书管里找到一本书。

URL（Uniform Resource Locator）是位置统一，例如通过 http://example.org/wiki/Main_Page 找到 wiki/Main_Page 这个位置，但是这个位置的内容是可变的。

示例：

          userinfo       host      port
          ┌──┴───┐ ┌──────┴──────┐ ┌┴┐
  https://john.doe@www.example.com:123/forum/questions/?tag=networking&order=newest#top
  └─┬─┘   └───────────┬──────────────┘└───────┬───────┘ └───────────┬─────────────┘ └┬┘
  scheme          authority                  path                 query           fragment

1989 - HTML（Hypertext Markup Language）

名称：HTML 超文本标记语言

创建者：Tim Berners-Lee

目的：展示文档，让文档结构化、语义化，点击可跳转其他文档。

发展史：

1989 - HTML
1995 - HTML 2
1997 - HTML 3
1997 - HTML 4
2014 - HTML 5

示例：

<html>
    <head>
        <title> www.Example.org </title>
    </head>
    <body>
        <p>万维网 </p>
        <a href="https://www.w3.org/">W3C</a>
    </body>
</html>

1989 - HTTP（Hypertext Transfer Protocol）

名称：HTTP 超文本传输协议

创建者：Tim Berners-Lee

目的：浏览器和服务器之间传输内容做好沟通协调，不要乱来。

示例：

HTTP请求示例

curl -s -v -H "Jack: xxx" -- "https://www.baidu.com"

> GET / HTTP/1.1
> Host: www.baidu.com
> User-Agent: curl/7.64.1
> Accept: */*
> Jack: xxx

HTTP响应示例

< HTTP/1.1 200 OK
< Content-Type: text/html
< Date: Wed, 08 Apr 2020 03:18:29 GMT
< 
<html></html>

1990 - Web browser（网络浏览器）

名称：Web browser 网络浏览器

创建者：Tim Berners-Lee

目的：最初访问万维网是用命令行的（例如你可以curl），而图形化的网络浏览器可以更直观地访问。

发展史：

1990 - WorldWideWeb，由 Tim Berners-Lee 发布，后更名为Nexus，1994年停产。
1993 - Mosaic，由美国国家超级计算应用中心（NCSA）发布，世界上第一个流行的浏览器。
1994 - Navigator，由 Mosaic 团队负责人成立的公司 Netscape 发布，最受欢迎的浏览器。
1995 - Internet Explorer，捆绑在 Windows 系统的浏览器，后打败 NetscapeNavigator 成为霸主。
1998 - Firefox，Netscape 打不过微软 IE，推出了 Mozilla 基金会，开源了 Navigator，并改名为 Firefox 于 2004 年发布。
2003 - Safari 由苹果发布。
2008 - Chrome 由 Google 发布。于 2012 年成为最受欢迎的浏览器，此后占据主导地位。

示例：

在 IE 浏览器上地址栏输入 https://www.google.com/chrome，下载 Chrome 浏览器并安装。

1996 - CSS（Cascading Style Sheets）

名称：CSS 层叠样式表

创建者：Håkon Wium Lie

目的：HTML 发展到一定程度，甚至用 html 标签（例如<center>)来实现外观样式，CSS 旨在使 html 内容和外观样式分离。

发展史：

1996 - CSS 1

1998 - CSS 2 和 CSS 2.1，CSS 2.1 修改了 CSS 2 中的错误，增加了已有的浏览器的扩展内容。

2011 - CSS 3，CSS 被拆分为多个模块单独升级，统称为 CSS 3，CSS Specification

示例：

body{
    width: 100px;
    height: 100px;
    background-color: red;
}

相关网站：

1997 - JavaScript 和 ECMAScript

名称：

JavaScript

ECMAScript

创始人：Brendan Eich

目的：刚开始网页只能是静态的，需要一门语言来实现动态交互。例如在登陆时提示用户输入用户名。

设计思路：

ECMAScript Harmony: Rise of the Compilers

发展史：

1995 - Netscape 决定向 Navigator 添加脚本语言，于是雇佣 Brendan Eich 设计了一门新的语言，刚开始名字叫做Mocha，后改为LiveScript，最后又改名为 JavaScript。
1996 - 微软模仿 JavaScript 开发了 JScript，并内置在 IE3.0 中。
1996 - Netscape 衰落后，为了抵抗让微软，把 JavaScript 提交给 ECMA 组织。
1997 - ECMAScript 1.0，ECMA 发布 ECMA-262 文件，规定了浏览器脚本语言的标准并称为ECMAScript 1.0，其实就是 JavaScript。
1998 - ECMAScript 2.0 发布
1999 - ECMAScript 3.0 发布
2007 - ECMAScript 4.0 分歧太大，胎死腹中，最后把涉及现有功能改善的一小部分，发布为 ECMAScript 3.1。
2009 - ECMAScript 5.0 发布，新增部分特性，其实就是 ECMAScript 3.1。
2011 - ECMAScript 5.1 发布
2015 - ECMAScript 6.0 发布，又称 ECMAScript 2015，新增大量特性，终于达到成熟阶段。此后，每年都发布ECMAScript 并以年份为名，但更改范围比较小。
2016 - ECMAScript 7.0 发布
2017 - ECMAScript 8.0 发布，正式引入了 async 函数，使得异步操作的写法出现了根本的变化。
2018 - ECMAScript 9.0 发布
2019 - ECMAScript 10.0 发布

示例：

var person = {
    name: 'Jack',
    age: 18,
    wife: undefined,
    job: null,
    skills: ['read', 'swim', 'run'],
    sayName: function () {
        console.log(this.name)
    }
}

相关网站：

1998 - DOM（Document Object Model）

目的：把 XML 和 HTML 文档作为树结构，每个节点是一个对象，让 JavaScript 可以操作这些对象。

发展史：

1998 - DOM Level 1
2000 - DOM Level 2
2004 - DOM Level 3
2015 - DOM Level 4

示例：

var body = document.querySelector('body')

相关网站：

DOM-MDN

2000 - JSON

名称：JSON

创建者：Douglas Crockford

目的：数据交换格式，和 XML 五五开，成为 AJAX 主流的数据交换格式。

相关网站：

JSON官方

JSON-MDN

名称：CORS

创建者：Matt Oshry，Brad Porter和Michael Bodell

目的：允许跨域资源共享，AJAX 需要 CORS，其他 a\img\script 之类都不需要。

2005 - JSONP（JSON with Padding）

名称：JSONP

创建者：Bob Ippolito

目的：通过<script>标签来请求数据，可绕过同源策略。

示例：

前端

var callbackName = 'jaylan' + parseInt(Math.random() * 10000000, 10)
window[callbackName] = function (result) {
    console.log(result)
}
var script = document.createElement('script')
script.src = '/weather?callback=' + callbackName
document.body.appendChild(script)

script.onload = function (eee) {
    eee.currentTarget.remove()
    delete window[callbackName]
}
script.onerror = function (eee) {
    eee.currentTarget.remove()
    delete window[callbackName]
}

后端

var server = http.createServer(function (request, response) {
  var parsedUrl = url.parse(request.url, true)
  var query = parsedUrl.query
  if (path === '/weather') {
    let callback = query.callback
    response.statusCode = 200
    response.setHeader('Content-Type', 'application/json')
    response.write(`
      ${callback}.call(undefined,{
        "beijing":"rain",
        "guangzhou":"cloud"
      })
    `)
    response.end()
  } 
})

jQuery 发 JSONP

// jQuery把JSONP归类在ajax，不用在意。
$.ajax({
    url: "/weather",
    jsonp: "callback",
    dataType: "jsonp",
    success: function (response) {
        console.log(response)
    }
})

2005 - WebKit

名称：WebKit

创建者：苹果

目的：苹果公司在 KHTML 引擎基础上，建立了 WebKit 浏览器引擎。

2005 - CouchDB

名称：CouchDB

创建者：Apache软件基金会

目的：基于 JSON 格式的数据库，可以用 JavaScript 函数定义视图和索引。它在本质上有别于传统的关系型数据库，标识着 NoSQL 类型的数据库诞生。

2005 - XMLHttpRequest 和 AJAX（Asynchronous JavaScript and XML）

名称：AJAX - 异步的 JavaScript 和 XML

最初实现：微软 IE5 的 XMLHTTP ActiveX 的私有借口

命名者：Jesse James Garrett

目的：AJAX 是一组技术组合。它可以向服务器发送任意类型的请求，异步地接收响应，使得不会阻塞页面，并且可以局部刷新页面。

历史：

1996 - IE 引入 iframe，可以异步加载和获取内容。
1998 - Microsoft Outlook Web Access 团队开发了 XMLHttpRequest 脚本对象背后的概念。
1999 - 微软在 IE5 中实现了 XMLHTTP ActiveX 的私有借口，可以用 JS 直接发起 HTTP 请求。后来各家浏览器纷纷跟进，取名 XMLHttpRequest，并纳入 W3C 规范。
2004 - Gmail 和 Google Maps 把 AJAX 玩得出神入化，局部刷新、异步，像一个桌面应用那样，展现了 Web application 的强大。
2005 - Jesse James Garrett 发文章把这种技术组合成为 Ajax。
2006 - W3C 把 XMLHttpRequest 对象纳入标准规范。

示例：

原生 JS 写法

let request = new XMLHttpRequest()
request.open('GET', '/getWeather')
request.onreadystatechange = () => {
    if (request.readyState === XMLHttpRequest.DONE) {
        if (request.status >= 200 && request.status) {
            console.log(request.responseText)
        }
    }
}
request.send()

jQuery 的 AJAX 写法

$.ajax({
    url: "/getWeather",
    data: {
        local: 'beijing'
    },
    success: function (result) {
        $("#weather").html(result);
    }
})

后端服务器写法参考

if (path === '/getWeather') {
  response.statusCode = 200
  response.setHeader('Content-Type', 'text/html;charset=utf-8')
  response.write('Rain')
  response.end()
}

相关网站：

XMLHttpRequest-MDN

AJAX-MDN

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON)

2006 - jQuery

名称：jQuery

创建者：John Resig

目的：jQuery 是 JavaScript 超级经典的库，旨在简化 HTML DOM 树的遍历和操作以及事件处理，CSS 动画和 Ajax。

示例：

<div class="box"></div>
<div id="weather"></div>

<script>
    $('.box').css({
        'width': '100px',
        'height': '100px',
        'background-color': 'green'
    }).on('click', function () {
        $.ajax({
            url: "/getWeather",
            data: {local: 'beijing'},
            success: function (result) {
                $("#weather").html(result);
            }
        });
    })
</script>

相关网站：

jQuery官方

jQuery非官方中文网

2006 - Sass 和 Scss（Syntactically Awesome Style Sheets）

名称：Sass 语法很棒的 CSS

创建者：Natalie Weizenbaum

目的：

Ruby的人觉得CSS很烂，于是做一个语法更好版本的Sass。Sass语法让习惯用CSS的人用不习惯，于是做得更像CSS的Scss。

Sass 是一种预处理器脚本语言，需要编译为CSS才能被浏览器识别。

示例：

CSS

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

Sass

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

Scss

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

2008 - WebSocket

名称：WebSocket

创建者：Michael Carter

目的：HTTP是单向通信的，WebSocket提供全双工通信。

2008 - V8（JavaScript engine）

名称：V8

创建者：Google

目的：为 Chrome 浏览器而开发的，让 JavaScript 的运行变得非常快。

2009 - Node.js

名称：Node.js

创建者：Ryan Dahl

目的：基于 Chrome V8 引擎的 JavaScript 运行时，使得 JavaScript 可以用于服务器端编程。

2009 - CommonJS

名称：CommonJS

创建者：

目的：JavaScript 诞生之初是没有模块的，CommonJS 旨在在 Web 浏览器之外为 JavaScript 建立模块生态系统。

2009 - CoffeeScript

名称：CoffeeScript

创建者：Jeremy Ashkenas

目的：CoffeeScript 可转换为 JavaScript 运行，语法更简洁，对 JavaScript 后来的版本有着很大影响。

2009 - PhoneGap

名称：PhoneGap

创建者：Nitobi

目的：移动应用程序开发框架，主要针对 iOS 和 Android，使得 JavaScript 可以用于跨平台的应用程序开发。

2009 - Less（Leaner Style Sheets）

名称：Less 初学者的 CSS

创建者：Alexis Sellier

目的：做初学者快速易学版本的 CSS。Less 是一种预处理器脚本语言，需要编译为CSS才能被浏览器识别。

示例：

CSS

#header {
  width: 10px;
  height: 20px;
}

Less

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

2010 - NPM（Node Package Manager）

名称：NPM

创建者：Isaac Z. Schlueter

目的：Node.js 的默认包管理器，标志着 JavaScript 进入模块化开发的时代。

2010 - BackboneJS

名称：BackboneJS

创建者：Jeremy Ashkenas

目的：MVP 框架，被设计用于开发单页的 Web 应用程序（SPA）。

2011 - Browserify

名称：Browserify

创建者：Browserling team

目的：浏览器本身不支持模块，Browserify 让您在浏览器中使用模块，就像在 Node 中使用模块一样。

2011 - D3.js

名称：D3.js

创建者：Mike Bostock, Jason Davies, Jeffrey Heer, Vadim Ogievetsky

目的：数据可视化。

相关网站：

D3.js官方

ECharts官方 - 类似项目，偏重于展示。

2011 - Dart

名称：Dart

创建者：Google

目的：结束JavaScript语言在浏览器中的垄断，Chromium浏览器有内置的Dart虚拟机，可以运行Dart程序，但Dart程序也可以被编译成JavaScript程序运行。

2012 - AngularJS

名称：AngularJS

创建者：Google

目的：框架，解决开发单页应用程序时遇到的许多挑战。

2012 - Ember.js

名称：Ember.js

创建者：Yehuda Katz

目的：MVVM框架，解决开发单页应用程序时遇到的许多挑战。

2012 - TypeScript

名称：TypeScript

创建者：Microsoft

目的：严格的语法 JavaScript 超集，并增加了可选的静态类型，为开发大型应用程序而设计的，并可以编译为JavaScript。可以避免很多 JavaScript 由于数据类型引起的 bug。

2012 - Webpack

名称：Webpack

创建者：Tobias Koppers, Sean Larkin, Johannes Ewald, Juho Vepsäläinen, Kees Kluskens

目的：JavaScript 的模块捆绑器（bundle），转换.js .jpg .sass之类的各种前端资产。把具有依赖性的模块，生成静态资产。

2013 - React

名称：React

创建者：Jordan Walke 和 Facebook

目的：UI 框架库，引入了新的 JSX 语法，使得 UI 层可以用组件开发，同时引入了网页应用是状态机的概念。

2013 - PostCSS 和 Autoprefixer

名称：PostCSS

创建者：Andrey Sitnik, Ben Briggs, Bogdan Chadkin

目的：

PostCSS 是用于开发 CSS 工具的框架，例如可以开发 Sass 和 Less。

Autoprefixer 是 PostCSS 的插件，可以解析 CSS 并添加浏览器前缀。

Webpack、Grunt 和 Gulp 调用 PostCSS 的Autoprefixer插件，可以把Less、Sass等处理成CSS。

示例

Autoprefixer

.example {
    transition: all .5s;
}

CSS

.example {
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

相关网站：

PostCSS官方

Autoprefixer

2014 - Vue.js

名称：Vue.js

创建者：尤雨溪 - Evan You

目的：MVVM框架，构建用户界面和单页应用。

2015 - React Native

名称：React Native

创建者：Facbook

目的：将 React 框架移植到了手机端，可以将 JavaScript 代码转换成 ios 和 android 的原生代码，创建原生APP。

2015 - Babel (transcompiler)

名称：Babel

创建者：Sebastian McKenzie

目的：JavaScript 编译器，可以把最新的 JavaScript 语法转换成旧语法，以兼容浏览器。最初出名是因为把 ES6 转成 ES5，使得开发者开心用 ES6 而不用担心浏览器兼容性问题。

2017 - Flutter

名称：Flutter

创建者：Google

目的：用 Dart 语言开发多端应用程序。

Jaylan为美好的博客献上祝福

我家博客还蛮大的

前端生存指南

文章简介

前端发展史简述

前端各项技术的重要性

前端以外

现在的前端能做什么

前端可以关注的人

前端可以关注的网站

前端可以看的书

《代码大全》

《ECMAScript 6入门》

《你不知道的JavaScript》

《JavaScript忍者秘籍》

《JavaScript高级程序设计》

《JavaScript权威指南》

《JavaScript语言精粹》

《图解HTTP》

《JavaScript DOM编程艺术》

《JavaScript设计模式》

《编写可维护的JavaScript》

《HTTP权威指南》

《写给大家看的设计书》

1989 - World Wide Web（万维网）

1989 - URI（Uniform Resource Identifier）

1989 - HTML（Hypertext Markup Language）

1989 - HTTP（Hypertext Transfer Protocol）

1990 - Web browser（网络浏览器）

1996 - CSS（Cascading Style Sheets）

1997 - JavaScript 和 ECMAScript

1998 - DOM（Document Object Model）

2000 - JSON

2004 - CORS（Cross-origin resource sharing）

2005 - JSONP（JSON with Padding）

2005 - WebKit

2005 - CouchDB

2005 - XMLHttpRequest 和 AJAX（Asynchronous JavaScript and XML）

2006 - jQuery

2006 - Sass 和 Scss（Syntactically Awesome Style Sheets）

2008 - WebSocket

2008 - V8（JavaScript engine）

2009 - Node.js

2009 - CommonJS

2009 - CoffeeScript

2009 - PhoneGap

2009 - Less（Leaner Style Sheets）

2010 - NPM（Node Package Manager）

2010 - BackboneJS

2011 - Browserify

2011 - D3.js

2011 - Dart

2012 - AngularJS

2012 - Ember.js

2012 - TypeScript

2012 - Webpack

2013 - React

2013 - PostCSS 和 Autoprefixer

2014 - Vue.js

2015 - React Native

2015 - Babel (transcompiler)

2017 - Flutter

Jaylan为美好的博客献上祝福