forked from theluyuan/Web
add file:页面布局
This commit is contained in:
parent
ed4b45f820
commit
33852a1c50
@ -1,12 +1,35 @@
|
||||
|
||||
> 本文最初发表于[博客园](),并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我,一起入门和进阶前端。
|
||||
|
||||
> 以下是正文。
|
||||
|
||||
|
||||
## 本文主要内容
|
||||
## 前言
|
||||
|
||||
- ES6的环境配置
|
||||
ECMAScript 是 JS 的语言标准。而 ES6 是新的 JS 语法标准。
|
||||
|
||||
- ES6 的变量声明
|
||||
PS:严格来说,ECMAScript 还包括其他很多语言的语言标准。
|
||||
|
||||
- 变量的解构赋值
|
||||
### ECMAScript 发展历史
|
||||
|
||||
- 1995年:ECMAScript 诞生。
|
||||
|
||||
- 1997年:ECMAScript 标准确立。
|
||||
|
||||
- 1999年:ES3 出现,与此同时,IE5 风靡一时。
|
||||
|
||||
- 2009年,ES5 出现,例如 foreach、Object.keys、Object.create 和 json 标准。
|
||||
|
||||
- 2015年6月,ES6正式发布。
|
||||
|
||||
ES6 的目标是:让 JS 语言可以编写复杂的大型应用程序,成为企业级开发语言。
|
||||
|
||||
|
||||
### ES6 的其他优势
|
||||
|
||||
- 使用 babel 语法转换器,支持低端浏览器。
|
||||
|
||||
- 流行的库基本都是基于 ES6 构建。 React 默认使用 ES6 标准开发。
|
||||
|
||||
|
||||
## ES6的环境配置
|
||||
@ -15,19 +38,14 @@
|
||||
|
||||
但是,在这之前,我们需要配置一下相关的环境。
|
||||
|
||||
|
||||
|
||||
### 建立工程目录
|
||||
|
||||
|
||||
(1)先建立一个空的工程目录 `ES6Demo`,并在目录下建立两个文件夹 `src`和 `dist`:
|
||||
|
||||
- `src`:书写ES6代码,我们写的 js 程序都放在这里。
|
||||
|
||||
- `dist`:利用 Babel 编译生成的 ES5 代码。**我们在 HTML 页面需要引入 dist 里的 js 文件**。
|
||||
|
||||
|
||||
|
||||
(2)在 src 里新建文件 `index.html`:
|
||||
|
||||
```html
|
||||
@ -47,10 +65,8 @@
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
**注意**,上方代码中,我们引入的是`dist`目录下的 js 文件。
|
||||
|
||||
|
||||
然后我们新建文件 `src/index.js`:
|
||||
|
||||
```javascript
|
||||
@ -105,9 +121,11 @@ PS:VS Code 里打开终端的快捷键是:`Contol + ~`。
|
||||
npm install -g babel-cli
|
||||
```
|
||||
|
||||
如果安装比较慢的话,Mac 下可以使用 cnpm进行安装 ,windows 下可以使用 nrm切换到 taobao 的镜像。
|
||||
|
||||
20180304_1305.png
|
||||
![](http://img.smyhvae.com/20180304_1305.png)
|
||||
|
||||
如果安装比较慢的话,Mac 下可以使用`cnpm`进行安装 ,windows 下可以使用`nrm`切换到 taobao 的镜像。
|
||||
|
||||
|
||||
(3)本地安装 babel-preset-es2015 和 babel-cli:
|
||||
|
||||
@ -115,11 +133,11 @@ PS:VS Code 里打开终端的快捷键是:`Contol + ~`。
|
||||
npm install --save-dev babel-preset-es2015 babel-cli
|
||||
```
|
||||
|
||||
20180304_1307.png
|
||||
![](http://img.smyhvae.com/20180304_1307.png)
|
||||
|
||||
安装完成后,会发现我们的package.json文件,已经多了 devDependencies 选项:
|
||||
安装完成后,会发现`package.json`文件,已经多了 devDependencies 选项:
|
||||
|
||||
20180304_1308.png
|
||||
![](http://img.smyhvae.com/20180304_1308.png)
|
||||
|
||||
(4)新建.babelrc:
|
||||
|
||||
@ -156,9 +174,9 @@ PS:VS Code 里打开终端的快捷键是:`Contol + ~`。
|
||||
|
||||
修改后的效果如下:
|
||||
|
||||
20180304_1315.png
|
||||
![](http://img.smyhvae.com/20180304_1315.png)
|
||||
|
||||
目前为止,环境配置好了。以后,我们执行如下命令,即可将 ES6 文件转化为 ES5 文件;
|
||||
目前为止,环境配置好了。以后,我们执行如下命令,即可将`src/index.js`这个 ES6 文件转化为 `dist/index.js`这个 ES5 文件:
|
||||
|
||||
|
||||
```bash
|
||||
@ -184,18 +202,18 @@ index.js:
|
||||
当我们打开网页后,就可以在浏览器的控制台,看到代码的输出结果。
|
||||
|
||||
|
||||
接下来,我们讲一下 ES6的常见语法。需要说明的是,
|
||||
接下来,我们讲一下 ES6的常见语法。
|
||||
|
||||
|
||||
## ES6 的变量声明
|
||||
|
||||
ES6 中新增了 let 和 const,我们来看一下。
|
||||
ES6 中新增了 let 和 const 来定义变量:
|
||||
|
||||
- `var`:,ES5 和 ES6中,定义**全局变量**(是variable的简写)。
|
||||
|
||||
- `let`:定义**局部变量**,替代 var。
|
||||
|
||||
- `const`:定义常量(定义后,不可修改)。
|
||||
- `const`:定义**常量**(定义后,不可修改)。
|
||||
|
||||
|
||||
### var:全局变量
|
||||
@ -289,7 +307,7 @@ let是防止数据污染,我们来看下面这个例子:
|
||||
举例:
|
||||
|
||||
```
|
||||
const name = `smyhvae`; //定义常量
|
||||
const name = 'smyhvae'; //定义常量
|
||||
|
||||
```
|
||||
|
||||
@ -438,11 +456,16 @@ console.log(typeof a); //输出结果:string
|
||||
|
||||
输出结果:
|
||||
|
||||
20180304_1626.png
|
||||
![](http://img.smyhvae.com/20180304_1626.png)
|
||||
|
||||
|
||||
## 扩展运算符和 rest 运算符
|
||||
|
||||
- 扩展运算符的格式为`...`
|
||||
|
||||
- rest运算符的格式为`...变量名`
|
||||
|
||||
|
||||
### 扩展运算符
|
||||
|
||||
有了ES6,当我们在定义一个方法,但是不确定其参数的个数时,我们就可以用**扩展运算符**作为参数。
|
||||
@ -464,12 +487,11 @@ console.log(typeof a); //输出结果:string
|
||||
|
||||
上方代码中,因为方法的参数是三个,但使用时是用到了四个参数,所以会报错:
|
||||
|
||||
20180304_1638.png
|
||||
![](http://img.smyhvae.com/20180304_1638.png)
|
||||
|
||||
现在,我们有了扩展运算符,就不用担心报错的问题了。代码可以这样写:
|
||||
|
||||
|
||||
```
|
||||
```javascript
|
||||
function fn(...arg) { //当不确定方法的参数时,可以使用扩展运算符
|
||||
console.log(arg[0]);
|
||||
console.log(arg[1]);
|
||||
@ -477,69 +499,205 @@ function fn(...arg) { //当不确定方法的参数时,可以使用扩展运
|
||||
console.log(arg[3]);
|
||||
}
|
||||
|
||||
fn(1, 2, 3); //方法中定义了四个参数,但只引用了三个参数,并不会报错。
|
||||
fn(1, 2, 3); //方法中定义了四个参数,但只引用了三个参数,ES6 中并不会报错。
|
||||
|
||||
```
|
||||
|
||||
20180304_1650.png
|
||||
|
||||
|
||||
**举例:**数组引用的问题
|
||||
|
||||
我们来看一段代码:(将数组 arr1 赋值给 arr2)
|
||||
|
||||
![](http://img.smyhvae.com/20180304_1650.png)
|
||||
|
||||
**举例:**数组赋值的问题
|
||||
|
||||
我们来分析一段代码:(将数组 arr1 赋值给 arr2)
|
||||
|
||||
```javascript
|
||||
let arr1 = ['www', 'smyhvae', 'com'];
|
||||
let arr2 = arr1; // 将 arr1 赋值给 arr2,其实是让 arr2 指向 arr1 的内存地址
|
||||
console.log('arr1:' + arr1);
|
||||
console.log('arr2:' + arr2);
|
||||
console.log('---------------------');
|
||||
|
||||
arr2.push('你懂得'); //往arr2 里添加一部分内容
|
||||
console.log('arr1:' + arr1);
|
||||
console.log('arr2:' + arr2);
|
||||
```
|
||||
|
||||
运行结果:
|
||||
|
||||
![](http://img.smyhvae.com/20180304_1950.png)
|
||||
|
||||
上方代码中,我们往往 arr2 里添加了`你懂的`,却发现,arr1 里也有这个内容。原因是:`let arr2 = arr1;`其实是让 arr2 指向 arr1 的地址。也就是说,二者指向的是同一个内存地址。
|
||||
|
||||
如果不想让 arr1 和 arr2 指向同一个内存地址,我们可以借助扩展运算符来做:
|
||||
|
||||
```javascript
|
||||
let arr1 = ['www', 'smyhvae', 'com'];
|
||||
let arr2 = [...arr1]; //arr2 会重新开辟内存地址
|
||||
console.log('arr1:' + arr1);
|
||||
console.log('arr2:' + arr2);
|
||||
console.log('---------------------');
|
||||
|
||||
arr2.push('你懂得'); //往arr2 里添加一部分内容
|
||||
console.log('arr1:' + arr1);
|
||||
console.log('arr2:' + arr2);
|
||||
```
|
||||
|
||||
运行结果:
|
||||
|
||||
![](http://img.smyhvae.com/20180304_1951.png)
|
||||
|
||||
我们明白了这个例子,就可以避免开发中的很多业务逻辑上的 bug。
|
||||
|
||||
|
||||
### `rest` 运算符
|
||||
|
||||
`rest` 在英文中指的是**剩余部分**(不是指休息)。我们来举个例子,理解剩余部分的含义:
|
||||
|
||||
```javascript
|
||||
function fn(first, second, ...arg) {
|
||||
console.log(arg.length);
|
||||
}
|
||||
|
||||
fn(0, 1, 2, 3, 4, 5, 6); //调用函数后,输出结果为 5
|
||||
```
|
||||
|
||||
上方代码的输出结果为 5。 调用`fn()`时,里面有七个参数,而`arg`指的是剩下的部分(因为除去了`firt`和`second`)。
|
||||
|
||||
从上方例子中可以看出,`rest`运算符适用于:知道前面的一部分参数的数量,但对于后面剩余的参数数量未知的情况。
|
||||
|
||||
|
||||
## for ... of 循环
|
||||
|
||||
ES6 中,如果我们要遍历一个数组,可以这样做:
|
||||
|
||||
```
|
||||
let arr1 = [1, 2, 3, 4, 5];
|
||||
|
||||
for (let value of arr1) {
|
||||
console.log(value);
|
||||
}
|
||||
```
|
||||
|
||||
输出结果:
|
||||
|
||||
![](http://img.smyhvae.com/20180304_2016.png)
|
||||
|
||||
|
||||
for…of 的循环可以避免我们开拓内存空间,增加代码运行效率,所以建议大家在以后的工作中使用for…of循环。
|
||||
|
||||
|
||||
|
||||
## 模板字符串
|
||||
|
||||
我们以前让字符串进行拼接的时候,是这样做的:(传统写法的字符串拼接)
|
||||
|
||||
```javascript
|
||||
var name = 'smyhvae';
|
||||
var age = '26';
|
||||
console.log('name:'+name+',age:'+age); //传统写法
|
||||
```
|
||||
|
||||
|
||||
这种写法,比较繁琐,而且容易出错。
|
||||
|
||||
现在有了 ES6 语法,字符串拼接可以这样写:
|
||||
|
||||
```javascript
|
||||
var name = 'smyhvae';
|
||||
var age = '26';
|
||||
|
||||
console.log('name:'+name+',age:'+age); //传统写法
|
||||
|
||||
console.log(`name:${name},age:${age}`); //ES6 写法
|
||||
|
||||
```
|
||||
|
||||
注意,上方代码中,倒数第二行用的是单引号,最后一行用的是反引号(在tab键的上方)。
|
||||
|
||||
|
||||
|
||||
参考链接:
|
||||
|
||||
- [ES6的rest参数和扩展运算符](https://segmentfault.com/a/1190000010222698)
|
||||
|
||||
|
||||
|
||||
|
||||
## 箭头函数
|
||||
|
||||
|
||||
|
||||
|
||||
定义和调用函数:(传统写法)
|
||||
|
||||
```javascript
|
||||
function fn1(a, b) {
|
||||
return a + b;
|
||||
}
|
||||
|
||||
console.log(fn1(1, 2)); //输出结果:3
|
||||
```
|
||||
|
||||
定义和调用函数:(ES6中的写法)
|
||||
|
||||
|
||||
```
|
||||
|
||||
var fn2 = (a, b) => a + b;
|
||||
|
||||
console.log(fn2(1, 2)); //输出结果:3
|
||||
|
||||
```
|
||||
|
||||
|
||||
上方代码中,箭头后面的内容,就相当于 return 的内容。
|
||||
|
||||
在箭头函数中,如果方法体内有两句话,那就需要在方法体外边加上{}括号。如下:
|
||||
|
||||
|
||||
```javascript
|
||||
var fn2 = (a, b) => {
|
||||
console.log('haha');
|
||||
return a + b;
|
||||
};
|
||||
console.log(fn2(1, 2)); //输出结果:3
|
||||
|
||||
```
|
||||
|
||||
从上面的箭头函数中,我们可以很清晰地找到函数名、参数名、方法体。
|
||||
|
||||
当然,在 ES6 中定义方法时,我们还可以给方法里的参数加一个**默认值**(缺省值):
|
||||
|
||||
- 方法被调用时,如果没有给参数赋值,那就是用默认值;
|
||||
|
||||
- 方法被调用时,如果给参数赋值了新的值,那就用新的值。
|
||||
|
||||
如下:
|
||||
|
||||
|
||||
```javascript
|
||||
var fn2 = (a, b = 5) => {
|
||||
console.log('haha');
|
||||
return a + b;
|
||||
};
|
||||
console.log(fn2(1)); //第二个参数使用默认值 5。输出结果:6
|
||||
|
||||
|
||||
|
||||
|
||||
console.log(fn2(1, 8)); //输出结果:9
|
||||
|
||||
```
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
更多 ES6 的语法,本文会陆续更新。
|
||||
|
||||
## 参考链接:
|
||||
|
||||
- [阮一峰 | ECMAScript 6 入门](http://es6.ruanyifeng.com/)
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习<font color=#0000ff>**代码之外的软技能**</font>?不妨关注我的微信公众号:**生命团队**(id:`vitateam`)。
|
||||
|
||||
扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外:
|
||||
|
||||
![](http://img.smyhvae.com/2016040102.jpg)
|
||||
|
||||
|
@ -530,6 +530,7 @@ npm install -g cnpm --registry=https://registry.npm.taobao.org
|
||||
|
||||
解释: i 指的就是 install。
|
||||
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习<font color=#0000ff>**代码之外的软技能**</font>?不妨关注我的微信公众号:**生命团队**(id:`vitateam`)。
|
||||
|
@ -1,17 +1,13 @@
|
||||
|
||||
|
||||
## 什么是 ES6
|
||||
|
||||
|
||||
|
||||
|
||||
### 发展历史
|
||||
## 前言
|
||||
|
||||
ECMAScript 是 JS 的语言标准。而 ES6 是新的 JS 语法标准。
|
||||
|
||||
|
||||
20180303_1633.png
|
||||
### 发展历史
|
||||
|
||||
20180303_1633.png
|
||||
|
||||
- 2015年6月,ES6正式发布。
|
||||
|
||||
@ -116,7 +112,7 @@ ES6 中函数的用法:
|
||||
|
||||
上面两端代码,执行的结果是一样的。
|
||||
|
||||
当然,也可以给上面这个函数的参数加一个缺省值:
|
||||
当然,也可以给上面这个函数的参数加一个默认值:
|
||||
|
||||
```javascript
|
||||
var fn2 = (name='enen')=>{
|
||||
|
474
11-开发积累/00-准备.md
Normal file
474
11-开发积累/00-准备.md
Normal 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)
|
||||
|
||||
## 自我介绍
|
||||
|
||||
面试问的问题,很大层次上,取决你的简历和自我介绍。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
563
11-开发积累/01-页面布局.md
Normal file
563
11-开发积累/01-页面布局.md
Normal file
@ -0,0 +1,563 @@
|
||||
|
||||
|
||||
|
||||
## 前言
|
||||
|
||||
|
||||
### 面试基础
|
||||
|
||||
- 页面布局
|
||||
|
||||
- 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 布局和表格布局可以通用**,其他三个布局都不能用了。
|
||||
|
||||
|
||||
|
||||
### 总结
|
||||
|
||||
涉及到的知识点:
|
||||
|
||||
|
||||
(1)语义化掌握到位:每个区域用`section`、`article`代表容器、`div`代表块儿。如果通篇都用 div,那就是语义化没掌握好。
|
||||
|
||||
(2)页面布局理解深刻。
|
||||
|
||||
(3)CSS基础知识扎实。
|
||||
|
||||
(4)思维灵活且积极上进。题目中可以通过`网格布局`来体现。
|
||||
|
||||
(5)代码书写规范。注意命名。以及,上面的代码中,没有一行代码是多的。
|
||||
|
||||
|
||||
### 页面布局的变通
|
||||
|
||||
20180305_1931.png
|
||||
|
||||
`上下高度固定,中间自适应`,这个在移动端的页面中很常见。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
1
11-开发积累/02-CSS盒模型.md
Normal file
1
11-开发积累/02-CSS盒模型.md
Normal file
@ -0,0 +1 @@
|
||||
02-CSS盒模型.md
|
6
11-开发积累/11-其他.md
Normal file
6
11-开发积累/11-其他.md
Normal file
@ -0,0 +1,6 @@
|
||||
|
||||
|
||||
## 前端基础
|
||||
|
||||
### 闭包和作用域,面试喜欢问。
|
||||
|
4
11-开发积累/11-计算机网络.md
Normal file
4
11-开发积累/11-计算机网络.md
Normal file
@ -0,0 +1,4 @@
|
||||
|
||||
|
||||
- [HTTP最强资料大全](https://github.com/semlinker/awesome-http)
|
||||
|
7
11-开发积累/web安全.md
Normal file
7
11-开发积累/web安全.md
Normal file
@ -0,0 +1,7 @@
|
||||
|
||||
|
||||
|
||||
|
||||
## 前言
|
||||
|
||||
攻击的原理也许你能讲出来,主要是想知道如何发现这个网站的漏洞,毕竟大部分的网站都已经把用户输入的内容各种花式过滤了
|
21
前端面试/清单.md
Normal file
21
前端面试/清单.md
Normal file
@ -0,0 +1,21 @@
|
||||
01.md
|
||||
|
||||
|
||||
|
||||
### CommonJS、RequireJS(AMD) SeaJS(CMD)区别
|
||||
|
||||
|
||||
|
||||
|
||||
### Webpack 打包
|
||||
|
||||
|
||||
### WebSocket
|
||||
|
||||
|
||||
### ES6
|
||||
|
||||
会 ES6 是应该的部分,不算加分项。
|
||||
|
||||
|
||||
|
167
前端面试/网友面经/20180116-博客园:一年经验初探阿里巴巴前端社招.md
Normal file
167
前端面试/网友面经/20180116-博客园:一年经验初探阿里巴巴前端社招.md
Normal file
@ -0,0 +1,167 @@
|
||||
|
||||
博客园:一年经验初探阿里巴巴前端社招
|
||||
|
||||
文章来源:<https://www.cnblogs.com/fsyz/p/8298921.html>
|
||||
|
||||
|
||||
一般阿里社招都是招3-5年的P6+高级工程师,当初自己一年经验也没有想过有这个面试机会。
|
||||
|
||||
虽然没想着换工作,但是经常关注一些招聘网站的信息,某一天,在某boss上有个人找我,叫我发一下简历,我一看是阿里的某技术专家,虽然之前也有阿里的在某boss上给我要简历,但是我深知自己经验不足,然后给boss说我是16届的,只有一年经验,然后就没有然后了。这次我依然这么回复,但是这boss说,没关系,他喜欢基础好的,让我可以试一试,于是我也抱着试一试的心态发了简历。
|
||||
|
||||
简历发过去之后,boss就给我打了电话,让我简单的介绍一下自己,我就噼里啪啦说了一些,还说了一些题外话。然后boss就开始问我问题。
|
||||
|
||||
由于面了四轮,所以最开始的面试记忆有点模糊了,细细回想,又感觉记忆犹新。
|
||||
|
||||
1.电话初探
|
||||
1.说一下你了解CSS盒模型。
|
||||
我就说了一下IE的怪异盒模型和标注浏览器的盒模型,然后可以通过box-sizing属性控制两种盒模型的变换。
|
||||
|
||||
2.说一下box-sizing的应用场景。
|
||||
这个也不难,简单说了一两个应用场景,具体就不一一细说了。
|
||||
|
||||
3.说一下你了解的弹性FLEX布局.
|
||||
这个我也比较了解,各种概念和属性能想到的说了一大堆,也扯到了Grid布局,基本这个也没啥问题。
|
||||
|
||||
4.说一下一个未知宽高元素怎么上下左右垂直居中。
|
||||
说了一下flex弹性布局的实现,说了一下兼容性,扯到了postcss的一些东西,然后说了一下常规的兼容性比较好的实现。
|
||||
|
||||
5.说一下原型链,对象,构造函数之间的一些联系。
|
||||
这个我之前写过相关的文章,自己也有比较深入的理解,所以这个也不在话下,噼里啪啦说了一大堆,也不知道面试官听得咋样。
|
||||
|
||||
6.DOM事件的绑定的几种方式
|
||||
说了三种,然后说了一些冒泡,默认事件,以及DOM2,DOM3级的一些标准。
|
||||
|
||||
7.说一下你项目中用到的技术栈,以及觉得得意和出色的点,以及让你头疼的点,怎么解决的。
|
||||
这个因人而异,开放性问题,主要考察平时项目的一些积累吧,这个我回答感觉也比较ok。
|
||||
|
||||
8.有没有了解http2.0,websocket,https,说一下你的理解以及你所了解的特性。
|
||||
这个我看过一些文章,但是没有什么印象,扯了一些概念,但是回答的不是很深。
|
||||
|
||||
第一轮电话初探,大约面了50分钟,就记起来这么多,还有一些细节问题可能淡忘了,总体来说,面的都是以基础为主,然后boss说把我简历推荐给内部,进行正式的社招流程。
|
||||
|
||||
一轮技术面
|
||||
然后当天晚上一个女的面试官就给我打电话了,说八点半进行下一轮技术面试,没想到效率这么快,我都没怎么准备。
|
||||
这次就直接省略自我介绍了。
|
||||
|
||||
1.webpack的入口文件怎么配置,多个入口怎么分割啥的,我也没太听清楚。
|
||||
这个自己就说了一下自己的理解,以及自己用node写的多入口怎么配置,然后面试官说不是多入口配置,然后我又说了一下自己的理解,然后这题就过了。
|
||||
|
||||
2.我看到你的项目用到了Babel的一个插件:transform-runtime以及stage-2,你说一下他们的作用。
|
||||
这个我也还算比较了解,就说了一下ES的一些API,比如generator啥的默认不转换,只转换语法,需要这个来转换,然后说profill啥的,扯了一下stage-1,stage-2,stage-3,这个问题回答还算清楚。
|
||||
|
||||
3.我看到你的webpack配置用到webpack.optimize.UglifyJsPlugin这个插件,有没有觉得压缩速度很慢,有什么办法提升速度。
|
||||
这个我主要回答了一下,我之前也没怎么了解,一个想到是缓存原理,压缩只重新压缩改变的,还有就是减少冗余的代码,压缩只用于生产阶段,然后面试官问还有呢?我就说,还可以从硬件上提升,可以得到质的飞跃,比如换台I9处理器的电脑。。。。
|
||||
|
||||
4.简历上看见你了解http协议。说一下200和304的理解和区别
|
||||
这个噼里啪啦说了一堆,协商缓存和强制缓存的区别,流程,还有一些细节,提到了expires,Cache-Control,If-none-match,Etag,last-Modified的匹配和特征,这一块之前有过比较详细的了解,所以还是应答如流。
|
||||
|
||||
5.DOM事件中target和currentTarget的区别
|
||||
这个没答上来。。。
|
||||
|
||||
6.说一下你平时怎么解决跨域的。以及后续JSONP的原理和实现以及cors怎么设置。
|
||||
我就说了一下Jason和cors,然后问我JSONP的原理以及cors怎么设置,这一块自己也实践过,所以还是对答如流的。
|
||||
|
||||
7.说一下深拷贝的实现原理。
|
||||
这个也还好,就是考虑的细节不是很周全,先是说了一种JSON.stringify和JSON.parse的实现,以及这种实现的缺点,主要就是非标准JSOn格式无法拷贝以及兼容性问题,然后问了我有么有用过IE8的一个什么JSON框架,我也不记得是什么了,因为我压根没听过,然后说了一下尾递归实现深拷贝的原理,还问了我typeof null是啥,这个当然是Object。。。
|
||||
|
||||
8.说一下项目中觉得可以改进的地方以及做的很优秀的地方?
|
||||
这个也是因人而异,开放性问题,大致扯了一下自己的经历,也还OK。
|
||||
|
||||
最后问了有什么需要问的地方,面试到这里基本就结束了,大约面了一个多钟头,还是蛮累的。总体来说,回答的广度和深度以及细节都还算OK,觉得这轮面试基本没什么悬念。
|
||||
|
||||
二轮技术面
|
||||
过了几天,接到阿里另一个面试官的电话,上一轮面试通过了,这次是二轮技术面,说估计一个钟头。这次依然跳过自我介绍之类的,直奔主题。
|
||||
|
||||
1.有没有自己写过webpack的loader,他的原理以及啥的,记得也不太清楚。
|
||||
这个我就说了一下,然后loader配置啥的,也还ok。
|
||||
|
||||
2.有没有去研究webpack的一些原理和机制,怎么实现的。
|
||||
这个我简单说了一下我自己了解的,因为这一块我也没深入去研究,所以说的应该比较浅。
|
||||
|
||||
3.babel把ES6转成ES5或者ES3之类的原理是什么,有没有去研究。
|
||||
这一块我说了一下自己的思路,大致也还OK,我也没去深入研究怎么转换的,之前好像看过类似的文章,自己也只观察过转换之后的代码是啥样的,至于怎么转换的规则,真的没去深入观察。
|
||||
|
||||
4.git大型项目的团队合作,以及持续集成啥的。
|
||||
这里我就说了一下自己了解的git flow方面的东西,因为没有实战经验,所以我就选择性说明了这一块的不熟练,然后面试官也没细问。
|
||||
|
||||
5.什么是函数柯里化?以及说一下JS的API有哪些应用到了函数柯里化的实现?
|
||||
这个我就说了一下函数柯里化一些了解,以及在函数式编程的应用,最后说了一下JS中bind函数和数组的reduce方法用到了函数柯里化。
|
||||
|
||||
6.ES6的箭头函数this问题,以及拓展运算符。
|
||||
这一块主要是API和概念的问题,扯了一些规范以及严格模式下其他情况this只想问题。
|
||||
|
||||
7.JS模块化Commonjs,UMD,CMD规范的了解,以及ES6的模块化跟其他几种的区别,以及出现的意义。
|
||||
这个也是说了一下自己的理解和认知,自己对模块化历史以及一些规范都有所涉猎,这一块也还凑合。
|
||||
|
||||
8.说一下Vue实现双向数据绑定的原理,以及vue.js和react.js异同点,如果让你选框架,你怎么怎么权衡这两个框架,分析一下。
|
||||
主要是发布订阅的设计模式,还有就是ES5的Object.defineProperty的getter和setter机制,然后顺便扯了一下Angular的脏检测,以及alvon.js最先用到这种方式。然后扯了一下vue.js和react.js异同点,权衡框架选择,调研分析之类,噼里啪啦说了一大堆。
|
||||
|
||||
9.我看你也写博客,说一下草稿的交互细节以及实现原理。
|
||||
这一款就按照自己用过简书或者掘金,SG这类草稿的体验,详细说了一下,这个开放性问题,说到点基本就OK。
|
||||
|
||||
最后面试官问我有什么想问的吗,面试到这里基本就结束了,差不多面了一个小时,说过几天就会给答复,如果过了就会去阿里园区进行下一轮的技术面。
|
||||
|
||||
三轮技术面
|
||||
上一轮发挥感觉没前两轮发挥好,所以还是有点不自信的,没想到第三天后,就来电话了,通知我去阿里园区面试。
|
||||
|
||||
因为阿里西溪园区距离我不到十公里,我就踩着共享单车一点钟就出发了,天气比较热,飘在路上,百感交集,身边一辆法拉利轰鸣而过,又一辆兰博基尼呼啸而过,我心里一万头草泥马奔腾,MLGB,心里暗想,为神马开这车的人不是此刻看文章的你?
|
||||
|
||||
走到半路了,面试官给我打电话了,说我怎么还没到,说约定的是两点钟,我一下子就懵逼了,短信只有一个游客访问ID,并没有通知我具体时间,反正不管谁的疏忽,我肯定是要迟到了,于是我快马加鞭,踩着贼难骑的共享单车,背着微风,一路狂奔,到阿里园区已是汗流浃背,油光满面,气喘乎乎。。。
|
||||
|
||||
面试迟到了,印象肯定不好,加上满头大汗的形象也不太好,加上自己饥渴难耐,这面是估计要GG了,一进来就直奔主题,这次是两个大Boss面试我。
|
||||
|
||||
第一个面试官
|
||||
1.先自我介绍一下,说一下项目的技术栈,以及项目中遇到的一些问题啥的。
|
||||
这个问题就是个开场白,简要说明一下,问题都不大,这个面试官就是第一次打电话给我面试的那个boss,所以技术那块boss心里也有个底细,所以没再问技术问题。
|
||||
|
||||
2.一个业务场景,面对产品不断迭代,以及需求的变动该怎么应对,具体技术方案实现。
|
||||
具体业务场景,我就不一一描述,Boss在白板上画了一个大致的模块图,然后做了一些需求描述。
|
||||
然后需求一层一层的改变,然后往下挖,主要是考察应对产品能力,以及对代码的可维护性和可拓展性这些考察,开放性问题,我觉得还考察一些沟通交流方面的能力,因为有些地方面试官故意说得很含糊,反正就是一个综合能力,以及对产品的理解,中间谈到怎么实现,也问到了一些具体的点,记得问到的有一下几个。
|
||||
|
||||
① 怎么获取一个元素到视图顶部的距离。
|
||||
② getBoundingClientRect获取的top和offsetTop获取的top区别
|
||||
③事件委托
|
||||
|
||||
第二个面试官
|
||||
1.业务场景:比如说百度的一个服务不想让阿里使用,如果识别到是阿里的请求,然后跳转到404或者拒绝服务之类的?
|
||||
主要是考察http协议头Referer,然后怎么判断是阿里的ip或者啥的,我也不太清楚。
|
||||
|
||||
2.二分查找的时间复杂度怎么求,是多少
|
||||
。。。排序的还算清楚一点,查找真的不知所措,没回答上来,也没猜,意义不大,不会就是不会。
|
||||
|
||||
3.XSS是什么,攻击原理,怎么预防。
|
||||
这个很简单,跨站脚本攻击XSS(cross site scripting),攻击类型主要有两种:反射型和存储型,简单说了一下如何防御:
|
||||
|
||||
①转义
|
||||
②DOM解析白名单
|
||||
③第三方库
|
||||
④CSP
|
||||
|
||||
自己对web安全这块系统学习过,前前后后大约了解了很多,对于XSS,CSRF,点击劫持,Cookie安全,HTTP窃听篡改,密码安全,SQL注入,社会工程学都有一定了解,所以这个自然也不在话下。
|
||||
|
||||
4.线性顺序存储结构和链式存储结构有什么区别?以及优缺点。
|
||||
我是类比JS数组和对象来回答的,反正还算凑合吧,自己都数据结构这块多少还是有些印象,所以入了前端,对数据结构和算法确实一直淡忘了。
|
||||
|
||||
5.分析一下移动端日历,PC端日历以及桌面日历的一些不同和需要注意的地方。
|
||||
这个我能想到的大致都说了一遍,不同的场景交互和细节以及功能都有所偏差,以及功能的侧重都可能不同。
|
||||
|
||||
6.白板写代码,用最简洁的代码实现数组去重。
|
||||
我写了两种实现方式:
|
||||
ES6实现:
|
||||
|
||||
[...new Set([1,2,3,1,'a',1,'a'])]
|
||||
ES5实现:
|
||||
|
||||
[1,2,3,1,'a',1,'a'].filter(function(ele,index,array){
|
||||
return index===array.indexOf(ele)
|
||||
})
|
||||
7.怎么实现草稿,多终端同步,以及冲突问题?
|
||||
这个回答的不算好,本来也想到类比git的处理方式,但是说的时候往另外一个方面说了,导致与面试官想要的结果不一样。
|
||||
|
||||
最后说目前的工作经验达不到P6水平,业务类稍弱,阿里现在社招只要P6的高级工程师,但是可以以第二梯队进去,就是以第三方签署就业协议,一年后可以转正,就是俗称的外包。多少还是有点遗憾,面了四轮面了个外包,最后放弃这份工作了。
|
||||
|
||||
最后,感谢boss一直以来的关照和器重。
|
||||
|
||||
学习前端的同学们,欢迎加入前端学习交流群
|
||||
|
||||
前端学习交流QQ群:461593224
|
58
前端面试/网友面经/面经链接推荐.md
Normal file
58
前端面试/网友面经/面经链接推荐.md
Normal file
@ -0,0 +1,58 @@
|
||||
|
||||
### 2018-01-25
|
||||
|
||||
|
||||
|
||||
- [有时在面试时,我都替候选人着急——候选人完全可以在面试前准备](https://www.cnblogs.com/JavaArchitect/p/8353578.html)
|
||||
|
||||
### 2018-01-26
|
||||
|
||||
- [转眼人到中年:前端老程序员无法忘怀的一次百度电话面试](https://www.cnblogs.com/chyingp/p/a-telephone-interview-long-age.html)
|
||||
|
||||
八年前的面经,咋记得这么清楚?
|
||||
|
||||
|
||||
### 2018-01-27
|
||||
|
||||
- [16年毕业的前端er在杭州求职ing](https://www.cnblogs.com/qianduantuanzhang/archive/2018/01/27/8365670.html)
|
||||
|
||||
|
||||
### 2018-02-04
|
||||
|
||||
- [2018秋招前端总结](https://www.cnblogs.com/Mr-stockings/archive/2018/02/02/8407295.html)
|
||||
|
||||
|
||||
|
||||
|
||||
### 2018-02-25
|
||||
|
||||
- [前端开发面试题(CSS)](http://www.bijishequ.com/detail/379621)
|
||||
|
||||
- [超过20家的前端面试题](https://www.jianshu.com/p/8b68f4df749e)
|
||||
|
||||
|
||||
- [来聊聊前端工程师的面试套路](https://baijiahao.baidu.com/s?id=1570338146494165&wfr=spider&for=pc)
|
||||
|
||||
- [我的前端进阶之路(面试题)](https://www.cnblogs.com/libin-1/p/6864344.html)
|
||||
|
||||
这几个链接里讲到了 less。听说面试爱问 less 和 Sass的区别。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 2018-03-02
|
||||
|
||||
- [记录前端的面试日常(持续更新)](https://www.cnblogs.com/fangdongdemao/p/8492563.html)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
8
前端面试/链接推荐.md
Normal file
8
前端面试/链接推荐.md
Normal file
@ -0,0 +1,8 @@
|
||||
|
||||
|
||||
|
||||
### 2018-01-29
|
||||
|
||||
长期写博客的人,最少能证明他是一个善于思考和总结的人。
|
||||
|
||||
这句话的来源:[我依然坚持建议你开始写博客 | 写给我的 2017](https://www.cnblogs.com/plokmju/p/8108846.html)
|
Loading…
Reference in New Issue
Block a user