- 博客(25)
- 收藏
- 关注
RSS订阅原创 谈谈JS中的原型链【new关键字、prototype、__proto__】
部分资料来源、《JavaScript权威指南》笔者用自己的话来阐述JS中的原型和继承，彻底理解这部分概念。首先回顾一下构造函数的用法现在如果要给两个cat都加上一个共有的属性species，最简单的做法当然是在构造函数内增加这个属性。这样当然可以实现，但是如果我们修改tomA上的specie，tomB上的species会被修改吗？答案当然是不会的，所以我们需要一个设计，能够放置共享的属性和方法。考虑到这一点，JS的设计者引入了prototype。
2023-03-31 18:42:31
210
原创 《HTTP详解》XSS攻击和CSRF攻击
XSS攻击是指攻击者利用漏洞将恶意脚本注入到网页中，从而窃取用户信息或控制用户浏览器的行为。攻击者通常通过在网站的输入框中插入恶意代码，比如JavaScript代码，来实现这种攻击。CSRF攻击是指攻击者利用用户已登录的身份，以用户不知情的方式向目标网站发起恶意请求。攻击者通常通过向用户发送包含恶意请求的链接或通过欺骗用户点击附加了恶意代码的页面来实现这种攻击。
2023-03-28 20:45:35
252
原创 浏览器的强制缓存和协商缓存【详解和流程】
缓存是提高Web性能的重要手段之一，可以有效减少网络请求，加快页面加载速度。在浏览器中，缓存分为强制缓存和协商缓存两种策略。强制缓存通过设置响应头中的Cache-Control和Expires字段来实现，协商缓存通过设置响应头中的Last-Modified和ETag字段来实现。强制缓存优先级高于协商缓存，但在强制缓存过期之后，浏览器会先判断是否存在协商缓存的字段，如果存在，则会发送一个带有If-Modified-Since或If-None-Match字段的请求给服务器，否则直接向服务器发送请求获取最新资源。
2023-03-28 16:55:46
1223
原创 【HTTP详解】常用的14个HTTP状态码
这个状态码通常用于网站的重定向，可以帮助网站管理员更改网站的URL结构。与302状态码类似，但307状态码明确要求客户端保留请求方法不变。表示客户端发送的请求有误，服务器无法理解。表示客户端请求的资源未被修改，可以直接使用缓存数据。表示客户端请求的资源被服务器拒绝访问。这个状态码通常出现在客户端没有权限访问资源的情况下。表示客户端请求的资源需要认证。客户端需要提供合法的身份验证信息，才能访问请求的资源。这是最常见的状态码之一。表示客户端请求的资源不存在。这个状态码通常出现在请求一个不存在的URL或文件时。
2023-03-28 15:50:07
1119
原创 Vue3源码阅读笔记【reactive和effect的理解和实现】
reactive和effect是Vue3中实现响应式数据和副作用函数的核心API，学习并理解这部分内容对于深入Vue核心逻辑是很有帮助。
2023-03-28 10:30:00
544
2
原创 【算法的JS实现】使用动态规划解决最少硬币数量问题
最少硬币数量问题是一个经典的问题，其目标是找到最少的硬币数量来凑出一个给定的金额。使用js实现动态规划解决最少硬币数量问题
2023-03-15 15:13:06
313
原创 使用typescript封装axios支持接口返回值类型提示和检查
使用typescript封装axios支持接口返回值类型提示和检查、axios、typescript
2022-11-14 23:41:42
1309
原创 Javascript 中 Map的用法
Map 对象保存键值对，并且能够记住键的原始插入顺序。任何值（对象或者基本类型）都可以作为一个键或一个值。
2022-10-03 13:47:01
1069
原创 Vue2.6 + TS + composition-api 项目升级至 Vue2.7
Vue2.6* + ts + compostion-api 升级 Vue2.7升级vue2.7使用 this.$router this.$store
2022-10-01 20:00:25
1474
原创 【GitHub Actions + GitHub Pages 实现前端自动部署到Github免费站点】（无需服务器，以vue项目为例）
一个实现前端项目自动部署最简单的流程，使用了GitHub Actions 以及 GitHub Pages
2022-08-22 00:05:24
695
原创 从Vue2到Vue3学习汇总知识点（二）：组合式 API和组合式 API 语法糖 (＜script setup＞)
从Vue2到Vue3变更知识点汇总
2022-08-11 09:00:00
277
原创 从Vue2到Vue3学习汇总知识点（完结）：其他不兼容的小修改以及被移除的API
在 Vue 2 中，自定义指令通过使用下列钩子来创建，以对齐元素的生命周期，它们都是可选的：bind - 指令绑定到元素后调用。只调用一次。inserted - 元素插入父 DOM 后调用。update - 当元素更新，但子元素尚未更新时，将调用此钩子。componentUpdated - 一旦组件和子级被更新，就会调用这个钩子。unbind - 一旦指令被移除，就会调用这个钩子。也只调用一次。...
2022-08-11 09:00:00
194
原创 Element-pagination分页组件修改current-page属性，不能正确渲染当前页码的问题（从组件源码查找问题）
需求：使用elementUI的分页组件pagination，要实现从页面跳转到列表页时设置当前页码current-page问题：设置current-page成功，请求接口携带参数正确，pagination组件上页码显示不正确，始终显示为第一页解决方式：1、在请求数据后再设置current-page （推荐）```javascript<!-- methods -->await getList() // 此时的total应该不为0this.currentPage = 要设置的页码`
2022-05-18 15:50:09
3724
原创 ES6模块化export异步导出数据
ES6模块化export异步导出数据，实现的方式。当我们尝试在js中使用export导出异步的数据时，会发现输出的是异步前的结果。//export.jslet asyData = [1, 2, 3]setTimeout(function () { asyData = [3, 2, 1] }, 2000);export { asyData }//import.jsimport { asyData } from "./export.js";console.log( as
2020-11-23 18:29:28
3503
原创 如何对多个if-else判断进行优化
当我们遇到需要多个条件判断的业务操作时，最简单直接的办法就是用多个if-else判断，虽然能够实现，但当判断条件过多，甚至是多元判断时，我们的代码就会变得非常不好阅读和维护。举个例子这里也可以用switchif(status === '1'){ return '未审批' }else if(status === '2'){ return '审批中' }else if(status === '3'){ return '审批通过' }else
2020-11-16 16:07:04
19554
2
原创 JavaScript中Map对象的用法
JavaScript 标准之Map对象的用法定义构造函数属性与object对象相比方法map.clear()Map.delete(key)Map.has (key)Map.entries()Map.set(key, value)Map.get(key)Map.keys()Map.values()Map.forEach()Map\[@@iterator]()使用for...of迭代Map对象Map 与数组的关系复制、合并Map对象小结定义Map 对象保存键值对，并且能够记住键的原始插入顺序。任何值(对象或
2020-11-16 15:57:49
2484
原创 vue项目中图片上传增加压缩功能（vue+iview+image-conversion）
对上传图片进行压缩的需求是非常常见的，简单来说，解决方式就是将图片base64或者canvas进行压缩转化，有很多工具包可以实现这种需求这里以Vue + iView的upload组件 为例：用的是image-conversion （大部分UI组件的上传都有相同的钩子方法，大同小异）1.安装依赖+组件中引入npm i image-conversion import * as imageConversion from 'image-conversion'2.Upload组件<Uploa.
2020-10-29 19:43:20
5574
1
原创 使用canvas压缩图片
要用canvas实现前端的图片压缩，有几个步骤。1.拿到图片元素。2.绘制一个空白的canvas。3.将图片绘制在canvas上。4.将canvas转成base64。（这里调用的方法可以实现压缩，base64就可以直接放入src或者传入后端、转成别的格式传输等。）上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="vie.
2020-10-29 19:42:14
2530
原创 Vue基础之组件通信(3)provide和inject、$ attrs和$ listeners
provide 和 inject官方释义这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。使用在祖先组件使用provide向下注入依赖，在所有的子孙组件可以使用inject接收到传输的数据。示例祖先组件<template> <div class="grandfather"> 祖先组件 <father></father> </div>
2020-10-28 19:12:22
3485
1
原创 Vue基础之组件通信(2)父子组件传值:自定义组件的v-model、.sync方式
自定义组件的v-modelVue中很常用的v-model，一般我们都使用在input标签上，实现数据的双向绑定，这也是vue一个很大的特点。实际上，v-model是一个语法糖，相当于在标签上使用了value属性和input的事件，内部实现了数据的更新。按照官方的释义一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。也就是在一个组件上使用了v-bind和v-on
2020-10-28 15:28:33
3438
1
原创 Vue基础之组件通信(1)props、自定义事件$emit
Vue基础之组件通信(1)props、自定义事件$emit组件化开发作为vue的几大特点之一，组件间通信是必须掌握的基础技能，props和$emit 是父子组件通信最基础的两种方式。props用法在子组件上用v-bind的方式传入值，在组件内使用props接收父组件 Dad.vue<template> <div class="Dad"> <h1>父组件</h1> <child msg="一段来自父组件的数据">&
2020-10-27 18:45:58
2243
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人