github.com/hpoenixf

工作

变化

2019年，还在阿里，然而四月拥抱变化，原有的前端小组被解散，我被分进了游戏平台团队。

业务小组跟原有的纯前端技术小组还是有不少区别的。好的一面是可以更专注目标，由于是一个包含各个岗位的团队，前后端客户端都是在同一个领导下面，更容易去围绕同一个目标去合作去努力，做事会更连贯更有目标感。而之前在前端小组时，就比较偏向完成任务，分了一个页面给你维护，来自别的团队的产品给你一个需求你就做一下，至于页面的目标是什么，那是产品操心的事情，作为技术小组的可能没有太多动力去关心。不好的一面可能就是因为前端人手不够或是动力不足，很难去搭建的研发平台或是工具，日常工作可能更多就是忙时写写页面,不忙的时候就看看有没有什么办法能加快点页面加载速度，总感觉技术方面的挑战不足，可以说有好有坏吧。

最近读了代码整洁之道和编写可维护代码的艺术，发现这两本书的道理还是相同的，主要是下面这几点，命名，注释，逻辑，函数，格式，组织。写篇文章整合记录一下。

命名

好的命名有下面的特征

• 名副其实
• 名字与抽象层级符合
• 有表现力
• 名字带上更多信息
• 大作用域的名字使用更长的名字。
• 避免误导，类似，容易混淆的名字
• 名字的区分有意义
• 可读的/容易搜索/熟悉的名字
• 每个概念用同一个名字，如获取数据统一用fetchXXX
• 少用双关语
• 添加有意义的语境

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)