github.com/hpoenixf

背景

之前我分享了文章大厂前端面试考什么?,你们一定很想看答案吧？说实话，答案我是有，在准备面试的时候会时不时翻看，但内容比较多，比较凌乱，不能指望我在一篇文章中写完。

我是从非计算机专业自学前端的，到现在（2018年4月）有两年半的时间。中间经历了不少迷茫，技术也止步不前，怀疑自己可能只是一辈子这样写写页面。然而在最近的面试中通过学习和思考，找到了前进的方向，也得到一些大公司(BATJ中的两家)的录用机会。算是从初级前端毕业，进阶了吧。

我打算写一系列文章来进行解答面试中碰到的问题以及自己觉得需要补充和遗漏的地方，该系列文章适用于有一年以上前端开发经验的同学，不会讲太基础的东西。希望可以帮助大家走出迷茫，提升技术水平。

之前面试的过程中，一个比较让我在意的评价是知识较全面但深度不够。希望这次写的文章可以深入一点，跟大家一起成长。系列的范围比较广，同时还希望有深度，因此更新的速度不会太快。在这里先写个目录。

赶时间的同学可以按照我的目录中的关键词先自行准备提升，希望推荐文章和交流。欢迎关注和 star 本博客或是关注我的 github

chrome 插件开发

背景

lazada的促销页面主要是由前端开发一个个模块，然后运营选取模块像积木一样搭建好页面。每个模块是独立请求数据并渲染的。因此一个页面可能会有十几个请求，我们经常会碰到某个模块没有显示或是数据出错，这时就要控制台一个个排查模块对应的请求数据是哪个，参数是哪个，出错的又是哪个模块，又是什么版本。还是有点繁琐。因此我决定开发一个chrome插件来简化这样的操作。

这是一篇从入职阿里一月总结被拖延到变成2018年总结的文章，不由得说我的拖延症是严重了一点。

2018年，先是在创业公司加了一个月9116做了小程序，然后离职从广州回到深圳，然后各种面试，然后苦等两个月五月底进阿里lazada，在阿里的半年里从期待到失落再到现在的再次有所期待，期间十月去了一次泰国旅游，人生真是一个又一个的起伏。

背景

最近需要使用react技术栈，需要掌握react，redux和redux-saga，然而我只是简单的写过react。刷了几遍文档还是一头雾水，决定写过小demo练手加深下印象。

就不详细介绍上面的技术了，简单来说redux就是管理状态的，但是对于异步的处理不是很完善，这里就需要用到redux-saga了。redux-saga的异步处理用到了生成器和迭代器的相关知识，不熟悉的同学可以了解下我之前的文章

这次的demo打算写一个输入框，输入拼音会返回对应的城市列表。并尽可能多的使用redux-saga的特性

任务队列

js是单线程的，因为js可以操作DOM，如果多线程的话，会造成冲突的问题。

js的任务分为同步任务和异步任务。同步任务是指在主线程上依次执行的任务，形成一个执行栈。而异步任务不在主线程，在任务队列中，如网络请求，定时器等。在执行栈的任务执行完毕之后，系统会检查任务队列，看是否有可以执行的异步任务。-

而任务队列分为两种，一种是mircotask，另一种是marcotask。按照我的理解，mircotask和marcotask的区别在于mircotask的任务可以在本次循环/页面刷新前被加入到任务队列，而marcotask不可以

迭代器

什么是迭代器

js迭代器是一个对象，具有next方法，可以返回序列中的带有done和value两个属性的下一项。

1
2
3
4
5
6
7
8
9
10
11

function makeIterator(array){
    var nextIndex = 0;4
    return {
       next: function(){
           return nextIndex < array.length ?
               {value: array[nextIndex++], done: false} :
               {done: true};
       }
    };
}

什么是promise

promise是es6的一个重要特性，用于实现异步。promise对象拥有一个叫做状态的属性，该属性不受外界影响，修改后不能再次变化。而Promise是一个构造函数，可以生成promise对象。
常见用法是

1
2
3
4
5
6
7
8
9
10
11
12

var a = new Promise(function (res, rej) {
  console.log('1')
  if (1) {
    res(3)
  } else {
    rej()
  }
})
a.then(function (val) {
  console.log(val)
})
console.log(2)

面向对象有三个特点，一个个来说

封装

私有变量

利用闭包实现对象的私有变量。

1
2
3
4
5
6
7
8
9
10

function Animal (age) {
  this.getAge = function () {
    return age
  }
}
var dog = new Animal(3)
console.log(dog.age) // undefined
console.log(dog.getAge()) // 3