谈一谈面试前端实习生的感受

---

前言

今天接受了2个面试,都是线上面试。第一个还好，第二个把我问懵逼了。咋就分别谈谈面了什么内容吧。

一、第一场面试

1.职位地点

• 公司是北京的公司, 在上海工作

2.面试内容

• 面试类型：

  线上远程

• 自我介绍：

  自我介绍这块不用详细说明,说明姓名,学校,地点,会什么技术,做了什么项目就行

• 面试问题（挑选有价值有难度的举例）：

1. 问：常用的设计模式有哪些？(JS)

     答:    工厂模式                适配器模式            单例模式  
            发布订阅模式            状态模式              策略模式 
            中介者模式              迭代器模式            模板方法模式
            享元模式               组合模式              代理模式
            命令模式               职责链模式             装饰器模式

2. 问：实现 mvvm 模式？（意思就是不用vue）

     // 通过 Object.defineProperty
     let userInfo = {
     }
     let inp = document.querySelector('input');
     let spn = document.querySelector('span');
     Object.defineProperty(userInfo,'username',{
     
     get(){
     
     return inp.value;
     },set(){
     
     }
     });
     Object.defineProperty(userInfo,'nickname',{
     
     get(){
     
     },
     set(value) {
     
     spn.innerHTML =  value
     }
     })
     inp.keyup = function() {
     
     userInfo.nickname = userInfo.username ;
     }

3. 问：浏览器为什么跨域?

     因为浏览器的同源策略，同源指的是域名 端口  协议全都必须相同
     解决跨域的办法：
     1.使用 window.postmessage()
     2.如果带有iframe标签的话,使用 document.domain = '子网页域名' 访问子网页数据
     3.window.name
     4.websocket 技术 可以无视跨域
     5.jsonp 通过js脚本访问别的网址信息
     6.反向代理服务器
     7.后端设置 允许跨域访问 如设置 Access-Control-Allow-Origin:'*'
     8.后端通过配置 cors包进行 跨域
     9.序列化前端传的内容 qs.stringify('')

4. 问：最近用什么写爬虫，怎么实现的? (好坑啊，不过会用爬虫就问我用什么写了)

     python 爬虫 和 node 爬虫             太长了,具体百度

• 自己的优点与缺点：
  技术仍旧需要磨练 写项目团结互助等等
  
• 面试是否通过：
  通过 !!!

二、第二场面试

1.职位地点

公司是济南的公司, 在青岛工作

2.面试内容

• 面试类型：

  线上远程

• 自我介绍：

  无 面试官说看你简历不用说简单的 直接上boss
  

• 面试问题 (挑有价值的举例) ：

1. 问：nginx 反爬取网页？（第一问就把我难倒,故意整我似的）

#禁止Scrapy等工具的抓取
if ($http_user_agent ~* (Scrapy|Curl|HttpClient)) {
     
     return 403;
}
 
#禁止指定UA及UA为空的访问
if ($http_user_agent ~ "WinHttp|WebZIP|FetchURL|node-superagent|java/|FeedDemon|Jullo|JikeSpider|Indy Library|Alexa Toolbar|AskTbFXTV|AhrefsBot|CrawlDaddy|Java|Feedly|Apache-HttpAsyncClient|UniversalFeedParser|ApacheBench|Microsoft URL Control|Swiftbot|ZmEu|oBot|jaunty|Python-urllib|lightDeckReports Bot|YYSpider|DigExt|HttpClient|MJ12bot|heritrix|EasouSpider|Ezooms|BOT/0.1|YandexBot|FlightDeckReports|Linguee Bot|^$" ) {
     
     return 403;             
}
#禁止非GET|HEAD|POST方式的抓取
if ($request_method !~ ^(GET|HEAD|POST)$) {
     
    return 403;

2. vue-router hash 和 history 的具体不同（讲深层次的）? （深入心扉吗 ???）

调用history.pushState()相比于直接修改hash ，存在以下优势：
1：pushState()设置的新URL可以是与当前URL同源的任意URL；而hash只可修改#后面的部分，因此只能设置与当前URL同文档的URL；
2：pushState()设置的新URL可以与当前URL一模一样，这样也会把记录添加到栈中；而hash设置的新值必须与原来不一样才会触发动作将记录添加到栈中；
3：pushState()通过stateObject参数可以添加任意类型的数据到记录中；而hash只可添加短字符串；
4：pushState()可额外设置title属性供后续使用。
当然history也不是样样都好。SPA虽然在浏览器里游刃有余，单真要通过URL向后端发起HTTP请求时，两者的差异就来了。尤其在用户手动输入URL后回车，或者刷新（重启）浏览器的时候。
1：hash	模式下，仅hash符号之前的内容会被包含在请求中，如http://www.abc.com,因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回404错误。
2：history模式下，前端的URL必须和实际向后端发起请求的URL一致。如htttp://www.abc.com/book/id。如果后端缺少对/book/id 的路由处理，将返回404错误、

3. 问：element-ui的组件的属性？
   那么多组件，你让我记住组件的属性 ！！！！

• 面试是否通过：
  悬 !!! （最终通过了，还好第二天面试问题都答出来了）

---

总结

记住，简历一定要低调，不要写过多的技术。否则问的过细，自己都很懵逼啊。低调才是王道，高调总被打脸。