- 博客(99)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 关于下载上传的sheetjs
一、背景需要讲后端返回来的表格数据通过前端设置导出其中某些字段，而且得是xlsx格式的。那就考虑使用控件SheetJS。如果是几年前，一般来说，保存excel的文件都是后端去处理，处理完成给前端一个接口，前端调用了打开就可以下载到该表格了。但是，因为PC电脑的硬件处理数据的能力越来越好，前端也具备了处理一些大数据的能力。那么处理大数据就需要把相关的情况考虑完全的控件，SheetJS就是这样的一个工具。二、官网三、常用的API。
2024-04-30 15:22:49
785
原创 Vue3插件——一文讲透
插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码。Vue 3 插件可以全局注册、本地注册或在组件内部使用。Vue 插件通常以可重用的形式提供，可以在任何基于Vue.js应用程序中使用。/* 可选的选项 */})一个插件可以是一个拥有install()方法的对象，也可以直接是一个安装函数本身。安装函数会接收到安装它的应用实例和传递给app.use()// 配置此应用。
2023-06-12 16:42:24
3550
原创 rollup.js 一个简单实用的打包工具
最近在看vue3相关的知识的时候，发现了一个新的打包工具，至少于我而言是新鲜的。它就是rollup.js。一说到JS打包、合并、压缩、模块处理等都会想到webpack，这是王者，当然入门的难度偏高。而vue3中搭配的vite运行速度确实非常快，里边有很多的rollup.js相关的回调函数。而我们今天就来简单的看看rollup.js打包神器。官网地址为Rollup | Rollup
2023-02-23 15:12:46
1282
转载 JS—节流与防抖
JS的防抖其实可以理解成为防止抖动，也就是在操作时限内，只做最后一次处理，不让程序过多“抖动”；而节流就是相当于节省能源，可以理解成每隔一段时间执行一次程序，依次做到“节流”。
2023-02-15 11:18:16
623
原创 后台文件流xlsx文件，进行下载
现在的需求很简单，就是后端把excel文档通过接口方式，在前端进行接收，是一个文档流，并且文档content是加密过的。
2023-02-09 15:24:11
475
原创 JavaScript算法——桶排序
一、桶排序的原理桶排序是计数排序的升级版。它利用了函数的映射关系，高效与否的关键就在于这个映射函数的确定。思路大致是，设置一个定量的数组当作空桶；遍历输入数据，并且把数据一个一个放到对应的桶里去；对每个不是空的桶进行排序；从不是空的桶里把排好序的数据拼接起来。二、静态示意图元素分布在桶中：然后，元素在每个桶中排序：其实，很明显，这是计数排序的优化版，当然也可以说成是升级版。主要是分好桶。三、代码实现function bucketSort(arr, bucketSize) {
2022-05-07 16:43:08
1049
1
原创 JavaScript算法——计数排序
一、原理逻辑：1. 准备一个新的数组=> 遍历原始数组, 把原始数字当做新数组的索引向新数组内填充数据=> 新数组的数据按照计数排列2. 遍历新数组=> 把索引在当做数据放进原始数组内=> 前提: 把原始数组清空二、注意点计数排序的核心在于将输入的数据值转化为键存储在额外开辟的数组空间中。作为一种线性时间复杂度的排序，计数排序要求输入的数据必须是有确定范围的整数。就是遍历数组记录数组下的元素出现过多次，然后把这个元素找个位置先安置下来，简单点说就是以原数组每个元
2022-05-06 17:14:51
539
原创 JavaScript算法——堆排序
一、知识准备**首先是堆的概念。**这里的堆其实可以简单的理解成金字塔形的形象体。我们用二叉树来构造，但是我们这个二叉树是完全体，也就是树的扩展是要有顺序排列的。堆是一个完全二叉树。完全二叉树： 二叉树除开最后一层，其他层结点数都达到最大，最后一层的所有结点都集中在左边（左边结点排列满的情况下，右边才能缺失结点）。大顶堆：根结点为最大值，每个结点的值大于或等于其孩子结点的值。小顶堆：根结点为最小值，每个结点的值小于或等于其孩子结点的值。堆的存储： 堆由数组来实现，相当于对二叉树做层序遍历。
2022-04-28 17:38:13
2069
原创 JavaScript算法——插入排序
一、概念**插入排序（Insertion-Sort）**的算法描述是一种简单直观的排序算法。它的工作原理是通过构建有序序列，对于未排序数据，在已排序序列中从后向前扫描，找到相应位置并插入。这里需要注意的就是，插入排序是在原来数组上进行对比排序。要借鉴的话，这个如同现实生活中打扑克或者打麻将的时候，把牌排列好，把一手牌给分好我们常用的就是拿出没有排序的部分的牌移动到排好序的牌中，位置定好，让它插入。二、算法描述一般来说，插入排序都采用 in-place 在数组上实现：从第一个元素开始，该元素可以认
2022-04-24 19:57:42
1834
原创 JavaScript算法——冒泡排序
一、概念冒泡排序（Bubble Sort）也叫气泡排序、泡沫排序，是一种比较简单的排序算法。它通过遍历数组，比较相邻的两个元素，如果前一个元素比后一个元素大，则交换它们的位置，这样第一次遍历后数组的最大元素就排在了数组的末尾。采用相同的方法再次遍历，直至整个数组都有序为止。这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端；这样，大的数就移动到了后端。二、算法描述比较相邻的元素。如果第一个比第二个大，就交换它们两个；对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对，这
2022-04-20 10:32:45
2278
原创 JavaScript算法——快速排序
一、概念快速排序算法由 C. A. R. Hoare 在 1960 年提出。它的时间复杂度也是 O(nlogn)，但它在时间复杂度为 O(nlogn) 级的几种排序算法中，大多数情况下效率更高，所以快速排序的应用非常广泛。注意： 快速排序不一定是最快的排序方法，这取决于需要排序的数据结构、数据量。不过，大多数情况下，面试官和工作场所用它的概率也是相对较高的，所以我们应该花时间把它学透彻。二、工作原理首先设定一个分界值，通过该分界值将数组分成左右两部分。将大于或等于分界值的数据集中到数组右边
2022-04-19 17:26:14
6550
原创 Proxy——拦截 JavaScript 操作的方法
概述Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。va
2022-04-14 21:44:12
2253
原创 Reflect——拦截 JavaScript 操作的方法
JavaScript中，万事万物都是对象。在做项目的时候，往往都需要获取或者修改删除对象的一些操作，而且操作的过程中，可能会有一些条件的限定或者有条件的分支。所以，我们ES6开始就有了Reflect，Reflect 是一个内置的对象，它提供拦截 JavaScript 操作的方法。但是我们要知道，Reflect不是一个函数对象，因此它是不可构造的。虽然，我们知道Proxy可以用new运算符调用，但是Reflect是不能够的，这是它的属性并非一个构造函数决定的。Reflect设计目的（1） 将Object对
2022-04-12 17:34:46
1558
原创 async 函数——JS中的异步处理方式
async 函数的语法async function name([param[, param[, ... param]]]) { statements }name: 函数名称。param: 要传递给函数的参数的名称。statements: 函数体语句。async 函数的书写方式如下：// 函数声明async function foo() {}// 函数表达式const foo = async function () {};// 对象的方法let obj = { async foo(
2022-04-11 15:46:01
13864
原创 Promise对象——JS中的异步处理方式
关于Promise对象所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。是异步编程的一种解决方案。 从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。这是一种异步方式，Promise的写法相对来说会让人摆脱回调的苦恼，不必一层层嵌套相关的方法，维护代码也更加的方便。设计思想Promise
2022-04-11 11:46:21
924
原创 nvm中, vue不是内部或外部命令
最近更换了一个npm的管理器，nvm。安装好了nvm之后，感觉世界都是光明的，可以很随意的更换自己的nodejs的版本，可谓之随心所欲了哇。但是，我居然发现想要重新搞一个vue2的项目玩一下都被可恨的系统提示“vue不是内部或外部命令”。首先，重新安装了一下vuenpm install vue然后再次在命令行输入vue -v还是报了一个“vue不是内部或外部命令”。现在看来，这很明显就是vue的环境变量不对劲导致的问题了。网络上大把的文章都在揭露这个问题，但是没有几个人能够把这个
2021-11-24 17:19:21
2608
5
原创 Vue3新特性——Vue3的新特性新功能一览
Vue3已经更新到了第三个大版本。感谢尤大大及其团队的开发，让我们体验到了一个很优秀的mvvm框架。如果是之前有用过vue的话，那么对vue的双向绑定一定不会陌生的，那种只需要关注数据，不用过多盯住视图就可以开发出更好交互体验视觉美感的前端项目，实在是过瘾。vue3已经正式上线，vue2还是仍旧可以正常使用。vue3更新了，肯定是更快，更小，更简单使用的了。那么vue3到底有什么新的东西呢？下面我们来具体瞧瞧吧！（一览而过，不会深入）Comparing the Options API and Compo
2021-06-21 20:06:25
807
原创 Teleport——Vue3项目中的传入，传送门
为什么会有Teleport的出现？那是因为写组件有的时候真的很繁琐，而且一个项目有可能有很多tankuang
2021-06-18 18:00:50
545
原创 vue的单文件组件
最近翻阅了一下vue。发觉有一个单文件组件之前基本忽视掉了。vue.js中的单文件组件允许在一个文件中定义一个组件的所有内容。也就是说，一个页面或者是一个组件，我们想将他们捆绑在一起，那么vue的这个单文件组件可以做到。正如vue的官网说的，“在很多 Vue 项目中，我们使用 app.component 来定义全局组件，紧接着用 app.mount(’#app’) 在每个页面内指定一个容器元素。”这里的组件，都是相对简单的，而面对一个比较复杂的项目，这种方式就行不通。原因如下：全局定义 (Global
2021-06-17 21:24:55
1428
8
原创 chrome浏览器91版本，Chrome中跨域请求无法携带Cookie的解决方案
前些时候，发觉自己的vue项目node环境上跑不起来。请求后台的接口直接来了个400报错。如下：这一看，不太妙，服务器直接来一个“您提交的数据无法被验证” 。好家伙，发现就是携带的cookiedi丢失了。请求接口Set-Cookie后头有一个黄色的感叹号，鼠标放上去有一个浮窗弹出，大致意思就是说，有一个另一个域的请求被组织了，可以通过将“SameSite=Lax”修改成为“SameSite=None”。意思很明确了，就是人家google的浏览器chrome不让跨域乱搞了，哦豁，这就玻璃心了。我y的就在
2021-06-16 19:42:54
8110
13
转载 Git常用指令
git config配置 Git 的相关参数。Git 一共有3个配置文件：1. 仓库级的配置文件：在仓库的 .git/.gitconfig，该配置文件只对所在的仓库有效。2. 全局配置文件：Mac 系统在 ~/.gitconfig，Windows 系统在 C:\Users\<用户名>\.gitconfig。3. 系统级的配置文件：在 Git 的安装目录下（Mac 系统下安装目录在 /usr/local/git）的 etc 文件夹中的 gitconfig。作者：笑叶林链接：
2021-06-15 18:44:36
87
原创 关于toFixed的精度问题
解决方式一，直接上代码Number.prototype.toFixed = function (s) { var that = this, changenum, index; changenum = (parseInt(that * Math.pow(10, s) + 0.5) / Math.pow(10, s)).toString(); index = changenum.indexOf("."); if (index < 0 &am
2021-04-21 17:15:45
307
原创 vue项目中，不修改之前的文件引入ts
前言我们项目中，可能回想着将typescript引入进来，但是又苦于项目过于繁杂，不能够简单的全部文件都修改成ts文件，那么这个时候能不能在新加入的vue文件引入ts相关的语法，而不需要修改其它的文件呢？答案是肯定的。以下是vue-cli3的修改操作。安装依赖首先必须要安装typescript 和 相应的loader 转换器 ts-loader，我们把它们先下载安装到当前项目：npm install typescript ts-loader --save-dev接着我们需要在vue项目中不仅仅
2021-03-11 17:40:15
1503
1
原创 在vue中的axios请求数据前如何对数据进行劫持
前言今天同事一起探讨了一个问题，就是后台返回来的数据，有一些接口需要弹框处理不同的业务。返回来的数据要进行加工处理，在弹框中点击取消按钮还需要关闭弹框的同时阻断继续请求。同事一开始以为不可能在公用层写一个公用的弹框做不一样的业务处理。但是这个确实是可以解决的问题，不需要在业务页面进行独立的处理。需要用到异步处理。处理逻辑在axios处理之前就需要对它进行截获了，有一个钩子，axios.interceptors.request.use可以实现；由于需要弹框来决定往下走与否，我们就要加一个异步的
2021-03-10 19:42:30
491
转载 CSS 面试题
1.介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？盒模型都是由四个部分组成的，分别是margin、border、padding和content。标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同。标准盒模型的width和height属性的范围只包含了content，而IE盒模型的width和height属性的范围包含了border、padding和content。一般来说，我们可以通过修改元素的box-sizing属性来改变元素的盒模型。知
2020-10-22 14:31:14
2131
原创 JavaScript的栈和堆的全面阐述
前言讲到栈和堆，我们一般来说都要理解数据结构比较容易明白。而，JavaScript中的栈和堆在数据类型中可以展现得比较透彻。JavaScript中的变量分为基本类型和引用类型。基本类型就是保存在栈内存中的简单数据段，而引用类型指的是那些保存在堆内存中的对象。栈栈会自动分配内存空间，会自动释放，存放基本类型，简单的数据段，占据固定大小的空间。说白了，栈就是供数据存放的空间，数据存放后，就占据了一定的空间。基本类型：String，Number，Boolean，Null，Undefined，还有e
2020-09-23 16:30:50
176
原创 设计模式——装饰器模式【结构型模式】（诸葛韩信总结版）
装饰器模式（Decorator Pattern）就是在原有的对象上边再添加一些方法或者值；用菜鸟教程的说法就是：允许向一个现有的对象添加新的功能，同时又不改变其结构。是对原来的结构和功能整体保留，而改变的是该方式内部的值。简单的理解就是，将一个对象再作进一步的修饰，让其更加的丰富。但是，又不改变本身的结构。一、优缺点优点：装饰类和被装饰类可以独立发展，不会相互耦合，装饰模式是继承的一个替代模式，装饰模式可以动态扩展一个实现类的功能。缺点：多层装饰比较复杂。二、设计原则装饰器模式将现有对象和装饰
2020-09-17 21:15:46
162
2
原创 BFC的神秘面纱
面试的时候，面试官有的时候会让你说说BFC。那到底什么是BFC，什么条件下可以创建BFC，什么元素默认就是BFC的，什么css属性遵循什么方式就可以呈现BFC呢？BFC的英文全写是Block formatting context，中文译文是块格式化上下文，是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。可能直接理解什么是BFC困难了一些，我们可以先了解一下文档的三种布局定位方案。一、三种文档流的定位方案常规流(Normal flow)常规流
2020-09-09 15:49:55
315
原创 设计模式——桥接模式【结构型模式】（诸葛韩信总结版）
桥接（Bridge）是用于把抽象化与实现化解耦，使得二者可以独立变化。这种类型的设计模式属于结构型模式，它通过提供抽象化和实现化之间的桥接结构，来实现二者的解耦。这种模式涉及到一个作为桥接的接口，使得实体类的功能独立于接口实现类。这两种类型的类可被结构化改变而互不影响。桥接模式和适配器模式有点相似，都是接口在抽象化和实现化的一个解耦过程。总得来说桥接模式更在意的是抽象化的全部，是对每一个对象进行一个拼接，成为一个成品；而适配器是为了一个目的，不惜兼容原来的对象，制造一个“接合器”。一个是实现代码前就已经
2020-09-08 20:28:27
193
原创 设计模式——适配器模式【结构型模式】（诸葛韩信总结版）
一、适配器模式适配器模式（Adapter Pattern）是作为两个不兼容的接口之间的桥梁。这种类型的设计模式属于结构型模式，它结合了两个独立接口的功能。这种模式涉及到一个单一的类，该类负责加入独立的或不兼容的接口功能。举个真实的例子，读卡器是作为内存卡和笔记本之间的适配器。您将内存卡插入读卡器，再将读卡器插入笔记本，这样就可以通过笔记本来读取内存卡。二、现实中的适配器适配器在现实生活的应用非常广泛，接下来我们来看几个现实生活中的适配器模式。港式插头转换器电源适配器USB转接口电钻或者螺丝刀
2020-09-07 17:16:02
354
原创 设计模式——原型模式【结构型模式】（诸葛韩信总结版）
一、前言JavaScript是面向对象的语言。而每一个对象都有自己的深层次属性，全部都可以用__proto__捕获到（在chrome浏览器和Firefox浏览器查看，有的浏览器没有支持该属性）。该属性在ES标准定义中的名字应该是[[Prototype]]。比如空对象{}就具有自个的__proto__。如下：var emptyObj = {};emptyObj 控制台上打印的结果如下可以看出，空对象也是有一个constructor。还有一些对象特有的方法，toString、valueOf、ha
2020-08-27 16:43:37
160
原创 设计模式——建造者模式（诸葛韩信总结版）
建造者模式，在JavaScript的设计模式中，能够用上的次数非常少。但是，它的优点确实非常的明星，就是能够构建不同的大类，使一个比较复杂的对象能够通过“建造”的方式构造出来。其中，构造的内容也是可以非常的丰富多彩。我们可以把建造者模式想象成一个产品（制作的东西，也就是我们需要的成品），一个中间层（一般来说都是抽象接口，也可以称作导演），一个或者多个建造者（可以有多个具体项）。也就是，我们需要清楚的知道，这个产品的形成过程，而不能够像之前的工厂模式一样，实现的过程隐藏得很深。一、建造者模式四要素 1）
2020-08-26 20:42:47
149
原创 设计模式——单例模式（诸葛韩信总结版）
JS的单例模式非常简单。一、概念只要在实例化的时候，保证只是实例化一次，将实例化的实力用闭包存起来，供以后调用的时候判断是否已经存在实力化。说得专业一些就是一个构造函数在构造一个对象以后，我们在构造函数中用一个参数存下该对象，当构造函数调用的时候，判断这个参数是否已经有值。二、应用这个应用相对来说是比较广泛的，比如说一个弹框弹出的时候不想出现多个弹框（vue等mvvm框架的弹框一般是组件，不需要考虑）、比如只想要页面刷新的时候调用共用接口，一旦接口成功调用过就不再调用、视频或者音频打开的时候再打开另
2020-08-24 17:18:29
109
原创 设计模式——抽象工厂模式（诸葛韩信总结版）
上文我们说到了工厂模式，自然就是能够批量生产的一个“机械产出”模式。虽然复杂工厂已经够满足大部分的产出模式了，然而我们仍然希望，能够有一种工厂模式分批进行的同时，还能够在实际操作中提供报错信息。而有一个“中心模板”可以让不一样的产品（样式、板式、品种不一样）可以借用这个模板构建基础内涵。那么抽象模式可以解决这类需求。用JavaScript的话说就是，一个实现子类继承父类的，在这个方法中需要传递子类以及要继承父类的名称，并且在抽象工厂方法中增加了一次对抽象类存在性的一次判断，如果存在，则将子类继承父类的方法
2020-08-24 14:54:23
111
原创 设计模式——工厂模式（诸葛韩信总结版）
工厂模式就是创建一个对象，然后该对象可以批量产生需要的数据。一个工厂能提供一个创建对象的公共接口，我们可以在其中指定我们希望被创建的工厂对象的类型。就像现实中实现了自动化生产的工厂，具有统一的流水线，比如生产一个袜子有袜子的设计和袜子的生成两大部分：袜子设计───原料颜色打样───定购原料───袜子打样───确定工艺；袜体生产-——下机检验————缝头拷口——定型整烫———整理包装；不一样的袜子制作，只需要改变原料、颜色和样式就可以制作出来不一样的产品。工厂模式有三种模式，简单工厂模式、复杂工厂模式、抽
2020-08-21 17:40:09
107
原创 设计模式总编
一、设计模式的概念runoob.com定义：设计模式（Design pattern）代表了最佳的实践，通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。设计模式确实是经验所谈，如果经验不足，那么去谈设计模式那只会让人摸不着头脑。因为解决问题的方式都没有摸清楚，这要去寻求更好的解决方式，那么就是空谈。借用字面的意思，我们可以知道，设计模式只是一种解答的方式、套路。如果我们已
2020-08-21 16:29:01
82
原创 -webkit-line-clamp属性在IE上不生效的问题
-webkit-line-clamp本身不是一个正式的css属性，它目前适用于webkit为内核的浏览器。所以，当我们需要保存两行字符，多出的部分用“…”替代的话，那么IE上市不会成功的。正常状态是这样：而在IE浏览器上面是显示这样的：解决的代码如下：.content { font-size: 14px; color: #4A4A4A; overflow: hidden; line-height: 26px; position: relative; height: 45
2020-08-20 14:57:11
3598
原创 typescript入门要点
typescript自从诞生以来，都是前端框架的热点，包括但不限于angular、vue3等热门框架都用ts作为代码的底层统一化处理方案。我个人觉得主要是它是代码可读性和可维护性的优点，让开发者喜爱，其实从长远来看，这个是它的利器，我们当然也得知道，它的开发成本是比较高的，而且它跟一些库结合有点瑕疵，主要的是程序员都是很忙的，学习成本这么高的typescript到底值不值得投入生产，确实需要评估。一、安装 TypeScriptnpm install -g typescript全局安装typescri
2020-08-03 18:23:49
224
原创 CSS常用技巧样式
1、有逼格的按钮控件原理：根据css3的属性的渐变和阴影进行控制.graybutton { -moz-box-shadow:inset 0px 2px 0px 0px #ffffff; -webkit-box-shadow:inset 0px 2px 0px 0px #ffffff; box-shadow:inset 0px 2px 0px 0px #ffffff; background:-webkit-gradient( linear, left top, left b
2020-07-29 20:41:32
137
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人