webcourse/Web
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add files

Browse Source
This commit is contained in:
qianguyihao
2018-03-06 13:41:43 +08:00
parent b410477aa9
commit 75fa75139b
14 changed files with 1196 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

474
06-前端基础/00-准备.md Normal file
View File

@@ -0,0 +1,474 @@
## 前言
### 面试分为三部分
- 技术面试：问技术问题
- 负责人面试：考察综合能力。比如：项目把控能力、项目深度、项目架构、业务等。
- hr 面试：侧重于性格、沟通、潜力等。
每轮面试在一小时左右。
### 每轮面试的知识点
一面：
> 主要考察基础知识。
- 页面布局
- CSS盒模型、DOM事件
- HTTP 协议、原型链
- 面向对象、通信
- 前端安全、算法
二面：
- 渲染机制
- JS 运行机制
- 页面性能
- 错误监控
三面：
> 不再关注技术层面。
- 业务能力
- 团队协作能力
- 带人能力
终面：
- 职业竞争力
- 职业规划
面试成功需要：技术过关、面试技巧等。
### 校招和社招各自看中的层面
校招；
- 知识：40%
- 能力：59%
- 经验：1%
社招：
- 知识：30%。比如协议、业务的认知程度。
- 能力：50%。比如架构、业务的抽象能力、项目的把控能力。
- 经验：20%。项目的体现。
以上仅供参考。
### 面试准备
面试准备包括以下四个部分：
- 职位描述（JD）的分析
- 业务分析
- 技术栈准备
- 自我介绍
每个公司又有一套成熟的技术栈。比如在构建工具上，百度用 fis3、美团用 Gulp。
你要面哪个公司，要先看看对方要求的技术栈。
上面四个部分，我们接下来详细介绍。
## 职位描述（JD）的分析
### 介绍
概念：
- 职位描述：注重的是工作职责。
- 任职要求：要求的是工作能力。通常描述得很细致。
PS：前端的知识庞大，不可能所有的内容都准备好，但是要向“任职要求”靠拢。
分析职位描述（JD）的目的是：
- 快速识别出这个岗位是否是自己喜欢的、想要的。
- 目前的技能是否能胜任岗位的要求。短期内的准备能否胜任。
### 举例1：京东 web 前端的职位描述
如下：
20180304_2132.png
**职位描述：**
（1）面试时，会同时考虑到 `PC 端和移动端`两个部分。
（2）`App H5开发`指的是两层意思：
- Hybrid 技术栈。
- 纯 H5 开发。和 native 开发没有关系，比如活动、专题。
（3）`调试数据接口`：要学习一下怎么模拟数据。
（4）`前端组件库的建立`：要求较高但非常重要。体现在：
- 基本功要扎实，原生 js、css的理解要到位。
- 之前有没有前端组件库相关的项目经验
- 是否通读过其他的 UI 组件库。
（5）`优化与重构`：难度比第四条更大。
PS：前三条是基本知识，第四条、第五条属于进阶。
**任职要求：**
（1）`3年以上工作经验`：不要太较真工作年限。`精通 H5 特性`：说明公司很看重移动端。了解H5`最新规范`：贵公司希望我对新技术是有追求的，比如`ES6`等。
（2）要求我们对`面向对象`部分有足够的了解。组件化的编程也离不开面向对象。
（3）体现了几点：
- `熟悉 Web 标准`：熟悉最新的标准即可。
- `表现与数据分离`：MVC框架。
- `语义化`：这个词千万不要忽视。不是什么都用 div。
- `实际经验`：利用框架开发的过程中，遇到过哪些问题？没有实际经验的话，也要提前准备几个问题。
（4）以下几点：
- `前端架构分析与设计...`：说明此岗位并不面对初级岗位。因为工作一至两年的人，大部分都是**做业务开发**，缺少**系统的架构能力**。
我们要准备一个项目的架构（比如公司现有的项目）重新梳理，包含：目录结构的设计、复用性设计、模块化设计、自动化测试、上线流是什么。
- `易读、易维护的代码`：面试过程中一定会让你写代码，来体现。要求；每个函数的功能要单一、能抽象尽量抽象。符合这两个原则，基本就满足了“易读、易维护”。
- `高质量、高效率的代码`，短时间内不好准备。
（5）`用户可用性、用户体验、用户研究`：考察的不是技术，而是候选人对于产品体验的理解。不仅仅只是完成功能而已。
（6）`强烈兴趣`等，是公司企业文化的一种要求。多去GitHub上看看别人的项目里用的什么新技术、多看博客。短时间内无法准备。
（7）了解`Sass`和`Less`：这是基本技能。
（8）**熟悉**`web构建工具`：新手推荐学习 Glup，而不是 grunt。当然，你要知道 **Glup 和 grunt 的区别**。
PS：了解、熟悉、精通，是有区别的。
（9）暂时可以忽略。如果 职位描述里没有要求`Node.js`，而你只会一点点 `Node.js`，那不建议你面试的时候把`Node.js`体现出来。否则是给自己挖坑。
### 举例2：艺龙的 web 前端的职位描述
如下：
20180304_2225.png
此方位
**职位描述：**
（1）`系统化设计`：说的比较笼统。其实指的就是模块化设计、前后端分离（**数据渲染**交给前端）。
（2）几点：
- 前半句：并没有说 H5 是放在移动端做，可能同时包含 PC 和移动端。
- 后半句：可以看出公司对 H5 动画的要求很高。动画有三种方式：用DOM写、SVG 的path做动画、canvas。canvas 又分 2D 和 3D。我们要看岗位描述里怎么要求的。既然提到CSS3，那么CSS3里面的animation、tansition也要了解。
（3）微信项目，要准备：
- 小程序：比如看贵公司有小程序吗？我们自己要准备简单的开发和文档、组件化的内容。
- 微信支付。
- 对微信开发中的哪些坑，要了解
（4）和京东的第四条很像，既要会框架，也要会组件化设计。但京东的侧重从零开始，而艺龙侧重于：有的就维护，没有的就开发。
**岗位要求：**
（1）`各种`web前端技术：用词不严谨。
（2）几点：
- `Web`标准：JS的最新标准是ES6。
- `可用性、可访问性`：侧重于网站的性能。 前端要做性能监控、错误监控。JS异常分为两种：**运行异常**、**资源加载错误**。一般人只能说出第一种异常。
（3）`工程化`：**工程化**已经是前端的必备技能。`webpack`是必须的工具，`grunt`已经过时了，如果公司提到，还是要了解。`Glup`用的很多。
（4）写得比较虚，面试时基本很难考察。面试时，如果写代码，要注意代码风格，该用 class、id、标签时，要注意区分。
（5）要准备一下 Node.js。`至少熟悉一门`：可能要求全栈开发。
（6）`逻辑性强`：能说出123。
## 业务分析
> 业务分析
CSS3 动画是重点准备的内容。
jQuery 要准备事件委托、选择器等。
ES6语法：import、export等。
比如<http://jr.jd.com/>这个网站：
20180304_2302.png
通过简单分析源码，我们初步得知网站的以下几点：
- jQuery
- vue 框架
- ES6
- webpack 打包工具
## 技术栈准备
上图中，左侧是前端技术核心，右侧是前端工程化。
左侧：
- jQuery：要注意看源码。看源码时，要看这几个：核心架构、事件委托是什么、插件机制、兼容性。
- 三大框架：都是mvvm框架，准备一至两个即可，或者精心准备一个。面试时会问得很细。比如阿里会经常问Vue的源码。建议找网上的源码分析的文章。
- Node.js：如果没有相关项目经历，就尽量不要提。
- 右侧：
- npm：npm的常见命令、npm scripts 怎么用的。
- webpack：有个中文网站，讲的内容比较全。
## 自我介绍
### 简历
简历中最重要的四个信息：
- 基本信息：姓名、年龄、手机、邮箱、籍贯。
- 学历：从大到小写。硕士 -> 本科。
- 工作经历：时间、公司、岗位、职责、技术栈、**业绩**。业绩是大多数人所忽略的。
- 开源项目、Github、说明。
自我评价可以不写。
项目的业绩上，要包括：**技术收益**和**业绩收益**。
### 自我陈述
1、**把握面试的沟通方向。**
如果陈述中谈到项目，面试官可能会问：
- 负责了什么项目，项目是做什么的
- 和前端的结合点是？你的角色是？项目中承担了什么责任？
- 你在项目中的成绩？
如果你说自己是项目`负责人`，会被问到：
- 该项目怎么分配？有几个人参与？
- 作为负责人，你的角色是什么？是项目管理还是技术管理？
- 遇到技术难点，如何解决？
### 提问题
如果在深入问题时，碰到不会的，不要说“我不知道”。建议回答：
- **我要回去思考一下**。
- 这方面我没有经验，能不能**指点一下**？
- 有什么建议或者参考资料吗？我想把这个东西弄懂。
2、阔达、自信的适度发挥。
（2）
## 自我介绍
面试问的问题，很大层次上，取决你的简历和自我介绍。

