weixin_59855825的博客

原创 强缓存与协商缓存流程

原创 发布订阅模式（TS）

【代码】发布订阅模式（TS）

原创 object的defineProperty与Proxy对比

1.Proxy的效率比Object.defineProperty高，原因是Object.defineProperty需要递归遍历对象的每一个属性设置set和get，而Proxy只有用到了这个属性才会深度遍历寻找。2.Proxy对于新增的属性也可以读取，而Object.defineProperty只在对象创建时生成属性的set和get,对于新增的属性无法做到监听。

原创 判断一个值或者函数是不是Promise Like

什么是Promise Like 依据Promise A+规范: promise is an object or function with then method whose behavior conforms to this specification.

原创 下拉菜单过渡

下拉过渡，利用Y轴的transform：scaleY(0) —》transform：scaleY(1)

原创 js私有字段

修改类中的私有变量可以通过方法修改，通过调用setName方法修改私有变量。现在可以通过给类内部字段前面加 #来设置私有字段了！当访问私有字段的时候编译器就会报错。

原创 文字描边效果

文字描边效果可以通过text-shadow来实现，也可以通过-webkit-text-stroke来实现。

原创 自定义组件的v-model

当我们在子组件中执行 increment 方法时，我们通过 this.$emit(‘update:modelValue’, newValue) 触发了一个 update:modelValue 事件，这样父组件才能接收到子组件中 modelValue 的更新。要使子组件修改 v-model 的值时，父组件也能感知到变化，你需要在子组件中实现对 v-model 的支持。定义 v-model 绑定的属性：在子组件中，定义一个 props 用于接收 v-model 的值。子组件（Test.vue）

原创 js比较多个版本号并输出

【代码】js比较多个版本号并输出。

原创 导航栏粘滞定位

【代码】导航栏粘滞定位。

原创 浏览器确定是否停留在当前Tab页面

这里用到了visibilitychange事件。

原创 css滤镜

调整元素的对比度。1为原始值，大于1增加对比度，小于1降低对比度。：调整元素的饱和度。1为原始值，大于1增加饱和度，小于1降低饱和度。：给元素添加阴影效果。1为原始值，大于1增加亮度，小于1降低亮度。这些滤镜效果可以单独使用，也可以组合在一起，用逗号分隔。1为完全褐色，0为无褐色效果。：给元素应用高斯模糊效果。1为完全灰度，0为无灰度效果。单位为角度，0deg为原始值。1为完全反转，0为无反转效果。这将使元素变为灰度，同时应用模糊和降低亮度效果。：调整元素的透明度。0为完全透明，1为不透明。

原创 HTML+CSS+JS实现轮播图

【代码】HTML+CSS+JS实现轮播图。

原创 实现在父盒子中点击生成子盒子并识别父盒子边界不溢出

新建html复制粘贴就可以，看懂了这个组件封装就很简单了——

原创 unable to access ‘https://gitee.com/geosys/ha-teramap.git/‘: The requested URL returned error: 403

报错：unable to access ‘https://gitee.com/geosys/ha-teramap.git/’: The requested URL returned error: 403。点进来这篇博客，你肯定也遇到这个问题了，听兄弟一句劝，问问领导有没有拉你进仓库哈哈哈哈！今天遇到大坑，平时git用的好好的，突然push代码的时候报这个错！解决方法：领导没拉我进仓库哈哈哈哈。

原创 执行window.location.reload总是有弹窗出现如何解决

执行window.location.reload总是有弹窗出现如何解决。

原创 el-tree与el-popover配合使用避免事件冒泡

【代码】el-tree与el-popover配合使用避免事件冒泡。

原创 报错 ValidationError: Progress Plugin Invalid Options

【代码】报错 ValidationError: Progress Plugin Invalid Options。

原创 Google OAuth 2.0授权登录并获取用户信息

你会发现在跳转回去的url上多了许多参数，通过url获取这些参数，这些参数的作用是通过他们获取access_token信息（参数中最重要的就是code了）已获授权的 JavaScript 来源：代表从那些网址发起的Google验证登录可以被通过，可以用自己的项目地址。获取用户信息的：https://www.googleapis.com/oauth2/v2/userinfo。已获授权的重定向 URI：代表输入完成Google账号和正确的密码后跳转的路径。输入完正确的账号和密码后，这里列出主要使用的api。

原创 de_modules/.vite/deps/gifler.js?t=1710386602390&v=99750686‘ does not provide an export named ‘defaul

