- 博客(28)
- 收藏
- 关注
RSS订阅原创 用插值公式实现滚动进度条动画效果
我们在日常前端开发时在动画的选择上基本都是css，通过css的animation即可满足大部分的开发场景，如果遇到了特殊而比较不容易实现的效果就会考虑到用js来实现，而本次的主题，就是围绕用js来做一个比较不常见的特殊动画效果。这两个动画有一个明显区别，当滚动条停下时，无插值的动画会立刻停下，而有插值的动画会在滚动条停下后依旧有缓动的效果再逐渐停下，从而形成一种动画感。在这一步，是卡了我非常久的地方，经过一番漫长的探索，终于发现了其中的奥秘。原来的方案速率是一致的，而通过调整后，方块移动的速率就不一样了。
2024-11-03 15:12:06
393
原创 build The “path“ argument must be of type string. Received undefined
build The "path" argument must be of type string. Received undefined
2022-09-09 17:52:51
1160
1
原创 【每天一个知识点】vue2和vue3的区别
最近发现很多要求Vue3的技术了，不得不说，it技术的更新真的太快了，作为vue2老用户，我们在学习Vue3前应该了解他们的区别以及背后的原因。甚至作为一个面试官，只需这一个问题就可以摸清你的水平。所以了解其区别及背后改变的本质非常重要。1、vue2 和vue3双向数据绑定原理不同vue2的数据绑定是利用Object.definePropet（）对数据进行劫持 结合 发布订阅模式实现vue3利用Proxy API对数据代理实现这第一个区别其实考的就是vue双向绑定的原理，看过vue2源码的同学都
2022-05-07 15:19:29
2239
原创 【每天一个知识点】栈，堆，队列，链表，树和图的区别
先看图，所有的数据结构大概有这么多：其实他们都是一种存储数据的方式而已，打个比方，你坐地铁1号线上班和2号线上班，都能上班只是路线不一样，他们都是存储数据的格式，每种数据结构有自己的特点，使用哪种数据格式需要根据具体的需求来选。数组比如你现在需要有序的存储一组数据而且还要经常的查询数据，那么数组就是最合适的，他有角标可以很容易进行排序和查询！数组的读取和更改数据的效率是所有数据据结构中最高的。但他的缺点是：不适合进行大量数据的存储， 因为数组在内存中很难找到连续且大的内存空间 。并且数组的随机删
2022-04-26 14:08:48
2301
原创 【每天一个知识点】setState 到底是同步的，还是异步的
看了很多文章，再结合了自己的了解，我简化的说一下。这里先说答案：setState本身是异步的，但在特殊环境（setTimeout、setInterval 等 DOM 原生事件）他是同步的。先看一下代码：add () { this.setState({ count:10 }) // 这里拿不到 console.log(this.state.count)}这是一个很明显的校验出setState是异步的情况。假设你想同步获取值，setState还提提供
2022-04-24 16:43:38
3555
3
原创 【每天一个知识点】dom-diff原理以及 算法的妙用（最长子序列）
DOM-diff是面试题当中经常遇到的一个考点，也可以说是vue和react里面的精华所在之一。那么这篇文章我想通俗易懂的方式简单的解答一下整个过程。要知道dom-diff 就要先知道虚拟dom1.为什么说是数据驱动页面？我们都知道vue和react都是用数据驱动页面的应用，那么他的原理到底是？答：由于dom流式布局的原因，平常我们操作一次dom就要重新布局一次，所以vue和react推出的数据驱动页面的操作，就是创建一个虚拟的dom对象，所有的操作都只是修改这个虚拟dom，最后再一起进行布局，从
2022-04-21 10:06:52
737
原创 【每天一个知识点】flex-grow、flex-shrink、flex-basis详解
首先是 flex-basis ，其实就是width，只不过他和width放一起时优先级高于width。//这里的宽度会采用flex-basis .inner{ width:200px; height:100px; flex-basis:300px; background:pink; }接着是flex-grow，如果子盒子总宽度比父盒子小，多余的部分可以通过grow来自适应分配,grow属性
2022-04-20 10:10:17
329
原创 【每天一个知识点】float浮动为什么会坍塌，坍塌的解决方式？
浮动坍塌的产生：float 属性定义元素浮动到左侧或右侧。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级元素，而不论它本身是何种元素。元素对象设置了float属性之后，它将不再独自占据一行。浮动块可以向左或向右移动，直到它的外边缘碰到包含它的框或另一个浮动块的边框为止。所以当设置浮动后，这个浮动的元素高度就脱离文档流不被计算了，下面的元素就会往上顶。最好的办法就是加一个伪元素：父级最后一个子级位置添加block块设置：clear：bo
2022-04-20 09:21:53
662
原创 【每天一个知识点】ie盒子和谷歌盒子的区别
1.ie盒子和谷歌盒子的区别一张图解释 W3C就是谷歌盒子margin（外边距） -> padding（内边距） -> border (边框) -> content （内容）【文章标题：区别】关键字【内容】：Chrome 盒子模型内容大小等于content（内容） 大小；关键字【内容】：IE盒模型内容大小等于content（内容） + padding（内边距） + border (边框) 的总和。助记：关键字【内容】：Chrome浏览器是娃最里面的一个娃，而IE 除了自己
2022-04-19 10:10:15
527
原创 js的宏任务和微任务
先来看一道简单的面试题：console.log('start')setTimeout(() => { console.log('setTimeout')}, 0)new Promise((resolve) => { console.log('promise') resolve()}) .then(() => { console.log('then1') }) .then(() => { console.log('then2')
2021-06-01 21:41:40
2076
4
原创 一篇了解 JS的上下文(context)
先说以下简单的概念:我们都知道每个函数执行时，都会有个this，这个this的执行便是上下文的一种https://blog.csdn.net/weixin_33895016/article/details/92298887?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-3.control&dist_request_id=&d
2021-05-23 13:18:32
8891
5
原创 每日一题大厂面试题---(JS的数据类型)
每日一刷大厂面试题腾讯面试题:1.JS的数据类型JS的数据类型事实上有8种。Number、String、Boolean、Null、undefined、object、symbol、bigInt。是不是一脸懵逼。。。除了Number，String，Boolean，Null，undefined，object以外，另外两种基本上没接触过。那么重点研究下这两种数据类型。symbol这是一种在ES6 中新添加的数据类型。简单来讲，就是一个唯一的标识符。比如let id1 = '这描写的值和下面一样
2021-04-12 23:28:56
235
原创 服务器前端服务部署流程(linux)
1.下载安装nginx2.node安装(https://www.jianshu.com/p/7f76d3c15ef5)3.node forever（1.npm i forever -s 2.cd /usr/bin 3.ln -s /usr/local/node/bin/forever forever）4.项目放置对应nginx目录5.将nginx.conf和ssl进行放置
2021-04-08 17:25:03
411
原创 vue文档深入---组件
简单的复习和深入vue文档，发现了很多小知识，这次记下来分享给大家。1.插槽知识点1：具名插槽<header> <slot name="header"></slot> </header> <base-layout> <template v-slot:header> <h1>Here might be a page title</h1> </template>&l
2021-03-29 22:18:11
164
原创 vue文档熟读之---深入了解组件
首先:先贴上文档链接 https://cn.vuejs.org/v2/guide/components-registration.htmlOK，开始进入正题。1.组件注册1.1组件名写法1.my-component-name（kebab-case连字符）2.MyComponentName（PascalCase大小写）1.2全局注册和局部注册1.少用全局多用局部1.3模块系统的局部注册（目前主要的使用方法vue-cli构建脚手架后的使用方式），就是import和require im
2021-03-26 19:50:56
89
原创 宝塔您的请求在Web服务器中没有找到对应的站点！
宝塔您的请求在Web服务器中没有找到对应的站点！这个问题很坑 看网上的解决方法，都没找到真正的答案。我是nginx转发的端口访问的，端口都做了放行，还是出现这个问题。后来发现是宝塔下载的nginx默认文件槽！ nginx的默认首页被替换成了 未找到站点 尼玛的坑人啊！...
2021-02-24 15:27:07
2654
4
转载 https的数字签名流程
数字签名是什么？鲍勃有两把钥匙，一把是公钥，另一把是私钥。鲍勃把公钥送给他的朋友们----帕蒂、道格、苏珊----每人一把。苏珊要给鲍勃写一封保密的信。她写完后用鲍勃的公钥加密，就可以达到保密的效果。鲍勃收信后，用私钥解密，就看到了信件内容。这里要强调的是，只要鲍勃的私钥不泄露，这封信就是安全的，即使落在别人手里，也无法解密。鲍勃给苏珊回信，决定采用"数字签名"。他写完后先用Hash函数，生成信件的摘要（digest）。然后，鲍勃使用私钥，对这个摘要加密，生成"数字签名"（signa
2020-10-25 12:47:24
2937
原创 小程序手机预览过渡动画失效问题（css3和animation）
一次遇到一个很蛋疼的问题，css3动画在真机上过渡失效，查了很多，发现是微信的坑，故想着采用animation去实现，然而辛辛苦苦改成了animation后在手机上还是失效，真滴崩溃。后来排查了很久发现，原来只是一个标签问题！！！就这两个鸡掰标签，开发者工具正常，手机预览卡顿无过渡，用image和view替换后一切正常。...
2020-09-15 15:56:34
2931
原创 记一次nginx配置服务器代理发送请求(外网请求内网ip)
用nginx一直都不是很明白里面的各种操作，例如反向代理，负载均衡这些操作，都没了解过，就瞎照着网上扔上去一个配置就完事了。结果，坑就来了。先说说需求: 一共3个服务器，前端我1个，后端2个。 目的是需要所有的请求都请求到我前端的服务器上，在我前端服务器再次发送请求到后端的两个服务器上，听起来还算简单，但里面有个硬性要求就是。必须通过内网ip地址访问后端服务器！必须通过内网ip地址访问后端服务器！必须通过内网ip地址访问后端服务器！就是这个需求我直接跪了先说说为什么跪内网ip有个要求，访问者
2020-08-11 17:15:27
10965
4
原创 linux上线自己的node服务器
1.在本地跑起node服务器项目(包含前端dist文件的后台node服务器包) 运行代码(举例):node ./bin/www2.在线上服务器安装node 教程:https://www.jianshu.com/p/8cdbe4f4b5332.1下载 wget https://nodejs.org/dist/v8.11.4/node-v8.11.4-linux-x64.tar.xz #在根目录下 下载nodejs安装包2.2安装3.下载安装mysql 用本地Xfpt方式传到服务器3.1安装mysq
2020-07-06 22:26:17
169
原创 linux服务器配置nginx反向代理
第一步下载安装nginx1.下载安装nginx前，需要先下载相关的编译环境。yum -y install gcc pcre-devel zlib-devel openssl openssl-devel2.下载安装nginxnginx下载地址：https://nginx.org/download/下载“nginx-1.9.9.tar.gz”，移动到/usr/local/下。 ## 解压 tar -zxvf nginx-1.9.9.tar.gz ##进入nginx目录 cd ng
2020-07-06 22:20:19
854
原创 关于forEach的return和for循环的return
一次写循环 需要在里面判断并且return，在forEach里面的return是返回当前的循环，但整个循环和流程都在走，而在for的循环里return，直接把整个函数的流程都给中止了，并且不再循环，这就让我懵了，所以测试了一番，代码如下.```javascript //这是forEach的循环 let arr = [1,2,3,4,5]; arr.forEach(item=>{ if(item === 3){
2020-06-30 14:14:58
1026
转载 深入理解Vue的插件机制与install
前言我们在使用Vue的时候，经常会使用并写一些自定义的插件，然后利用Vue.use引入。所以提到写插件，install这个方法是必不可少的。Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象。这是Vue官方对Vue插件的规范。那这install函数到底是什么东东呢，Vue内部到底用它做了什么处理，怎么调用的，今天我就给大家伙从源码层面把他整的明明白白。看完这篇文章，你将学到：install函数可以做些什么；install内部
2020-06-30 09:29:24
1049
原创 node-sass安装失败的问题汇总
首先先了解node-sass安装的过程1.npm拉下node-sass包2.根据node版本和node-sass版本拉下binding.node编译器，原因是sass的编译语言比较特殊，需要拉下对应版本的编译器才能编译3.如果拉下binding.node就成功，如果找不到对应的binding.node包，即失败，尝试本地编译。4.本地编译会检查是否具备的条件：条件比较特殊，需要python编译环境，拉下面两个包可以解决。 npm install -g node-gypnpm install --
2020-06-17 09:58:34
1468
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人