文章导航

北森面试总结

北森的面试以今天上午的三面正式告一段落。

这可以算作是我的正式的第一次面试吧,北森也是很不错的一家公司,效率很高,面试流程十分专业,很遗憾最后没能通过面试。不仅是我的能力,也和我面试时候的发挥相关,今天下午和家人总结的时候就觉得,其实我的三面是可能通过的,但是我在面试过程中太过被动因此没能给面试官留下印象吧,个人面对面试官问题的回答也模模糊糊。

总体总结下面试的难度。

一面是我发挥的最好的,面试官水平在我印象中是三个面试官里最高的,他提问的广度很足,而且深度也比较适合实习生,而且从面试官最后的一些问题(多久能来,能工作多久),我发现其实在成都总部这边面试官对我还是比较满意和友好的,我离开公司半小时,HR就给我打电话说通过了。

从二面开始就是视频面试了,都是北京总部那边的人。二面是一位女面试官,是架构组leader,这里的面试内容总体也不难,然而有一道很简单的算法题我都没有写很好,面完后回忆我发现其实如果是平常的自己,这个题我可能看了都觉得过于简单不太想写。这个面试面完之后其实我是很慌的,但是第二天HR通知我通过了,感谢面试官的信任!

然后就是今天上午的三面,真的是当局者迷旁观者清。今天下午回忆,我发现这位面试官都是在针对React提问,而且问题的深度就对我的要求很高,对实习生而言我原本就是希望去公司实习的过程中对React加强深度上的理解,然而面试官的问题本身就对使用React的熟练度有一定的要求。这一番轰炸下来我的自信都没了,面试官也没有对我的基础有多少了解,最后面试官问我还有什么问题我也没有提到这一点,感觉很遗憾吧,如果提到这一点让面试官意识到他的提问已经针对实习生“超纲”了,可能我会有通过的机会。

针对这次面试自己也学到了很多,也了解到了自己的不足,能力上的,以及面试过程中的。所以说面试真的也是一门手艺,要随机应变,心态要放平,该冷静的时候要冷静,有什么问题也要提出来,不要让面试变成纯粹的你问我答。另外也和我最近急于找到一份工作的心态有关系,这次面试结束之后我的心才放下来,我妈告诉我不要着急,有能力自然能够找到工作,确实如此,我应该摆正自己的心态,我也意识到了我现在心态的不正常,抱着这种急于求成的心态,是走不远的。

近一个月学习总结

一开始是打算7月初就找实习,因为学校的安排和要求,我自己找实习就只有延后,但是这一个月也没闲着。各大厂开始开启校招,我也看了很多面经,对自己的能力水平也有了一个基本的认知。于是我开始针对面经上面那些我欠缺的点进行恶补。

函数作用域+原型链的复习和理解深化,《你不知道的JS-中卷》配合阮一峰老师的《ES6入门》,对ES6的Promise+Generator+Iterator做了一个比较全面的了解,现在不敢说熟练运用,但是敢说别人写出来的代码能看懂原因,而不是大致明白个意思。HTTP协议,TCP/IP协议电子扫描版的书看了几本:《HTTP权威指南》重点关注,《HTTP图解》概念有点浅简单翻了下,《TCP/IP详解》比较深挑着一些章节看了看,《TCP/IP图解》重视程度仅次于《HTTP权威指南》,对HTTP这一块的认识也比以前更清楚。

所以最近基本都是基础知识的学习,对基础的加强重视,也源于之前和一位双非本科大三花一年时间进头条的大佬的邮件交流,他特别强调打好基础很关键,确实如此。

这两天准备投简历找实习,希望找到实习之后进入公司能够得到一个更快速地成长吧。

关于笔记本合上盖子再打开后无法播放音频及视频的解决方案

最近跟父母聊过后给我添置了一台笔记本设备,最近遇到了一个问题就是笔记本一旦合上盖子后再打开就发现音乐视频都无法播放,右下角的扬声器音量控制也离奇消失了。

在此中唯一的线索就是我合上盖子后,实际上我的系统自动就进入了睡眠模式,网上搜索了下类似的问题“进入睡眠模式恢复过来后声音没有了”,答案中就提到有可能是系统从睡眠模式恢复过来的过程中没有开启声卡驱动。