在vue文件中引入gifler.js的时候：报错The requested module ‘/node_modules/.vite/deps/gifler.js?4.在需要用到gifler的vue文件中写上这行代码declare const gifler: any;注意：这个错误在vue3+ts项目中产生的，具体原因也不是很清楚，不过这样确实能解决问题哈哈哈。2.把下载的js文件放到本地文件夹中例如：/src/assets中。找了很多方法也没解决最后用大招了——如图：我已经安装了gifler。

原创 统计字符串中每个字符串出现的次数

给定一个字符串，统计每个字符出现的次数。

原创 三分钟搞定普通函数和箭头函数的this指向问题

obj.getAge()是一个普通函数，根据口诀：“谁调用这个函数，函数的this就指向谁”因此此时的getAge()this指向obj,再分析其中的箭头函数的this,根据口诀：“箭头函数定义时的执行上下文的this是谁，箭头函数的this就指向谁”这里的执行上下文就是函数getAge的函数作用域，因此函数getAge()的this指向谁，其内部的箭头函数也指向谁-----所以obj.getAge()执行输出2001。

原创 js中“==” 和“===”的区别

” 是两种比较操作符，它们的区别在于它们进行比较时对数据类型的处理方式不同。因此，无论是对于基本数据类型还是引用数据类型，都应该根据实际需要选择使用"=” 的行为略有不同，但本质上遵循相同的规则：比较的是引用的地址。=" 进行比较，除非你明确需要类型转换的情况下再使用"=="。对于引用数据类型（如对象、数组）来说，“在JavaScript中，“

原创 Must be called at the top of a `setup` function (at vue-i18n.js?v=e5cb6efe:268:17)

这个错误提示表明在Vue.js的i18n插件中，i18n实例的某个方法应该在setup函数的顶部调用，但是它却在其他地方被调用了。直接在ts文件中引入vue-i18n中的t函数会报错Must be called at the top of a。1.新建一个language文件夹。然后就可以尽情的使用t函数了——2.新建index.ts文件。3创建i18n实例并导出。4在main.ts中使用。

原创 openlayer实现切换底图功能

在 OpenLayers 中，如果您想要将新添加的图层放在当前地图中的所有图层的第一个位置，可以使用 insertAt() 方法来实现。需要注意的是，insertAt() 方法的第一个参数是插入的位置，可以是任何数字，表示新的图层应该插入到当前图层集合的哪个位置。在这个示例中，我们通过 getLayers() 方法来获取当前地图中的所有图层，并使用 insertAt() 方法将新的图层对象插入到第一个位置。使用上述方法，您可以将新的图层添加到当前地图中所有图层的第一个位置，以实现切换底图的功能。

原创 vue-draggle拖拽以后松开复原问题

拖拽完成后一松手，元素的位置自动复原（有些需求需要这样做，有些需求是bug）

原创 vue3+ts+vite打包后静态资源404无法加载js和css

vite 打包生成的文件如果直接放在服务器中是可以正常访问的，但是本地直接访问打包生成index.html文件就会提示以下问题。主要：打包静态文件必须是根路径，否则放到服务器找不到静态资源（同理于webpack中的publicPath 的配置）在vite.config.ts中设置：base: "./"具体代码如下。问题1：访问的文件不存在，主要是因为路径配置问题。解决：在 vite.config.js文件中配置。访问的文件不存在，主要是因为路径配置问题。再次打包问题解决——

原创 高频前端面试题汇总之代码输出结果篇

高频前端面试题汇总之代码输出结果篇前言：代码输出结果是面试中常考的题目，一段代码中可能涉及到很多的知识点，这就考察到了应聘者的基础能力。在前端面试中，常考的代码输出问题主要涉及到以下知识点：异步编程、事件循环、this指向、作用域、变量提升、闭包、原型、继承等，这些知识点往往不是单独出现的，而是在同一段代码中包含多个知识点。所以，笔者将这些问题大致分为四类进行讨论。这里不会系统的阐述基础知识，而是通过面试例题的形式，来讲述每个题目的知识点以及代码的执行过程。如果会了这些例题，在前端面试中多数代码输出问题

原创 高频前端面试题汇总之手写代码篇

思路：将传入的对象作为原型。

原创 高频前端面试题汇总之前端性能优化篇

是指一种通过互联网互相连接的电脑网络系统，利用最靠近每位用户的服务器，更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户，来提供高性能、可扩展性及低成本的网络内容传递给用户。

原创 高频前端面试题汇总之浏览器原理篇

