前端面试
文章平均质量分 64
a堅強的泡沫
世界以痛吻我,要我回报以歌。
展开
-
【js】设计模式
完整参考:JavaScript 中常见设计模式整理、《JavaScript设计模式与开发实践》最全知识点汇总大全策略模式策略模式的目的就是将算法的使用算法的实现分离开来。一个基于策略模式的程序至少由两部分组成:第一个部分是一组策略类(可变),策略类封装了具体的算法,并负责具体的计算过程;第二个部分是环境类Context(不变),Context接受客户的请求,随后将请求委托给某一个策略类。要做到这一点,说明Context中要维持对某个策略对象的引用。// 根据不同的参数(level)获得不同策原创 2021-11-24 15:45:07 · 600 阅读 · 0 评论 -
【js】数组扁平化
概念数组扁平化是指将一个多维数组变为一维数组[1, [2, 3, [4, 5]]] ------> [1, 2, 3, 4, 5]实现1. 扩展运算符es6的扩展运算符能将二维数组变为一维[].concat(...[1, 2, 3, [4, 5]]); // [1, 2, 3, 4, 5]根据这个结果我们可以做一个遍历,若arr中含有数组则使用一次扩展运算符,直至没有为止。function flatten(arr) { while(arr.some(item=&g原创 2021-09-16 15:18:59 · 84 阅读 · 0 评论 -
JS实现数据双向绑定
实现一个数据双向绑定,input值发生变化的同时,<span>标签同步input的内容。<div> <input type="text" id="input_1"> <span id="span_1"></span></div><script type="text/javascript"> var obj = {}; Object.defineProperty(obj, 'test',原创 2021-09-16 15:04:14 · 235 阅读 · 0 评论 -
手写一个ajax请求
手写一个ajax请求,并在成功后打印success字符串,要求:(1)使用原生XHL;(2)请求地址为https://m.vip.com/;(3)使用get方法。<!--html部分,创建一个按钮控件--><span id="ajaxButton" style="cursor: pointer; text-decoration: underline"> Make a request</span><script type="text/javascr原创 2021-09-16 14:19:33 · 416 阅读 · 0 评论 -
【js】数组去重
1、利用ES6 Set去重(ES6中最常用)function unique (arr) { return Array.from(new Set(arr)); // 将伪数组转换成真正的数组,或者[...new Set(arr)]也可}var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];conso原创 2021-03-25 10:54:38 · 100 阅读 · 0 评论 -
【js】手写call()、apply()、bind()
手写call()函数名称.call(obj,arg1,arg2...argN);参数说明:obj:this要指向的对象,arg1,arg2…argN :参数列表,参数与参数之间使用一个逗号隔开临时改变一次this指向,并立即执行// 手写call()function person(a,b,c){ // 返回一个对象 return { name: this.name, a:a, b:b, c:c }}var obj = {name:'那些年'};Functio原创 2021-03-25 10:54:03 · 85 阅读 · 0 评论 -
【js】var、let、const
重复定义修改值声明提升块级作用域循环var可以可以会严格来说不支持(function可以)可以let不可以可以不会支持可以const不可以不可以(对象和数组除外)不会支持不可以(for of和for in循环除外)同一作用域中不能使用let/const重复定义已经存在的标识符。在声明const常量的时候必须进行初始化。js中的const常量如果是对象/数组,则对象/数组中的属性值可以修改,但不允许修改绑定。因为const存放的是...原创 2021-03-25 10:53:09 · 83 阅读 · 0 评论 -
【css】sass实现loading动画
index.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>使用sass</title> <link href="./sass.css" rel="stylesheet"/> </head> <body> <div class="loading"> <div class原创 2021-03-18 14:25:21 · 389 阅读 · 0 评论 -
【js】js实现返回每个按钮被点击的次数
使用闭包。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding: 0; } button{ width: 100px; height: 50px; background-color: #4CAF50;原创 2021-03-18 13:12:34 · 1940 阅读 · 1 评论 -
防抖和节流
参考博客:B站视频讲解、掘金 、知乎原创 2021-03-15 14:13:05 · 52 阅读 · 0 评论 -
【js】事件委托
参考博客:js中的事件委托或是事件代理详解事件委托,也叫事件代理。概念事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。一般来讲,会把一个或者一组元素的事件委托到它的父层或者更外层元素上,真正绑定事件的是外层元素,当事件响应到需要绑定的元素上时,会通过事件冒泡机制从而触发它的外层元素的绑定事件上,然后在外层元素上去执行函数。优点1、减少内存消耗如果有一个列表ul,里面有大量的列表项li,我们要想在点击列表项的时候响应一个事件,如果给每个列表项都绑定一个函数,那.原创 2021-03-13 14:41:33 · 74 阅读 · 0 评论 -
【css】预处理器
常见的css预处理器:sass、less、styluscss预处理器使用变量、简单的逻辑程序、函数等在编程语言中的一些基本特性,可以让CSS更加简洁、适应性更强、可读性更佳,更易于代码的维护。官网:Sass 中午文档 、Less中文文档、Stylus中文文档语法:sass/* style.sass 老语法*/p color: #ffffff/*style.scss sass3.0新版语法规则, sass新版使用.scss后缀*/h1{ color:#936; backg原创 2021-03-13 10:40:05 · 83 阅读 · 0 评论 -
【css】画一条0.5px的直线
理论上px的最小单位是1,但有时候需要高清显示,就会使用到0.5px。效果对比图:直接设置0.5px,在不同的浏览器会有不同的表现,所以最完美的方法,是使用transform属性进行缩放。参考博客:怎么画一条0.5px的边...原创 2021-03-08 20:36:18 · 5371 阅读 · 2 评论 -
【css】绘制三角形
简单三角形的绘制原理:利用元素的border属性为元素添加border属性,<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>css绘制三角形</title> <style> div{ width: 50px; height: 50px; border: 2px solid red; } &原创 2021-03-08 20:15:28 · 186 阅读 · 0 评论 -
【vue】vue路由
Vue-router 的hash模式和history模式hash:即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算)。比如这个 URL:http://www.abc.com/#/hello,hash 的值为 #/hello。(vue的路由默认是hash模式)history:利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。在router文件夹下的index.js中加入mode: 'histo原创 2021-03-07 10:33:53 · 95 阅读 · 0 评论 -
【vue】计算属性computed和侦听属性watch
computed计算属性,依赖其他属性计算值,并且computed的值有缓存,只有当计算值变化才会返回内容。例子: data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } }watch监听属性,监听到值的变化就会执行回调,在回调中可以进行一些逻原创 2021-03-07 10:10:08 · 124 阅读 · 0 评论 -
【vue】vue生命周期
beforeCreate : 初始化了部分参数,如果有相同的参数,做了参数合并,执行 beforeCreate ;created : 初始化了 Inject 、Provide 、 props 、methods 、data 、computed 和 watch,执行 created ;beforeMount : 检查是否存在 el 属性,存在的话进行渲染 dom 操作,执行 beforeMount ;mounted : 实例化 Watcher ,渲染 dom,执行 mounted ;before...原创 2021-03-06 17:29:00 · 101 阅读 · 0 评论 -
【vue】vue响应式原理
参考博客:Vue响应式原理(易懂)、简单实现vue的响应式通过数据劫持结合发布者-订阅者模式的方式来实现,利用Object.defineProperty() 重新定义对象获取属性值(get)和设置属性值(set)。示意图1:示意图2:Object.defineProperty()实现数据劫持1、js对象属性数据属性:特性:configurable、enumerable、writable、value访问器属性:不包含具体数据数值,通常使用set()、get()操作(getter.原创 2021-03-06 17:04:27 · 125 阅读 · 0 评论 -
【js】事件流(事件冒泡与事件捕获)
事件流事件流的模型是自上而下捕获,到达目标,然后再自下而上冒泡。分为三个阶段:事件捕获阶段(从上往下)处于目标阶段事件冒泡阶段(从下往上)示意图:事件处理程序1、HTML直接在元素上添加onclick事件,属于事件冒泡当点击下层目标元素的时候,事件从下往上冒泡执行例子:当点击span标签,依次输出:我是span 我是button 我是body当点击body标签,因为这已经是最外层标签,无法再往上执行,所以输出:我是body2、DOM0级(html和js分离)原创 2021-03-05 16:38:35 · 190 阅读 · 0 评论 -
【js】this指向
定义this指的是函数运行时所在的环境。运行环境var f = function () { console.log(this.x);}var x = 1;var obj = { f: f, // 把上面的函数f()赋值给属性f;在内存中,f属性存放的是函数f()的地址,所以调用的是f()的引用地址 x: 2,};// 全局环境执行,this指向全局变量,即 this.x 指向全局环境的xf() // 1// obj 环境执行,this.x指向obj.xobj.f()原创 2021-03-05 14:19:32 · 101 阅读 · 0 评论 -
重排与重绘
重排(reflow,又称回流)概念:当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小),浏览器需要重新计算元素的几何属性,重新进行渲染。(重新生成布局,重新排列元素)发生重排的情况:页面初始渲染,这是开销最大的一次重排添加/删除可见的DOM元素改变元素位置改变元素尺寸,比如边距、填充、边框、宽度和高度等改变元素内容,比如文字数量,图片大小等改变元素字体大小改变浏览器窗口尺寸,比如resize事件发生时(上述为主要的)激活CSS伪类(例如::hover)设置 style 属原创 2021-02-07 13:42:13 · 158 阅读 · 0 评论 -
跨域
参考博客:关于跨域,你想知道的全在这里 、跨域 JSONP、CORS、代理服务器原创 2021-02-07 10:56:44 · 66 阅读 · 0 评论 -
【js】继承
构造函数继承 function Father(name) { this.name = name; } Father.prototype.dance = function () { console.log('I am dancing'); }; function Son(name, age) { Father.call(this, name); // 改变this指向,让父类里面的this指到子类的上下文,这样在父类原创 2021-02-01 16:05:26 · 86 阅读 · 0 评论 -
【js】原型与原型链
参考博客:2020面试收获 - js原型及原型链实例就是对象,实例的__protpo__指向的是原型对象。实例的构造函数的prototype也是指向的原型对象。原型对象的construor指向的是构造函数。举例,var M = function (name) { this.name = name; }var o3 = new M('o3')原型链:每个对象(实例)都可以有一个原型对象,这个原型还可以有它自己的原型,以此类推,形成一个原型链。查找特定属性的时.原创 2021-02-01 12:00:38 · 154 阅读 · 0 评论 -
【js】Event Loop事件循环
Event Loop即事件循环,是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制,也就是我们经常使用异步的原理。任务同步任务(synchronous):在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务。异步任务(asynchronous):不进入主线程,而进入 “任务队列”(task queue) 的任务,只有"任务队列"通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。异步任务的运行机制所有同步任务都在主线程上执行,原创 2021-02-01 10:01:19 · 95 阅读 · 0 评论 -
HTTP和HTTPS 的理解
概念:HTTP:一个基于TCP/IP通信协议来传递数据的协议,传输的数据类型为HTML 文件、图片文件、查询结果等。HTTPS :一般理解为HTTP+SSL/TLS,通过 SSL证书来验证服务器的身份,并为浏览器和服务器之间的通信进行加密,简单来说就是HTTP的安全版本。HTTPHTTP报文(请求报文和响应报文)结构General Headers 通用信息头:既能用于请求消息中,也能用于响应信息中Request URL:请求的地址Request Method:请求的方法类型原创 2021-01-31 14:21:54 · 282 阅读 · 0 评论 -
前端鉴权机制(cookie、session、token、WebStorage会话管理方式)
1、cookie与session的区别cookie数据存放在客户端上,session数据存放在服务器上cookie不是很安全,别人可以分析存放在本地的cookie并进行cookie欺骗,考虑到安全应当使用session。用户验证这种场合一般会用 sessionsession保存在服务器,客户端不知道其中的信息;反之,cookie保存在客户端,服务器能够知道其中的信息session会在一定时间内保存在服务器上,当访问增多,会比较占用服务器的性能,考虑到减轻服务器性能方面,应当使用coo原创 2021-01-30 10:47:47 · 665 阅读 · 0 评论 -
浏览器缓存
参考博客:彻底理解浏览器的缓存机制、浏览器缓存机制1、缓存的分类浏览器缓存:浏览器缓存是将文件保存在客户端,在同一个会话过程中会检查缓存的副本是否足够新,在后退网页时,访问过的资源可以从浏览器缓存中拿出使用。常见的 HTTP 缓存只能存储 GET 响应,对于其他类型的响应则无能为力。缓存的关键主要包括request ,method和目标URI(一般只有GET请求才会被缓存)。浏览器在每次GET URL时都会先检查URL对应的缓存,除非你指定不使用缓存(强制刷新或者Disable Cache.原创 2021-01-30 09:32:13 · 140 阅读 · 0 评论 -
从输入url地址到页面渲染全过程
参考博客:经典面试题:从 URL 输入到页面展现到底发生什么?、TCP/IP协议详解DNS 解析:将域名解析成 IP 地址TCP 连接:TCP 三次握手发送 HTTP 请求服务器处理请求并返回 HTTP 报文浏览器解析渲染页面断开连接:TCP 四次挥手1、DNS 解析:将域名解析成 IP 地址URL(Uniform Resource Locator),统一资源定位符scheme://host.domain:port/path/filename各部分解释如下:scheme:.原创 2021-01-30 09:17:51 · 468 阅读 · 0 评论 -
【js】js实现浅拷贝和深拷贝
浅拷贝在进行拷贝对象的时候,如果属性是对象或者数组,则传递的是引用地址;若对这样的属性进行修改,那么父子对象之间就会发生关联。1)‘=’赋值,将对象的引用赋值var a={key1:"11111"}function Copy(p){ var c ={}; for (var i in p){ c[i]=p[i] } return c;}a.key2 = ["小辉","小辉"]var b = Copy(a);b.key3 = "33333"ale原创 2021-01-30 09:12:21 · 109 阅读 · 0 评论