解决方案就是通过计算机管理->服务和应用程序->服务,在这里找到Windows Audio和Windows Audio EndPoint Builder,重启Windows Audio EndPoint Builder即可。重启这个WAEB服务的时候它会自动连带重启WA服务。

重启完服务后,再到计算机管理->设备管理器,找到和声音相关的那个栏目,进去之后将你的声卡(比如Realtek Audio)先禁用,然后再启用,这个时候就应该恢复正常了,之前遇到类似的问题我都是选择重启解决问题。

事出有因,顺藤摸个瓜,了解到是这个睡眠模式造成的问题,那我就需要取消掉合上盖子就会导致系统自动进入睡眠模式的设置。实际上确实有这个入口,在新版Win10下,在右下角栏的电源上点击右键->电源选项,在弹出的窗口的左侧可以看到有一个“选择关闭笔记本计算机盖的功能”,点进去就可以看到有一个“关闭盖子时”,我的设置就是电池或者电源状态都是“睡眠”,这个时候需要把两个都设置成“不采取任何操作”,之后合上盖子就是简单的把屏幕关闭而已了,也达成了我的目的,我关上盖子就是为了省电而已。

关于删除掉整个node_modules前的注意事项

这两天在自己配置webpack,来实现本地开发环境和生成生产版本代码。

于是就在翻webpack的文档,安装了一些插件和loader,之后我发现还有一个css分离没有实现,于是打算推翻之前的webpack配置,顺便又把node_modules给完全删除了。

跑完cnpm i,然后npm run build,发现报错:webpack not installed, consider installing it using …

wtf?此时我还不知道错在了哪里,然后把node整个卸载了,把Appdata里的npm相关文件夹全部删掉,之后重装node,依然不行。

就在刚才,我尝试去webpack的github页面那里找有没有类似的issue,然后我就找到答案了,一个已经关闭的issue里说:This appears to happen when the webpack.config.js module require()s a missing module.

意思就是说:在webpack的配置文件里引用的模块有可能没有安装。

我对比package.json和配置文件一看,果然,有些模块是有但不是全局的,在别的文件夹,最关键的就是没有安装到我自己的项目文件夹下面。

所以在删除整个node_modules之前,一定要检查是不是每个依赖项都已经写进了package.json。不然重新下载的时候是不会安装的,到时候webpack就会报这个匪夷所思的错误,我甚至动了重装系统的念头。

Redux教程todo示例的个人解读

最近在学习Redux,今天刚把Redux基础看完,教程提供了一个todo的简单示例,麻雀虽小,五脏俱全。

把示例确确实实地看懂之后,明显地加深了我对Redux的理解。

Redux分三大部分:action,reducer,store。核心思想是store保存全局state且唯一,而修改state的唯一方式是触发(dispatch)action,此时reducer接收action和旧的state并返回一个新的state,此时与redux连接(connect)上的组件就会收到新的state,更新自身。而store则通过createStore(reducer)生成。

然后其中还有一个核心便是:容器组件与展示组件相分离的思想。从我个人的理解来说,就是展示组件是纯函数,仅通过接收props来更新输出,因此展示组件完全可以脱离Redux使用;而容器组件才是负责逻辑控制的抽象,通过容器组件与Redux进行连接和响应,进而改变下属的展示组件,因此容器组件起的是一个承上启下的作用。

在React开发中,通常会使用React-Redux,该库提供的connect函数就是连接Redux与展示组件的高阶函数,该函数会调用2次。第1次调用该函数,就可以生成一个连接到Redux的高阶组件;第2次调用,往这个高阶组件传入对应的展示组件,就可以得到想要的容器组件了。

因此,我觉得在实际开发过程中,至少这3块需要做比较多的工作:action,reducer,container。对应:触发->数据更新->视图更新。

最大的收获就是,一定要静下来去思考去看,这样思维就会很清晰,理解起来会很快。

https://www.redux.org.cn/docs/basics/UsageWithReact.html

TS入门墙裂推荐

Typescript入门文档

总结下我个人目前的学习Web的常用电子文档,ES5-http://wangdoc.com

