- 博客(49)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 前端下载导出Excel文件以及ie兼容问题
项目开发的时候需要导出功能，一般情况有两种方法，一种是后端把数据弄好然后前端只是访问个地址就能实现下载，代码如下：var url="后端写好的访问地址";window.location=url;另外一种就是后端返回文件流，前端进行相关下载，这时候我们使用原生ajax进行下载，代码如下：var filename="demo.xls";//filename是你要下载的文...
2019-11-04 10:55:19
2993
5
原创 如何区分伪类和伪元素？快来一文速览！
伪类是添加到选择器的关键字，用于指定所选元素的特殊状态。例如，伪类:hover可以用于选择一个按钮，当用户的指针悬停在按钮上时，设置此按钮的样式。伪类由冒号（）后跟着伪类名称组成（例如:hover函数式伪类还包含一对括号来定义参数（例如。附上了伪类的元素被定义为锚元素（例如中的button伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式，例如伪元素可以改变段落首行文字的样式。一个选择器只能使用一个相同类型的伪元素。伪元素由冒号（）后跟着伪元素名称组成，例如::before。
2024-02-27 14:17:49
962
原创 Vue3 中的虚拟DOM、 h() 函数，渲染函数，渲染器知识点一网打尽！
Vue.js包含了编译器和渲染器。编译器会将 vue 文件中的template模板内容编译成渲染函数，并挂载到script导出的对象中，编译器编译后的渲染函数返回的 DOM 会包含patchFlag属性，该属性标识了哪些内容是会动态变更的。渲染器会遍历渲染函数返回的 DOM，并生成对应的真实 DOM，在页面内容发生变化时，渲染器会根据patchFlag属性，动态更新对应内容，从而提升性能。用户可以通过h()函数动态创建虚拟 DOM并返回。PS. 我们日常使用的得到的render方法，其实是渲染器方法。
2023-09-27 08:58:10
1841
原创 Pinia 入门指南：Vue3 状态管理的新解决方案
定义一个Storeimport {ref } from 'vue' // 选项式配置 export const userCounterStore = defineStore('counter' , {return {count() {this . count ++ } , } , }) // 函数式配置 export const userCounterStore = defineStore('counter' ,() => {
2023-08-03 11:20:35
223
原创 教你如何自定义 Github 首页
若要自定义首页，首先需要创建一个与你 Github ID 同名的仓库创建完成后就可以开始为你的首页添加一些有趣的内容了，代码格式可以是markdown语法，也可以是HTML语法，但 HTML 的扩展性更强一点，因此笔者使用的是 HTML 语法。
2023-07-11 13:15:04
502
原创 js设计模式——装饰器模式
装饰器模式是一种结构型设计模式，它允许动态地给对象添加新的行为，而不需要修改对象的原始代码。在装饰器模式中，我们定义一个装饰器对象，它包含一个原始对象，并且实现了与原始对象相同的接口。我们可以使用装饰器对象来给原始对象添加新的行为，同时也可以在不改变原始对象的前提下，使用不同的装饰器组合来达到不同的效果。总的来说，装饰器模式是一种非常有用的设计模式，它可以帮助我们动态地扩展对象的功能，同时保持对象的不变性。在JavaScript中，我们可以使用函数式编程和ES6。
2023-05-08 11:14:14
393
原创 Javascript 中的柯里化与反柯里化
柯里化是将接受多个参数的函数转换成一系列只接受单个参数的函数的过程。柯里化函数的返回值仍然是一个函数，该函数接受一个参数，并返回一个新的函数，直到所有参数都被处理完毕，最终返回最终结果。反柯里化是将柯里化函数转换成接受多个参数的函数的过程。反柯里化函数的返回值是一个函数，该函数接受一个对象作为参数，并调用该对象的原本方法并传递参数。本文介绍了Javascript中的柯里化和反柯里化技术。柯里化可以将接受多个参数的函数转换成一系列只接受单个参数的函数，从而使得函数更加灵活、可复用和组合。
2023-04-28 15:34:56
1330
原创 javascript 防抖、节流的用法
（Debounce）和（Throttle）是两种常见的前端性能优化技术，用于限制事件处理函数的执行频率，从而减少浏览器的计算负担，提升页面性能。
2023-04-24 10:37:25
228
原创 js设计模式——状态模式
状态模式是一种面向对象的设计模式，它允许一个对象在内部状态发生改变时改变它的行为。状态模式将状态和状态相关的行为封装在一个类中，并将对象的行为委托给它的状态对象，从而使对象的行为可以随着状态的改变而改变。状态模式的核心思想是将对象的行为与其状态分离，以便在运行时动态更改对象的行为。状态模式是一种非常有用的设计模式，它可以将状态和状态相关的行为封装到一个对象中，从而降低系统的复杂度，提高代码的可维护性和可扩展性。
2023-04-17 18:16:41
319
原创 js设计模式——适配器
适配器模式是一种结构型设计模式，用于将一个类的接口转换成客户端所期望的另一个接口，从而使得原本不兼容的类可以协同工作。适配器模式的主要作用是将一个类的接口转换成客户端所期望的接口，以便客户端可以使用这个类。适配器模式是一种用于解决组件之间接口不兼容问题的设计模式。它可以将一个类的接口转换成客户端所期望的另一个接口，从而使得原本不兼容的类可以协同工作。适配器模式适用于需要使用一个已有的类，但是这个类的接口与当前的代码不兼容的情况。
2023-04-16 19:35:29
497
原创 js设计模式——发布订阅模式
发布订阅模式是一种常用的设计模式，它定义了一种一对多的关系，让多个订阅者对象同时监听某一个主题对象，当主题对象发生变化时，它会通知所有订阅者对象，使它们能够自动更新。发布订阅模式是一种常用的设计模式，它可以实现对象间的松耦合通信，支持异步处理和多对多的通信。它也有一些缺点，比如可能会造成内存泄漏、程序复杂性增加和信息不一致性。在使用发布订阅模式时，需要注意合理地设计发布者和订阅者之间的关系，避免出现不必要的问题。
2023-04-11 11:20:57
4314
1
原创 js设计模式——组合模式
组合模式将对象组合成树形结构，以表示“部分-整体”的层次结构。除了用来表示树形结构之外，组合模式的另一个好处是通过对象的多态性表现，是的用户对单个对象和组合对象的使用具有一致性。
2023-04-10 23:35:10
526
原创 js设计模式——责任链模式
职责链模式是一种行为设计模式，它允许将请求沿着处理链传递，直到有一个处理器可以处理该请求。在这种模式中，每个处理器都有机会处理请求，如果没有一个处理器能够处理请求，那么请求最终将被忽略。这种模式可以帮助我们避免在代码中使用复杂的 if-else 或 switch 语句，使代码更加简洁和可维护。职责链模式是一种行为设计模式，它允许将请求沿着处理链传递，直到有一个处理器可以处理该请求。在JavaScript中实现职责链模式非常简单，只需要定义一个基类和一些具体的处理器。
2023-04-09 16:20:44
541
原创 js设计模式——代理模式
代理模式使为一个对象提供一个代用品或占位符，以便控制对它的访问。代理模式的关键是，当客户不方便直接访问一个对象或者不满足需要的时候，提供一个替身对象来控制对这个对象的访问，客户实际上访问的是替身对象。替身对象对请求做出一些处理之后，再把请求转交给本地对象。
2023-04-08 22:46:25
514
原创 Pinia 使用方法
Storeimport {import {ref } from "vue" // 选项式配置 export const userCounterStore = defineStore('counter' , {return {count() {this . count ++ } } }) // 函数式配置 export const userCounterStore = defineStore('counter' ,() => {
2023-04-04 13:39:10
313
原创 懒加载树选中节点
<template> <div class="login"> <el-tree :props="props" ref="tree" :load="loadNode" @check-change="checkChange" @check="check" @current-change="currentChange" node-key="id" lazy sho.
2020-08-31 17:05:24
199
原创 CSS设置文字超出省略
当我们要设置文字太长显示省略号时可以这么设置：.box { -webkit-line-clamp: n; /* 设置超出n行时文字省略 */ display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;}另外单行文字省略还有另外一种办法：.box{ white-space:nowrap; overflow:hidden; text-overflow:elli
2020-08-31 17:03:08
283
原创 3D旋转相册
代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Document</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0" /&
2020-08-04 13:32:33
125
原创 修改滚动条样式
要修改的div的class名为scroll，样式如下：.scollbox::-webkit-scrollbar { /*滚动条整体样式*/ width : 10px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px;}.scollbox::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius : 5px; background-color: #033b89;}.scollbo
2020-07-31 08:13:09
228
原创 本地现有项目关联github
背景：我们在本地已经开发了一些项目，此时需要在github上创建相对应的项目首先在github上new一个仓库接着输入仓库名，然后点击创建即可。创建完一个空项目，github会给出提示告诉我们怎么关联，只要把其中一种代码拷贝执行即可...
2020-06-11 16:21:47
658
原创 vue响应式小记
看了许多介绍vue原理的文章，抄写下来做个记录，方便后续回顾目录订阅者 Dep观察者 Watcher监听器 Observer依赖收集简单示例VUE的响应式原理是先将vue对象的所有属性遍历一遍，为每个属性都添加getter和setter方法，接着当render function被渲染的时候，因为会读取所需对象的属性，因此会触发getter函数进行【依赖收集】，【依赖收集】的目的是将Watc...
2020-04-29 15:07:44
138
转载 WebSocket 教程
WebSocket是一种网络通信协议，很多高级功能都需要它。本文介绍 WebSocket 协议的使用方法。一、为什么需要 WebSocket？初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？答案很简单，因为 HTTP 协议有一个缺陷：通信只能由客户端发起。举例来说，我们想了解今天的天气，只能是客户端...
2020-03-31 11:41:41
161
原创 IE浏览器$.post报错，跨域请求发送不出去，报错no transport
当我们在IE中使用$.post时会报错，调试后发现是no transport，为了解决这种情况，在发送ajax请求前添加如下代码即可jQuery.support.cors = true;
2019-12-20 10:00:39
1286
原创 ES6转ES5
为了兼容部分不支持ES6语法的浏览器，我们通过babel将ES6代码转化成ES5.首先我们创建一个大的文件夹，起名为ES6，ES6文件夹下有两个文件夹dist和src，src文件夹下面存放着即将转化的ES6文件，而dist则存放转化后的文件。接着打开命令行进入ES6文件夹下，输入npm init -y对整个文件进行初始化创建项目，创建完毕后ES6目录下会多了个package.json...
2019-12-09 15:15:43
348
原创 删除排序数组中的重复项
给定一个排序数组，你需要在原地删除重复出现的元素，使得每个元素只出现一次，返回移除后数组的新长度。不要使用额外的数组空间，你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成。示例1:给定数组 nums = [1,1,2], 函数应该返回新的长度 2, 并且原数组 nums 的前两个元素被修改为1,2。 你不需要考虑数组中超出新长度后面的元素。示例2:...
2019-11-29 17:06:35
111
原创 合并两个有序链表
将两个有序链表合并为一个新的有序链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。示例：输入：1->2->4, 1->3->4输出：1->1->2->3->4->4答案：/** * Definition for singly-linked list. * function ListNode(val) {...
2019-11-29 16:32:46
96
原创 有效的括号
给定一个只包括'('，')'，'{'，'}'，'['，']'的字符串，判断字符串是否有效。有效字符串需满足：左括号必须用相同类型的右括号闭合。 左括号必须以正确的顺序闭合。注意空字符串可被认为是有效字符串。示例 1:输入: "()"输出: true示例2:输入: "()[]{}"输出: true示例3:输入: "(]"输出: false...
2019-11-29 16:31:46
83
原创 最长公共前缀
编写一个函数来查找字符串数组中的最长公共前缀。如果不存在公共前缀，返回空字符串""。示例1:输入: ["flower","flow","flight"]输出: "fl"示例2:输入: ["dog","racecar","car"]输出: ""解释: 输入不存在公共前缀。说明:所有输入只包含小写字母a-z。答案：/** * @param...
2019-11-29 16:30:17
84
原创 罗马数字转整数
罗马数字包含以下七种字符:I，V，X，L，C，D和M。字符 数值I 1V 5X 10L 50C 100D 500M 1000例如， 罗马数字 2 写做II，即为两个并列的 ...
2019-11-29 16:26:41
87
原创 回文数
判断一个整数是否是回文数。回文数是指正序（从左向右）和倒序（从右向左）读都是一样的整数。示例 1:输入: 121输出: true示例2:输入: -121输出: false解释: 从左向右读, 为 -121 。 从右向左读, 为 121- 。因此它不是一个回文数。示例 3:输入: 10输出: false解释: 从右向左读, 为 01 。因此它不是一个回文数...
2019-11-29 16:25:26
80
原创 整数反转
给出一个 32 位的有符号整数，你需要将这个整数中每位上的数字进行反转。示例1:输入: 123输出: 321示例 2:输入: -123输出: -321示例 3:输入: 120输出: 21注意:假设我们的环境只能存储得下 32 位的有符号整数，则其数值范围为[−231, 231− 1]。请根据这个假设，如果反转后整数溢出那么就返回 0。答...
2019-11-29 16:23:54
114
原创 两数之和
给定一个整数数组nums和一个目标值target，请你在该数组中找出和为目标值的那两个整数，并返回他们的数组下标。你可以假设每种输入只会对应一个答案。但是，你不能重复利用这个数组中同样的元素。示例:给定 nums = [2, 7, 11, 15], target = 9因为 nums[0] + nums[1] = 2 + 7 = 9所以返回 [0, 1]答案...
2019-11-29 15:46:42
71
转载 原生JS图片滚动--无缝、平滑、上下左右滚动
<html><body> <!--向下滚动代码开始--> <div id="colee" style="overflow:hidden;height:253px;width:410px;"> <div id="colee1"> <p><img src=""></p> <p...
2019-11-19 13:55:57
227
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人