当前位置 博文首页 > 程序员哆啦A梦，蓝胖子：一个合格的中级前端工程师需要掌握的技
Github来源：一个合格的中级前端工程师需要掌握的技能 | 求星星 ? | 给个??关注，??点赞，??鼓励一下作者
大家好，我是魔王哪吒，很高兴认识你~~
哪吒人生信条：如果你所学的东西 处于喜欢 才会有强大的动力支撑。
每天学习编程，让你离梦想更新一步，感谢不负每一份热爱编程的程序员，不论知识点多么奇葩，和我一起，让那一颗四处流荡的心定下来，一直走下去，加油，2021加油！欢迎关注加我vx:xiaoda0423，欢迎点赞、收藏和评论
不要害怕做梦，但是呢，也不要光做梦，要做一个实干家，而不是空谈家，求真力行。
如果这篇文章有帮助到你，给个??关注，??点赞，??鼓励一下作者，接收好挑战了吗？文章公众号首发，关注 程序员哆啦A梦 第一时间获取最新的文章
??笔芯??~
已阅：
ES6 系列之 let 和 const
ES6 系列之模板字符串
ES6 系列之箭头函数
ES6 系列之模拟实现 Symbol 类型
ES6 系列之迭代器与 for of
ES6 系列之模拟实现一个 Set 数据结构
ES6 系列之 WeakMap
ES6 系列之我们来聊聊 Promise
ES6 完全使用手册
ES6 系列之 defineProperty 与 proxy
ES6 系列之模块加载方案
ES6 系列之私有变量的实现
前端，校招，面淘宝，指南
前端，社招，面淘宝，指南
你累死累活做业务，绩效还不怎么样，我只能帮你到这了……
淘系前端校招负责人直播答疑文字实录
致2021届前端同学的一封信|砥砺前行，未来可期！
面试被问项目经验不用慌，按这个步骤回答绝对惊艳
项目不知道如何做性能优化？不妨试一下代码分割
HTML 标记包含一些特殊“元素”如 ：
<head>，<title>，<body>，<header>，<footer>，<article>，<p>，<p>，<div>，<span>，<img>，<aside>，<audio>，<canvas>，<datalist>，<details>，<embed>，<nav>，<output>，<progress>，<video>?
article元素
表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。
p元素
表示一个包含在HTML文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题。
aside元素
表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。
audio元素
用于在文档中嵌入音频内容。
<audio
????controls
????src="/zzz.mp3">
????????dada
????????<code>audio</code>?.
</audio>
canvas元素
用来通过JavaScript（Canvas API 或 WebGL API）绘制图形及图形动画。
<canvas?id="canvas"?width="300"?height="300"></canvas>
var?canvas?=?document.getElementById('canvas');
var?ctx?=?canvas.getContext('2d');
ctx.fillStyle?=?'green';
ctx.fillRect(10,?10,?100,?100);
datalist元素
包含了一组<option>元素，这些元素表示其它表单控件可选值.
<input?list="browsers"?name="myBrowser"?/></label>
<datalist?id="browsers">
??<option?value="Chrome">
??<option?value="Firefox">
??<option?value="Internet?Explorer">
??<option?value="Opera">
??<option?value="Safari">
</datalist>
details元素
可创建一个挂件，仅在被切换成展开状态时，它才会显示内含的信息。<summary> 元素可为该部件提供概要或者标签。
<details>
??<summary>System?Requirements</summary>
??<p>Requires?a?computer?running?an?operating?system.?The?computer
??must?have?some?memory?and?ideally?some?kind?of?long-term?storage.
??An?input?device?as?well?as?some?form?of?output?device?is
??recommended.</p>
</details>
Requires a computer running an operating system. The computer ?must have some memory and ideally some kind of long-term storage. ?An input device as well as some form of output device is ?recommended.
embed元素
外部内容嵌入元素
progress元素
用来显示一项任务的完成进度
<progress?id="file"?max="100"?value="70">?70%?</progress>
output标签
表示计算或用户操作的结果。
nav元素
表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接
表单小部件：
<form?action="/my-handling-form-page"?method="post">
??<div>
????<label?for="name">Name:</label>
????<input?type="text"?id="name">
??</div>
??<div>
????<label?for="mail">E-mail:</label>
????<input?type="email"?id="mail">
??</div>
??<div>
????<label?for="msg">Message:</label>
????<textarea?id="msg"></textarea>
??</div>
</form>
单行文本框
<input?type="text"?id="comment"?name="comment"?value="I'm?a?text?field">
E-mail 地址框
<input?type="email"?id="email"?name="email"?multiple>
密码框
<input?type="password"?id="pwd"?name="pwd">
搜索框
<input?type="search"?id="search"?name="search">
电话号码栏：
<input?type="tel"?id="tel"?name="tel">
URL 栏:
<input?type="url"?id="url"?name="url">
多行文本框:
<textarea?cols="30"?rows="10"></textarea>
复选框:
<input?type="checkbox"?checked?id="carrots"?name="carrots"?value="carrots">
单选按钮:
<input?type="radio"?checked?id="soup"?name="meal">
数字:
<input?type="number"?name="age"?id="age"?min="1"?max="10"?step="2">
滑块:
<input?type="range"?name="beans"?id="beans"?min="0"?max="500"?step="10">
日期时间选择器:
<input?type="datetime-local"?name="datetime"?id="datetime">
<input?type="month"?name="month"?id="month">
<input?type="time"?name="time"?id="time">
<input?type="week"?name="week"?id="week">
拾色器:
<input?type="color"?name="color"?id="color">
文件选择器:
<input?type="file"?name="file"?id="file"?accept="image/*"?multiple>
隐藏内容:
<input?type="hidden"?id="timestamp"?name="timestamp"?value="6354561">
发送表单数据
客户端/服务器体系结构
客户端(通常是web浏览器)向服务器发送请求(大多数情况下是Apache、Nginx、IIS、Tomcat等web服务器)，使用HTTP 协议。
在客户端:定义如何发送数据:
action 属性-这个属性定义了发送数据要去的位置。
method属性-该属性定义了如何发送数据。
什么是表单数据校验？
访问任何一个带注册表单的网站，你都会发现，当你提交了没有输入符合预期格式的信息的表单时，注册页面都会给你一个反馈。
“该字段是必填的”（该字段不能留空）
请输入你的电话号码
请输入一个合法的邮箱地址
使用正则表达式校验
示例：
a?—?匹配一个字符a(不能匹配?b,??aa等等.)
abc?—?匹配?a,?其次?b,?最后??c.
a*?—?匹配0个或者多个字符?a?(+?代表至少匹配一个或者多个).
[^a]?—?匹配一个字符，但它不能是a.
a|b?—?匹配一个字符?a?或者?b.
[abc]?—?匹配一个字符，它可以是a,b或c.
[^abc]?—?匹配一个字符，但它不可以是a,b或c.
[a-z]?—?匹配字符范围?a-z且全部小写??(你可以使用?[A-Za-z]?涵盖大小写,?或?[A-Z]?来限制必须大写).
a.c?—?匹配字符?a,中间匹配任意一个字符,最后匹配字符?c.
a{5}?—?匹配字符?a五次.
a{5,7}?—?匹配字符?a五到七次,不能多或者少.
AJAX 技术主要依靠 XMLHttpRequest (XHR) DOM 对象。它可以构造 HTTP 请求、发送它们，并获取请求结果。
表单数据（application/x-www-form-urlencoded）由 URL编码的键/值对列表组成。为了传输二进制数据，HTTP请求被重新整合成multipart/form-data形式。
构建 XMLHttpRequest:XMLHttpRequest 是进行 HTTP 请求的最安全和最可靠的方式。
示例：
function?sendData(data)?{
??var?XHR?=?new?XMLHttpRequest();
??var?urlEncodedData?=?"";
??var?urlEncodedDataPairs?=?[];
??var?name;
??//?将数据对象转换为URL编码的键/值对数组。
??for(name?in?data)?{
????urlEncodedDataPairs.push(encodeURIComponent(name)?+?'='?+?encodeURIComponent(data[name]));
??}
??//?将配对合并为单个字符串，并将所有%编码的空格替换为
??//?“+”字符；匹配浏览器表单提交的行为。
??urlEncodedData?=?urlEncodedDataPairs.join('&').replace(/%20/g,?'+');
??//?定义成功数据提交时发生的情况
??XHR.addEventListener('load',?function(event)?{
????alert('耶! 已发送数据并加载响应。');
??});
??//?定义错误提示
??XHR.addEventListener('error',?function(event)?{
????alert('哎呀！出问题了。');
??});
??//?建立我们的请求
??XHR.open('POST',?'https://example.com/cors.php');
??//?为表单数据POST请求添加所需的HTTP头
??XHR.setRequestHeader('Content-Type',?'application/x-www-form-urlencoded');
??//?最后，发送我们的数据。
??XHR.send(urlEncodedData);
}
利用FormData对象来处理表单数据请求。
示例：
function?sendData(data)?{
??var?XHR?=?new?XMLHttpRequest();
??var?FD??=?new?FormData();
??//?把我们的数据添加到这个FormData对象中
??for(name?in?data)?{
????FD.append(name,?data[name]);
??}
??//?定义数据成功发送并返回后执行的操作
??XHR.addEventListener('load',?function(event)?{
????alert('Yeah! 已发送数据并加载响应。');
??});
??//?定义发生错误时执行的操作
??XHR.addEventListener('error',?function(event)?{
????alert('Oops! 出错了。');
??});
??//?设置请求地址和方法
??XHR.open('POST',?'https://example.com/cors.php');
??//?发送这个formData对象,HTTP请求头会自动设置
??XHR.send(FD);
}
使用绑定到表单元素上的 FormData
<form?id="myForm">
??<label?for="myName">告诉我你的名字：</label>
??<input?id="myName"?name="name"?value="John">
??<input?type="submit"?value="提交">
</form>
示例：
window.addEventListener("load",?function?()?{
??function?sendData()?{
????var?XHR?=?new?XMLHttpRequest();
????//?我们把这个 FormData 和表单元素绑定在一起。
????var?FD??=?new?FormData(form);
????//?我们定义了数据成功发送时会发生的事。
????XHR.addEventListener("load",?function(event)?{
??????alert(event.target.responseText);
????});
????//?我们定义了失败的情形下会发生的事
????XHR.addEventListener("error",?function(event)?{
??????alert('哎呀！出了一些问题。');
????});
????//?我们设置了我们的请求
????XHR.open("POST",?"https://example.com/cors.php");
????//?发送的数据是由用户在表单中提供的
????XHR.send(FD);
??}
??//?我们需要获取表单元素
??var?form?=?document.getElementById("myForm");
??//?...然后接管表单的提交事件
??form.addEventListener("submit",?function?(event)?{
????event.preventDefault();
????sendData();
??});
});
CORS 处理跨域图片
通过搭配 crossorigin 属性和适当的 CORS 标头，在 <img> 元素中定义的图片可以从外部来源加载并在 <canvas> 元素中使用，就像是从本地源加载一样。
启用了
CORS的图片
尽管不通过 CORS 就可以在 <canvas> 中使用其他来源的图片，但是这会污染画布，并且不再认为是安全的画布，这将可能在 <canvas> 检索数据过程中引发异常。
在"被污染"的画布中调用以下方法:
在 <canvas> 的上下文上调用getImageData()
在 <canvas> 上调用 toBlob()
在 <canvas> 上调用 ?toDataURL()
CORS 设置属性
一些提供了对 CORS 的支持的 HTML 元素，比如 <img> 或 <video> ，具有 crossorigin 元素属性/attribute （crossOrigin 对象属性/property），该属性能使你配置其跨域获取资源的请求。
CanvasRenderingContext2D.getImageData()
CanvasRenderingContext2D.getImageData() 返回一个ImageData对象，用来描述canvas区域隐含的像素数据，这个区域通过矩形表示，起始点为(sx, sy)、宽为sw、高为sh。
语法
ImageData?ctx.getImageData(sx,?sy,?sw,?sh);
sx
将要被提取的图像数据矩形区域的左上角 x 坐标。
sy
将要被提取的图像数据矩形区域的左上角 y 坐标。
sw
将要被提取的图像数据矩形区域的宽度。
sh
将要被提取的图像数据矩形区域的高度。
返回值
一个ImageData 对象，包含canvas给定的矩形图像数据。
使用 getImageData 方法:
<canvas?id="canvas"></canvas>
var?canvas?=?document.getElementById("canvas");
var?ctx?=?canvas.getContext("2d");
ctx.rect(10,?10,?100,?100);
ctx.fill();
console.log(ctx.getImageData(50,?50,?100,?100));
//?ImageData?{?width:?100,?height:?100,?data:?Uint8ClampedArray[40000]?}
返回值
一个ImageData 对象，包含canvas给定的矩形图像数据。
HTMLCanvasElement.toBlob()
HTMLCanvasElement.toBlob() 方法创造Blob对象，用以展示canvas上的图片；这个图片文件可以被缓存或保存到本地，由用户代理端自行决定。如不特别指明，图片的类型默认为 image/png，分辨率为96dpi。
语法
canvas.toBlob(callback,?type,?encoderOptions);
callback
回调函数，可获得一个单独的Blob对象参数。
type?可选
DOMString类型，指定图片格式，默认格式为image/png。
encoderOptions?可选
Number类型，值在0与1之间，当请求图片格式为image/jpeg或者image/webp时用来指定图片展示质量。如果这个参数的值不在指定类型与范围之内，则使用默认值，其余参数将被忽略。
返回值
无。
HTMLCanvasElement.toDataURL()
HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为96dpi。
如果画布的高度或宽度是0，那么会返回字符串“data:,”。
如果传入的类型非“image/png”，但是返回的值以“data:image/png”开头，那么该传入的类型是不支持的。
Chrome支持“image/webp”类型。
语法
canvas.toDataURL(type,?encoderOptions);
type?可选
图片格式，默认为?image/png
encoderOptions?可选
在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从?0?到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值?0.92。其他参数会被忽略。
返回值
包含 data URI 的DOMString。
示例:
<canvas?id="canvas"?width="5"?height="5"></canvas>
var?canvas?=?document.getElementById("canvas");
var?dataURL?=?canvas.toDataURL();
console.log(dataURL);
//?"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
//?blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"
设置图片的质量:
var?fullQuality?=?canvas.toDataURL("image/jpeg",?1.0);
//?data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z"
var?mediumQuality?=?canvas.toDataURL("image/jpeg",?0.5);
var?lowQuality?=?canvas.toDataURL("image/jpeg",?0.1);
允许浏览器在下载图像数据时允许跨域访问请求
用户点击 "Download" 按钮时开始下载:
function?startDownload()?{
??let?imageURL?=?"https://xxxx";
??downloadedImg?=?new?Image;
??downloadedImg.crossOrigin?=?"Anonymous";
??downloadedImg.addEventListener("load",?imageReceived,?false);
??downloadedImg.src?=?imageURL;
}
canvas 的 toDataURL() 方法用于将图像转换为 data:// URL 形式的 PNG 格式图片
通过
rel="preload"进行内容预加载
<link> 标签最常见的应用情形就是被用来加载CSS文件，进而装饰你的页面：
<link?rel="stylesheet"?href="styles/main.css">
<link?rel="preload"?href="style.css"?as="style">
<link?rel="preload"?href="main.js"?as="script">
哪些类型的内容可以被预加载？
audio:?音频文件。
document:?一个将要被嵌入到<frame>或<iframe>内部的HTML文档。
embed:?一个将要被嵌入到<embed>元素内部的资源。
fetch:?那些将要通过fetch和XHR请求来获取的资源，比如一个ArrayBuffer或JSON文件。
font:?字体文件。
image:?图片文件。
object:?一个将会被嵌入到<embed>元素内的文件。
script: JavaScript文件。
style:?样式表。
track: WebVTT文件。
worker:?一个JavaScript的web worker或shared worker。
video:?视频文件。
如何制作快速加载的HTML页面
减小页面的大小。
最小化文件数量:减少一个页面引用的文件数量可以降低在下载一个页面的过程中需要的HTTP请求数量，从而减少这些请求的收发时间。
使用 CDN。
减少域名查找:每个独立的域名都会消耗DNS查找的时间，页面加载时间会随着独立域名数量、CSS链接数量、JavaScript还有图片资源的数量增加而增加。
缓存重用的内容:确保任何内容可以被缓存，并且拥有一个合理的有效期。
高效地排列页面组件。
减少内联脚本的数量。
网页中添加矢量图形
示例：
<!DOCTYPE?html>
<html>
??<head>
????<meta?charset="utf-8">
????<title>Vector?versus?raster</title>
??</head>
??<body>
????<h1>Vector?versus?raster</h1>
????<img?src="star.png"?alt="A?raster?star">
????<img?src="star.svg"?alt="A?vector?star">
??</body>
</html>
创建一个圆和一个矩形：
<svg?version="1.1"
?????baseProfile="full"
?????width="300"?height="200"
?????xmlns="http://www.w3.org/2000/svg">
??<rect?width="100%"?height="100%"?fill="black"?/>
??<circle?cx="150"?cy="100"?r="90"?fill="blue"?/>
</svg>
示例：
<img
????src="equilateral.svg"
????alt="triangle?with?all?three?sides?equal"
????height="87px"
????width="100px"?/>
<svg?width="300"?height="200">
????<rect?width="100%"?height="100%"?fill="green"?/>
</svg>
使用SVG:
<svg?width="100%"?height="100%">
<rect?width="100%"?height="100%"?fill="red"?/>
<circle?cx="100%"?cy="100%"?r="150"?fill="blue"?stroke="black"?/>
<polygon?points="120,0?240,225?0,225"?fill="green"/>
<text?x="50"?y="100"?font-family="Verdana"?font-size="55"
??????fill="white"?stroke="black"?stroke-width="2">
????????Hello!
</text>
</svg>
外边距重叠
块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。
布局和包含块
层叠上下文
满足以下任意一个条件的元素形成：
文档根元素（<html>）；
position 值为 absolute（绝对定位）或 ?relative（相对定位）且 z-index 值不为 auto 的元素；
position 值为 fixed（固定定位）或 sticky（粘滞定位）的元素（沾滞定位适配所有移动设备上的浏览器，但老的桌面浏览器不支持）；
flex (flexbox) 容器的子元素，且 z-index 值不为 auto；
grid (grid) 容器的子元素，且 z-index 值不为 auto；
opacity 属性值小于 1 的元素
块格式化上下文
块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
会创建块格式化上下文：
根元素（<html>）
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值）
表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
contain 值为 layout、content 或 paint 的元素
弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
使用overflow: auto
创建一个会包含这个浮动的 BFC，通常的做法是设置父元素 overflow: auto 或者设置其他的非默认的 overflow: visible 的值。
设置 overflow: auto 创建一个新的BFC来包含这个浮动。我们的 <div> 元素现在变成布局中的迷你布局。任何子元素都会被包含进去。
CSS 弹性盒子布局
此属性是以下CSS属性的简写：
flex-grow
flex-shrink
flex-basis
flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
flex-shrink:?2;
flex-shrink:?0.6;
/*?Global?values?*/
flex-shrink:?inherit;
flex-shrink:?initial;
flex-shrink:?unset
flex-grow设置了一个flex项主尺寸的flex增长系数。它指定了flex容器中剩余空间的多少应该分配给项目（flex增长系数）。
主尺寸是项的宽度或高度，这取决于flex-direction值。
flex-basis 指定了 flex 元素在主轴方向上的初始大小。如果不使用 ?box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。
flex-wrap 指定 flex 元素单行显示还是多行显示 。如果允许换行，这个属性允许你控制行的堆叠方向。
order 属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照 order 属性的值的增序进行布局。拥有相同 order 属性值的元素按照它们在源代码中出现的顺序进行布局。
flex-flow 属性是 flex-direction 和 flex-wrap 的简写。
flex-direction:?row
flex-wrap:?nowrap
对齐属性
align-content 属性设置了浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间。
/*?基本位置对齐?*/
/*align-content不采用左右值?*/
align-content:?center;?????/*?将项目放置在中点?*/
align-content:?start;??????/*?最先放置项目?*/
align-content:?end;????????/*?最后放置项目?*/
align-content:?flex-start;?/*?从起始点开始放置flex元素?*/
align-content:?flex-end;???/*?从终止点开始放置flex元素?*/
/*?默认对齐?*/
align-content:?normal;
/*基线对齐*/
align-content:?baseline;
align-content:?first?baseline;
align-content:?last?baseline;
/*?分布式对齐?*/
align-content:?space-between;?/*?均匀分布项目
?????????????????????????????????第一项与起始点齐平，
?????????????????????????????????最后一项与终止点齐平?*/
align-content:?space-around;??/*?均匀分布项目
?????????????????????????????????项目在两端有一半大小的空间*/
align-content:?space-evenly;??/*?均匀分布项目
?????????????????????????????????项目周围有相等的空间?*/
align-content:?stretch;???????/*?均匀分布项目
?????????????????????????????????拉伸‘自动’-大小的项目以充满容器?*/
/*?溢出对齐?*/
align-content:?safe?center;
align-content:?unsafe?center;
/*?全局属性?*/
align-content:?inherit;?/*?继承?*/
align-content:?initial;??/*?初始值?*/
align-content:?unset;?/*?未设置?*/