ES6-http://es6.ruanyifeng.com

实在是非常的全面。上周买的《JavaScript高级程序设计》目前还没开看,之前简单翻了下,感受就是:如果我一开始就从书开看的话,估计我的学习效率会很低。。。因为书上说的更加详细,不太利于我这种初学者去把握JS的总体概念。我个人的学习路线就是先弄个大概,然后利用这点皮毛先实践,实践遇到问题再来钻细节,这个时候理解更快,也更深。

现在ES5我已经掌握大部分,ES6也对新的特性有个60%的大概认知,实际使用也应该有10%,比如常用的箭头函数和解构赋值等。最后就是React和TypeScript,确实,对React有了大概了解和简单的使用(写了状态组件和容器组件)后,就会被React这种追求简约的思想所征服,虽然我一开始是先使用的Vue,但是现在我必须承认我更加偏好React,确实很香,学习React其实更像是在追随一种思想,而那种思想深深地吸引了我。

Memoization思想及近期感想

Memoization,看着觉得好像很高大上,实际上是一个较为简单却很有效的一种思想,提高了代码运行的效率。

作为纯函数,输入不变的情况下,无论输入相同的参数多少次,输出依旧不变。然而对于某些计算较复杂的纯函数,如果在实际程序中有多次调用但输入都是相同的,此时的计算完全可以视为浪费资源,就好比你写数学题辛辛苦苦算出来答案却没有记住,当老师问你最终结果的时候你居然还要重新计算一次一样,很傻。

所以目的很明确,我们需要函数“记住”之前的输入和输出结果,这样,当同样的输入再出现时,我们可以直接返回之前计算出的结果,而不需要再去计算了。实现也比较简单,通过闭包即可。

function memoize(fn) {
  var cachedArg;
  var cachedResult;
  return function(arg) {
    if (cachedArg === arg) {
      return cachedResult;
    }
    cachedArg = arg;
    cachedResult = fn(arg);
    return cachedResult;
  };
}

此例引自https://github.com/react-guide/react-basic,这个例子可以说是最简单的实现,了解了这种强大的思想,就可以创造出各种记忆能力更强大,更贴合实际环境的闭包。

然后是我的个人近期感想。

因为之前的头条笔试被秒杀,以及蘑菇街一面被刷,我意识到了我能力的不足,虽然我因为我的表达能力不好,没有向面试官展现出我实际的能力导致被低估而被刷是一方面,但是最大的原因还是因为,我在前端的学习还是太少,经验太少,即使有货也只是杯水车薪。

然后我最近就开始各种学习,干React组件,开发自己的组件库呀,学TypeScript呀,看ES6呀,依然觉得心里没底,空落落的。为什么?因为这些都不是我真正想要的,我现在纯粹是在为找工作而学习。我对JS和Web开发的确是有兴趣的,但是我现在想要的不是因为工作需要,我才去学webpack,因为别人需要会TS,我才去学TypeScript。我应该跳出为了工作这个圈子去学习,这样才有效率,才有热情,才能真正开发出优秀的,包含我的思想和期待的东西。

程序员最终是为了改变而生的,不管你梦想的大或小。你开发出React和第一次打造出来令自己满意的项目,应该是同样的感觉,是那种创造的满足感和自豪感,以及孜孜不倦的上进心。

react transition group

最近开始学习使用react,想把react学好学精,目前短期是打算通过react来重构我的小站。也就是之前给自己定的目标,因为后来和同校的学生做给校内学生提供查分等服务的小程序,结果等到今天才开始,哈哈。

我现在希望尽可能把每个曾经的功能模块更细化,做成可复用的组件,相当于弄个自己的UI组件库。然后其中有一个是蒙层。为了不那么突兀,所以我希望在卸载蒙层的时候看起来是淡出的,所以我需要和Vue类似的transition。

然后问题就来了,找到react官方提供的react-transition-group并没有花我很多时间,然而接下来因为文档是全英文的,读起来比Vue官方的中文文档肯定会费力很多,但是我还是懂了个大概,这中间花了多少时间我不说。。。总之相比读完Vue的相关文档之后立马上手立马奏效,还是很让我抓鸡。

