github.com/hpoenixf

背景

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

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

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

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

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

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

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

从工作两年就呆了三四家公司的职业生涯来说，要说有什么经验，可能就是一个离职率高的公司一定是不值得长久留下来的，在公司不要简单的去完成任务，要去想办法改善、做点不一样的，不然换工作就很难说出你跟别人有什么不一样，为什么我们要选你。以及，换工作如果离入职还有一段时间，不要在家里苦等，只会被无尽的催促，不如去旅游去穷游，呆在家里只是白白的变胖..人生中可能再有一次三个月不工作的机会很难了。

进阿里前，一直有流传阿里是前端的最终去路，也在前端方面输出了很多优秀的技术如weex、antd，egg，作为前端能来到这样的平台有种高考考进清华北大的感觉，还是感到有点激动。

然而刚来的时候，却感觉有点失落。做频道页面用到WEEX，使用的都是内部的轮子，踩了很多坑，调试起来体验略差。做大促活动页面的时候，是使用的jquery来开发一个个模块，运营使用模块来搭建页面。这个模式固然很先进方便，然而开发一个个模块，不断的调整样式，却又是一个没什么挑战性和成就感的活，让人觉得面试造火箭，进门领螺丝的感觉。我们是做东南亚电商的，更新一个页面，需要重复发布六次，一不小心一个小时就过去了。还有经常会碰到因为这样那样的原因，某个文案没翻译，又要重新发布一次六个国家，会感觉自己不断的在做重复而没有成长的活，十分疲惫。

通过跟身边的人谈话，学习，我的想法开始有所改变，的确现在所处的开发环境有这样和那样的不足，但是，这也意味着机会。去一个很完善的地方只能搬砖填瓦，来到还有lazada，意味着还有很多可以发挥的空间。另外，完成任务只是一个基础的事情，要做的额外的才能超出期待，收获自己想要的事情，比如，如何提升大家的工作效率？如何降低大家的上手学习成本？如何给业务带来更大价值？如何提升页面性能，代码质量？

因此，除了完成被产品和上级分配的工作外，我也主动做了一些事情。优化脚手架和模块的初始模板，在开发环境加入多语言的切换参数，开发可以快速排查模块请求与其它信息的chrome插件等等等，可能是后面会一直拿来吹嘘的是我一个新人被分配去负责lazada双十一的分会场前端负责人，虽然很多事情还是大佬们去跟进，但还是对项目流程做出了一些小小的优化…

可以不断的学习和成长，这就是为什么我选择程序员的一个重要原因，希望在2019年，自己也能有所收获。

背景

最近需要使用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

前端除了JS,HTML,CSS三板斧，还要懂些什么？有什么东西对我们提升自己前端水平有帮助？