CSRF 攻击指的是跨站请求伪造攻击，攻击者诱导用户进入一个第三方网站，然后该网站向被攻击网站发送跨站请求。如果用户在被攻击网站中保存了登录状态，那么攻击者就可以利用这个登录状态，绕过后台的用户验证，冒充用户向服务器执行一些操作。CSRF 攻击的本质是利用 cookie 会在同源请求中携带发送给服务器的特点，以此来实现用户的冒充。

原创 高频前端面试题汇总之计算机网络篇

超文本传输安全协议（Hypertext Transfer Protocol Secure，简称：HTTPS）是一种通过计算机网络进行安全通信的传输协议。HTTPS经由HTTP进行通信，利用SSL/TLS来加密数据包。HTTPS的主要目的是提供对网站服务器的身份认证，保护交换数据的隐私与完整性。HTTP协议采用明文传输信息，存在信息窃听信息篡改和信息劫持的风险，而协议TLS/SSL具有身份验证信息加密和完整性校验的功能，可以避免此类问题发生。安全层的主要职责就是对发起的HTTP请求的数据进行加密操作和。

原创 高频前端面试题汇总之React篇（下）

react-redux 数据传输∶ view–>action–>reducer–>store–>view。view 上的AddClick 事件通过mapDispatchToProps 把数据传到action —> click:()=>dispatch(ADD)action 的ADD 传到reducer上reducer传到store上 const store = createStore(reducer);

原创 高频前端面试题汇总之React篇（上）

（1）受控组件在使用表单来收集用户输入时，例如等元素都要绑定一个change事件，当表单的状态发生变化，就会触发onChange事件，更新组件的state。这种组件在React中被称为受控组件，在受控组件中，组件渲染出的状态与它的value或checked属性相对应，react通过这种方式消除了组件的局部状态，使整个状态可控。react官方推荐使用受控表单组件。可以通过初始state中设置表单的默认值每当表单的值发生变化时，调用onChange事件处理器。

原创 高频前端面试题汇总之Vue篇（下）

（1）param方式传递的方式：在path后面跟上对应的值1）路由定义//在APP.vue中<router-link :to="'/user/'+userId" replace>用户</router-link>//在index.js},2）路由跳转// 方法1：<router-link :to="{ name: 'users', params: { uname: wade }}">按钮</router-link// 方法2：// 方法3：3）参数获取 通过获取传递的值。

原创 高频前端面试题汇总之Vue篇

高频前端面试题汇总之Vue篇1. Vue的基本原理当一个Vue实例创建时，Vue会遍历data中的属性，用 Object.defineProperty（vue3.0使用proxy ）将它们转为 getter/setter，并且在内部追踪相关依赖，在属性被访问和修改时通知变化。 每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。 2. 双向数据绑定的原理Vue.js

原创 高频前端面试题汇总之JavaScript篇（下）

/ 处理逻辑})回调函数有一个致命的弱点，就是容易写出回调地狱（Callback hell）。// 处理逻辑// 处理逻辑// 处理逻辑})})})// 处理逻辑})// 处理逻辑})// 处理逻辑})以上的代码虽然看上去利于阅读了，但是还是没有解决根本问题。嵌套函数存在耦合性，一旦有所改动，就会牵一发而动全身嵌套函数一多，就很难处理错误当然，回调函数还存在着别的几个缺点，比如不能使用try catch捕获错误，不能直接return。

原创 高频前端面试题汇总之JavaScript篇（上）

a.length;// 3// "ABC"在访问时，JavaScript 将'abc'在后台转换成，然后再访问其length属性。JavaScript也可以使用Object也可以使用valueOfif (!a) {答案是什么都不会打印，因为虽然包裹的基本类型是false，但是false被包裹成包装类型后就成了对象，所以其非值为false，所以循环体中的内容不会运行。一个拥有 length 属性和若干索引属性的对象就可以被称为类数组对象，类数组对象和数组类似，但是不能调用数组的方法。

原创 高频前端面试题汇总之CSS篇

以 iPhone XS 为例，当写 CSS 代码时，针对于单位 px，其宽度为 414px & 896px，也就是说当赋予一个 DIV元素宽度为 414px，这个 DIV 就会填满手机的宽度；而如果有一把尺子来实际测量这部手机的物理像素，实际为 1242*2688 物理像素；经过计算可知，1242/414=3，也就是说，在单边上，一个逻辑像素=3个物理像素，就说这个屏幕的像素密度为 3，也就是常说的 3 倍屏。

原创 高频前端面试题汇总之HTML篇

不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JavaScript 脚本的解析。它必须声明在HTML⽂档的第⼀⾏。浏览器渲染页面的两种模式（可通过document.compatMode获取，比如，语雀官网的文档类型是。