跨业自学党的第一次面试

背景

我是一名二本师范院校的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 函数。

---

但愿帮助到了你。

欢迎讨论。

٩(๑❛ᴗ❛๑)۶