前端面试
关注
分享
扫一扫
Milk595
努力做自己喜欢做的事
展开
-
【JS面试题】实现链式调用
实现链式调用链式调用的核心就在于调用完的方法将自身实例返回链式调用完方法后，return this返回当前调用方法的对象示例一：function a() { console.log("初始化")}a.prototype.method = function(param) { console.log(param) return this}let b = new a()// 由于new在实例化的时候，this会指向创建的对象，所以this.method这个方法会在原型链中找到b原创 2020-12-18 11:16:46 · 537 阅读 · 0 评论 -
【前端面试】vue路由 hash 模式和 history 模式实现原理分别是什么，他们的区别是什么？
vue路由 hash 模式和 history 模式实现原理分别是什么，他们的区别是什么？hash 模式：#后面 hash 值的变化，不会导致浏览器向服务器发出请求，浏览器不发出请求，就不会刷新页面通过监听 hashchange 事件可以知道 hash 发生了哪些变化，然后根据 hash 变化来实现更新页面部分内容的操作。history 模式：history 模式的实现，主要是 HTML5 标准发布的两个 API，pushState 和 replaceState，这两个 API 可以在改变 url，转载 2020-09-30 18:23:11 · 1140 阅读 · 0 评论 -
【前端面试】Vue 你的接口请求一般放在哪个生命周期中？
Vue你的接口请求一般放在哪个生命周期中？可以在钩子函数 created、beforeMount、mounted 中进行调用，因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。但是推荐在 created 钩子函数中调用异步请求，因为在 created 钩子函数中调用异步请求有以下优点：能更快获取到服务端数据，减少页面loading 时间；ssr不支持 beforeMount 、mounted 钩子函数，所以放在 created 中有助于一致性；...转载 2020-09-30 18:21:04 · 9948 阅读 · 1 评论 -
【前端面试】DOM操作——怎样添加、移除、移动、复制、创建和查找节点?
DOM操作——怎样添加、移除、移动、复制、创建和查找节点?创建新节点createDocumentFragment() // 创建一个DOM片段createElement() // 创建一个具体的元素createTextNode() // 创建一个文本节点添加、移除、替换、插入appendChild()removeChild()replaceChild()insertBefore() // 在已有的子节点前插入一个新的子节点查找getElementsByTagName() //转载 2020-09-30 16:51:08 · 641 阅读 · 0 评论 -
【前端面试】模拟电话面试--来自一位大学自学前端的大四学生面试情况【Vue社区群】
模拟电话面试–来自一位自学前端的大四学生面试情况今天旁听了一位大四找实习的前端学生参与的 Vue社区群–模拟面试活动，下面的问题摘自其他去旁听的朋友总结的题目：原创 2020-09-26 23:06:22 · 243 阅读 · 0 评论 -
【前端面试】点击一个input依次触发的事件
点击一个input依次触发的事件<!DOCTYPE html><html> <head> <meta charset="{CHARSET}"> <title></title> </head> <body> <input type="" name="text" id="text" value="" /> <script type="te转载 2020-09-24 23:07:43 · 731 阅读 · 0 评论 -
【前端面试】到底我的简历该怎么写？才有机会被邀请面试？【看此文章即可！！！】
到底我的简历该怎么写？才有机会被邀请面试？Hello，今天我们来分享下简历的编写。对于简历，作为一名刚上大四的学生，肯定很头疼这个问题，感觉自己三年都来，好像除了认真上课外，也没有参加比赛，该怎么办？那我们应该学会包装自己的简历！自我介绍下，我是一名刚上大四的网络与新媒体专业的媒体人，在大二才正式开始走设计与开发方向，学习前端知识，自己逻辑不是特别强，很多时候都靠自己的努力–自学，因为兴趣，所以热爱。在大三结束了新媒体产品设计项目课程后，即将也是准备要去实习，我是7.13开始准备写简历，7.15在B原创 2020-09-23 23:33:56 · 2253 阅读 · 0 评论 -
【前端面试】ES5 的继承和 ES6 的继承有什么区别 ？
ES5 的继承和 ES6 的继承有什么区别 ？ES5 的继承时通过 prototype 或构造函数机制来实现。ES5 的继承实质上是先创建子类的实例对象，然后再将父类的方法添加到 this 上（Parent.apply(this)）。ES6 的继承机制完全不同，实质上是先创建父类的实例对象 this（所以必须先调用父类的 super()方法），然后再用子类的构造函数修改this。具体的：ES6 通过 class 关键字定义类，里面有构造方法，类之间通过 extends 关键字实现继承。子类必须原创 2020-08-30 13:49:23 · 1157 阅读 · 2 评论 -
【前端面试】39道Vue高频面试题，亲测有效！！！快来看看呀！！
Vue高频面试题1.说下你常用的Vue指令？v-bind：动态绑定数据v-on：绑定事件监听器v-for：循环指令，可以循环数组或对象v-model：实现双向绑定v-if：根据表达式的真假值，判断是否渲染元素，会销毁并重建v-show：显示隐藏元素，修改元素的display属性2.v-if和v-show的区别是什么？切换元素时，v-if会销毁并重建元素，v-show是修改display属性，来做到显示和隐藏。v-show项目用处：回到顶部组件的显示隐藏，v-if项目用处：登陆方式切换原创 2020-08-24 23:26:33 · 9081 阅读 · 1 评论 -
【前端面试】何为事件监听？
事件监听addEventListener()方法，用于向指定元素添加事件句柄，它可以更简单的控制事件，语法为 element.addEventListener(event, function, useCapture);第一个参数是事件的类型(如 “click” 或 “mousedown”)第二个参数是事件触发后调用的函数第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的事件传递有两种方式，冒泡和捕获事件传递定义了元素事件触发的顺序，如果你将P元素插入到div元素中，用原创 2020-08-24 18:30:04 · 457 阅读 · 0 评论 -
【前端面试】MVC和MVVM有什么区别？
MVC和MVVM有什么区别？「MVC」M - Model：模型，是应用程序中用于处理应用程序数据逻辑的部分，通常模型对象负责在数据库中存取数据V - View: 视图，是应用程序中处理数据显示的部分，通常视图是依据模型数据创建的。C - Controller: 控制器, 是应用程序中处理用户交互的部分，通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。图示流程View 接受用户交互请求View 将请求转交给Controller处理Controller 操作Model进行转载 2020-08-20 23:25:13 · 3203 阅读 · 0 评论 -
【前端面试】http状态码以及含义
http状态码以及含义对于1xx的状态码，为信息状态码，100为继续，表示确认，成功返回具体参数信息。对于2xx的状态码，200 表示正常返回信息，201表示请求成功并且服务器创建了新的资源，202表示服务器已接受请求，但尚未处理。对于3xx，重定向，301：永久重定向，永远都定向到b的地址，例子：访问地址a的时候，永远都会定向到地址b，302: 临时重定向(一次的)，例子：去访问a地址，返回302,就会自动跳转到b,下次再去访问a地址的时候，还是会访问a，303表示临时性重定向，且总是使用原创 2020-08-20 22:47:29 · 728 阅读 · 0 评论 -
【前端面试】两图轻松了解何为前后端分离？
两图了解前后端分离前后端不分离在前后端不分离的应用模式中，前端页面看到的效果都是由后端控制，由后端渲染页面或重定向，也就是后端需要控制前端的展示，前端与后端的耦合度很高。这种应用模式比较适合纯网页应用，但是当后端对接 App 时，App 可能并不需要后端返回一个 HTML 网页，而仅仅是数据本身，所以后端原本返回网页的接口不再适用于前端 App 应用，为了对接 App 后端还需再开发一套接口前后端分离在前后端分离的应用模式中，后端仅返回前端所需的数据，不再渲染 HTML 页面，不再控制前端的效果。转载 2020-08-16 18:44:07 · 344 阅读 · 0 评论 -
【前端面试】new操作符的原理解析
文章目录new关键字进行的操作自己实现new操作符JavaScript中new操作符用于创建一个给定构造函数的对象实例。如下例子：function Person(name, age){ this.name = name; this.age = age;}const person1 = new Person('Tom', 20)console.log(person1) // Person {name: "Tom", age: 20}我们定义了一个构造函数Person，然后通过new操作符生转载 2020-08-18 23:04:43 · 547 阅读 · 0 评论 -
【JS面试题】require 和 import 区别
require 和 import 区别在研究react和webpack的时候，经常看到在js文件中出现require，还有import，这两个都是为了JS模块化编程使用。CSS的是@import1.ES6 模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。Require是CommonJS的语法，CommonJS的模块是对象，输入时必须查找对象属性。// CommonJS模块let { stat, exists, readFile } = require('f原创 2020-08-11 00:07:54 · 703 阅读 · 0 评论 -
【JS面试题】16道高频面试数组题【看重点！看重点！看重点！】
数组是我面试最大感慨，几乎每个面试官一上来都会问上一道给你来个热身，数组是JS最常见的概念之一，我将向您展示一些非常有用和出现多的实战题，话不多说让我们走进今天的学习。转载 2020-08-06 11:11:48 · 1794 阅读 · 0 评论 -
【JS面试题】手写Promise加载图片
手写Promise加载一张图片初始化:1.html<body> <script src="./promise.js"></script></body>promise-demo.js//手写promise加载图片function loadImg(src) { const p = new Promise( (resolve, reject) => { const img = docume原创 2020-07-28 11:52:38 · 784 阅读 · 1 评论 -
【跨域】Axios二次封装
Axios简介：axios是一个promise实现的http库，符合最新的ES规范。要用这个东西主要有以下几个原因：从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求拦截请求和响应转换请求数据和响应数据支持 Promise API（可以配合ES7的async await使用，解决回调地狱）客户端支持防止CSRF提供了一些并发请求的接口轻量，体积小安装npm install axios执行 GET 请求//为给定ID的user创建请求axi原创 2020-07-27 09:58:43 · 1249 阅读 · 0 评论 -
【HTML/CSS/计算机网络】75道高频面试题【看这一篇就够啦！】
1.（常考）常见浏览器的内核分别是?2. Doctype的作用告诉浏览器按照何种规范解析页面3.（常考） HTML5行内元素有哪些？块级元素有哪些？空元素有哪些？语义化标签有哪些？(列举常见的)行内元素：abr(换行)em(斜体强调) i(斜体) strong(粗体强调)imginput label(表格标签) textarea(多行文本输入框)span(常用，定义文本内区块)sub(下标)、sup(上标)块级元素：div(常用)p(段落)h1-h6(标题，层次明确)h原创 2020-07-26 16:35:01 · 7419 阅读 · 0 评论 -
【跨域】JSON Web Token （JWT）
一、跨域认证的问题互联网服务离不开用户认证。一般流程是下面这样。用户向服务器发送用户名和密码。服务器验证通过后，在当前对话（session）里面保存相关数据，比如用户角色、登录时间等等。服务器向用户返回一个 session_id，写入用户的 Cookie。用户随后的每一次请求，都会通过 Cookie，将 session_id 传回服务器。服务器收到 session_id，找到前期保存的数据，由此得知用户的身份。这种模式的问题在于，扩展性（scaling）不好。单机当然没有问题，如果是服务器原创 2020-07-25 23:53:46 · 204 阅读 · 0 评论 -
【JS面试题】提取URL中?以后的GET参数
提取URL中?以后的GET参数，以对象的形式输出法一：url是当前窗口的网址时，利用BOM里的location来封装法二：给定的是自定义好的字符串，不是当前窗口的url提取GET参数，以对象的形式打包输出例子：https://editor.csdn.net/md?name=milk&age=22&sex=boy&g输出为：{name:“milk”,age:“22”,sex:“boy”,g=undefined};法一：url是当前窗口的网址时，利用BOM里的locati原创 2020-07-25 23:12:48 · 235 阅读 · 0 评论 -
【JS面试题】数组排序，随机打乱数组
一、 顺序排序按字符编码(参照ASCII表)排序：sort()var test1 = ["abc", "acb", "baa", "cgf"];var test2 = ["-8","-2","1", "2", "10", "5"];var test3 = [-6,-3,0,2,10,100];console.log(test1.sort());console.log(test2.sort());console.log(test3.sort());将数组元素倒序排：reverse()原创 2020-07-25 16:23:53 · 690 阅读 · 0 评论 -
【JS基础】Promise的基本使用
回调地狱：越陷越深的形式回调地狱触及promise产出的核心问题Promise有什么好处？那promise怎么去用的？形式1.首先定义三个url的地址；获取第一个url,通过getData(),它return new Promise也就是return一个promise的class的实例。2.getData(url1).then 这个then就是new Promise里面的方法，.then(data1 => {console.log(data1) return getData(ur原创 2020-07-24 11:14:41 · 217 阅读 · 0 评论 -
异步的应用场景
异步的应用场景网络请求，如ajax图片加载定时任务，如setTimeout网络请求：打印start、打印end、网络请求的时候，传了一个回调函数。这时候按照异步的逻辑来分析：打印start,执行网络请求，执行完网络请求就不管了，因为异步，继续往下执行，打印end,什么时候网络请求回来，什么时候回来就什么时候打印data1,执行回调函数。图片加载：先执行start,然后定义一个img,img.onload里的onload就是一个callback的一个形式，这是另外一个形式，img.onl原创 2020-07-24 10:10:04 · 1463 阅读 · 0 评论 -
同步和异步的区别是什么？
同步和异步的区别是什么？场景题：12345以什么顺序打印出来？定时器的应用知识点：单线程和异步应用场景Callback hell(回调地狱) 和 Promise(解决回调地狱的问题)单线程和异步：JS是单线程语言，只能同时做一件事儿 (例子：做一个ajax请求去加载资源，或者说弄一个定时器，先等待1秒钟后干嘛，如果按照单线程这个只能同时做一件事儿，那么它在这个事情中，它就卡住了，卡住的话鼠标点不了，js不执行。这就是同时做一件事，这就是js单线程的本质。)浏览器和node.js已支原创 2020-07-24 09:35:11 · 3366 阅读 · 1 评论 -
原型中的this
原型中的this:核心代码演示：//父类class People { constructor(name) { this.name = name } eat() { console.log(`${this.name} eat something`) }}//子类 继承父类 里面的方法可以直接调用，属性需要调用super去执行class Student extends People { constructor(name,num原创 2020-07-23 11:21:38 · 284 阅读 · 0 评论 -
实际开发中闭包的使用
实际开发中闭包的使用：隐藏数据如何做一个简单的cache工具//闭包隐藏数据，只提供APIfunction createCache() { const data = {} //闭包中的数据，被隐藏，不被外界访问 return { set: function(key,value) { data[key] = value }, get: function(key) { return dat原创 2020-07-23 11:02:54 · 376 阅读 · 0 评论 -
【JS面试题】如何手写bind函数？
手写bind函数核心代码演示：初始化：function fn1(a,b,c) { console.log('this',this); console.log(a,b,c); return 'this is fn1'}//bind可以传递多个参数，第一个参数是要绑定this,第二个参数a/b/c,都要传进去const fn2 = fn1.bind({x:100}, 10, 20, 30)const res = fn2();console.log(res);效果：原创 2020-07-23 10:05:27 · 217 阅读 · 0 评论 -
【JS面试题】this
This:应用场景：作为普通函数使用call/apply/bind作为对象方法被调用在class方法中调用箭头函数This有一句话需要记住：this取什么样的值，是在函数执行的时候确认的，不是函数定义的时候确认的。Call里面可以改变this指向,在这里，call里面传递一个对象，它去打印的就是这个对象。Bind也如此；但是bind是返回一个新的函数，需要重新再去执行或者给fn2去执行；而call直接调用执行1.直接执行zhangsan.sayHi();返回this即当前zhan原创 2020-07-23 09:03:47 · 412 阅读 · 1 评论 -
【JS面试题】什么是闭包？闭包会用在哪里？
什么是闭包？闭包会用在哪里？闭包：作用域应用的特殊情况，有两种表现：函数作为参数被传递（函数在一个地方定义好后，传递到另一个地方去执行）函数作为返回值被返回（函数在一个地方定义好之后，它会被返回到这个地方）总之，函数定义的地方和函数执行的地方是不一样的核心代码演示：//函数作为返回值function create () { const a = 100 return function() { console.log(a) }}const fn原创 2020-07-23 08:21:56 · 1120 阅读 · 0 评论 -
【JS面试题】什么是作用域？什么是自由变量？
什么是作用域？什么是自由变量？知识点：作用域和自由变量闭包This作用域是什么？其实它就是代表了一个变量或者说某个变量的合法的使用范围，比如说最外层的那个红框，let a=0,a可以在红框内的任何地方被使用；a1可以在第二个红框内的任何地方被使用；a2和a3同理。反例，比如说我想把a2放在红框外去使用就会报错。作用域就类似于这个红框，变量的一个合法使用范围，如果这个变量逃出这个范围去使用就会报错。作用域分类：全局作用域代码中，直接写一个变量，这个变量没有受到任何的约束，在任何地原创 2020-07-22 23:56:00 · 501 阅读 · 0 评论 -
【跨域】什么是跨域(同源策略)、JSONP、CORS
1. 什么是跨域(同源策略)同源策略ajax请求时，浏览器要求当前网页和server必须同源(安全)同源：协议/域名/端口，三者必须一致前端：http://a.com:8080/; server: https://b.com/api/xxx (默认端口80)三者都不同源跨域:所有的跨域，都必须经过server端允许和配合未经server端允许就实现跨域，说明浏览器有漏洞，危险信号JsonpJSONP访问https://immoc.com/，服务端一定返回一个html文件吗原创 2020-07-22 23:48:01 · 661 阅读 · 0 评论 -
【跨域】Ajax-手写一个XMLHttpRequest去发起请求
Ajax(现在的页面基本上都有ajax的功能，就是去请求访问一些接口，获取一些数据)手写一个XMLHttpRequest去发起请求核心代码演示：初始化:Ajax.js//访问 '/data/test.json'//初始化实例const xhr = new XMLHttpRequest()/*参数:方法,请求地址,false为异步请求（为什么是异步请求，网络请求不能卡顿） * open 未发送 */xhr.open('GET', '/data/test.json', false)/原创 2020-07-22 16:59:51 · 370 阅读 · 0 评论 -
【安全】如何预防XSRF跨站请求伪造？
XSRF跨站请求伪造场景：你正在购物，看中某个商品，商品id是100付费接口是xxx.com/pay?id=100,但没有任何验证我是攻击者，我看中一个商品，id是200我现在想干嘛呢？现在想让你去给我买。怎么办呢？我向你发送一封电子邮件，邮件标题很吸引人但邮件正文隐藏着<img src=xxx.com/pay?id=200 /> （id变为攻击者的商品）你一查看邮件，就帮我购买了id是200的商品为什么会这样呢？很关键的原因：你现在正在购物，肯定已经登录了.com原创 2020-07-20 10:30:08 · 272 阅读 · 0 评论 -
【存储】如何理解Cookie?
Cookie:本身用于浏览器和server通讯 （也就是说本身是http请求的一部分）被“借用”来做本地存储 (怎么叫被“借用”来做本地存储呢？因为localStorage/sessionStorage是HTML5之后才提出来的，大约在10/09年提出来的，那个时候互联网(电脑-网站)发展的非常好了，移动互联网(手机)还没发展很好，那时候没有localStorage/sessionStorage的时候，只能用cookie做本地存储)可用document.cookie = ‘…’ 来修改 (这里是前原创 2020-07-19 22:49:13 · 327 阅读 · 0 评论 -
【JS基础】作用域--一看就懂！！！
什么是作用域？什么是自由变量？知识点：作用域和自由变量闭包This作用域是什么？其实它就是代表了一个变量或者说某个变量的合法的使用范围，比如说最外层的那个红框，let a=0,a可以在红框内的任何地方被使用；a1可以在第二个红框内的任何地方被使用；a2和a3同理。反例，比如说我想把a2放在红框外去使用就会报错。作用域就类似于这个红框，变量的一个合法使用范围，如果这个变量逃出这个范围去使用就会报错。作用域分类：全局作用域代码中，直接写一个变量，这个变量没有受到任何的约束，在任何地原创 2020-07-19 16:05:48 · 197 阅读 · 0 评论 -
【JS面试题】手写简易JQuery考虑插件和扩展性
class的原型本质：原型和原型链的图示属性和方法的执行规则核心代码演示：class jQuery { constructor(selector) { //查询dom元素 const result = document.querySelectorAll(selector) const length = result.length for(let i = 0;i<length;i++) { thi原创 2020-07-19 07:43:34 · 194 阅读 · 0 评论 -
【JS面试题】原型链
//父类class People { constructor(name) { this.name = name } eat() { console.log(`${this.name} eat something`) }}//子类 继承父类 里面的方法可以直接调用，属性需要调用super去执行class Student extends People { constructor(name,number) { //调原创 2020-07-19 07:13:29 · 772 阅读 · 0 评论 -
【JS面试题】如何理解JS原型(隐式原型和显示原型)
1.instanceof从图中可以看出，通过instanceof可以判断这个变量属于哪个class或属于那个构造函数instanceof 可以去判断引用类型，变量是不是后面的Class构建出来，或者说后面的Class是它构建出来的Class的父类。Object可以认为是所有class的父类，这是JS引擎自己做的，例子中可以默认People extends Object继承于Object等等,以及Array extends Object……但Student不是extends Object,Stude原创 2020-07-18 16:52:10 · 700 阅读 · 0 评论 -
【JS面试题】如何用class实现继承？
1.classClass是面向对象的语法的一个实现。Class本质上类似一个模板，通过模板去构建一些东西。可以通过constructor去构建一些东西，构建的时候可以复制一些属性，一些方法。比如我们构建一个学生在这个模板，这个模板呢，可以传入名称、学号等属性，方法看随便写。核心代码演示：初始化：//类 开头大写class Student { //构造器构造属性 constructor(name,number) { //this代表当前你正在构造的实例原创 2020-07-18 14:18:31 · 1246 阅读 · 0 评论