梅子丨朱-CSDN博客

原创代码记录

鼠标特效：.li-img:hover{ transform:scale(1.1,1.1); -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear;

2020-10-13 17:28:16 165

应用背景一般在日常web页面开发中，经常会遇到滑动区域的操作，pc端开发滚动区域时大都会采用滚动条的形式，而移动端则大多时候滚动条时多余的。当然，可以想方设法把滚动条隐藏，但是有更多关于滚动限制或者封装组件逻辑时，不是很方便处理。故本文通过css的transform来滑动区域，使用transition来实现滑动过渡。其中包含弹性滑动，快速滑动和慢速滑动，横向滑动，纵向滑动等方案实现。技术实现 css布局采用外层一个壳子,内层一个绝对定位的待滑动区域即可。滑动时计算好滑动距离，利用c

2021-08-28 13:56:38 1478

原创 promise全家桶，再也不怕面试叫我手写了

promise初长成//手写Promise全家桶class myPromise{ //构造器 constructor(executor) { this.state = 'pending'; this.value = undefined; this.reason = undefined; //success const resolve = (value)=>{ if(this.state === 'pending'){

2021-03-01 12:57:35 241

原创 js 基础之new实现

function Person(name,age,sex) { this.name = name; this.age = age; this.sex = sex;}function newObj(Fn,args) { let re = {}; if(Fn.prototype !== null){ Object.setPrototypeOf(re,Fn.prototype);//指向Fn的原型 // re = Object.create(Fn.prototype);.

2020-12-17 13:47:50 201

原创每日算法：发布订阅者模式实现proxy数据劫持（vue）（TypeScript版）

/** * 发布订阅者模式实现proxy数据劫持（vue）（TypeScript版） */interface Publish { register(eventName : string, sub : Subscribe) : void;//注册订阅者 remove(eventName : string, sub ?: Subscribe) : void;//移出订阅者 notify(eventName : string,obj: object) : void;//发布}i.

2020-10-19 17:42:38 564

原创每日算法：利用proxy实现观察者模式（数据劫持）

知识储备：es6，设计模式。const observerSet = new Set();const proxy = target => new Proxy(target,{//观察者观察数据变化 set(target, p, value, receiver) { let result = Reflect.set(target, p, value, receiver); observerSet.forEach(fn=>{ fn();//set操作后执行观察

2020-10-19 15:57:55 251

原创每日一题：求出dom中某个元素（span）出现的次数

It is so eazy！<html><head><title>span计数</title></head><body><div class="scroll"> <span>span计数1</span> <span>span计数2</span> <span>span计数3</span> <span>span计数

2020-10-19 13:20:57 281

原创每日算法：instanceof 关键字方法重写

思路：instanceof 函数功能是用于检测构造函数的prototype是否在某个实例的原型链上。那么我们可以先获取该构造函数的原型链，一一检测，如果该实例的原型链上有该构造函数的原型，那么返回true，否则返回false。function instanceOf(left,right) { let protoLeft = Object.getPrototypeOf(left);//获取对象的直接原型链上的原型 let protoRight = right.prototype; while

2020-10-14 10:05:25 187

原创每日算法：一道大厂常考的代码题

这是一道大厂常考的代码题 Input: 'aaaabbbccd' Output: 'a4b3c2d1'，代表 a 连续出现四次，b连续出现三次，c连续出现两次，d连续出现一次本题乍看非常简单，没啥难度，动手其实往往会卡壳，如果面试时会紧张，催你你会手足无措。平时多练习吧哈哈哈。function count(str) { //设计一个二维数组分别储存a,b,c,d等等。内层数组的长度就是统计次数 let arr = []; for(let i=0; i<str.

2020-10-13 09:37:15 241

原创 vue this.$nextTick的作用（echarts不能实际获取dom的宽度bug）

事情是这样的，规定的dom元素width：100%；echart里面设置了偏移，所以dom设置的时候echart获取宽度不一样。这样能再文档确定下来之再渲染ecahrt。this.$nextTick是指文档元素变更结束之后开始调用。...

2020-10-12 16:48:44 1446

原创大厂面试：js 闭包的深刻理解（实例分解：如何实现无限累加的一个函数）

题目：实现一个无限累加的js函数sum(1, 2, 3).valueOf() //6sum(2, 3)(2).valueOf() //7sum(1)(2)(3)(4).valueOf() //10sum(2)(4, 1)(2).valueOf() //9分析：js里的闭包常见的是用函数作为返回值，那么，就会出现func()()这种形式的函数，也叫立即执行函数。故联想到本题应该利用闭包来实现上述函数。重点：利用返回值是一个函数来接收下一个括号里的参数值，至于有多少层，我们不用关心。st

2020-10-12 13:16:42 1061

原创每日算法：给定一个二叉树，找出其最大深度

给定一个二叉树，找出其最大深度。二叉树的深度为根节点到最远叶子节点的最长路径上的节点数。说明:叶子节点是指没有子节点的节点。示例：给定二叉树 [3,9,20,null,null,15,7]， 3 / \ 9 20 / \ 15 7返回它的最大深度3 。来源：力扣（LeetCode）链接：https://leetcode-cn.com/problems/maximum-depth-of-binary-tree著作权归领扣网络所有。商业转载请...

2020-09-29 15:30:29 1768

原创每日算法：快速排序详解以及手动实现

快速排序重点在于分区和递归，第一趟取第一个数，然后比这个数小的分到左边，比这个数大的分到右边。那么分区操作需要l,r和arr[l]三个参数，l表示左边开始位置，r便是右边开始位置，arr[l]l表示左边开始位置的数。这样就便于我们接下来进行分治法以及递归操作。其中分区方法可以利用循环比较，小的放左边，大的放右边。最为经典的方法就是挖坑填数法。例如：arr = [5,1,3,4,8,3,7,2]X = 5第一个坑为5,首先从arr从右到左找到第一个小于X=5的值为2，2放到5的位置,那么下一.

2020-09-28 15:59:12 358

原创 js中求数组中的数字最大值的几种方法探究

求数组中的最大值，不难相信大家都熟悉，不过动动手总是好的，哈哈哈，最近面试什么的俺发现了一个真理，理论和实践真的差了十万八千里。let arr = [2, 5, 8, 7, 4, 1, 22, 33, 66, 55, 2, 5, 8, 4, 8, 855, 5, 868, 5]//普通循环结构function findMax(){//es6提倡拓展运算符而不是arguments let max = -Infinity; for(let i=0; i<arguments.length.

2020-09-28 09:55:31 1365

原创每日算法：冒泡，选择，插入排序第二次写

好久不复习，总是会卡耶哈哈哈再来一次let arr = [9,4,5,64,2,5,811,7,53,6,3,2,1,22,11,55,88,77,88,99,100]let arr1 = [9,4,5,64,2,5,811,7,53,6,3,2,1,22,11,55,88,77,88,99,100]let arr2 = [9,4,5,64,2,5,811,7,53,6,3,2,1,22,11,55,88,77,88,99,100]function sortBubble(arr){ l

2020-09-24 10:29:29 153

原创每日算法：把一个数尽量分解为大于1和尽可能小的整数相乘

2020-09-23 10:00:43 485

原创每日算法：分别按照二叉树先序，中序和后序打印所有的节点

题目描述分别按照二叉树先序，中序和后序打印所有的节点。示例1输入{1,2,3}输出[[1,2,3],[2,1,3],[2,3,1]]简单的递归算法：function threeOrders( root ) { // write code here let p1 = [] let p2 = [] let p3 = [] function pre(ro){ if(!ro){ return p1

2020-09-19 14:50:25 1509

原创每日算法：设计LRU缓存结构，该结构在构造时确定大小，假设大小为K，并有如下两个功能

题目描述设计LRU缓存结构，该结构在构造时确定大小，假设大小为K，并有如下两个功能set(key, value)：将记录(key, value)插入该结构 get(key)：返回key对应的value值[要求]set和get方法的时间复杂度为O(1) 某个key的set或get操作一旦发生，认为这个key的记录成了最常使用的。当缓存的大小超过K时，移除最不经常使用的记录，即set或get最久远的。若opt=1，接下来两个整数x, y，表示set(x, y)若opt=2，接下来一个整

2020-09-17 23:38:23 804

原创每日算法：输入一个链表，反转链表后，输出新链表的表头。

链表头指针指向头节点，尾指针指向null的有序指向。反转之后头节点应该是之前的尾结点。反转思路1.初始化一个pre结点null 作为反转之后的尾指针指向。2.改变后续结点的nod.next指向为pre。3.但是nod.next我们应当作备份，不然改变2种指向就找不到了，新建一个结点backup作为备份。循环1.做完第一波操作，backup结点和pre结点以及nod需要向后移动一位，nod就是我们备份的backup。2.backup结点向后移动一位。3.pre向后移动一位。

2020-09-17 21:53:11 231

原创 css设置overflow-y:auto和max-height之后，滚动条一直在

容器上加一条css属性：line-height:1,其实父元素和子元素高度一样，出现的滚动条，也就是说父元素再大点就可以，line-height正好解决这个鬼问题，故不显示滚动条，也算得上一个小技巧，记录下。...

2020-09-14 10:30:56 5002 3

原创 javascript 闭包以及let和var的一点点思考

let和var的区别let新特性1.不存在变量提升（变量声明之前赋值报错，var为undefined）2.存在暂时性死区（let变量一旦被声明，就会存在一个封闭的绑定的区域，无法再次被绑定，我们称之为“暂时性死区”）3.不允许重复声明4.具有块级作用域5.块级作用域和函数声明（允许在块级作用域声明内部函数，其声明方式性质和let一样）JavaScript 闭包闭包就是将函数作为返回值返回，返回的函数并不会立即执行。例子（参考廖老师js教程：https://www.liao

2020-09-01 15:17:48 713 1

原创 vue初始化了form表单数据但是页面首次加载不渲染

在vue里出现明明从后端初始化了表单数据，但是页面首次加载不渲染，原因可能是初始化form的时候这样：data() { return { this.form={} }}或许你需要这样：data() { return { this.form={id:"",type:"" ......} }}那么，这是为什么呢？知其然，还要知其所以然。我们要从vue的深入响应式原理分析，官网解释：想必看到这就明.

2020-08-24 17:20:08 4297 3

原创关于vue中v-for里不能直接使用method方法的一点点思考

今天遇到一个问题，是这样的，我在v-for里调用method的里的方法作为返回值传递给子组件，但是报错说getDataByPage方法是undifined，示例如下： <div v-for="(i,index) in count" :key="index"> <div class="time" v-if="len > 2"> <TimeLeftTop/> <TimeLine :list="getDataB

2020-08-18 17:06:00 3481 1

原创关于vue组件（element ui）方法事件不能传递自定义参数的一点点思考

我们在封装组件的时候，都会封装一些方法返回值到组件中，这些方法往往参数或者返回参数固定，比如我们在运用element ui 或者iview是组件会自带很多返回值函数，往往我们在组件循环或者自定义参数需要跟随组件返回值函数参数一起传递，但是组件参数固定，这里采用一个替换的方法，比如element 自定义输入框Autocomplete：<el-autocomplete size="mini" v-model="item.name" placeholder="请输入运动员姓名"

2020-08-12 13:55:23 1073

原创关于element ui 的Checkbox 多选框el-checkbox-group的一点点思考

我们经常会使用element ui的el-checkbox-group来作为复选框组件。实例如下：<template> <el-checkbox-group v-model="checkedCities" :min="1" :max="2"> <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox> &

2020-08-11 13:42:20 5470

原创 Fullcalendar 在vue中鼠标hover显示悬浮框（tippy.js插件）

从开始到放弃，从放弃到开始，哥们我以及折腾两个早上了，都有点怀疑人生了。首先，安装Fullcalendar插件，这个东西只能看官网，官网：https://fullcalendar.io/docs#toc。因为它更新快，向下也不兼容哦，一般中文文档啥的更不上官网的速度。有一个小妙招，下个有道词典，不认识的指一下就可以翻译了。具体的安装过程就不详细记录了，今天说一下鼠标hover日历事件显示悬浮框这个东东怎么实现。因为Fullcalendar文档基本是基于jquery的，所以jquery的同学很好弄，但

2020-08-04 12:51:21 6867 43

空空如也

空空如也