跨业自学党的第一次面试


#1

背景

我是一名二本师范院校的2018届风景园林毕业生。

在大四经过一次景观公司的实习之后,发现园林救不了中国(致敬鲁迅),也不符合自己的内心,毅然决然走上了脱产自学 Web 前端的道路。

听说“金三银四”,遂我决定在3月开始寻找我的第一份前端工作。但没想到,市场上缺乏的是有经验、能独立开发的工程师,而不是像我这种没有经验的菜鸟。我的心蒙上了一层冰冰凉的霜。

在拉钩网简历被拒后,我都声情并茂的请教了对方我的不足,其中一位回答了我“非科班基础不够”以及“无项目经验”。我又声泪俱下地长段论述,终究是求得了一次来之不易的面试机会。

2019年3月14日,是我第一次面试的日子。

过程

面试前

在地铁上,我才发现我似乎没有准备简历,所幸的是我提前约定时间一个小时到达了公司楼下,楼下正好有一间打印店。

上楼,发现大家似乎都趴在桌子上午休,还好HR没有睡觉,不然我可能会站很久。

HR叫来一名程序猿小哥哥进入会议室,开始了面试。

趁小哥哥看我简历之际,HR问了我为啥转专业呀,学了些啥呀Blablabla…

面试中

之后,小哥哥开始考我了。由于忘了录音,我就说说我答的不好(不会)的这些问题。

Q: 异步与同步的区别?

A: (支支吾吾答不上来,对这个的概念很模糊)。

Q: 实现垂直居中。

A: 我说了“margin:0 auto”,“text-align:center”,“flex”(扯了半天实际自己不会)。

Q: 说一下JSONP。

A: JSONP是利用 script 标签可以跨域的特性实现跨域的。

Q: 具体是怎么实现的呢?

A: 我只是知道这个,没有具体去实现过。

Q: 普通函数与箭头函数的区别?

A: 箭头函数的 this 不能改变,箭头函数的 this 是外层函数的 this 。

Q: 说一下localStorage、sessionStorage、cookie的区别。

A: 一个关闭浏览器就没有了、一个还保存着,而cookie保存的很小。(回答的还是很模糊)

Q: 说一下有哪些选择器?

A: getById、getByClass、getByTags、Selector(平时自动补全惯了,竟然一下忘了element和query)。

Q: 如何删除一个节点?

A: innerHTML(’’)。(小哥哥很义正言辞的告诉我这是一个属性,不是一个方法。指出我肯定是jQuery这种东西用多了)

这下搞的我很慌,明显地答错了一个很基础的东西,这是不是我最后一个问题我都记不清了。我只记得HR告诉我:“好了就这样,电话联系。”

面试后

这次面试给我泼了很大一盆凉水,但同时也知道了自己很大的不足,基础的薄弱,面试的心态调整、事前的准备等。

我相信失败只是成功的一部分,我还会回来的。

答案

异步与同步的区别

程序里面所有的任务,可以分成两类:同步任务(synchronous)和异步任务(asynchronous)。

同步任务是那些没有被引擎挂起、在主线程上排队执行的任务。只有前一个任务执行完毕,才能执行后一个任务。

异步任务是那些被引擎放在一边,不进入主线程、而进入任务队列的任务。只有引擎认为某个异步任务可以执行了(比如 Ajax 操作从服务器得到了结果),该任务(采用回调函数的形式)才会进入主线程执行。排在异步任务后面的代码,不用等待异步任务结束会马上运行,也就是说,异步任务不具有“堵塞”效应。

举例来说,Ajax 操作可以当作同步任务处理,也可以当作异步任务处理,由开发者决定。如果是同步任务,主线程就等着 Ajax 操作返回结果,再往下执行;如果是异步任务,主线程在发出 Ajax 请求以后,就直接往下执行,等到 Ajax 操作有了结果,主线程再执行对应的回调函数。

