前端经验:快速解决前端代码面试题(五)

开课吧开课吧科科2021-02-23 10:36

作为一名前端工程师,总是少不了面试找工作。很多人为面试头疼,曾经的我也是。在准备面试的过程中,我开始整理出了一些有用的笔记,这篇就是其中之一。既然已经写好了,不妨就放在这里分享给大家,希望大家都能顺利找到理想的工作。

我说一下我的建议,首先在面试中的写代码的过程,一定不能紧张,要沉住气慢慢来。只要不是系统自动检查结果,只要是面试官看着你写,就有很大的表现的机会,哪怕最后做不出来。

作为一个专业的程序员,除了工作中的编码,额外的无实际产出的练习(反复练习解决一个问题,反复默写同一段代码),也是必不可少的。

下文中几乎每一段代码,都是我反复优化后的结果,希望可以带给读者新的启发。我把代码大致分成了几个专题,一共包含了大致30个问题的解决方案,我今天来分享的是前端工作中经常遇到的功能函数实现、防抖节流、数据结构、设计模式。上一章分享的是字符串及排序和查找,感兴趣的可以点击“前端经验:快速解决前端代码面试题(四)”查阅。

前端面试经验

HTTP请求

AJAX封装

function ajax(method,url,params,callback) {

 //对参数进行处理

 method=method.toUpperCase()

 let post_params=null

 let get_params=''

 if (method==='GET') {

  if (typeof params==='object') {

   let tempArr=[]

   for (let key in params) {

    tempArr.push(`${key}=${params[key]}`)

   }

   params=tempArr.join('&')

  }

  get_params=`?${params}`

 } else {

  post_params=params

 }

 //发请求

 let xhr=new XMLHttpRequest()

 xhr.onreadystatechange=function(){

  if (xhr.readyState!==4) return

  callback(xhr.responseText)

 }

 xhr.open(method,url+get_params,false)

 if (method==='POST')

  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

 xhr.send(post_params) 

}

ajax('get','https://www.baidu.com',{id:15},data=>console.log(data))

JSONP

function jsonp(url, params_obj, callback) {

 //创建一个供后端返回数据调用的函数名

 let funcName = 'jsonp_' + Data.now() + Math.random().toString().substr(2, 5)

 //将参数拼接成字符串

 if (typeof params==='object') {

  let temp=[]

  for (let key in params) {

   temp.push(`${key}=${params[key]}`)

  }

  params=temp.join('&')

 }

 //在html中插入<script>资源请求标签

 let script=document.createElement('script')

 script.src=`${url}?${params}&callback=${funcName}`

 document.body.appendChild(script)

 //在本地设置供后端返回数据时调用的函数

 window[funcName]=data=>{

  callback(data)

  delete window[funcName]

  document.body.removeChild(script)

 }

}

//使用方法

jsonp('http://xxxxxxxx',{id:123},data=>{

 //获取数据后的操作

})

js插入html中标签的内容

<script src="https://www.liuzhuocheng.com?callback=funcName"></script>

后端返回的<script>资源的内容

<script src="https://www.liuzhuocheng.com?callback=funcName">

 funcName('datadatadatadatadatadatadatadata')

</script>

以上内容就是开课吧广场小编今天分享的“前端经验:快速解决前端代码面试题(五)”一文,希望为准备面试的朋友提供参考,顺利通过面试,找到理想工作。更多前端经验分享及前端面试题尽在开课吧广场Web前端面试题频道!

上一篇:前端面试题:null和undefined的区别是什么?下一篇:前端经验:快速解决前端代码面试题(四)

最新文章

文章图0

2021年精选前端面试题

Promise是异步编程的一种解决方案,可以替代传统的解决方案--回调函数和事件。ES6统一了用法,并原生提供了Promise对象。作为对象,Promise有一下两个特点:(1)对象的状态不受外界影响。(2)一旦状态改变了就不会在变,也就是说任何时候Promise都只有一种状态。

2021-03-04 15:31:35

文章图1

前端面试题:Javascript中的DOM是什么?

DOM是文档对象模型,它是网站的面向对象的表示形,可以使用Javascript进行修改。 使用JS可以操纵DOM元素,例如颜色,位置,大小。为了选择页面的特定元素,Javascript提供了一些方法:

2021-03-04 14:54:32

文章图2

Web前端面试官会问什么?

如何进行:如何XSS是指恶意攻击者利用网站没有对用户提交数据进行转义处理或者过滤不足的缺点,进而添加一些代码,嵌入到Web页面中去。使别的用户访问都会执行相应的嵌入代码。从而盗取用户资料、利用用户身份进行某种动作或者对访问者进行病毒侵害的一种攻击方式。

2021-03-02 16:23:09

文章图3

前端免费资料大放送

前端开发是从网页制作演变而来,早期的网页制作主要内容都是静态的,以文字图片为主,用户使用网站也以浏览为主。随着互联网的发展,现代网页更加美观,交互效果更加显著,

2021-03-01 15:04:23

文章图4

精选前端开发面试题

方法1,通过回调函数。优点是简单、容易理解和部署;缺点是不利于代码的阅读和维护,各个部分之间高度耦合(Coupling),流程混乱,而且每个任务只能指定一个回调函数。

2021-02-26 17:38:45