562
06-前端基础/01-页面布局.md Normal file
View File

@@ -0,0 +1,562 @@
## 前言
### 面试基础
- 页面布局
- CSS盒模型：是CSS的基石。
- DOM事件
- HTTP协议
- 面向对象
- 原型链：能说出原型链的始末
### 面试进阶
- 通信：普通的通信、跨域通信
- 安全：CSRF、XSS。
- 算法
### 回答问题时要注意的
（1）题干的要求真的是字面要求的这么简单吗？
（2）答案怎么写，技巧在哪里
（3）如果想证明我的实力，应该有几种答案？
本文来讲一下页面布局
## 题目1
问题：假设高度默认100px ，请写出三栏布局，其中左栏、右栏各为300px，中间自适应。
20180305_1520.png
分析：
初学者想到的答案有两种：
- 方法1：浮动
- 方法2：绝对定位。
但要求你能至少写出三四种方法，才算及格。剩下的方法如下：
- 方法3：flexbox。移动开发里经常用到。
- 方法4：表格布局 table。虽然已经淘汰了，但也应该了解。
- 方法5：网格布局 grid。
下面分别讲解。
### 方法1 和方法2
**方法1、浮动：**
左侧设置左浮动，右侧设置右浮动即可，中间会自动地自适应。
**方法2、绝对定位：**
左侧设置为绝对定位， left：0px。右侧设置为绝对定位， right：0px。中间设置为绝对定位，left 和right 都为300px，即可。中间的宽度会自适应。
使用`article`标签作为容器，包裹左、中、右三个部分。
方法1 和方法2 的代码如下：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html * {
padding: 0px;
margin: 0px;
}
.layout {
margin-bottom: 150px;
}
.layout article div { /*注意，这里是设置每个小块儿的高度为100px，而不是设置大容器的高度。大容器的高度要符合响应式*/
height: 100px;
}
/* 方法一 start */
.layout.float .left {
float: left;
width: 300px;
background: red;
}
.layout.float .right {
float: right;
width: 300px;
background: blue;
}
.layout.float .center {
background: green;
}
/* 方法一 end */
/* 方法二 start */
.layout.absolute .left-center-right {
position: relative;
}
.layout.absolute .left {
position: absolute;
left: 0;
width: 300px;
background: red;
}
/* 【重要】中间的区域，左侧定位300px，右侧定位为300px，即可完成。宽度会自使用 */
.layout.absolute .center {
position: absolute;
left: 300px;
right: 300px;
background: green;
}
.layout.absolute .right {
position: absolute;
right: 0;
width: 300px;
background: blue;
}
/* 方法二 end */
</style>
</head>
<body>
<!-- 方法一：浮动 start -->
<!-- 输入 section.layout.float，即可生成 -->
<section class="layout float">
<!-- 用 article 标签包裹左、中、右三个部分 -->
<article class="left-right-center">
<!-- 输入 div.left+div.right+div.center，即可生成 -->
<div class="left">
我是 left
</div>
<div class="right">
我是 right
</div>
<div class="center">
浮动解决方案
我是 center
</div>
</article>
</section>
<!-- 方法一：浮动 end -->
<section class="layout absolute">
<article class="left-center-right">
<div class="left">
我是 left
</div>
<div class="right">
我是 right
</div>
<div class="center">
<h1>绝对定位解决方案</h1>
我是 center
</div>
</article>
</section>
</body>
</html>
```
注意上方代码中， className 定义和使用，非常规范。
效果如下：
20180305_1640.gif
### 方法3、flexbox布局
将左中右所在的容器设置为`display: flex`，设置两侧的宽度后，然后让中间的`flex = 1`，即可。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html * {
padding: 0;
margin: 0;
}
.layout article div {
height: 100px;
}
.left-center-right {
display: flex;
}
.layout.flex .left {
width: 300px;
background: red;
}
.layout.flex .center {
flex: 1;
background: green;
}
.layout.flex .right {
width: 300px;
background: blue;
}
</style>
</head>
<body>
<section class="layout flex">
<article class="left-center-right-">
<div class="left">
我是 left
</div>
<div class="center">
<h1>flex布局解决方案</h1>
我是 center
</div>
<div class="right">
我是 right
</div>
</article>
</section>
</body>
</html>
```
效果如下：
20180305_1700.gif
### 方法4、表格布局 table
设置整个容器的宽度为100%，设置三个部分均为表格，然后左边的单元格为 300px，右边的单元格为 300px，即可。中间的单元格会自适应。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html * {
padding: 0;
margin: 0;
}
.layout.table div {
height: 100px;
}
/* 重要：设置容器为表格布局，宽度为100% */
.layout.table .left-center-right {
width: 100%;
display: table;
height: 100px;
}
.layout.table .left-center-right div {
display: table-cell; /* 重要：设置三个模块为表格里的单元*/
}
.layout.table .left {
width: 300px;
background: red;
}
.layout.table .center {
background: green;
}
.layout.table .right {
width: 300px;
background: blue;
}
</style>
</head>
<body>
<section class="layout table">
<article class="left-center-right">
<div class="left">
我是 left
</div>
<div class="center">
<h1>表格布局解决方案</h1>
我是 center
</div>
<div class="right">
我是 right
</div>
</article>
</section>
</body>
</html>
```
20180305_1855.gif
### 方法5、网格布局 grid
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html * {
padding: 0;
margin: 0;
}
/* 重要：设置容器为表格布局，宽度为100% */
.layout.grid .left-center-right {
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px; /* 重要：设置表格为三列，并设置每列的宽度。即可。*/
}
.layout.grid .left {
background: red;
}
.layout.grid .center {
background: green;
}
.layout.grid .right {
background: blue;
}
</style>
</head>
<body>
<section class="layout grid">
<article class="left-center-right">
<div class="left">
我是 left
</div>
<div class="center">
<h1>网格布局解决方案</h1>
我是 center
</div>
<div class="right">
我是 right
</div>
</article>
</section>
</body>
</html>
```
效果：
20180305_1920.gif
### 延伸：五种方法的对比
- 五种方法的优缺点
- 考虑中间模块的高度问题
- 兼容性问题：实际开发中，哪个最实用？
方法1：浮动：
- 优点：兼容性好。
- 缺点：浮动会脱离标准文档流，因此要清除浮动。我们解决好这个问题即可。
方法:2：绝对定位
- 优点：快捷。
- 缺点：导致子元素也脱离了标准文档流，可实用性差。
方法3：flex 布局（CSS3中出现的）
- 优点：解决上面两个方法的不足，flex布局比较完美。移动端基本用 flex布局。
方法4：表格布局
- 优点：表格布局在很多场景中很实用，兼容性非常好。因为IE8不支持 flex，此时可以尝试表格布局
- 缺点：因为三个部分都当成了**单元格**来对待，此时，如果中间的部分变高了，其会部分也会被迫调整高度。但是，在很多场景下，我们并不需要两侧的高度增高。
什么时候用 flex 布局 or 表格布局，看具体的场景。二者没有绝对的优势，也没有绝对的不足。
方法5：网格布局
- CSS3中引入的布局，很好用。代码量简化了很多。
PS：面试提到网格布局，说明我们对新技术是有追求的。
### 延伸：如果题目中去掉高度已知
问题：题目中，如果去掉高度已知，我们往中间的模块里塞很多内容，让中间的模块撑开。会发生什么变化？哪个布局就不能用了？
分析：其实可以这样理解，我们回去看上面的动画效果，当中间的模块变得很挤时，会发生什么效果？就是我们想要的答案。
答案是：**flex 布局和表格布局可以通用**，其他三个布局都不能用了。
### 页面布局的变通
20180305_1931.png
`上下高度固定，中间自适应`，这个在移动端的页面中很常见。
### 总结
涉及到的知识点：
（1）语义化掌握到位：每个区域用`section`、`article`代表容器、`div`代表块儿。如果通篇都用 div，那就是语义化没掌握好。
（2）页面布局理解深刻。
（3）CSS基础知识扎实。
（4）思维灵活且积极上进。题目中可以通过`网格布局`来体现。
（5）代码书写规范。注意命名。上面的代码中，没有一行代码是多的。

