HTML 部分
localStorage 和 cookies
// localStorage、 sessionStorage 与 cookies 的区别
// localStorage 可以用来在同网站 a 页面和 b 页面之间通信,
// 结合 storage 事件使用, 不懂这个事件可以看看 MDN 的文档
FormData
// 上传文件需要用到这个对象
// 假如页面中有一个
// <input type="file" id="input-file">
// 上传之后可以通过下面的方式获取上传的文件
var file = e('#input-file').files[0]
// new 一个 FormData 对象
var fd = new FormData()q
// 将上传的 file 添加到 fd 对象中
// 其中 avatar 字段是和后端约定好的
fd.append('avatar', file)
// 往 fd 里面添加 file 之后, 就可以在下面使用了
// 上传文件的套路
// url 是上传的 api 路径
var upload = function(url, fd) {
var request = {
url: url,
method: 'post',
data: fd,
// 注意, 下面两行是上传文件的套路
contentType: false,
processData: false,
success: function(r) {
log('上传成功', r)
},
error: function(e) {
log('上传失败', e)
}
}
$.ajax(request)
}
File API
// File 和 createObjectURL 结合使用可以用来预览图片
https://developer.mozilla.org/zh-CN/docs/Web/API/File/Using_files_from_web_applications
for (var i = 0; i < array.length; i++) {
array[i]
}
CSS 部分
float
清除浮动的套路是什么？
在浮动元素的父元素上添加一个 xx-clearfix class 属性
这个 class 对应的样式为：
.gua-clearfix::after {
content: '';
display: block;
clear: both;
}
如果不清除浮动会发生什么情况？
浮动元素下面的内容即使是块级元素，也会向上一走一层，紧挨着浮动元素
position
display
两栏布局
水平居中
垂直居中
// 居中套路
// 父元素 relative
// 子元素 absolute
// 水平居中，子元素距离左边 50%，再 transform: translateX(-50%)
// 垂直居中，子元素距离顶部 50%，再 transform: translateY(-50%)
JS 部分
值类型与引用类型
//
var a = {
v: 1
}
var b = a
console.log(b.v)
a.v = 2
console.log(b.v)
a = {
v: 3
}
console.log(b.v)
变量声明提升
//
console.log(a)
var a = 1
console.log(b())
function b() {
return 2
}
console.log(c())
var c = function() {
return 3
}
// 注意，let 或者 const 声明的变量不具备声明提升的特性
console.log(d)
let d = 4
this
//
// 简单的 this 题目
var x = 0
function test() {
console.log(this.x)
}
var o = {}
o.x = 1
o.m = test
o.m.apply()
// 复杂的 this 题目
var foo = {
bar: function() {
console.log('1'. this.baz)
return this.baz
},
baz: 1,
};
(function() {
return typeof arguments0
})(foo.bar)
//
function Foo() {
this.name = 'a'
}
var f1 = new Foo()
f1.name = 'b'
console.log(f1.name)
var f2 = new Foo()
console.log(f2.name)
prototype
原型链
//
function Foo() {
this.name = 'a'
}
Foo.prototype.logName = function() {
console.log('name is', this.name)
}
var f1 = new Foo()
f1.logName()
var f2 = new Foo()
f2.logName = function() {
console.log('name')
}
f2.logName()
var f3 = new Foo()
f3.name = 'c'
f3.logName()
arguments
//
(function() {
return typeof arguments
})()
call, apply, bind
// call, apply 和 bind 的区别
setTimeout 和 setInterval
// 两者的区别
setTimeout 与循环结合
//
for (var i = 0; i < 5; i++) {
setTimeout(function() {
console.log(new Date(), i)
}, 1000)
}
console.log(new Date(), i)
前端性能优化
https://www.jianshu.com/p/bb0ff31779d8
https://juejin.im/post/5b73ef38f265da281e048e51
偏执型人格又叫妄想型人格。其行为特点常常表现为：极度的感觉过敏，对侮辱和伤害耿耿于怀；思想行为固执死板，敏感多疑、心胸狭隘；爱嫉妒，对别人获得成就或荣誉感到紧张不安，妒火中烧，不是寻衅争吵，就是在背后说风凉话，或公开抱怨和指责别人；自以为是，自命不凡，对自己的能力估计过高，惯于把失败和责任归咎于他人，在工作和学习上往往言过其实；同时又很自卑，总是过多过高地要求别人，但从来不信任别人的动机和愿望，认为别人存心不良；不能正确、客观地分析形势，有问题易从个人感情出发，主观片面性大；如果建立家庭，常怀疑自己的配偶不忠等等。持这种人格的人在家不能和睦，在外不能与朋友、同事相处融洽，别人只好对他敬而远之。--百度
BFC
// 理解 promise
var promise1 = new Promise(function(resolve, reject) {
setTimeout(function() {
resolve('foo');
}, 300);
});
promise1.then(function(value) {
console.log(value);
// expected output: "foo"
});
// 实现 promise
console.log(promise1);
// expected output: [object Promise]
事件冒泡, 事件捕获, 事件委托
// 讲清楚这三个概念
闭包
// 使用闭包实现如下程序
// 函数每调用一次，该函数的返回值加 1
clone 和 deepClone
// 实现 clone 和 deepClone 函数 https://www.cnblogs.com/jq-melody/p/4499333.html
// JSON.stringify 和 JSON.parse 可以应付大部分情形
ajax（可能需要手写原生的 ajax）
const ajax = (method, path, data ,callback) {
let r = new XMLHttpRequest()
// 设置请求方法和请求地址
r.open(method, path, true)
// 设置请求头
r.setRequestHeader('content-Type', 'application/json')
// 注册响应函数
r.onreadystatechange = () => {
if (r.readyState === 4) {
callback(r)
}
}
r.send(data)
}
for (variable of iterable) {
}
// 实现原生的 ajax 函数
// 0 1 2 3 4 各代表什么含义
HTTP 请求方法, 常见状态码, 头部常见字段
// HTTP 有哪些常见请求方法
// HTTP 常见状态码有哪些
// HTTP 头部常见字段有哪些
跨域（jsonp, postMessage, cors, 用服务器(比如 node)转发请求和响应）
// 跨域有哪些常见的解决方式
网络安全: xss, xsrf
// xss 和 xsrf 的原理是什么
DOM 操作（查找, 添加, 删除, 修改）
// DOM 查找/添加/删除/修改对应的 API 是什么
jQuery 常见 API
// jQuery 常见 API
数据结构
数组
对象
队列
栈
数组、对象、字符串的想换转化
比如 a=1&b=2&c=3 怎样转成对象, 复习基础课程的作业就可以
// 有这样一个 url： http://vip.qq.com/a.php?a=1&b=2&c=3&d=xxx&e
// 写一段 JS 程序将 url 的参数转成对象的形式
{
a: 1,
b: 2,
c: 3,
d: 'xxx',
e: '',
}
ES6
http://es6.ruanyifeng.com/
ES6 的面试题一般是概念性质的, 所以清楚下面的概念就可以了
let 和 const, 有一个 TDZ（暂时性死区的概念，了解下即可）
箭头函数
解构
剩余参数
Promise, 可能会附带 async await
class
Set
React
http://www.ruanyifeng.com/blog/2016/09/react-technology-stack.html
// React 也是概念性质的题目为主, 基本上不会考察写代码
React Angular Vue 这三个一般只会一个就可以的, 所以这里只说 React 的情况
react 的广告
virtual dom
diff 算法的原理
state 和 props
组件生命周期
组件通信：父组件 -> 子组件, 子组件 -> 父组件, A 组件 -> B 组件
React Router（react 路由）
Redux/MobX
react ui 有两套很流行: Material UI 和 Ant Design, 国内流行的是 Ant Design
material ui: https://material-ui.com
ant design: https://ant.design/index-cn
网友评论