实现垂直居中

搜集资料总结了水平垂直居中各8个共16种 CSS 居中方法。点击浏览

JSONP

JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用,老式浏览器全部支持,服务端改造非常小。

它的基本思想是,网页通过添加一个 <script> 元素,向服务器请求 JSON 数据,这种做法不受同源政策限制;服务器收到请求后,将数据放在一个指定名字的回调函数里传回来。

首先,网页动态插入 <script> 元素,由它向跨源网址发出请求。

function addScriptTag(src) {
  var script = document.createElement('script');
  script.setAttribute("type","text/javascript");
  script.src = src;
  document.body.appendChild(script);
}

window.onload = function () {
  addScriptTag('http://example.com/ip?callback=foo');
}

function foo(data) {
  console.log('Your public IP address is: ' + data.ip);
};
复制代码

上面代码通过动态添加 <script> 元素,向服务器example.com发出请求。注意,该请求的查询字符串有一个callback参数,用来指定回调函数的名字,这对于 JSONP 是必需的。

服务器收到这个请求以后,会将数据放在回调函数的参数位置返回。

foo({
  "ip": "8.8.8.8"
});
复制代码

由于 <script> 元素请求的脚本,直接作为代码运行。这时,只要浏览器定义了foo函数,该函数就会立即调用。作为参数的 JSON 数据被视为 JavaScript 对象,而不是字符串,因此避免了使用JSON.parse的步骤。

Cookie, sessionStorge, localStorage

Cookie

Cookie 是服务器保存在浏览器的一小段文本信息,每个 Cookie 的大小一般不能超过4KB。浏览器每次向服务器发出请求,就会自动附上这段信息。

Cookie 主要用来分辨两个请求是否来自同一个浏览器,以及用来保存一些状态信息。它的常用场合有以下一些。

  • 对话(session)管理:保存登录、购物车等需要记录的信息。
  • 个性化:保存用户的偏好,比如网页的字体大小、背景色等等。
  • 追踪:记录和分析用户行为。

sessionStorage, localStorage

Storage 接口用于脚本在浏览器保存数据。两个对象部署了这个接口:window.sessionStorage和window.localStorage。

sessionStorage保存的数据用于浏览器的一次会话(session),当会话结束(通常是窗口关闭),数据被清空;localStorage保存的数据长期存在,下一次访问该网站的时候,网页可以直接读取以前保存的数据。除了保存期限的长短不同,这两个对象的其他方面都一致。

保存的数据都以“键值对”的形式存在。也就是说,每一项数据都有一个键名和对应的值。所有的数据都是以文本格式保存。

cookie 与 storage 比较

同:

  • 保存数据
  • 受同域限制

异:

  • coolkie 最多 4k
  • storage 最多几M(目前,每个域名的存储上限视浏览器而定,Chrome 是 2.5MB,Firefox 和 Opera 是 5MB,IE 是 10MB)

箭头函数

箭头函数有几个使用注意点。

(1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。

(2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。

(3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。

(4)不可以使用yield命令,因此箭头函数不能用作 Generator 函数。

希望帮助到了你。

欢迎讨论。

٩(๑❛ᴗ❛๑)۶

作者:Agoreal
链接:https://juejin.im/post/5c8b451be51d4535f7489727
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


#2

感谢分享,u3d转前端的我有点慌了


#3

u3d 比我这个完全完全不搭边的好的多啦~

一起加油啊


#4

感谢分享 还在自学的我瑟瑟发抖


#5

感谢分享!看来还是中文论坛亲切~


#6

谢谢分享:clap::clap:
FCC 中文社区与国际社区将逐步融合,目前我们的核心志愿者团队主要维护 .org 国际社区下的中文论坛 https://chinese.freecodecamp.org/forum/,这个论坛的话题版块更加丰富,也可以在这里第一时间了解到城市社区的活动或者参与翻译,欢迎小伙伴们协作共建!