- 博客(23)
- 资源 (1)
- 问答 (2)
- 收藏
- 关注
原创 vue3 Element Plus select 同时使用filterable,multiple交互问题
解决filterable,multiple同时使用交互问题
2023-06-05 16:41:11
1746
原创 vue项目中前端鉴权实现(菜单权限,按钮权限)
这段时间比较忙,参与了公司一个新的B端项目的研发,从无到有搭建项目的过程中,遇到了关于项目鉴权的问题,和后端同事讨论了一下思路,自己也找了这方面的资料,整理如下文权限管理分类:1,菜单权限控制(页面级)2,按钮权限控制(按钮级)3,接口权限控制(url级别)目前根据项目需求,实现了页面级和按钮级权限控制。从实现思路来说,很简单,在用户输入用户名密码登录的时候,后台会返回该角色的权限集合,前端获取到录入本地存储中,建议使用sessionStorage,在生成菜单的时候通过查询ses.
2021-09-24 16:18:39
4969
4
原创 浏览器缓存
浏览器缓存分为强缓存和协商缓存。当客户端请求某个资源时,获取缓存的流 程如下先根据这个资源的⼀些 http header 判断它是否命中强缓存,如果命中,则直接从本地 获取缓存资源,不会发请求到服务器;当强缓存没有命中时,客户端会发送请求到服务器,服务器通过另⼀些 request header 验证这个资源是否命中协商缓存,称为 http 再验证,如果命中,服务器将请求返回,但 不返回资源,⽽是告诉客户端直接从缓存中获取,客户端收到返回后就会从缓存中获取资 源;强缓存和协商缓存共同之处在于,如果.
2021-07-22 13:48:52
201
原创 什么是Async await,和Promise有什么区别
前两篇文章给大家介绍了Promise和如何实现一个简单的Promise,那么什么是Async await呢,他们又有什么关系呢Async/await:是一个用同步思维解决异步问题的方案会自动将常规函数转换成Promise,返回值也是一个Promise对象只有async函数内部的异步操作执行完,才会执行then方法指定的回调函数异步函数内部可以使用awaitawait 放置在Promise调用之前,await 强制后面点代码等待,直到Promise对象resolve,得到resolve的值作为.
2021-07-15 17:46:22
642
原创 实现一个简易版的Promise
// 三个常量⽤于表示状态const PENDING = 'pending'const RESOLVED = 'resolved'const REJECTED = 'rejected'function MyPromise(fn) { const that = this this.state = PENDING // value 变量⽤于保存 resolve 或者 reject 中传⼊的值 this.value = null // ⽤于保存 then 中的回调,因为当执⾏完 Promi
2021-07-14 15:24:04
261
1
转载 因为搞不懂V8页面渲染机制,我被女朋友鄙视了
周末正在家休息,女朋友在逛论坛,突然她问我:“哥哥,哥哥,什么是V8渲染页面机制吖”我:(内心吐槽,小朋友,不要好高骛远,先看点简单的知识)女朋友:叔叔可以忍,婶婶不能忍,你给我站住, 不许动 。。。。。。(此处省略万字)事后,经过一番查阅资料,浏览各路大神帖子,总算有了大概概念。v8引擎出现的原因这里先说一下什么是编译型语言和解释性语言:编译型语言: 在程序执行之前必须进行专门的编译过程,有如下特点:只须编译一次就可以把源代码编译成机器语言,后面的执行无须.
2021-07-02 11:41:51
551
原创 前端性能优化
页面级优化css雪碧图 使用cdn加速器 压缩合并代码(使用webpack可打包合并) 使用dns域解析器代码级优化减少Dom操作 不使用css表达式,使用<link>,不使用@import 减小cookie大小 异步加载 使用requestAnimationFrame代替setTimeout和setInterval 图片懒加载异步加载: 当解析html文件时,遇到Script标签,会去下载这个script标签src所指向的js文件,下载完毕会执行js里面代码.
2021-06-30 11:05:57
202
转载 一文搞懂什么是观察者模式和发布订阅模式
有一回面试,面试官问:观察者模式,和发布订阅模式,有什么区别?我脑海中立刻闪现了《Head First设计模式》里讲的:Publishers + Subscribers = Observer Pattern“哼哼,我知道答案了,兄dei!”,我内心无比鸡冻。“它们是一样的。”,我故作镇定,嘴角露出一丝微笑,彷佛下一秒钟面试官就会给我发offer。面试官也笑了,“不,它们不一样。”然后我就:So,为什么我错了?观察者模式(Observer pattern),..
2021-06-25 11:43:54
499
原创 浏览器底层渲染机制
# 浏览器底层渲染机制浏览器向服务器发起请求,获取到对应的html资源文件后,开辟一块栈内存,通过GUI渲染线程来解析渲染页面GUI渲染线程是“同步”的- 对于css的处理=> 遇到
2021-06-20 12:57:42
245
原创 事件循环机制(Event Loop)
众所周知 JS 是⻔⾮阻塞单线程语⾔,因为在最初 JS 就是为了和浏览器交 互⽽诞⽣的。如果 JS 是⻔多线程的语⾔话,我们在多个线程中处理 DOM 就可能会发⽣问题(⼀个线程中新加节点,另⼀个线程中删除节点)......
2021-06-11 17:34:12
883
4
原创 防抖和节流
防抖(debounce)所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。节流(throttle)所谓节流,就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。对于节流,一般有两种方式可以实现,分别是时间戳版和定时器版。(由于setTimeout是宏任务,实际执行可能存在误差,优先推荐时间戳版)~~~~~~防抖和节流,其实就是 闭包+定时器+apply/call 的综合运用 ,如果觉得上面概..
2021-06-10 17:36:41
348
原创 call/apply/bind等源码实现
call apply源码实现:首先,call和apply均是function原型上的方法其实就是把要执行的函数,挂载到要知道this的对象身上,最后在delete到这个属性,即可如果传null、undeifnd等无效值,默认是指向window // call apply模拟 var a = 10; var obj = { a: 20 } function test(...params) { console.log(this.a,
2021-06-04 17:47:45
265
原创 new原理实现
New内部原理:产生一个空对象,对象的隐式原型__proto__属性指向该类(构造函数)的prototype属性,并将该对象赋值给this 给this赋值 返回这个this对象(注: 当构造函数内部设置返回且返回值为基本数据类型的时候,则忽略,依旧返回该this,否则,以自定义返回为准) function Say(name) { this.name = name; } Say.prototype.back = function () { conso
2021-06-04 17:46:55
212
原创 JS三元表达式与”||“的关系
今天合并同事的代码的时候,看到接口传参里面有用到三元表达式,类似下面这种param = { uuId: this.xxx.xxx.id ? this.xxx.xxx.id : null, morgId: this.xxx.xxx.morgid ? this.xxx.xxx.morgid : null, ... ... ...}整个篇幅很长,令人头大,当时就好奇为啥不直接 用 ”||“运算符,param = { uuId: this.xxx.x
2021-06-03 18:04:04
725
原创 原型与原型链,作用域与作用域链
原型与原型链:每个函数都有 prototype 属性,除了 Function.prototype.bind() ,该属性指向原型。每个对象都有 __proto__ 属性,指向了创建该对象的构造函数的原型。其实这个属性指 向了 [[prototype]] ,但是 [[prototype]] 是内部属性,我们并不能访问到,所以使⽤ _proto_ 来访问。对象可以通过 __proto__ 来寻找不属于该对象的属性, __proto__ 将对象连接起来组 成了原型链。关系: instance.co
2021-06-01 18:00:14
388
原创 什么是闭包,我悟了
闭包的概念:闭包就是一种函数的保护/保存机制。所谓保护,就是在函数执行的时候,会生成私有上下文,在私有上下文中申明的变量或者函数,会受到私有上下文的保护,不受外界影响;所谓保存,就是说私有上下文中所创建的堆内存,被当前私有上下文以外的变量所占用,那么当前私有上下文就得不到释放,这就是常说的闭包。闭包的优点:防止变量全局污染,封闭作用域,防止受到外界影响闭包的缺点:内存泄漏,占用内存较大,影响页面渲染闭包的底层原理:前置知识点:1.变量的生命周期全局变量..
2021-05-28 15:52:01
186
原创 JS底层运行机制
为什么js能在浏览器中执行众所周知,计算机是有内存的,计算机会在内存中开辟一块空间去供js执行,这个空间我们称之为执行栈全局对象和全局变量对象是一样的吗全局对象(Global Object),即window对象,存储着浏览器提供的内置方法,setTimeout,setInterval....全局变量对象,在script标签内的代码执行时,会形成EC(G)的栈,EC(G)进栈(执行环境栈,EC Stack)执行,形成全局执行上下文(VO(G)),供给下级作用域js中上下文有哪些全局上下
2021-05-27 16:14:36
543
原创 9种数据类型,数据类型区别及判断数据类型方法
9种数据类型基本数据类型:String,Number,null,undefined,Boolean(通常所说的五种原始数据类型),Symbol,BigInt(ES6新增,稍后解释)引用类型:object [基本对象,Set,Map,new RegExp(),new Date(),...],function [函数,构造函数,new Error(),...]以上就是通常所说的9种数据类型。Symbol:唯一性,用作对象的属性 vuex或redux中,派发 Sym...
2021-05-26 18:05:09
5330
1
现在转行前端开发有前景吗
2021-09-13
跨浏览器登录优快云(想知道中间是怎么处理的)
2021-07-23
TA创建的收藏夹 TA关注的收藏夹
TA关注的人