小孟js-CSDN博客

原创【typescript】TS有静态方法的枚举

用enum+namespace的声明方式可以为枚举添加静态方法

2022-06-24 09:32:56 713 2

原创【javascript】axios多次调用一个接口，取消之前的请求办法。

有时我们在项目中可能会遇到连续调两次同一个接口的情况，而我们只需要最后一次的结果。比如用户连续点了两次不同的筛选框，但是服务器返回的时候，第二次那个接口先返回了，那么当第一次点击的接口再返回的时候，就把第二次的结果覆盖掉了，造成数据与筛选框不一致的情况。这个时候，可以用下面的方法，当同样的请求发出时，取消上一个请求：//这个数组用来存储需要在连续调用时，取消上次请求的接口//建议用正则处理一下，不要用完整的url，因为开发环境、测试环境和线上环境的ip或者url是不一样的const cancelLis

2022-04-28 15:41:13 3990 3

原创【js正则表达式】从零开始的正则表达式教学三：非捕获元

上一篇咱们介绍到,()会捕获正则表达式匹配到的内容，那么有时候咱们不希望捕获他们，可以用非捕获元。1.?:"hello---hello666hellomm".replace(/(hello(\d+))/g,"$2")>> 'hello---666hellomm'"hello---hello666hellomm".replace(/(?:hello(\d+))/g,"$1")>> 'hello---666hellomm'上边第一个例子，用了两个括号，匹配了hello+数

2022-04-27 17:54:06 702

原创【js正则表达式】从零开始的正则表达式教学二：replace替换

这一篇来说一下用正则表达式对字符串指定字符串进行替换。字符串.replace(正则表达式,替换目标字符串)1.普通替换"haha,hello233 world666".replace(/\d/,"")>> 'haha,hello33 world666' "haha,hello233 world666".replace(/\d/,"&")>> 'haha,hello&33 world666'这里将第一个数字 2 ，替换成了指定的字符串 "" 和 &am

2022-04-26 17:56:13 3269

原创【js正则表达式】从零开始的正则表达式教学一：基础表达式

正则表达式(regular expression)描述了一种字符串匹配的模式（pattern），可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。本系列从易到难分许多篇，对正则表达式比较熟悉的，可以忽略本篇。正则表达式有两种定义方式：//1.通过构造函数new出来，需要用\对\进行转义，所以代表数字的\d在参数里要写成 \\dvar reg = new RegExp("\\d")reg.test(123)>> true//2.通过字面量书写

2022-04-21 13:43:11 984

原创【JavaScript】用Symbol.iterator实现可迭代的对象

