这是我参与「第四届青训营 」笔记创作活动的的第2天
前端开发：起源、架构、变迁
只读时代 (1989 - 2004)
早期前端技术也就是在出现初期，只由现在俗称的前端三件套 HTML/CSS/JavaScript 所构成的, 页面基本都是静态只读页面。
- 特点：单向发布、静态只读、链接跳转、刷新页面、表格对齐元素、CGI
体验时代 (2005 - 2010)
2005年 Jesse James Garrett 提出了Ajax (Asynchronous Javascript And XML)。使用Ajax允许通过与场景后面的 Web 服务器交换数据来异步更新网页，而不需要刷新页面。Ajax的特点就在于其不需要重新加载整个页面，所以数据量小，响应速度快，用户体验就更好。
Web APi 就是网络应用程序接口，网络应用通过API接口，可以实现存储服务、消息服务、计算服务等能力。对于前端开发者来说，就是通过这个Api的接口，来实现各种各样的功能，就像是工具一样，而不需要从底层开始理解这个工具的原理和组成。Web Api的出现大大提高了网页的功能和多样性。
2006年1月John Resig发布 jQuery ，它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。jQuery的其中一个优势就在于对DOM的操作上，因此在浏览器兼容不一的时代，显得尤为重要。
也正是以上三个技术带来了体验时代的特点：
- 特点：动态交互、社交媒体、用户生成内容(UGC)、单页应用(SPA)、jQuery、YUI
敏捷时代 (2010 - )
随着浏览器的标准也趋向于统一，再加上大部分 jQuery 的功能都已经变成了浏览器内置的标准 API，需要用到时可以直接去调 DOM API，用户体验的基本需求已经从多功能慢慢延伸到对敏捷的追求。
Fetch
fetch是一种HTTP数据请求的方式，是XMLHttpRequest的一种替代方案。
Ajax 的使用如下：
// 创建XmlHttpRequest对象
var iAjax = new XMLHttpResponse();
// 接收
iAjax.onreadystatechange=function()
{
if (iAjax.readyState==4 && iAjax.status==200)
{
alert('success')
}
}
// 连接服务器
iAjax.open('GET', url, true)
// 发送
iAjax.send()
fetch 使用 JavaScript Promises 来处理结果/回调
fetch(url)
.then(response => response.json())
.then(data => console.log(data))
.catch(e => console.log(e))
但fetch本身还是有很多优缺点(ajax、axios、fetch之间优缺点重点对比 - 知乎 (zhihu.com))
Node.js
Node.js 是在2009由 Ryan Dahl 开发的一个基于 Chrome V8 引擎的 JavaScript 运行环境，也就是一个运行在服务端的Js。过去Web开发中，前端使用JS，但是服务端则需要其他语言，而node.js出现是的js可以写服务器代码了。更重要的存在就是npm，在系统上安装好node.js后，就会配套安装一个指令:npm。Node.js (nodejs.org)
Webpack
webpack 是一个模块打包器，主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，是大部分前端项目打包工具的首选。Webpack可以帮助完成js压缩、css压缩、编译模板文件等任务，从而减少前端的工作量。webpack概述 · webpack 中文文档(v4.15.1) (html.cn)