474
06-前端基础/02-CSS盒模型的深度思考及BFC.md Normal file
View File

@@ -0,0 +1,474 @@
> 本文最初发表于[博客园]()，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
> 以下是正文。
## 题目：谈一谈你对CSS盒模型的认识
专业的面试，一定会问 CSS 盒模型。对于这个题目，我们要回答一下几个方面：
（1）基本概念：content、padding、margin。
（2）标准盒模型、IE盒模型的区别。不要漏说了IE盒模型，通过这个问题，可以筛选一部分人。
（3）CSS如何设置这两种模型（即：如何设置某个盒子为其中一个模型）？如果回答了上面的第二条，还会继续追问这一条。
（4）JS如何设置、获取盒模型对应的宽和高？这一步，已经有很多人答不上来了。
（5）实例题：根据盒模型解释**边距重叠**。
前四个方面是逐渐递增，第五个方面，却鲜有人知。
（6）BFC（边距重叠解决方案）或IFC。
如果能回答第五条，就会引出第六条。BFC是面试频率较高的。
**总结**：以上几点，从上到下，知识点逐渐递增，知识面从理论、CSS、JS，又回到CSS理论。
接下来，我们把上面的六条，依次讲解。
## 标准盒模型和IE盒子模型
标准盒子模型：
![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-27.jpg)
IE盒子模型：
![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-30.jpg)
上图显示：
在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式：
- width和height：**内容**的宽度、高度（不是盒子的宽度、高度）。
- padding：内边距。
- border：边框。
- margin：外边距。
CSS盒模型和IE盒模型的区别：
- 在 <font color="#0000FF">**标准盒子模型**</font>中，<font color="#0000FF">**width 和 height 指的是内容区域**</font>的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
- <font color="#0000FF">**IE盒子模型**</font>中，<font color="#0000FF">**width 和 height 指的是内容区域+border+padding**</font>的宽度和高度。
## CSS如何设置这两种模型
代码如下：
```javascript
/* 设置当前盒子为 标准盒模型（默认） */
box-sizing: content-box;
/* 设置当前盒子为 IE盒模型 */
box-sizing: border-box;
```
备注：盒子默认为标准盒模型。
## JS如何设置、获取盒模型对应的宽和高
### 方式一：通过DOM节点的 style 样式获取
```javascript
element.style.width/height;
```
缺点：通过这种方式，只能获取**行内样式**，不能获取`内嵌`的样式和`外链`的样式。
这种方式有局限性，但应该了解。
### 方式二（IE独有的）
```javascript
element.currentStyle.width/height;
```
获取到的即时运行完之后的宽高（三种css样式都可以获取）。但这种方式只有IE独有。
### 方式三（通用型）
```javascript
window.getComputedStyle(element).width/height;
```
方式三和方式二一样。只不过，方式三能兼容 Chrome、火狐。是通用型方式。
### 方式4
```javascript
element.getBoundingClientRect().width/height;
```
此 api 的作用是：获取一个元素的绝对位置。绝对位置是视窗 viewport 左上角的绝对位置。
此 api 可以拿到四个属性：left、top、width、height。
**总结：**
上面的四种方式，要求能说出来区别，以及哪个的通用型更强。
## margin塌陷/margin重叠
**标准文档流中，竖直方向的margin不叠加，只取较大的值作为margin**(水平方向的margin是可以叠加的，即水平方向没有塌陷现象)。
PS：如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有margin重叠的现象的。
我们来看几个例子。
### 兄弟元素之间
如下图所示：
![](http://img.smyhvae.com/20170805_0904.png)
### 子元素和父元素之间
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
background: green;
}
/* 给儿子设置margin-top为10像素 */
.son {
height: 100px;
margin-top: 10px;
background: red;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
```
上面的代码中，儿子的height是 100px，magin-top 是10px。注意，此时父亲的 height 是100，而不是110。因为儿子和父亲在竖直方向上，共一个margin。
儿子这个盒子：
![](http://img.smyhvae.com/20180305_2216.png)
父亲这个盒子：
![](http://img.smyhvae.com/20180305_2217.png)
上方代码中，如果我们给父亲设置一个属性：`overflow: hidden`，就可以避免这个问题，此时父亲的高度是110px，这个用到的就是BFC（下一段讲解）。
### 善于使用父亲的padding，而不是儿子的margin
> 其实，这一小段讲的内容与上一小段相同，都是讲父子之间的margin重叠。
我们来看一个奇怪的现象。现在有下面这样一个结构：（div中放一个p）
```
<div>
<p></p>
</div>
```
上面的结构中，我们尝试通过给儿子`p`一个`margin-top:50px;`的属性，让其与父亲保持50px的上边距。结果却看到了下面的奇怪的现象：
![](http://img.smyhvae.com/20170806_1537.png)
此时我们给父亲div加一个border属性，就正常了：
![](http://img.smyhvae.com/20170806_1544.png)
如果父亲没有border，那么儿子的margin实际上踹的是“流”，踹的是这“行”。所以，父亲整体也掉下来了。
**margin这个属性，本质上描述的是兄弟和兄弟之间的距离； 最好不要用这个marign表达父子之间的距离。**
所以，如果要表达父子之间的距离，我们一定要善于使用父亲的padding，而不是儿子的margin。
## BFC（边距重叠解决方案）
### BFC的概念
BFC（Block Formatting Context）：块级格式化上下文。你可以把它理解成一个独立的区域。
另外还有个概念叫IFC。不过，BFC问得更多。
### BFC 的原理/BFC的布局规则【非常重要】
BFC 的原理，其实也就是 BFC 的渲染规则（能说出以下四点就够了）。包括：
- （1）BFC **里面的**元素，在垂直方向，**边距会发生重叠**。
- （2）BFC在页面中是独立的容器，外面的元素不会影响里面的元素，反之亦然。（稍后看`举例1`）
- （3）**BFC区域不与旁边的`float box`区域重叠**。（可以用来清除浮动带来的影响）。（稍后看`举例2`）
- （4）计算BFC的高度时，浮动的子元素也参与计算。（稍后看`举例3`）
### 如何生成BFC
有以下几种方法：
- 方法1：overflow: 不为vidible，可以让属性是 hidden、auto。【最常用】
- 方法2：浮动中：float的属性值不为none。意思是，只要设置了浮动，当前元素就创建了BFC。
- 方法3：定位中：只要posiiton的值不是 static或者是relative即可，可以是`absolute`或`fixed`，也就生成了一个BFC。
- 方法4：display为inline-block, table-cell, table-caption, flex, inline-flex
参考链接：
- [BFC原理详解](https://segmentfault.com/a/1190000006740129)
- [BFC详解](https://www.jianshu.com/p/bf927bc1bed4)
- [前端精选文摘：BFC 神奇背后的原理](https://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html)
下面来看几个例子，看看如何生成BFC。
### BFC 的应用
**举例1：**解决 margin 重叠
当父元素和子元素发生 margin 重叠时，解决办法：**给子元素增加一个父元素，给这个父元素创建BFC**。
比如说，针对下面这样一个 div 结构：
```html
<div class="father">
<p class="son">
</p>
</div>
```
上面的div结构中，如果父元素和子元素发生margin重叠，我们可以给子元素创建一个 BFC，就解决了：
```html
<div class="father">
<p class="son" style="overflow: hidden">
</p>
</div>
```
因为**第二条：BFC区域是一个独立的区域，不会影响外面的元素**。
**举例2**：BFC区域不与float区域重叠：
针对下面这样一个div结构；
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father-layout {
background: pink;
}
.father-layout .left {
float: left;
width: 100px;
height: 100px;
background: green;
}
.father-layout .right {
height: 150px; /*右侧标准流里的元素，比左侧浮动的元素要高*/
background: red;
}
</style>
</head>
<body>
<section class="father-layout">
<div class="left">
左侧，生命壹号
</div>
<div class="right">
右侧，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，
</div>
</section>
</body>
</html>
```
效果如下：
![](http://img.smyhvae.com/20180306_0825.png)
上图中，由于右侧标准流里的元素，比左侧浮动的元素要高，导致右侧有一部分会跑到左边的下面去。
**如果要解决这个问题，可以将右侧的元素创建BFC**，因为**第三条：BFC区域不与`float box`区域重叠**。解决办法如下：（将right区域添加overflow属性）
```html
<div class="right" style="overflow: hidden">
右侧，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，
</div>
```
![](http://img.smyhvae.com/20180306_0827.png)
上图表明，解决之后，`father-layout`的背景色显现出来了，说明问题解决了。
**举例3：**清除浮动
现在有下面这样的结构：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father {
background: pink;
}
.son {
float: left;
background: green;
}
</style>
</head>
<body>
<section class="father">
<div class="son">
生命壹号
</div>
</section>
</body>
</html>
```
效果如下：
![](http://img.smyhvae.com/20180306_0840.png)
上面的代码中，儿子浮动了，但由于父亲没有设置高度，导致看不到父亲的背景色（此时父亲的高度为0）。正所谓**有高度的盒子，才能关住浮动**。
如果想要清除浮动带来的影响，方法一是给父亲设置高度，然后采用隔墙法。方法二是 BFC：给父亲增加 `overflow=hidden`属性即可， 增加之后，效果如下：
![](http://img.smyhvae.com/20180306_0845.png)
为什么父元素成为BFC之后，就有了高度呢？这就回到了**第四条：计算BFC的高度时，浮动元素也参与计算**。意思是，**在计算BFC的高度时，子元素的float box也会参与计算**。
## 我的公众号
想学习<font color=#0000ff>**代码之外的软技能**</font>？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/2016040102.jpg)
```javascript
```
```javascript
```
```javascript
```
```javascript
```

435
06-前端基础/03-DOM事件的总结.md Normal file
View File

@@ -0,0 +1,435 @@
## 前言
要学习事件的基础内容，请看先本人的这篇基础文章：
- [JavaScript基础：事件对象Event和冒泡](https://github.com/smyhvae/Web/blob/master/03-JavaScript/09-JavaScript%E5%9F%BA%E7%A1%80%EF%BC%9A%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1Event%E5%92%8C%E5%86%92%E6%B3%A1.md)
知识难度不大，只是大家没有系统地学习。
**知识点主要包括以下几个方面：**
- 基本概念：DOM事件的级别
面试不会直接问你，DOM有几个级别。但会在题目中体现：“请用DOM2 ....”。
- DOM事件模型、DOM事件流
面试官如果问你“**DOM事件模型**”，你不一定知道怎么回事。其实说的就是**捕获和冒泡**。
**DOM事件流**，指的是事件传递的**三个阶段**。
- 描述DOM事件捕获的具体流程
讲的是事件的传递顺序。参数为false（默认）、参数为true，各自代表事件在什么阶段触发。
能回答出来的人，寥寥无几。也许有些人可以说出一大半，但是一字不落的人，极少。
- Event对象的常见应用（Event的常用api方法）
DOM事件的知识点，一方面包括事件的流程；另一方面就是：怎么去注册事件，也就是监听用户的交互行为。第三点：在响应时，Event对象是非常重要的。
- 自定义事件（非常重要）
一般人可以讲出事件和注册事件，但是如果让你讲**自定义事件**，能知道的人，就更少了。
- 事件委托
业务中经常用到。
下面分别讲解。
## DOM事件的级别
DOM事件的级别，准确来说，是**DOM标准**定义的级别。包括：
**DOM0的写法：**
```javascript
element.onclick = function () {
}
```
上面的代码是在 js 中的写法；如果要在html中写，写法是：在onclick属性中，加 js 语句。
**DOM2的写法：**
```javascript
element.addEventListener('click', function () {
}, false);
```
【重要】上面的第三参数中，**true**表示事件在**捕获阶段**触发，**false**表示事件在**冒泡阶段**触发（默认）。如果不写，则默认为false。
**DOM3的写法：**
```javascript
element.addEventListener('keyup', function () {
}, false);
```
DOM3中，增加了很多事件类型，比如鼠标事件、键盘事件等。
PS：为何事件没有DOM1的写法呢？因为，DOM1标准制定的时候，没有涉及与事件相关的内容。
**总结：**关于“DOM事件的级别”，能回答出以上内容即可，不会出题目让你做。
## DOM事件模型、DOM事件流
### DOM事件模型
DOM事件模型讲的就是**捕获和冒泡**，一般人都能回答出来。
- 捕获：从上往下。
- 冒泡：从下（目标元素）往上。
### DOM事件流
DOM事件流讲的就是：浏览器在于当前页面做交互时，这个事件是怎么传递到页面上的。
类似于Android里面的事件传递。
完整的事件流，分三个阶段：
- （1）捕获：从 window 对象传到 目标元素。
- （2）目标阶段：事件通过捕获，到达目标元素，这个阶段就是目标阶段。
- （3）冒泡：从**目标元素**传到 Window 对象。
![](http://img.smyhvae.com/20180204_1028.gif)
20180306_1058.png
## 描述DOM事件捕获的具体流程
> 很少有人能说完整。
### 捕获的流程
20180306_1103.png
**说明**：捕获阶段，事件依次传递的顺序是：window --> document --> html--> body --> 父元素、子元素、目标元素。
PS1：第一个接收到事件的对象是 **window**（有人会说body，有人会说html，这都是错误的）。
PS2：JS中涉及到DOM对象时，有两个对象最常用：window、doucument。它们俩也是最先获取到事件的。
代码如下：
```javascript
window.addEventListener("click", function () {
alert("捕获 window");
}, true);
document.addEventListener("click", function () {
alert("捕获 document");
}, true);
document.documentElement.addEventListener("click", function () {
alert("捕获 html");
}, true);
document.body.addEventListener("click", function () {
alert("捕获 body");
}, true);
fatherBox.addEventListener("click", function () {
alert("捕获 father");
}, true);
childBox.addEventListener("click", function () {
alert("捕获 child");
}, true);
```
**补充一个知识点：**
在 js中：
- 如果想获取 `body` 节点，方法是：`document.body`；
- 但是，如果想获取 `html`节点，方法是`document.documentElement`。
### 冒泡的流程
与捕获的流程相反
## Event对象的常见 api 方法
用户做的是什么操作（比如，是敲键盘了，还是点击鼠标了），这些事件基本都是通过Event对象拿到的。这些都比较简单，我们就不讲了。我们来看看下面这几个方法：
### 方法一
```javascript
event.preventDefault();
```
解释：阻止默认事件。
比如，已知`<a>`标签绑定了click事件，此时，如果给`<a>`设置了这个方法，就阻止了链接的默认跳转。
### 方法二：阻止冒泡
这个在业务中很常见。
有的时候，业务中不需要事件进行冒泡。比如说，业务这样要求：单击子元素做事件A，单击父元素做事件B，如果不阻止冒泡的话，出现的问题是：单击子元素时，子元素和父元素都会做事件A。这个时候，就要用到阻止冒泡了。
w3c的方法：（火狐、谷歌、IE11）
```javascript
event.stopPropagation();
```
IE10以下则是：
```javascript
event.cancelBubble = true;
```
兼容代码如下：
```javascript
box3.onclick = function (event) {
alert("child");
//阻止冒泡
event = event || window.event;
if (event && event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
```
上方代码中，我们对box3进行了阻止冒泡，产生的效果是：事件不会继续传递到 father、grandfather、body了。
### 方法三：设置事件优先级
```javascript
event.stopImmediatePropagation();
```
这个方法比较长，一般人没听说过。解释如下：
比如说，我用addEventListener给某按钮同时注册了事件A、事件B。此时，如果我单击按钮，就会依次执行事件A和事件B。现在要求：单击按钮时，只执行事件A，不执行事件B。该怎么做呢？这是时候，就可以用到`stopImmediatePropagation`方法了。做法是：在事件A的响应函数中加入这句话。
大家要记住 event 有这个方法。
### 属性4、属性5（事件委托中用到）
```javascript
event.currentTarget //当前所绑定的事件对象。在事件委托中，指的是【父元素】。
event.target //当前被点击的元素。在事件委托中，指的是【子元素】。
```
上面这两个属性，在事件委托中经常用到。
**总结**：上面这几项，非常重要，但是容易弄混淆。
## 自定义事件
自定义事件的代码如下：
```javascript
var myEvent = new Event('clickTest');
element.addEventListener('clickTest', function () {
console.log('smyhvae');
});
//元素注册事件
element.dispatchEvent(myEvent); //注意，参数是写事件对象 myEvent，不是写 事件名 clickTest
```
上面这个事件是定义完了之后，就直接自动触发了。在正常的业务中，这个事件一般是和别的事件结合用的。比如延时器设置按钮的动作：
```javascript
var myEvent = new Event('clickTest');
element.addEventListener('clickTest', function () {
console.log('smyhvae');
});
setTimeout(function () {
element.dispatchEvent(myEvent); //注意，参数是写事件对象 myEvent，不是写 事件名 clickTest
}, 1000);
```
## 事件委托
参考本人这篇文章的最后一段：
- [JavaScript基础：事件对象Event和冒泡](https://github.com/smyhvae/Web/blob/master/03-JavaScript/09-JavaScript%E5%9F%BA%E7%A1%80%EF%BC%9A%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1Event%E5%92%8C%E5%86%92%E6%B3%A1.md)
```javascript
```
```javascript
```
```javascript
```
```javascript
```
```javascript
```
```javascript
```
```javascript
```
```javascript
```
```javascript
```

25
06-前端基础/04-HTTP协议.md Normal file
View File

@@ -0,0 +1,25 @@
一面中，如果有笔试，考HTTP协议的可能性较大。
## 前言
一面内容：
- HTTP协议的主要特点
- HTTP报文的组成部分
- HTTP方法
- get 和 post的区别
- HTTP状态码
- 什么是持久连接
- 什么是管线化
二面内容；

6
06-前端基础/11-其他.md Normal file
View File

@@ -0,0 +1,6 @@
## 前端基础
### 闭包和作用域，面试喜欢问。

4
06-前端基础/11-计算机网络.md Normal file
View File

@@ -0,0 +1,4 @@
- [HTTP最强资料大全](https://github.com/semlinker/awesome-http)

7
06-前端基础/web安全.md Normal file
View File

@@ -0,0 +1,7 @@
## 前言
攻击的原理也许你能讲出来，主要是想知道如何发现这个网站的漏洞，毕竟大部分的网站都已经把用户输入的内容各种花式过滤了