Symbol.iterator 为每一个对象定义了默认的迭代器。该迭代器可以被 for...of 循环使用。Array、Map、Set、String都有内置的迭代器，然而有些情况，你可能需要对一个对象进行迭代。这个时候，就可以用Symbol.iterator来自定义实现一个迭代器。下面看第一种方式：let obj = { 0:123, 1:456, 2:789, length:3, [Symbol.iterator]:function(){ le

2022-04-20 17:32:01 1306

原创【vue3】vue3在setup的render渲染函数中如何使用slots（插槽）？

在setup中使用插槽，需要配合render渲染函数，先上代码。子组件slotsTest.vue:<script lang="ts">import { h,renderSlot,Slots,reactive } from "vue";interface SetupContext { slots:Slots}interface Data { [key:string]:unknown}interface listData { id:number, te

2022-04-19 14:01:14 10462 1

原创【typescript】TS编写和使用装饰器之（五）：参数装饰器

注：我看了好多天ts官方文档，也看了参数装饰器的示例，到现在也没有想出一个更好的方案，向大家展示参数装饰器的使用方法。因为参数装饰器只能用来监视一个方法的参数是否被传入。所以这篇文章，我就先把官网的案例抄写下来，等我以后想明白了别的方案，再来修改成自己的demo。先看介绍：参数装饰器声明在一个参数声明之前（紧靠着参数声明）。参数装饰器应用于类构造函数或方法声明。参数装饰器不能用在声明文件（.d.ts），重载或其它外部上下文（比如 declare的类）里。参数装饰器表达式会在运行时当作函数被调用，传

2022-04-18 16:43:48 3046 1

原创【typescript】TS编写和使用装饰器之（四）：属性装饰器

接着上一篇，咱们来介绍ts的属性装饰器。ts的安装和使用请看：TS编写和使用装饰器之（一）：类装饰器。属性装饰器声明在一个属性声明之前（紧靠着属性声明）。属性装饰器不能用在声明文件中（.d.ts），或者任何外部上下文（比如 declare的类）里。属性装饰器表达式会在运行时当作函数被调用，传入下列2个参数：1.对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。2.成员的名字。注意属性描述符不会做为参数传入属性装饰器，这与TypeScript是如何初始化属性装饰器的有关。因为目前没

2022-04-14 10:10:58 1528 3

原创【typescript】TS编写和使用装饰器之（三）：访问器装饰器

接着上一篇，咱们来介绍ts的访问器装饰器ts的安装和使用请看：TS编写和使用装饰器之（一）：类装饰器。访问器装饰器声明在一个访问器的声明之前（紧靠着访问器声明）。访问器装饰器应用于访问器的属性描述符并且可以用来监视，修改或替换一个访问器的定义。访问器装饰器不能用在声明文件中（.d.ts），或者任何外部上下文（比如 declare的类）里。注意 TypeScript不允许同时装饰一个成员的get和set访问器。取而代之的是，一个成员的所有装饰的必须应用在文档顺序的第一个访问器上。这是因为，在装饰器

2022-04-12 16:17:50 1021 2

原创【typescript】TS编写和使用装饰器之（二）：方法装饰器

关于ts的安装和使用请看上一篇：TS编写和使用装饰器之（一）：类装饰器方法装饰器声明在一个方法的声明之前（紧靠着方法声明）。它会被应用到方法的属性描述符上，可以用来监视，修改或者替换方法定义。方法装饰器不能用在声明文件( .d.ts)，重载或者任何外部上下文（比如declare的类）中。方法装饰器表达式会在运行时当作函数被调用，传入下列3个参数：1.对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。2.成员的名字。3.成员的属性描述符。注意如果代码输出目标版本小于ES5，属性

2022-04-11 17:15:21 1676

原创【typescript】TS编写和使用装饰器之（一）：类装饰器

随着TypeScript和ES6里引入了类，在一些场景下我们需要额外的特性来支持标注或修改类及其成员。装饰器（Decorators）为我们在类的声明及成员上通过元编程语法添加标注提供了一种方式。 Javascript里的装饰器目前处在建议征集的第二阶段，但在TypeScript里已做为一项实验性特性予以支持。注意装饰器是一项实验性特性，在未来的版本中可能会发生改变。若要启用实验性的装饰器特性，你必须在命令行或tsconfig.json里启用experimentalDecorators编译器选项：

2022-04-08 14:06:41 1604

原创 [vue3] 读vue3源码和vue3设计与实现，用Proxy实现简单的响应式

Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。先看一个简单的示例：var proxyObj = new Proxy( {a:123,b:456}, { get:function(target,key){ //target是目标对象,key是目标对象的键,当读取代理对象proxyObj的属性的时候，会进入到这里 return target[key]+"hello"

2022-04-07 17:46:34 1073

原创【vue3】vue3在单个组件实例上创建多个v-model 绑定

默认情况下，组件上的 v-model 使用 modelValue 作为 prop 和 update:modelValue 作为事件。我们可以通过向 v-model 传递参数来修改这些名称。正因为可以修改名称，vue3支持在单个组件上，绑定多个不同名字的v-model，来看示例。父组件index.vue：<script lang="ts">import { ref } from "vue"import ModelTest from './modelTest.vue'export defa

2022-04-02 17:07:52 3495

原创【js设计模式】js发布-订阅模式（观察者模式）

简单实现发布-订阅模式，从功能上来说，也叫观察者模式，他俩唯一的区别就是发布-订阅模式有一个统一的调度中心，这里不做细的区分。var event={ //储存订阅的事件表 eventList:{}, //监听事件 listen:function(key,fn){ if(!this.eventList[key]){ //如果没有key类型事件，创建一个新的数组，用于存放key类型事件 this.eventList[key

2022-03-31 11:06:13 1708

原创【vue】element-ui的form数组表单验证（循环表单验证）

基于vue2.0的element-ui的form表单验证比较简单，但是有些同学可能对于数组类型的表单验证无从下手，这里我基于一个我自己项目中的例子，展示一下怎么进行数组的表单验证。项目截图：上代码,为了让大家看起来比较清晰，我删掉了无关的代码：<template><div class="create_send"> <el-form ref="refForm" :model="formData" :rules="rules"> <el-

2022-03-30 16:27:46 12331 12

原创【nodejs】nodejs如何读取并修改文件内容？

之前用JQuery写了一个简单的门户网站，没有使用webpack之类的打包工具，但是有开发环境、测试环境和正式环境的api地址切换，为了不用每次都手动修改，我用nodejs写了一个小脚本用来修改文件内容。文件列表：dev.js //开发环境test.js //测试环境production.js //线上环境package.json //npm init初始化或者手动创建用来执行jsapi.js //接口api地址,用来写入并全局使用的api.jsconfig.js //用来读取并修改的api

2022-03-29 17:50:46 5545

原创【vue3】vue3新增内置组件teleport用法

我们的vue组件在初始化的时候，把根组件挂载到了一个元素上，后续所有的子组件都在这个根组件的里边，就像这样：但是有时候，为了能够快速的定位到元素，我们不想让vue把内容渲染到id="app"这个元素里，比如你写了一个全屏的组件，或者一个弹窗组件。在vue2的时候，我们可以使用原生js去把组件内容主动渲染到其他位置，比如body下面。但是vue3我们不必这样做了，vue3提供了一个新的内置组件 teleport，他接受一个参数to，值为目标。你可以把他看成slot，他包裹的内容就会被渲染到to指向的标签内

2022-03-25 17:45:23 1050 1

原创【vue3】vue3 setup如何使用watch？

setup是一个组件选项，在组件被创建之前，props 被解析之后执行。它是组合式 API 的入口。他接受两个参数：{Data} props{SetupContext} context在setup选项里使用watch有两种办法。第一种：使用watchEffect，watchEffect立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。示例：<script lang="ts">import { ref,watchEffect } from 'vue'

2022-03-23 15:07:02 19413 3

原创【vue3】vue3 setup如何使用computed？

setup是一个组件选项，在组件被创建之前，props 被解析之后执行。它是组合式 API 的入口。他接受两个参数：{Data} props{SetupContext} context在setup选项里使用computed需要手动引入computed方法，computed接受一个 getter 函数，并根据 getter 的返回值返回一个不可变的响应式 ref 对象。或者，接受一个具有 get 和 set 函数的对象，用来创建可写的 ref 对象。下面来看示例。父组件index.vue：&lt

2022-03-22 16:24:17 10521 1

原创【vue3】vue3 setup如何使用provide和inject？

setup是一个组件选项，在组件被创建之前，props 被解析之后执行。它是组合式 API 的入口。他接受两个参数：{Data} props{SetupContext} context通常情况下，我们用props把数据传递给子组件，子组件通过emit把数据传递给父组件。但是当层级比较多的时候，比如祖先组件和重孙组件需要传递数据，而中间的那些组件不需要，用props和emit就显得有些繁琐了，这时候我们可以用provide和inject。provide提供一个具有名字的变量传递给子孙组件，子孙组件用

2022-03-22 09:26:15 7962 5

原创【vue3】vue3 setup如何使用props？

setup是一个组件选项，在组件被创建之前，props 被解析之后执行。它是组合式 API 的入口。他接受两个参数：{Data} props{SetupContext} context在setup里边，第一个参数就是props，下面来看示例。子组件propsTest.vue：<script lang="ts">import { toRefs } from 'vue'interface Data { [key:string]:unknown}export defaul

2022-03-18 15:53:31 61219 1

原创【vue3】vue3 setup父组件如何调用子组件方法？

setup是一个组件选项，在组件被创建之前，props 被解析之后执行。它是组合式 API 的入口。他接受两个参数：{Data} props{SetupContext} context在vue2中，我们通常使用this.$refs.childNode.clickButton()调用子组件方法。vue3中setup也是可以用这种方法，只不过需要用ref小小的处理一下。ref接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 .value property，指向该内部值。父

2022-03-17 16:52:26 7051 3

原创【vue3】vue3 setup如何使用render渲染函数？

setup是一个组件选项，在组件被创建之前，props 被解析之后执行。它是组合式 API 的入口。他接受两个参数：{Data} props{SetupContext} context注意：setup语法糖是不可以使用render的，所以只有用setup选项才可以。<script setup lang="ts">//这里不能使用render渲染</script>我们可以在setup选项里直接return ()=> h() 或者多个return ()=>

2022-03-16 15:55:16 15909

原创【vue3】vue3 setup如何使用router和route？

setup是一个组件选项，在组件被创建之前，props 被解析之后执行。它是组合式 API 的入口。他接受两个参数：{Data} props{SetupContext} context在setup里边因为不能访问this，所以也没有this.router和this.router和this.router和this.route。但是我们可以通过vue-router提供的函数来进行访问router：useRoute返回当前路由地址。相当于在模板中使用 $route。必须在 setup() 中调用。

2022-03-15 14:43:33 12526

原创【vue3】vue3 setup如何使用emit？

setup是一个组件选项，在组件被创建之前，props 被解析之后执行。它是组合式 API 的入口。他接受两个参数：{Data} props{SetupContext} contextemit就是第二个参数的一个属性：下面看一下用例，子组件 renderTest.vue：<script lang="ts">import { h } from "vue"interface Data { [key: string]: unknown}interface SetupConte

2022-03-14 16:26:47 37386 3

原创【js算法】js斐波那契数列的多种算法

斐波那契数列（Fibonacci sequence），又称黄金分割数列，因数学家莱昂纳多·斐波那契（Leonardo Fibonacci）以兔子繁殖为例子而引入，故又称为“兔子数列”，指的是这样一个数列：1、1、2、3、5、8、13、21、34、……从数列可以看出，从第三项开始，每一项都是前两项的和，f(n) = f(n-1) + f(n-2)那么用js怎么求斐波那契数列第n项的值呢？1.普通递归计算:function fibonacci(n){ if(n == 1||n == 2) retu

2022-03-11 11:31:13 6455

原创【js正则表达式】小数点保留两位的js正则表达式

小数点保留两位的正则表达式，一般用于金额校验：var regs = /^([0-9]{1}|^[1-9]{1}\d{1,15})(\.\d{1,2})?$/测试结果：上一篇：前端批量请求之：Promise.all和Promise.race

2022-03-10 16:58:18 6938 1

原创【js Promise】前端批量请求之：Promise.all和Promise.race

有时候我们会遇到需要同时请求多个接口的需求，比如批量下载并打包，或者根据多个id请求多个详情并合并把结果成一个数组，这个时候可以用Promise.all。下边的代码大家可以直接复制到F12控制台运行。先写一个模拟后台接口的函数：function getAjax(time){ return new Promise(resolve=>{ setTimeout(()=>{ resolve("time:"+time) },time*1

2022-03-09 17:13:46 4109

原创【css太极图】html+css用一个div画出太极图

html和css都很简单，这里也就不多说了，直接看效果：html代码，复制到html文件直接打开即可。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=dev

2022-03-08 17:10:13 714

原创【npm】npm adduser或者npm login报错，npm login不能登陆解决办法。

npm login不能登陆解决办法

2022-03-07 15:02:33 4896

原创【算法-排序】js归并排序

什么是归并排序？咱们先看一张图：归并排序的原理就是分治法，将已有序的子序列合并，得到完全有序的序列；即先使每个子序列有序，再使子序列段间有序。若将两个有序表合并成一个有序表，称为二路归并（这句话摘自百度百科）。下边用自己的话讲一下：现在有一个数组，咱们先把他递归的两两拆分，就像一个二叉树一样，最后每个节点只有一个元素。从图中可以看到，最后的子节点都是一个（图中第四行）。那么此时咱们把兄弟节点相比较，把小的放前边，大的放后边，最后变成（图中的第五行）。这就是合并的第一步。那么下一次每个节点里边都有俩元素

2022-03-04 18:13:11 755

原创【算法-排序】js插入排序

什么是插入排序？如果我们现在有一个数组arr，从下标为i = 1开始循环，取出key = arr[i],然后让他与前边的元素逐一对比，只要前边的元素比key大，那么就让前边的元素的下标加1，直到找到一个比key小的元素，把key插入到在上一次修改下标的元素的位置，一轮插入结束，进行下一次循环，i++。看图：下边就是插入排序的代码，为了看官能够直接执行，我写成了一个html，各位复制到html直接执行就可以，上图也是这个html生成的。<!DOCTYPE html><html l

2022-03-03 11:55:04 405

原创【vue】vue用了keep-alive生命周期只执行一次怎么办？

activated和deactivated也是生命周期，是专门为了使用了keep-alive的组件准备的，activated每次组件出现都会调用，deactivated每次组件离开都会调用。实例：activated(){ this.loadInfo();//每次进入组件都获取一遍详情},deactivated(){ this.dialogVisible = false;//弹窗未关闭，意外离开组件时，触发关闭弹窗动作},上一篇：vue子组件修改父组件数据，不使用v-model的

2022-03-01 17:08:35 945

原创【vue】vue子组件修改父组件数据，不使用v-model的形式

这是我项目中自己实现的一个抽屉，感兴趣的可以复制使用（this.root.diaCounts++是我挂在Vue.prototype下的一个全局变量），父组件传入参数时用[变量名].sync,子组件触发变化时用root.diaCounts++是我挂在Vue.prototype下的一个全局变量），父组件传入参数时用 [变量名].sync,子组件触发变化时用root.diaCounts++是我挂在Vue.prototype下的一个全局变量），父组件传入参数时用[变量名].sync,子组件触发变化时用emit(‘u

2022-02-28 15:49:35 651

空空如也

空空如也