js
关注
分享
扫一扫
梅子丨朱
孤独是一个人的狂欢
展开
-
js前端无滚动条滑动组件实现
应用背景 一般在日常web页面开发中，经常会遇到滑动区域的操作，pc端开发滚动区域时大都会采用滚动条的形式，而移动端则大多时候滚动条时多余的。当然，可以想方设法把滚动条隐藏，但是有更多关于滚动限制或者封装组件逻辑时，不是很方便处理。 故本文通过css的transform来滑动区域，使用transition来实现滑动过渡。其中包含弹性滑动，快速滑动和慢速滑动，横向滑动，纵向滑动等方案实现。技术实现 css布局采用外层一个壳子,内层一个绝对定位的待滑动区域即可。滑动时计算好滑动距离，利用c原创 2021-08-28 13:56:38 · 1731 阅读 · 0 评论 -
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 · 327 阅读 · 0 评论 -
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 · 265 阅读 · 0 评论 -
每日算法：发布订阅者模式实现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 · 626 阅读 · 0 评论 -
每日算法：利用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 · 331 阅读 · 0 评论 -
每日一题：求出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 · 350 阅读 · 0 评论 -
每日算法：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 · 262 阅读 · 0 评论 -
代码记录
鼠标特效：.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 · 203 阅读 · 0 评论 -
每日算法：一道大厂常考的代码题
这是一道大厂常考的代码题 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 · 332 阅读 · 0 评论 -
vue this.$nextTick的作用（echarts不能实际获取dom的宽度bug）
事情是这样的，规定的dom元素width：100%；echart里面设置了偏移，所以dom设置的时候echart获取宽度不一样。这样能再文档确定下来之再渲染ecahrt。this.$nextTick是指文档元素变更结束之后开始调用。...原创 2020-10-12 16:48:44 · 1531 阅读 · 0 评论 -
大厂面试：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 · 1218 阅读 · 0 评论 -
每日算法：给定一个二叉树，找出其最大深度
给定一个二叉树，找出其最大深度。二叉树的深度为根节点到最远叶子节点的最长路径上的节点数。说明:叶子节点是指没有子节点的节点。示例：给定二叉树 [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 · 1857 阅读 · 0 评论 -
每日算法：快速排序详解以及手动实现
快速排序重点在于分区和递归，第一趟取第一个数，然后比这个数小的分到左边，比这个数大的分到右边。那么分区操作需要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 · 452 阅读 · 0 评论 -
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 · 1444 阅读 · 0 评论 -
每日算法：冒泡，选择，插入排序第二次写
好久不复习，总是会卡耶 哈哈哈 再来一次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 · 207 阅读 · 0 评论 -
每日算法：把一个数尽量分解为大于1和尽可能小的整数相乘
function getMember(num) { let n = 2; let arr = [] while(num !== n && num > n){ if(num % n === 0){ num = num / n; arr.push(n); } else { n++; } } arr.push(num); return arr;}console.log(getMember(80))//.原创 2020-09-23 10:00:43 · 584 阅读 · 0 评论 -
每日算法：分别按照二叉树先序，中序和后序打印所有的节点
题目描述分别按照二叉树先序，中序和后序打印所有的节点。示例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 · 1636 阅读 · 0 评论 -
每日算法：设计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 · 882 阅读 · 0 评论 -
每日算法：输入一个链表，反转链表后，输出新链表的表头。
链表头指针指向头节点，尾指针指向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 · 326 阅读 · 0 评论 -
css设置overflow-y:auto和max-height之后，滚动条一直在
容器上加一条css属性：line-height:1,其实父元素和子元素高度一样，出现的滚动条，也就是说父元素再大点就可以，line-height正好解决这个鬼问题，故不显示滚动条，也算得上一个小技巧，记录下。...原创 2020-09-14 10:30:56 · 5784 阅读 · 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 · 863 阅读 · 1 评论 -
vue初始化了form表单数据但是页面首次加载不渲染
在vue里出现明明从后端初始化了表单数据，但是页面首次加载不渲染，原因可能是初始化form的时候这样：data() { return { this.form={} }}或许你需要这样：data() { return { this.form={id:"",type:"" ......} }}那么，这是为什么呢？知其然，还要知其所以然。我们要从vue的深入响应式原理分析，官网解释：想必看到这就明.原创 2020-08-24 17:20:08 · 4604 阅读 · 3 评论 -
两个例子教你弄懂VUE中的$nextTick
我们知道VUE是异步更新队列，详情见官网http://doc.vue-js.com/v2/guide/reactivity.html通过官网，我们也可以知道$nextTick是在DOM渲染之后执行的方法，初次接触可能有点蒙，哥呢，就是懒，利用菜鸟编译器就动手了。这上面的东西也是非常好，来个连接：https://www.runoob.com/vue2/vue-watch.html下面来两个实...原创 2019-08-26 17:57:01 · 840 阅读 · 0 评论 -
关于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 · 3966 阅读 · 1 评论 -
关于vue组件（element ui）方法事件不能传递自定义参数的一点点思考
我们在封装组件的时候，都会封装一些方法返回值到组件中，这些方法往往参数或者返回参数固定，比如我们在运用element ui 或者iview是组件会自带很多返回值函数，往往我们在组件循环或者自定义参数需要跟随组件返回值函数参数一起传递，但是组件参数固定，这里采用一个替换的方法，比如element 自定义输入框Autocomplete：<el-autocomplete size="mini" v-model="item.name" placeholder="请输入运动员姓名"原创 2020-08-12 13:55:23 · 1151 阅读 · 0 评论 -
关于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 · 6173 阅读 · 0 评论 -
Fullcalendar 在vue中鼠标hover显示悬浮框（tippy.js插件）
从开始到放弃，从放弃到开始，哥们我以及折腾两个早上了，都有点怀疑人生了。首先，安装Fullcalendar插件，这个东西只能看官网，官网：https://fullcalendar.io/docs#toc。因为它更新快，向下也不兼容哦，一般中文文档啥的更不上官网的速度。有一个小妙招，下个有道词典，不认识的指一下就可以翻译了。具体的安装过程就不详细记录了，今天说一下鼠标hover日历事件显示悬浮框这个东东怎么实现。因为Fullcalendar文档基本是基于jquery的，所以jquery的同学很好弄，但原创 2020-08-04 12:51:21 · 8078 阅读 · 43 评论 -
vue父组件直接给子组件写click事件失效
vue封装子组件，直接在父组件中写@click=function点击没反应，写@click.native=function就可以了。@click.native是给组件绑定原生事件原创 2020-07-23 15:29:28 · 1175 阅读 · 0 评论 -
前端怎么实现搜索内容关键字标红
思路：我们可以利用js的正则表达式来匹配搜索的关键字，匹配的文字变红之后的文字在写入网页。js正则表达式：var re1 = /ABC\-001/;var re2 = new RegExp('ABC\\-001');re1; // /ABC\-001/re2; // /ABC\-001/注意，如果使用第二种写法，因为字符串的转义问题，字符串的两个\\实际上是一个\。js实现： brightenKeyword(val, keyword) { const Reg原创 2020-07-15 14:23:24 · 6634 阅读 · 0 评论 -
这一篇彻底搞懂JS中的prototype、__proto__与constructor真的很好
文章目录1. 前言2. _ _ proto _ _ 属性3. prototype属性4. constructor属性5. 总结...转载 2020-07-10 16:02:09 · 429 阅读 · 0 评论 -
看完有可能搞懂javascript中的回调函数和promise异步对象哦
ajax异步操作ajax是异步执行请求的一种前端交互的艺术。其实现是基于XMLHttpRequest浏览器对象，其中IE5和IE使用ActiveXObject。如果需要兼容，可以这样写：if (window.XMLHttpRequest) { //为IE7+, Firefox, Chrome, Opera, Safari xmlHttpReq=new XMLHttpReque...原创 2020-04-22 15:51:30 · 422 阅读 · 2 评论 -
客户端js生成rsa 密钥对
本来一般的rsa加密为非对称加密，一般情况都是公钥前端加密，私钥后端解密。一般情况都是后端服务器生成。说了那么多的一般，不一般的就是现在需要前端生成。在茫茫度娘，博嫂的帮助下，找到了这段代码，特此记录下。有人说不兼容ie。我测了是兼容的嘛，明明func是啥子东西，问得好。这个是个回调函数的样子，就是为了解决在接口wondow会延时执行的毛病。嘿嘿嘿！//获取密钥对function g...转载 2019-12-24 15:30:42 · 4715 阅读 · 8 评论