最后我是用的CSSTransition。它关键的参数主要是in,timeout,以及classNames,还有一个unmountOnExit(之前我没有看每个参数的作用,结果靠多定义一个定时器手工实现的,后来才发现)。in是一个布尔变量,实质就是状态切换,比如从true => false,就会触发exit,对应的类名就会依次变为exit,exit-active,exit-done,通过css为这些类名设置style,搭配css 的transition属性就可以实现你想要的过渡效果。timeout顾名思义,就是状态变化的时长,比如从exit触发到exit-done中经历的时间,所以这个地方最好你css里transition也设置了同样的时间,它的单位为ms。classNames也比较好理解,比如你设置classNames为’fade’,那么触发状态变化时,对应的类名就是fade-exit,fade-exit-active。最后unmountOnExit,官方参数说明中已经讲得很清楚,

By default the child component stays mounted after it reaches the 'exited' state. Set unmountOnExit if you’d prefer to unmount the component after it finishes exiting.

意思就是,常理下你的子组件在达到exited(这里是transition文档里,csstransition继承了transition的参数,但是状态有一点不一样)状态后依旧处于挂载状态,就是你的组件并没有销毁。但如果你需要在组件达到exited状态后自动销毁,就添加这个参数。这正是我想要的,蒙层淡出后就自动销毁,如果不销毁,这个蒙层虽然已经透明,但是因为处于图层的顶层(position:fixed;z-index:10),直接挡住了我整个页面,导致我根本无法交互。

目前虽然可以使用了,但是我还没有把这个文档搞透彻,不说了,继续看。

https://reactcommunity.org/react-transition-group/

尾递归

在看阮一峰老师的ES6教程,看到了函数的扩展中谈到了尾递归。这个概念对我来说还很新,认真看了下。两个来源,一个阮老师的2015年写的博客,一个是ES6入门教程。博客有图。

我个人对尾递归的理解就是,函数的最后一步调用了仅函数本身,不包括任何其他的外层变量,所有的变量通过参数方式传递到内层函数,这样子外层函数就没有存在理由了,因此外层调用帧也滚蛋了,只保留内层函数的调用帧,层层如此,因此始终只有一个调用帧而已,最后满足某些条件,返回一个值,整个过程结束。所以尽量写尾递归的函数,会节约很多内存空间。

http://www.ruanyifeng.com/blog/2015/04/tail-call.html

http://es6.ruanyifeng.com/#docs/function#%E5%B0%BE%E8%B0%83%E7%94%A8%E4%BC%98%E5%8C%96

感觉现在我光看ES6教程和网道,有时候去MDN查查相关的其他知识,已经学到了不少。算是沾了网络发达的光,目前还没有花钱买书看的打算,因为连文档都还没看完弄熟悉,等有自信了,就去买本书深入下更细节的东西。感谢翻译外文教程文档的所有人,如果没有他们翻译文档,很多人可能都会因为这个英文门槛就跟前端或者其他程序员岗位说再见了。等自己有能力了,一定要做一些反哺社区的事情。

超赞的grid+flex布局

实践证明,grid布局虽好,但是微信客户端支持还不够,不仅会导致布局出问题,还会导致所有class全部失效,最重要的是花了我一天时间找自己的问题。。。最后发现是微信自己的问题。

依旧推荐grid布局,因为错误是微信那边支持度较差造成的,之前的效果图是开发者工具里边显示的,是正常的,但是到手机上预览就出问题了。


 

现在只剩我和另一位同学,来完成成信大助手微信小程序的开发,而我负责前端。一个人更好,方便大展拳脚。

今天我在准备做课表页面的时候偶然想起了grid网格布局,然后先在网上看了看grid的基本概念,推荐阮一峰老师才写没多久的grid网格布局

直接上效果。

就这么点代码,我就搞定了整个课表的结构,接下来再上个色就可以用了。而且针对不同的课表信息,内容会自动排版,无需进行任何其他更改,妙就妙在grid的grid-column或grid-row属性上边,这两个属性分别指定当前元素在容器内的纵向与横向位置。真是个好东西。

和之前我没加入的时候后端自己写的前端代码对比下来,简洁了不知道多少倍~ 感受下~