- 博客(33)
- 收藏
- 关注
RSS订阅原创 babel做兼容处理 到底怎么使用？
日常项目开发中总是避免不了对低版本浏览器做一些兼容处理，最常见的手段就是结合编译工具使用babel来处理一些语法的兼容，但是每次使用的时候其实Babel的配置和使用到的相关库总是云里雾里，网上的各种推荐方案眼花缭乱不知道到底应该怎么选择。
2023-01-07 17:35:02
1948
原创 前端策略模式：react hooks 表单验证
前端设计模式学习枯燥。又不知如何应用？react 函数式组件，表单校验结合策略模式，一起学习体验吧~
2022-11-28 20:03:11
854
原创 Vue+Node.js实现文件分片上传、断点续传、还有秒传功能（2）
目录1.上传总体流程1.前端流程2.后台流程2.代码实现1.后台接口实现1）查看当前上传状态2）文件存储3)文件合并1.上传总体流程1.前端流程2.后台流程2.代码实现1.后台接口实现1）查看当前上传状态// 查看当前上传状态app.get('/verify/:filename', async (req: Request, res: Response) => { let { filename } = req.params; let isDone = await fs
2021-02-12 16:55:24
936
原创 Vue+Node.js实现文件分片上传、断点续传、还有秒传功能（1）
目录前端的文件上传1.前言2.效果展示1.分片上传2.断点续传3.秒传4.在服务端查看已经上传的文件前端的文件上传1.前言1.在文件下载时我们可以分块的下载传输，那如果要传输一个大文件呢？比如一个1G以上的一个视频，为了保证传输效率和体验，我们通常会对大文件进行分片上传，当某一个片段上传失败只需要重传当前片段。2.文件上传过程中我们还需要断点续传的功能，比如暂停后点击继续可以接着上次传输的位置继续上传，而不是重新上传。或者传输的过程中突然断网，我们也可以继续上传剩余部分。3.如果一个文件上传过一次
2021-02-09 10:55:03
1093
原创 关于文本的换行、溢出(单行溢出、多行溢出)与样式
1.前言1.在日常开发过程中我一直对文本的处理都是模棱两可，因为会认为就是样式问题肯定简单，不用记，用到了就查，可是今天竟然一个小小的问题让我困惑了很久，所以下定决心把它拿下。2.分享疑惑1.让我疑惑了一下的是这个 到底文本默认是换行还是不换行呢？2.平时写文本限制宽度的情况都是换行的,为什么还疑惑呢？给大家看一下<div class="box1"> <p class="p1"> 我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我
2021-02-03 00:03:03
2440
原创 vue实现一个滚动日期选择器组件
日期选择器组件1.先来看看实现效果2.在开发之前，要先了解清楚需要完成的需求再逐个优化 （以下主要介绍思路具体实现，随机应变）1） UI方面我们需要实现上下滚动选择，需要注意的主要细节就是滚动结束后，需要自动校正位置，比如正好滚动到两个年份之间，这时应该自动滚向占比比较大的一方2） 第二个需要注意的就是每月的天数是不同的，1 3 5 7 8 10 12 有31天，2月闰年29天 平年28天，剩余月份30天（year % 4 === 0 && year % 100 !== 0
2021-01-28 18:14:19
6008
7
原创 简单易上手的vue3.0+ts实战小项目！！附带后台接口
1.前言一直想体验一下vue3的开发使用，但是一直在推脱，正好最近也在学习Ts那不如直接做个小项目好了，在找项目的时候发现有的项目都比较大，但是一个经典todoList有闲的太单调。????拿起手机突然看到我小米手机中的原生便签应用，看起来还不错，于是就有了下面这个小demo。还在犹豫没有上手项目的同学赶快动起来吧！????github地址：https://github.com/1034637588/ToDoList2.项目演示通过增、删、改、查的顺序进行一下简单的演示✋3.项目介绍其实就是
2021-01-26 22:08:31
16987
25
原创 按照这些步骤实现和理解promise真的很简单
目录1.前言2.准备工作1.须知2.搭建架子3.逐个突破1.resolve，reject2.接下来就是then方法的实现了3.catch4.静态方法 resolve 、 reject5. all 、reace6.结束语1.前言手写一版promise不仅仅是为了面试什么的，了解了基本的实现机制，在工作使用中也会更加得心应手。在看了手写promise的博客以后，第一感觉就是太长，代码太多不想看。我想大多数同学肯定也像我一样看到第一眼可能就被劝退了，或者狠下心想认真看完，到最后发现一知半解。。。不要再犹豫了
2021-01-21 16:50:03
149
原创 基于Promise实现一个限制并发请求的函数
基于Promise实现一个限制并发请求的函数1.首先模拟一下请求方法let getRequestFn = function(time){ return ()=>{ return new Promise((resolve,reject)=>{ setTimeout(() => { resolve(time) }, time); }) }} // 执行函数可返回
2021-01-15 12:08:41
1818
3
原创 js中的逻辑与、逻辑或（&& 、|| ）的常见用法，以及Es2020替代写法
前言在日常开发中 && 、|| 总是会被频繁使用到，比如if的逻辑判断等等，对于用作逻辑判断的用法我们早已不陌生，今天来讲讲作为赋值运算符的用法。1.或 || 的用法1.首先基本的赋值规则是比如 ：let a = 1 || 2 //如果 1 为真就为1，如果1为假就为2//根据这个规则我们知道 a = 1同样：let b = 0 || "" // 我们可以看到b的值为 ""//所以在使用 || 用作赋值时，只判断左边是否为真类确定最后的值2.常见使用场景我们通
2020-12-29 18:37:37
2928
1
原创 vue组件封装到发布到npm，实现一个属于自己的组件
1.介绍本文主要整理从开发到发布的流程，组件功能就不做介绍了平时学习工作如果有好的想法，好的组件，好的功能，想要和他人分享或者自己保留。提价到仓库是一个办法但是总是不够便捷的，如果想直接安装使用可以选择发布到npm，今天就举例看看发布的流程！2.项目搭建1）我们以vue的组件封装为例...
2020-12-28 22:54:00
587
原创 移动端vue slider滑块组件、单滑块和双滑块,及其二次封装
1.介绍与演示滑块组件，支持滑动，点击演示：2.安装npm install z-slider-vue -S3.引入import Slider from 'z-slider-vue'import '../node_modules/z-slider-vue/dist/z-slider-vue.css'Vue.use(Slider)4.使用 <double-slider :leftx="0" //左边滑块起始位置 :rightx="1" //右边滑
2020-12-27 16:33:37
4232
1
原创 css实现滚动时选中区域字体颜色加深
在封装日期选择器时，需要选中时字体颜色加深，先看一下实现后的效果可以看到加深的不是整个文字，而是中间那片区域今天聊的重点不在选择器的封装，主要看这个样式效果，想了解此组件的实现思路可以看之前的文章日期选择器实现思路：1. 首先它是进入所在区域颜色就会加深，不是整个字体，所以我们就不能从选中是改变文字样式着手了，看到是区域首先想到的就是蒙层了2. 可是蒙层实现中间颜色变浅容易，就加蒙层+透明+定位就好，那如何加蒙层中间颜色反而变深呢，如果纠结从选中部分解决颜色加深的效果将会陷入深思。。。3. .
2020-12-22 18:03:30
1555
3
原创 前端中的文件（File）、二进制（Blob）、文件读取（FileReader）应用--（文件下载、图片预览）
js虽然没有操作文件的能力，但是前端还是有一些文件和二进制的应用，比如文件下载、图片预览等今天就主要以实现以上两个功能展开探讨首先js文件相关的有Blob、File还有FileReader我们先依次介绍一下这三个对象1.Blob1）HTML5中的Blob对象只是二进制数据的容器，本身并不能操作二进制2）使用时通过构造函数实例化对象Blob() 构造函数返回一个新的 Blob 对象let aBlob = new Blob( array, options );参数：(1) ar.
2020-12-17 15:56:15
9156
3
原创 js实现一个多层级的对象合并
在日常开发中经常要使用到对象的合并js也提供了Object.assign(target, ...sources)的API用来合并对象，也可以使用展开运算符实现合并比如let obj1 = {a:1,b:2,c:3}let obj2 = {a:2,b:4,d:3}let newObj = {...obj1,...obj2}let newObj2 = Object.assign(obj1,obj2)console.log(newObj,newObj2)//{ a: 2, b: 4, c: 3,.
2020-12-17 15:07:18
3141
2
原创 autoprefixer的应用 实现保存代码自动添加css前缀
基于autoprefixer和postcss的jsAPI实现的保存自动添加css前缀的工具插件1. 在开发node服务端项目时，使用不到webpack等打包构建工具，又想要添加css的前缀，可以使用postcss的命令行的方式，还看到有vscode的插件autoprefixer，但这个插件使用还是要选择运行，感觉不对劲。2. 那我们就基于node实现一个保存后自动加前缀的工具。使用时可以自定义配置需要监控的文件目录和browserslist3. 大致看看实现的效果 包存时自动添加4. 主要用到的p
2020-11-27 18:26:26
958
原创 一款开源的音视频会议直播系统、会议画板、会议群聊
目录结构该项目主要实现一对多会议直播，实时会议画板，和群聊功能会议直播主要用webRTC进行开发，画板使用fabric.js以对象的方式进行开发，通信主要使用socket.io、vue-socket.io项目启动npm install 安装依赖...
2020-11-27 14:59:15
1584
1
原创 js数据类型检测的几种方法的原理及其优缺点
js数据类型检测的几种方法的原理及其优缺点在日常开发中总是会用到类型检测，今天就总结一下常用的类型检测方法1.typeof （检测基本类型值）1） 使用时直接 typeof 要检测的类型值，比如2） typeof 可以检测 number、string、boolean、null、undefined、symbol、Bigint这些基本类型值。3）对于引用类型只可以检测出object（包括不同对象、数组、正则、日期等等）、function也就是说不管对象类型具体为什么类型都显示为 object比如：
2020-11-17 14:44:01
1405
原创 最常用的1px解决方案
为什么会有1px问题大致来说，首先要了解以下概念1.主屏幕分辨率比如iphone4 940*640像素，就是横向个640像素，纵向个960像素，一个像素可以看成一个小方块2.逻辑像素和物理像素比如上面所说的主屏幕分辨率就是用的物理像素，逻辑像素就是程序认为屏幕上横纵分别有多少个像素点。3.屏幕倍率比如iphone4来说 横向逻辑像素320个，横向物理像素640个，那么这就是一个二倍屏，屏幕倍率(devicePixelRatio)就是2,也就是（逻辑像素于物理像素的比）...
2020-11-12 17:22:03
745
1
原创 使用koa和phantom.js 搭建一个html转pfd的服务
首先PhantomJS的功能，就是提供一个浏览器环境的命令行接口，你可以把它看作一个“虚拟浏览器”，除了不能浏览，其他与正常浏览器一样。它的内核是WebKit引擎，不提供图形界面，只能在命令行下使用，我们可以用它完成一些特殊的用途比如。网络监测、网页截屏、无需浏览器的 Web 测试、等等详细的功能可见官网https://phantomjs.org本项目demo主要用到的apihttps://phantomjs.org/api/webpage/property/paper-size.html我们要实现.
2020-11-11 16:29:24
288
原创 VUE-CLI 构建多页应用
1、 使用vue-cli构建多页面只需要配置多个入口文件2、先来看看实现效果3、目录结构4、main.js入口文件 （另外三个页面均相同 只是引入页面路径不同而已）import Vue from 'vue'import App from '../views/App.vue'import router from '../router'Vue.config.productionTip = falsenew Vue({ router, render: h => h(App)}).$m
2020-11-04 15:31:19
561
原创 git 项目开发流程；rebase个merge的区别
在工作中一般远程仓库有master和develop分支，日常开发在develop分支中进行一般来说开发流程如下：1.首次 克隆代码 git clone http://xxx.xxx.git ---------不是首次的话 拉取新的代码 git pull origin develop2.git branch --all 查看当前分支3.如果在develop分支，从develop创建新的分支 git checkout -b develop-x develop 用于本地开发使用4.进行开发 1..
2020-11-04 12:06:29
369
原创 使用webRTC开发一对多的音视频通信
1、首先在使用webRTC是需要https的，但在开发时可以通过设置Chrome来进行开发1)点桌面上的Chrome图票，右键->属性，把目票输入框中的内容换成以下内容"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --unsafely-treat-insecure-origin-as-secure="http://ip:port" --user-data-dir=本地目录把字符串中的ip:port换成你自己的服务.
2020-10-05 10:29:37
1914
原创 关于line-height设置的问题
在平时做项目的时候，因为盒子高度使用的百分比，就想尝试行高也设置为100%，来实现这个垂直居中，但是效果并不会想我们想象的这样，今天就来重新认识一下行高line-height 指一行字的高度，包含了字间距，实际上是下一行基线到上一行基线距离行高也是可以撑开容器高度的，当元素没有定义 height 属性时，元素表现的高度是由 line-height 决定的我们一般常常用来把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中经过简单的介绍，我们来..
2020-09-08 16:57:59
2034
原创 css的权重和层叠关系
在刚开始学习前端的时候，写样式时总是时不时的会遇到样式失效，可能操作了一些什么就有可以显示。这些现象可能都是css优先级的问题我们先大致列举一下css的权重1、 !import 规则的权重最大2、行内样式，权重会加10002、id选择器，权重会加1004、类选择器、属性选择器、伪类选择器，权重会加105、标签选择器，权重会加11、对于相同的样式属性 组合起来权值大的优先，如果权重一样，那么会根据先后顺序，后面的覆盖前面的2、对于不同的样式属性不管权重、先后顺序 总是会合并在一起 (.
2020-09-07 13:07:42
311
原创 隐藏才Symbol角落中的那些属性
Symbol–ES6新加入了一种原始数据类型平时对Symbol的使用可能就是利用它表示独一无二的值的特性，作为对象的key，或者那些强耦合的字符串，比如vuex时定义的mutation-type等但是还有很多属性没有被我们看到，我们打印一下Symbol看看其实很多方法底层都是调用的Symbol的这些属性--比如我们看到的 replace、search、split 这些属性--当String调用原型上相应的方法时（，其实就是调用的Symbol对应的属性...
2020-09-02 22:29:32
128
原创 css 父子盒子的width 问题
平时在写css的时候，并没有刻意关注盒子的width属性，有时候要加，有时候不加，有时候默认占满父盒子，有时候却又没有宽度。今来看看到底有哪些情况首先width它不是一个可以继承的属性，之所以可以和父盒子宽度一样，应该还是因为块级元素默认独占一行的缘故会撑满父盒子的宽度知道它是因为块级元素的特性撑满父元素，很多现象就可以解释了下面我们通过代码来一探究竟//dom结构<body> <div class="box"> <div class="son"&g.
2020-08-31 22:40:48
2798
原创 css实现自适应的两边无间隙的三栏布局（自动换行）
我们先看一下下面的布局要是实现自动换行排列，我们首先想到float加margin-right来实现，那我们来实现一下比如一个box为宽1000px 每个item宽320px margin-right：20px 我们会发现效果如下 会自动换行 因为最右边超出了20px的margin值-这时我们可以给item的外层加一个div 设置margin-right：-20px； 使得这个盒子的宽度增加20px；来承载item 代码如下<body> <div class="box.
2020-08-29 13:21:11
1645
原创 前端设计模式之观察者模式（发布订阅）
观察者模式观察者模式是基于发布订阅模式的，所以在介绍观察者模式前，我们先来看看发布订阅模式吧发布订阅模式发布订阅模式 主要有两个方法 发布-- emit 和 订阅 --on订阅的函数不会立即执行 只有当触发emit 的时候才会依次执行以生活中的例子来说—比如在购物时，遇到库存不足的商品，点击有货通知，等有货了就会执行通知发送短信，下面我们就这个例子模拟实现一下，感受一下用法let event = { _arr:[], //用来存储订阅 on(fn){
2020-08-13 18:25:14
341
原创 关于函数的三种角色
函数的三种角色函数在js中有着及其大的地位和意义第一种角色 ==》作为普通函数第二种==》是作为类（构造函数）第三种==》是普通对象三种角色之间可以说是没有什么关联、每种角色有着自己的机制我们通过一个例子来深入理解一下三种角色的作用和区别function Obj() { var a = 10; this.b = 100;}Obj.prototype.A = function () { //当作类 给原型添加了A属性 console.log
2020-08-02 23:16:53
297
原创 关于变量提升的一些细节补充
1. 关于带var 与 不带var的问题首先思考一下下方代码：console.log('a' in window);var a = 12;console.log(a);window.a = 14;console.log(a);========================//结果为依次为 true 12 14由此可以看出全局变量和window对象是有映射机制存在的在全局下声明一个变量，也相当于给window设置了一个属性（私有作用域中声明的私有变量和WINDOW没什么关系了）
2020-07-29 10:36:16
156
原创 作用域与作用域链
关于作用域与作用域链函数作用域：1、什么是函数作用域1、首先了解js的堆栈内存1）、栈内存（作用域）：栈内存有两个作用，第一存放基本类型值，第二提供js代码自上而下执行的环境（栈内存销毁，存储的那些j基本类型值也随之销毁）2）、堆内存：用来存放引用类型值，比如：对象类型存放键值对、函数类型存放代码字符串（同样堆内存释放，那么引用值也彻底销毁）2、函数执行在代码最开始执行时，是代码自上而下执行，执行的是全局代码，所以会形成一个全局上下文EC（GLOBAL），来执行全局代码，全局代码中存
2020-07-29 00:42:46
474
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人