前端小懒虫-CSDN博客

原创 ts 的class和interface的区别

参考文章https://www.cnblogs.com/minigrasshopper/p/7693478.html总结文章内容：ts是类型语言，当用class做为类型的时候，应用的时候变量只能是对应class的实例。当接口作为类型，应用的时候变量可以是实现了不同接口的class的实例...

2021-12-23 11:20:15 1935

首先要了解这两个概念，什么是词法作用域和动态作用域参考链接：词法作用域和动态作用域采取文章重要部分，下面我们会用到变量分为有this引用的变量和没有this引用的变量，没有this引用的变量也就可以从词法作用域中找到变量的值，也就是上面说的顺着作用域链去找就可以了。有this引用的，要顺着调用栈找。文章没有给出有this的情况，这里我们举一个例子一起分析。先看下面代码：let name='小王',age=16let obj={ name:"小张", objAge:this.age

2021-11-08 17:14:51 426

原创 path.resovle()

var path = require("path") //引入node的path模块path.resolve('/foo/bar', './baz') // returns '/foo/bar/baz'path.resolve('/foo/bar', 'baz') // returns '/foo/bar/baz'path.resolve('/foo/bar', '/baz') // returns '/baz'path.resolve('/foo/bar', '../baz'

2021-10-04 15:25:35 143

原创大图处理方式

参考链接：https://www.pianshen.com/article/293453221/，如果是个超级大图，压缩也没办法，建议切成一块块加载。

2021-07-15 16:20:06 90

原创多数组笛卡尔乘积

//2*2*2种组合结果，如果a/c/e,b/c/e等 let arr1=['a','b'],arr2=['c','d'],arr3=['e','f'] let arr=[ arr1, arr2, arr3 ] let res=arr.reduce((accumulator,current,index,arr)=>{ let array=[].

2021-07-14 15:10:07 152

原创树结构数据相关操作

1.过滤树结构数据，按某个子项的属性过滤树结构数据，不改变数据结构，返回需要的树。let filterTree=function (nodes, predicate) { // 如果已经没有节点了，结束递归 if (!(nodes && nodes.length)) { return; } const newChildren = []; for (const node of nodes) { const subs =

2021-07-12 11:43:45 191

原创 vue 2.x项目图标管理（选型，优化）

1.问题：前端项目小图标如何处理才是最优解？我们都知道web项目图标可以是png,jpg等形式，我们前端人员可以用设计图上面下载这几种格式。那我们的项目应该采取什么格式的图片比较好呢，那就要比较这几种图片展示形式的优缺点。图片格式优缺点：https://blog.cs

2021-07-01 18:26:29 405

原创设计模式---单例模式

参考:https://www.cnblogs.com/TomXu/archive/2012/02/23/2353389.html

2021-05-28 01:29:14 53

原创 vue实现点击外部区域关闭下拉框，弹出层等操作

先上图：（录屏看不到鼠标点击位置，自行复制代码跑，环境vue2.x+iview）描述需求：有一个下拉菜单，是通过点击按钮弹出的，再次点击按钮获取点击外部区域（除下拉菜单列表的区域）下拉菜单关闭。实现思路：1.点击按钮改变下拉菜单显示和隐藏的变量的状态2.点击外部区域，判断所点击的区域是否点击在外部，可通过判断点击区域是否在下拉菜单列表区域，是，则不是外部区域。不是，则是外部区域，修改隐藏下拉菜单变量的状态。代码：<template> <div> <D

2021-04-17 14:41:34 2442

原创 bind方法的两个return

如下bindThis方法： function bindThis(f, oTarget) { return function () { return f.apply(oTarget, [...arguments]) } }第一个return作用是为了为回调函数f传参的，通过return 一个函数，用arguments获取return的那个函数的参数传给f。第二个return的作用是返回回调函数f调用的结果

2021-03-01 00:21:43 365

原创高级函数once

在实际的工作中我们可能经常遇到某些内容只执行一次，不再需要执行，我们可以把这些内容封装成函数，作为once函数的参数，达到我们的需求。下面是once函数： function once(fn,context){ let res; return function(){ if(fn){ res=fn.apply(context,arguments) fn=null }

2021-02-16 21:01:38 765

原创从需求的角度再看防抖函数

以前我也写过防抖函数的博客，现在回过头，感觉自己曾经只是贝多芬填鸭式的写下了防抖函数，我相信很多老铁和我一样，过一段时间没有去记防抖的写法就会忘记。本文从需求的角度来刨析和构思我们的防抖函数，让我们深刻记住防抖函数。比如我们点击按钮发送请求给后端，如果用户频繁点击按钮触发请求，那势必会给后端服务器带来了压力，又比如监听输入框的变化发送请求，

2021-02-13 20:57:54 189

原创函数柯里化（curry）

我们依旧从需求入手，只有知道我们要干嘛，才能一步步引导我们堆砌出万丈高楼。先看下面的代码： function add(x,y){ return x+y } console.log(add(3,1))//4如果我们想这样执行add(3)(1)也能输出4，我们该怎么做.我们从这个函数调用可以知道，函数调用了两次，并把两次传入的参数加起来了。因此我们有： function add(x){ return functi

2021-02-11 22:24:42 285 1

原创手撕bind方法

1.我们先看看MDN上对bind的描述和作用首先，我们可以知道bind是函数对象Function的原型上面的方法，所以，我们所有自定义的函数对象都继承了该方法，也就是都可以使用bind方法。2.分析bind的作用定义描述的比较官方，下面举个例子来描述bind的作用，好让我们知道，我们到底要手写一个怎么样的需求。 let obj={ name:'lisi', getName(){ return this.name

2021-02-10 12:16:11 223

原创 vue3源码分析之Relect

先看vue 3.x的源码一部分：这个createGetter其实就是封装了

2021-02-08 02:09:49 426 1

原创 weakMap对象

1.其键必须是对象，而值可以是任意的，键名指向的对象可以被垃圾回收，和weakSet一样，不可遍历。2.看看长什么样子 let wMap=new WeakMap() wMap.set({name:'lisi'},12) console.log('wMap',wMap)结果：跟map差不多，其构造函数的原型提供了get，set，has，delete等方法...

2021-02-03 00:30:30 165

原创 Map对象

1.控制台输出Map对象的实例： let myMap=new Map() console.log('myMap',myMap)结果：外形和Object对象一样，都是大括号，包含一个size属性，构造函数的原型上面提供了clear,get,set,has等方法2.往Map对象里面添加点东西看看 let myMap=new Map() myMap.set('age',12) myMap.set('name','lisi') cons

2021-02-02 19:23:40 465

原创 Set对象

1.控制台输出set的实例： let mySet=new Set() console.log('mySet',mySet)结果：看到set对象的形式，和Oject对象外形长得一样都是大括号{}，看到里面有一个size的属性，以及构造函数的原型对象上面有add,clear,delete,等方法。2.往里面加点东西看看是啥样的，使用add方法 let mySet=new Set() mySet.add('lisi') mySet.add(12)

2021-02-02 17:18:02 304

原创 vue 3.x 插槽v-slot升级table组件

1.需求：iview的table组件提供了自定义列模板的方式，使用slot-scop，结构出我们需要的数据项，极大方便了我们的开发，现在我们用vue3.x的v-slot来升级这种自定义列模板的写法。2.子组件,slot上命名每一项的数据的name，并定义属性传入对应的数据项<template> <ul> <li v-for="item in data"> <slot :name="item.slot" :row="

2021-01-27 19:23:41 3189 5

原创 vue 3.x 新特性teleport

遮罩层，模态框等第三方组件的常常是默认组件放到body下面的，这是为了避免父元素的样式对其产生影响。但是在实际应用中，我们可能也需要不放在body里，方便样式修改和组件化。我们来看看第三方的组件库如何做的。

2021-01-26 15:15:57 896

原创 js高级工厂函数

1.工厂函数：返回对象的函数2.高级工厂函数：参数是回调函数和工厂函数的工厂函数3.例子：<script> function superFunc(factory){ return (...arguments)=>{ console.log(...arguments) const instance=factory(...arguments) const time

2021-01-25 17:39:19 244

原创 vue 3.x customRef实现响应式变量防抖

1.编写防抖函数function useDebouncedRef(value,delay=500){ let timeout=null //customRef 参数是一个工厂函数，返回get和set方法 return customRef((track,trigger)=>{//track，trigger用来监听追踪和触发依赖的 return { get(){ track()

2021-01-25 10:10:01 271

原创 vue 3.x 组件实现双向绑定

1.子组件获取props和抛出update:text事件<template> <div> <van-cell-group> <van-field v-model="text" label="文本" /> </van-cell-group> </div></template><script>import { ref, watch } f

2021-01-23 19:09:51 5583 3

原创 vue 2.x 在组件中使用防抖

1.声明防抖函数 Debounce(fn, t){ let delay = t || 500; let timer = null; return function () { if (timer) { clearTimeout(timer); } timer = setTimeout(() => { fn.apply(this, arguments)

2021-01-23 14:50:21 894

原创 vue3 watchEffect防抖优化请求

代码：<template> <div> <input type="text" v-model="keyword"> </div></template><script> import { ref, watchEffect } from 'vue' export default { setup() {

2021-01-19 14:59:15 777

原创 js return引起的坑

执行下面的代码：function foo1(){ return { bar: "hello" };}function foo2(){ return { bar: "hello" };}console.log(foo1());console.log(foo2());结果令人震惊，foo2居然返回undfined，其原因是return 后面没有接代码就换行了，相当于return;...

2020-09-24 10:58:27 345

原创冒泡排序和二分法查找

冒泡排序：元素和该元素后面的元素挨个比较，大的往后放。代码如下： function sort(arr){ for(let i=0;i<arr.length-1;i++){ for(let j=0;j<arr.length-(i+1);j++){ if(arr[j]>arr[j+1]){ let temp=arr[j]

2020-09-02 15:46:25 232

原创 sourceTree建立通用的私密钥

密钥分为公开和私密，我们通常使用私密的。密钥又分为单个项目的密钥，和所有项目通用的密钥。项目比较多的时候，可以使用通用的密钥。设置方法：https://www.jianshu.com/p/cf005064b735

2020-09-02 14:03:07 186

原创防抖和节流

看过很多文章，但是讲的并不是很通俗易懂。这让很多初学者增加很多压力。本文就通俗易懂的讲解防抖和节流。防抖：一定时间内如果触发了就清除掉，从新执行。设想：存在一个按钮，绑定了一个事件。如果持续给不断对的点击它，不停的点击。那就一直在清除。刚生成的定时器也随后清了。所以一直不会触发事件。直到你停止了点击，稍后就执行了你最后的一次点击。节流：一定时间内一定执行而且只执行一次。我们通常规定300ms执行一下的话，那不管你持续不断的点击，一到300ms就执行一次了。所以你持续不断的点击足够久的话，那就执行很多次

2020-08-13 16:09:54 295

空空如也

空空如也