这篇文章适合前端新手，前端新手或者后端开发人员最好读一读，因为我不敢保证前端老司机会收获多少。
通过阅读本文，您将对这些年来前端发生的事情有一个大致的了解，以及对当前前端的一些主流技术的简单介绍。 所有涉及的内容，都是为了让你尽可能地刺穿这层窗纸，知道一般的玩法。
前端技术发展轨迹字符架构史、前端技术史、ECMASCRIPT 语法史、AJAX 技术史介绍当前主流技术原理SPA 单页应用主体节点JS服务器端JS运行原理、SSR服务器端渲染原理、VUE MVVM原理、webpack打包原理、SASS CSS编译原理一些新技术探索typescriptpwagraphqlflutter两种流行的概念解决方案什么是大前端，什么是前端工程本节是关于知识的：
字符架构史、前端技术史、ECMASCRIPT 语法史、AJAX 技术史
web1.0 到 web20 过渡的标志是 AJAX （2005） 的出现。
ajax即asynchronous j**ascript and xml（异步 j**ascript 和 XML 技术）。
第 1 步：XMLhttpRequest 本机对象。
var request = new xmlhttprequest();request.open('get', '/my/url', true);request.onload = function() else };request.onerror = function() request.send();step2：$.AJAX 操作$.ajax(})第 3 步：Promise 操作
let getdata = function (url) ,error: function (err) var data = getdata('/my/url').then(function (data) )Step4：发电机发电机let it = null;let ajax = function(url,data), success : function(result) }function *getdata();it = getdata();it.next();第 5 步：异步等待高级操作
let ajax = function(url,data) }async function getdata();getdata();AJAX的背景信息：
1999年，Microsoft发布了Internet Explorer 5版本 0，首次引入了一个新功能：允许 j**ascript 脚本向服务器发出 HTTP 请求。 直到 2004 年 Gmail 和 2005 年谷歌地图发布，这个功能才被忽视。本节知识点：术语 AJAX 于 2005 年 2 月首次正式创建，指的是围绕此功能开发的一组实践。 从那时起，AJAX 就成为脚本发起的 HTTP 通信的代名词，W3C 在 2006 年发布了其国际标准。
SPA 单页应用主体节点JS服务器端JS工作原理，SSR服务端渲染原理，VUE MVVM原理，webpack打包原理，SASS CSS开发原理，什么是SPA？SPA是单页，是一种实现方式，其中页面作为一个整体不刷新，不同的页面只改变部分内容。
完整的 URI 由以下部分组成：
scheme:[//[user[:password]@]host[:port]][/path][?query][#fragment]#后fragment当发生更改时，页面不会被重新请求，其他参数变化会导致页面被重新请求，在 js 中有事件window.onhashchange我可以监控fragment所以这个原理是用来实现修改本地内容的操作的。
#fragment其中一部分对应于 JSlocation.hash价值。
直接上**说明：
主要流程如下：用户在地址栏中输入URL，浏览器使用HTTP协议从后台获取资源，浏览器解析渲染HTML页面，呈现给浏览器，异步执行AJAX操作，浏览器发送AJAX请求，后台接口浏览器获取数据，执行**函数， 动态地将内容追加到页面，并使用SSR技术显示页面
const vue = require('vue')const server = require('express')()const renderer = require('vue-server-renderer').createrenderer()server.get('*'， （req， res） => ，template： 将 vue 对象传递给最终输出结果 html，然后通过 reponse 对象将 html 返回给前端浏览器渲染器rendertostring(app, (err, html) => server.listen(8080)主要流程如下：
在用户地址栏中输入URL，浏览器使用HTTP协议从后台获取资源，浏览器解析并呈现HTML页面，并呈现给浏览器
如果有人对这个 Vue 示例的完整构建过程感兴趣，他们可以按照以下过程快速设置环境并允许它运行：
* 并安装 nodejs：新建一个目录，打开命令窗口，切换到当前目录并执行命令：npm init，一直按回车键进入下一步，快速创建一个节点项目来安装所需的 js 包：npm i vue express vue-server-renderer --s**e-dev new file： vi index。js，将上面所有的 vue 片段都粘贴到执行文件中，启动节点程序：节点索引js 打开浏览器访问：http：localhost：8080（注意端口号不与本地已有程序冲突） 什么是MVC？ 什么是 MVVM？
从上图可以清楚地看出，与 MVC 相比，缺少 MVVMcontroller一层，传统controller它的作用是处理一堆复杂的逻辑，然后将数据输出到view上面。 所以现在这一层不见了view跟viewmodel如何自动关联两个方向的数据绑定？
换句话说，如果页面上的数据发生了变化，JS中的数据也会随之变化; 相反，如果数据在 JS 中发生变化，页面如何自动跟随？
作为进一步阐明这个问题的例子，如何才能达到以下效果？
如何通过向页面元素添加页面数据的更改来通知 jsonchange或oninputevent，获取 event 中表单的值，然后将该值赋值给 js 对应的对象。
例如，示例中的输入框可以添加 oninput 事件。
然后在 js 中定义这个函数，并执行相关的赋值操作：function evtinput()有一个原生方法可以将 js 数据更改通知到页面
object.defineproperty()，它可以重置 js 对象中元素的某些属性并同时提供它get跟set方法，它允许用户重新分配和获取元素的值。
简单分析**：
正式地，由于我们可以拦截属性的set方法。 所以，我们可以在那里set在方法中，将新值分配给 page 元素就足够了。
object.defineproperty(data,'name',})为什么要对前端进行打包？ 那么为什么要对前端进行打包呢？ 前端**不是能直接跑到浏览器上去吗，为什么要打包呢？
要理解这个问题，可以以 j**a 为例，例如：j**a 在项目目录下有一个源码目录：src
它是用来存放 j**a 源码的，但是 j**a 实际编译之后，肯定没有 src 目录了吧？
所以src源代码的目的是什么？ 它用来更好的分类整理我们的源**，这可能和我们实际操作的结构完全不同，因为实际操作是机器可以读取的东西，源代码是给人看的。
所以前端也是一样，因为现在的阶段，前端的业务逻辑也变得非常复杂，已经不可能用传统意义上的HTML、一个JS、一个CSS来做。 因此，我们必须将源代码划分为模块和目录，最后将它们打包然后组装成一个浏览器可以读取的**和目录结构。
例如，让我们通过 Vue 的脚手架创建一个 Vue 的 webpack 项目，并查看其默认的源目录 （src） 树结构
src├──app.vue├──assets│ └logo.png├──components│ └helloworld.vue├──main.js└──router └─index.jsassetscomponentsrouter和 2 个以上.vue文件的末尾。 所以，这种目录结构和文件在浏览器中肯定是行不通的，如果我们想运行它，就必须对其进行编译并翻译成浏览器可以读取的html js css文件。
当我们打包它时，我们看到项目的 dist 目录具有浏览器的编译和可执行结构
dist├──index.html└──static ├─css │ app.30790115300ab27614ce176899523b62.css │ app.30790115300ab27614ce176899523b62.css.map └─js ├─app.b22ce679862c47a75225.js ├─app.b22ce679862c47a75225.js.map ├─manifest.2ae2e69a05c33dfc65f8.js ├─manifest.2ae2e69a05c33dfc65f8.js.map ├─vendor.7fed9fa7b7ba482410b7.js └─vendor.7fed9fa7b7ba482410b7.js.mapwebpack 打包的原理用一句话概括了 webpack 的精髓：
Webpack 是一个打包模块化 JS 的工具，它可以通过加载器转换文件，通过插件扩展功能。webpack 打包的简单图解：
什么是 SASS？ 它是一种可以提高CSS开发效率的工具。
编译原理如下：
您如何在项目中实际使用 SASS？
正如我之前谈到的 webpack，没有打包工具，前端技术就无法直接运行，像这样的 sass 文件也是如此。 因此，我们只需要在 webpack 中添加 sass 文件的加载器，这样在 ** 编译环境中，sass 文件就可以自动转换为 css 文件，最后将 css 文件引入到 html 中，这样页面就可以正常呈现了。
SASS 有什么好处？
test.SCSS 文件：
$color-red: #00ff00;$color-white: #ffffff;#main p }如果你用传统的 css 编写：
#main p #main p .redbox本节知识点：
TypeScriptPwagraphQlflutter什么是 TypeScript？
TypeScript 是 Microsoft 开源发布的 J**Ascript 类型的超集，可以编译成纯 J**Ascript。TypeScript 之所以是 J**Ascript 的超集，意味着 TypeScript 在 J**Ascript 语法的基础上扩展了更多的语法，使开发更加方便。它是一个JS框架，可用于开发前端系统。
让我们看一下 Typescript 与 j**ascript 相比的额外部分
学过j**a的同学不要惊慌，就个人而言，打字稿似乎是用j**ascript重新实现j**a！1. 强大的数据类型
布尔类型 let isdone： boolean = false; let decliteral： 数字 = 6; 字符串 let name： string ="bob";let list： 数组 = [1， 2， 3]; 函数定义 function add（x： number， y： number）： number2. 接口
interface labelledvalue function printlabel(labelledobj: labelledvalue) let myobj = ;printlabel(myobj);
这里的接口与J**a中的接口不同，Typescript中的接口只是参数的约定，即参数必须是接口定义的结构和参数名称。3. 班级
定义类 greeter greet（） let greeter = new greeter（"world");类动物m的遗传类 狗 扩展 动物 }公共、私有变量、方法、类动物公共移动（距离米：数字）移动$m`)4. 泛型
function identity(arg: t): t5. 枚举
enum direction什么是 PWA？
渐进式 Web 应用（简称 PWA）是一种增量改进 Web 应用体验的新方法，为用户提供本机应用的体验。PWA 本质上是 Web 应用程序，也就是说，在手机上运行的应用程序不是纯粹的原生应用程序，但许多页面都是网页。
web app我们都知道应用程序中有网页！ 但progressive进步以及如何理解它？
个人理解，进步这就是它的意思：逐步发展或转型
PWA 更确切地说是：
第 1 步：我们现在要开发一个 app，但是开发一个纯原生 app 的维护和扩展成本太高了，所以我们需要给它添加一些网页，毕竟网页是好维护的！ （这部分实际上是一个混合应用，也称为：混合应用）。因此，PWA是循序渐进地提升混合应用的用户体验，而对体验影响最大的问题是页面加载，所以PWA的核心技术是：第二步：但是我们应用中添加网页不能太暴力，太暴力容易让用户觉得很不自然，所以我们需要用一个循序渐进的方式，那么如何一步一个脚印地去做，才能让用户的体验达到极致（也就是说，几乎不可能看到一个页面就是一个网页！ ）
第 3 步：我们需要添加一些策略，首先保证用户体验，例如：确保所有网页都使用 https，使用离线缓存来减少用户打开页面的等待时间等。
脱机缓存离线缓存的常见方案是：service worker在了解 GraphQL 是什么之前，我们先先了解一下 SQL 是什么？
什么是 SQL？
结构化查询语言，一种结构化查询语言，是关系数据库管理系统的标准语言。说白了，SQL是一种特定的语法，也可以称为数据库管理API，必须通过它来执行数据库的操作。
什么是 GraphQL？
API 的查询语言。用 ** 来说明：GraphQL 既是 API 的查询语言，也是数据查询的运行时。 GraphQL 提供了对 API 中数据的完整、易于理解的描述，使客户端能够在没有任何冗余的情况下准确获得他们需要的内容，使 API 更容易随着时间的推移而发展并构建强大的开发人员工具。
所以你要再说一遍？ 如果没有 graphql，我现在不能在客户端和后端之间进行交互吗？
没错！ 这就是你互动的方式：
所以，并不是说我们离不开 GraphQL，而是它为我们提供了一种查询和交互 API 的新方式，使客户端和后端之间的接口通信更加高效。
那么，与传统的接口请求相比，GraphQL 有哪些优势呢？
1. 所见即所得
查询条件}返回结果 }}传统 API 是什么样子的？
查询条件}返回结果 }}2.减少网络请求的数量只需一个网络请求即可获取资源和子资源的数据（例如，上面中文章节中的注释）。
查询条件 }， 注释 }在传统查询中，先查询文章，然后再评论。 当然，你可以一次性检查一下，让后端一次回来，但一般没有后端会为你设计这样的 API：
getarticleandcomment，如何遵循 RESTful 接口标准，应该需要查询 2 次。
3.参数类型验证力强
GraphQL 指定了一组数据类型，保证了在查询接口时明确定义字段类型，而传统接口一般难以保证查询参数的类型。
例如，下面是 GraphQL 的语法定义：
type starship什么是 Flutter？
Flutter 是 Google 的移动 UI 框架，可以在 iOS 和 Android 上快速构建高质量的原生用户界面。类似的东西
react native与框架一样，Flutter 也可以调用一些应用系统级命令，让你快速开发一个混合应用。
有兴趣的可以去官网了解：颤动中文网知识点在本节：
什么是大前端，什么是前端工程，本文的标题是大前端的技术原理与演进现在让你回答，什么是：大型前端
大型前端这是比较前端那么，传统前端意味着什么呢？ 什么已经成为一个大的前端？
前端的传统含义是什么？
传统前端是指直接面向客户的应用或系统，如网页或移动应用。那么大前端是什么意思呢？ 其实经过各种数据调研，并没有这么明确的定义，但是随着技术的进步，我们有一个默认的约定，大前端之所以被称为大前端，主要体现在以下几个方面：开发网页、iOS 和 Android 的程序员可以称为前端工程师。
传统上，前端工程师只是 Web 开发人员，而 iOS 和 Android 开发人员通常指的是客户端开发人员或软件工程师角色。
1.大前端-前端分离
随着前后端职责和技术框架的分离，对产品前端的要求越来越高，用户对前端的期望越来越高，前端技术的发展也越来越快。 这在一定程度上反映了前端的要求越高，责任越大。
2. 大前端-节点全栈
前端和后端分离后，前端不可能独立完成一件事，因为缺乏后端支持。 但随着 node 的出现，前端可以轻松处理后端的这一部分，而无需依赖后台人员或学习新的后端语言。 这样，面对一些小系统，前端工程师就可以处理整个系统了。 这部分体现了前端的全面性和全栈性。
3.大前端——处理各种端
传统的前端工程师，一般称为Web开发工程师，一般是指在PC浏览器上运行，慢慢也运行在手机上。 然而，随着移动互联网的发展，突然涌现出更多的移动设备，如：手机分为Android手机和苹果手机、智能手表、VR AR技术支持的可穿戴设备、眼睛、头盔、车载系统、智能电视系统等。 这些设备都需要前端的支持，对前端的技术要求和能力都比较高。 这在一定程度上反映了前端的范围变得更大的事实。
4. 大型前端-微应用
当微信小程序出来的时候，大家的第一感觉就是前端又可以火了，不需要后端，不需要服务器，只需要在微信平台上开发一个网页就可以上线发布。
近日，多家国内手机厂商联合推出快速申请，类似于小程序，但经过简单的前端开发和发布后，用户无需安装应用程序即可直接在小米、vivo、oppo等手机上打开此类应用程序。
与这些微应用类似，无背景、无安装的出现也促使前端行业也涉足此类新领域，推动技术进步。 这在一定程度上反映了前端是幸运的。
综上所述，我们可以得到一个粗略的定义：
大前端是指前端涉及的范围越来越广，涉及的端越来越多，技术要求越来越高，影响范围越来越大的表现。前端工程的定义：
前端工程是以业务特点为基础，将前端开发流程标准化、标准化，它包括开发流程、技术选型、标准化、建设和发布等，提高前端工程师的开发效率和素质，最终交付一个稳定性高、扩展性好、易于维护的系统流程。一般来说，满足前端工程要求的解决方案应包括以下要素：
开发规范模块化开发组件化开发组件仓库性能优化部署开发流程开发工具另外，我们说工程的时候，不能只考虑前端工程，更应该考虑如何从整个系统的角度进行工程，也就是说，对于一个整体项目来说，说到工程的时候，我们应该考虑哪些因素？
系统的工程建设应包括以下因素：
目标，了解目标群体，持续为他们提供最优质的服务; 边界，与其他系统划清界限，同时做好接口，确保自身系统的责任定位明确，同时管理依赖系统，增加自身健壮性; 壁垒，自身平台建设，包括前端工程建设、后端工程建设，以及项目整体建设等诸多因素。 前端开发的历史和趋势-阮奕峰 J**Ascript 语言的历史-阮奕峰Ajaxj**Ascript 原生 JS 的异步编程您可能不需要 jQueryGoing 与 es6 生成器进行异步统一资源标识符-维基百科统一资源定位器-维基百科，自由的百科全书 Vue 实现剖析 - 如何实现双向绑定 MVVMVUEjs服务器端渲染指南webpack：输出管理webpack原理与实践-gwuhaolin blogtypescript手册（中文版）什么是pwagraphql和restful比较当我们说到大前端的时候，我们说的是什么前端工程——基础——张云龙。