前端知识点汇总

vue

官网，及其生态系统

1. vue的双向数据绑定的原理，或者说为什么method中的变量能够和data中的变量通讯。
2. vue中的for循环为什么要有key
3. vue中nextTrick的使用场景
4. 自定义组件并传值 小程序实现音视频
5. 比较computed和methods的区别
6. (进阶)vue源码
7. 哪里不懂 再把犀牛书多翻翻
8. 你的vue项目架构，每个文件夹有个字科学合理作用。component里有100个文件怎么办？
9. Vuex的正确使用场景——购物车
10. 什么时候用hash什么时候用history，导航守卫（登录拦截）
11. 请写出以下代码的执行结果

console.log(1)
setTimeOut(() => {
console.log(2)
});
process.nextTrick(() => {
  console.log(3)
})
setImmediate(() => {
  console.log(4)
})
new Promise(resolve =>{
  console.log(5)
  resolve();
  console.log(6)
}).then(() =>{
  console.log(7)
})
Promise.resolve().then(() =>{
  console.log(8)
  process.nextTick(() =>{
  console.log(9)
  })
})

es6/es7

1. 请说出以下题目的打印结果并说明原因：
   async-await

async function async1(){    
    console.log('async1 start')
    await async2()
    console.log('async1 end')
}
async function async2(){
    console.log('async2')
}
console.log('script start')
setTimeout(function(){
    console.log('setTimeout')
},0)
async1();
new Promise(function(resolve){
    console.log('promise1')
    resolve();
}).then(function(){
    console.log('promise2')
})
console.log('script end1')
new Promise(function(resolve){
    resolve();
    console.log('promise3')
}).then(function(){
    console.log('promise4')
})
console.log('script end2')

2. 箭头函数的作用，箭头函数的this指向问题
3. promise 为什么能.then
4. 自己实现一个promise函数，大概流程？

基础

0. 在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法。

 <input type="file" class="upload" @change="uploadImg($event)" />
 uploadImg(el) {
        const that = this;
        const reader = new FileReader(); // 创建读取文件对象
        reader.readAsDataURL(el.target.files[0]); // 发起异步请求,读取文件
        reader.onload = function() {
          that.value = this.result;
        };
        this.getFaceInfo(el.target.files[0]);
    },

1. cdn有哪些优化静态资源加载速度的机制
2. 设计AutoComplete(又叫搜索组件、自动补全组件等)时，需要考虑什么问题？
3. JS实现一个带并发限制的异步调度器Scheduler，保证同时运行的任务最多有两个。完善代码中Scheduler类，使得以下程序能正确输出。

class Scheduler {
  add(promiseCreator) { ... }  // ...}const timeout = (time) => new Promise(resolve => {
  setTimeout(resolve, time)
})const scheduler = new Scheduler()const addTask = (time, order) => {
  scheduler.add(() => timeout(time))
    .then(() => console.log(order))
}
​
addTask(1000, '1')
addTask(500, '2')
addTask(300, '3')
addTask(400, '4')// output: 2 3 1 4// 一开始，1、2两个任务进入队列// 500ms时，2完成，输出2，任务3进队// 800ms时，3完成，输出3，任务4进队// 1000ms时，1完成，输出1// 1200ms时，4完成，输出4

参考链接

4. semantic versioning 是一个前端通用的版本，要求实现compare(a,b)，比较a，b两个版本大小
5. JavaScript是单线程，为什么会有异步？
6. 如何从严格模式设置到怪异模式？
7. 请将如下代码拍平为[1,2,3,4,5,6,7]?

var arr = [1,2,[3,[4,5,[6,7]]]]

8. 防抖和节流
9. Ajax请求的原理
10. pop和shift分别有什么作用
11. 3== true 和 3 === true 分别打印出的是什么

var a = { x : 1 }
var b = a;
a.x = a = { n : 1 }
console.log(a)
console.log(b)

  Function.prototype.a = () => alert(1)
  Object.prototype.b = () => alert(2)
  function A() {
   const a = new A();
   a.a();
   a.b();

14. 请写出执行顺序

let a = 0
console.log(a)
console.log(b)
let b = 0 
console.log(c)

var x = 10 ; 
function a(y){
  var x = 20 ;
  return b (y);
}
function b(y){
  return x+y
}
a(20)

16. 有哪些跨域方法，对比优缺点
17. es5 原型链、继承、this指向、new操作符、隐式转换、事件循环机制macro micro、基础类型、数据去重/交集/并集、判断是否为数组、变量声明提升、函数作用域、apply/call、jsonp跨域
18. 浅拷贝和深拷贝
19. 实现instanceof，利用原型链prototype
20. canvas底层
21. 如何从严格模式设置到怪异模式？

正则

1. 请给出识别Email的正则表达式：

参考1

参考2

css

1. 写一个左侧固定宽度，右侧自适应的样式
2. flex
3. Css布局在没有内容时，height 100%不起作用怎么办（根元素）
4. 强制换行word-wrap: break-word;
5. css兼容性–reset:css写完给浏览器看，不同浏览器对某一css的默认样式不同，reset样式放在最前边全部抹平，新css叠加！
6. rem是一种相对的长度单位，以根元素（html是所有元素的根元素）来进行适配所有屏幕；
   em，也是一个相对的长度单位，以父元素（ul是li的父元素，html是body的父元素body是ul的父元素也是li的父元素等等，）
7. 一些css3的属性
8. 响应式布局width: calc(100% - 80px)

nginx

1. Nginx正向代理反向代理的原理

其他

1. 工作中我最引以为豪的地方别人都做不到
2. 即时沟通想法，一个好的解法往往是思维逻辑的展现，所以沟通思考的过程是非常重要的，这样在沟通的过程中你也能拿到更多关于问题本身的信息。
3. 尝试用不同的方法，思路或数据结构去解决同一个问题，并且衡量不同解法之间的优劣。
4. 技术性问题要按照思路答，开放性问题就可以发散思维，这一年的收获变化成长
5. 可以问面试官一些技术问题，技术方法之类的思考模式，也没白跑一趟

算法相关：

1. 冒泡、快排、二叉树遍历（实现函数接受任意二叉树，求二叉树所有根到叶子路径组成数字之和。）、大数相乘（适当刷下剑指offer）
2. 实现函数接受任意二叉树，求二叉树所有根到叶子路径组成数字之和。
3. 练习算法题目，写出清晰、简洁、bug free的代码，并衡量时间和空间复杂度以及可能存在的副作用。

网络相关：

• http2.0、1.1区别，tcp/udp，cookie/session

软件工程的核心概念

• 如何从一个需求落实到一个系统设计，如何衡量两个不同设计的好坏，如何在各种限制下（人员、时间、资源等）选择其中更合适的设计，以及提升该设计的可拓展性等。

资料/网站，包括但不限于

1. 《Cracking the Coding Interview》
2. https://leetcode.com/
3. http://highscalability.com/