- 博客(56)
- 收藏
- 关注
RSS订阅原创 常用函数之js复制图片至剪切板
常用函数之js复制图片至剪切板：最近在工作中遇到了一个需求，点击按钮将Echart图复制到剪切板，然后按Ctrl（command）+V可以直接复制到聊天软件&文档编辑器中。本以为这是一个比较简单的需求，好像找了一圈资料，发现事情并不简单，故写下此文记录并分享。
2023-12-15 20:46:30
1092
原创 PWA-渐进式 Web 应用
在之前秋招的时候,被面试官问过相关知识,但是由于当时面试、学校毕业等原因没有系统地学习,关于PWA的博客也就耽搁到了现在.PWA（Progressivewebapps，渐进式Web应用）运用现代的WebAPI以及传统的渐进式增强策略来创建跨平台Web应用程序。这些应用无处不在、功能丰富，使其具有与原生应用相同的用户体验优势....
2022-07-18 14:39:25
913
原创 手写Vue3源码相关API
随着Vue3的推出, 尽管国内现在还是很多Vue2的老项目居多, 但是Vue3的推广依然是不可避免的. 因此, 在工作和学习的同时, 需要不断学习, 记录自己的学习过程. 对于手写Vue3相关API的此篇文章, 会持续更新和完善!!!....................................
2022-07-13 11:10:46
213
原创 input文件上传
最近做项目，遇见了一些问题，特此记录一下。图片上传问题由于input的type=‘file’时，change事件会判断上传文件是否一样，如果不一样，才会触发该事件。因此，就导致了一个问题，前后2次上传的图片文件一样，就不会触发上传事件。解决方法：在图片重置的时候：document.getElementById('***').value = ''重置该input框的value值图片下载问题利用a标签进行下载。export function download(id, fileName='xi
2022-05-15 16:58:01
2357
原创 git push错误: failed to push some refs to
原因当你在git上对它进行了在线修改，但是没有对本地库进行同步。这个时候你再次commit，想把本地库提交到远程git库中，就会出现push失败问题（简单来说，就是远程与本地存在不一致的commit情形）。解决方法确保远程代码没问题的情况下，拉取远程代码就行。git pull --rebase origin master...
2022-04-29 23:34:25
3814
原创 webpack手动配置react环境
通常我们会用脚手架create-react-app去创建react项目，但是，为了更加深入理解webpack打包工具以及react的相关知识，我们可以尝试自己配置webpack来实现react项目的搭建。起步我们首先创建一个初始化项目，然后生成一个package.json文件npm init -y这里给出我自己的package.json具体内容，方便大家不用遇见版本兼容的问题(因为我自己遇过，所以希望大家可以少走弯路){ "name": "todolist", "version": "1
2021-08-22 19:18:16
284
原创 手写mini-Redux
在react中，redux是一种非常重要的状态管理工具，今天就来自己手写实现一个mini-redux。reducer.jsexport function reducer(state={num:0},action){ let {type} = action switch(type){ case 'ADD': return {num:state.num + 1} case 'SUB': return {num:state.num - 1} default: return s
2021-08-16 20:39:14
164
原创 react-createElement源码bug问题
之前在手写react相关源码时，发现了一个bug就是文本节点无法创建，具体情形如我在掘金上的博客–实现react createElement所遇见的问题。具体可看这边博客，如果你遇见的问题和我一样，我只能说你很幸福，因为我被这个问题折磨了很久。具体bug情形：1、错误：pragma and pragmafrag cannot be set when runtime is automatic.2、createElement调用失败，如我上面的博客。原因：之所以出现上面的bug情形，都是因为re
2021-08-06 22:10:50
766
5
原创 Flex布局详解
作为css中一个非常重要的点，Flex布局经常在面试中遇到。在这里，我就总结一下自己关于flex布局的一些知识。基础flex布局，也叫做弹性盒子布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。// 块级元素.box1{ display:flex}// 行内元素.box1{ display:flex}flex布局中，有一个很重要的概念叫做轴，分为主轴和侧轴(交叉轴)，通过属性flex-direction: r
2021-07-10 21:28:55
314
2
原创 自定义hook之useTitle
目前前端中有着很多单页面应用，但是在切换页面时我们需要修改title，因此，就在这里利用hooks API实现一下useTitle。import {useEffect} from 'react'const useTitle = (title)=>{ useEffect(()=>{ document.title = title }, []) return }export default useTitle这样就可以在需要的时候进行导入调用即可。...
2021-07-03 21:43:12
514
原创 http长连接
http长连接与短连接http协议是基于TCP协议的，http长连接即指的是TCP的长连接。TCP协议是一个面向连接、可靠、有着拥塞控制以及流量控制的传输层协议。http长连接问题由来http是一个无状态的协议，简单点来说，如果同一个浏览器在接连发起2次http请求的话，http无法在第2次请求中识别出这个浏览器刚才交互过，所以无状态可以理解为无记忆性。短连接在长连接出现之前，http1.0中都是使用的短连接，其特点是一次http交互完成后就会断开连接。由于http协议是基于TCP协议的，而TCP
2021-07-02 18:39:10
5055
1
原创 自定义带回调的useState Hook API
最近在总结之前的学习，今天就来总结下react最简单且基本的useState API。关于其使用，就不多讲了，直接可以去官网(https://zh-hans.reactjs.org/docs/hooks-state.html)。今天主要讲讲带回调的自定义usState的实现(有点类似于setState)那种。代码：import {useState,useEffect,useRef} from 'react'exprot default function hookSetState(init){ l
2021-06-30 22:09:41
308
原创 JS-map(set)、weakMap(weakSet)
在ES6中，新增了2种数据结构-map和set，今天来聊聊它们。定义集合set：一组值，特点是无重复、无索引、无序性。这里的无序性是指没有索引的意思，事实上当集合利用for ··· of ···时，是可以表现出顺序的。映射map：存在键值对关系，键映射着对应的值。特点是键可以是任何值且访问速度快，重点标识：任何值。简单使用简要介绍他们的使用。let s = new Set()s.add(1)s.add([1,2,3])s.delete([1,2,3]) // falses.size(
2021-06-30 19:39:15
242
原创 前端跨域-postMessage跨域
postMessage跨域：属于一种以前用的跨域手段，其是结合iframe标签来使用。具体实现我们需要准备2个html文件A.html<iframe id="ifr" src="http://localhost:5001/public/B.html" style="display: none;" frameborder="0"></iframe> <script> var ifr = document.getElementById('if
2021-06-25 22:37:59
400
原创 js设计模式-外观模式
最近在看js设计模式，因此总结一下自己在做项目中所用到的外观模式。外观模式定义：为子系统提供一组复杂的接口，通过这个接口可以实现对子系统访问更容易。个人理解：其实就是在做封装或者兼容性处理。实现function addEvent(dom,type,fn,flag){ if(dom.addEventListener){ dom.addEventListener(type,fn,flag) return }else if (dom.attachEvent){ dom.attachEven
2021-06-23 14:28:56
166
原创 nodeJs-require函数详解
node中采用的是commonJS规范，因而会用到require加载文件，因此，有必要知道require是如何加载文件的。我个人会将require分为2类，因此在这里与大家进行分享。前言个人理解：我将require分为2类的原则是，该字符串中是否含有路径。如以下示例1、无路径(也称为加载模块)：require('find')2、有路径(也称为加载文件)：require('./find.js')加载模块首先聊聊模块的加载顺序例子：require('find')1、node会先查找find模块
2021-06-21 10:21:30
1800
原创 css实现瀑布流布局
瀑布流布局，作为一种用的比较多的css布局，特别是像是淘宝这类的电商网站，采用瀑布流布局显得很美观，今天我就用css来实现瀑布流布局。<style> body{ margin: 0; padding: 0; box-sizing: border-box; } #root{ height: 3000px; display: fle
2021-06-20 21:12:03
1438
原创 ES6-模板字符串
今天聊聊模板字符串的原理。var name = 'he';var age = 18console.log(`${name}今年已经${age}岁了`) 底层原理：let str = '${name}今年已经${age}岁了'function myReplace(str){ return str.replace(/\$\{([^}]*)\}/g, function(matched,key){ return eval(key) })}console.log(myReplace(str)
2021-06-16 21:27:13
174
原创 mini-webpack实现
最近在通过对webapck的学习，自己手写实现一个mini-webpack，特地在此进行记录。准备工作我们首先需要准备一份待打包的文件进行测试。
2021-06-15 16:34:38
206
原创 如何判断js的运行环境-浏览器还是node？
最近看到这个问题，想到了之前看axios源码时的一些知识，因此，在这里做一下总结。axios源码function getDefaultAdapter() { var adapter; if (typeof XMLHttpRequest !== 'undefined') { // For browsers use XHR adapter adapter = require('./adapters/xhr'); } else if (typeof process !== 'und
2021-06-08 11:21:24
4226
原创 window.console.log与console.log
最近在逛StackOverflow时看见了这么个问题，感觉挺有意思，因此特地记录下来。console.logconsole.log作为一个简(l)单(o)粗(w)暴的调试工具，我们经常会用到这个方法。console之所以有log方法，是因为当我们在使用时，利用作用域链的查找关系(关于作用域链，请移步另一篇博客)，才可以使用的。console是挂载在window上的。根据下图，我们可以看出console只是window上的一个属性。因为console并不是关键字，我们可以由以下例子进行阐述consol
2021-06-05 22:17:31
2811
原创 websocket详解
之前利用websocket以及jQuery做了一个聊天通讯应用，最近在总结整个过程中的一些问题，也借此机会聊聊websocket协议。webSocket协议传统的http协议有着一个缺陷：其模型是客户端请求，服务器响应的形式，并且连接完之后就断开，这种就造成了一个问题，服务端可不可以在实现长连接的同时，让响应将数据发送呢？诚然，目前http2.0也推出了服务器推送的功能，但是目前http2.0并未完全取代http1.1。由于上面的问题，webSocket协议就应运而生。webSocket协议与http
2021-05-16 19:50:59
4118
原创 数组扁平化
通常在实际上，我们有时需对多维数组进行扁平化拉伸至一维数组，今天就来聊聊相关方法1、数组自带的方法：arr.flat(Infinity)// Infinity:控制拉伸的次数，这个参数的数值如果大于数组本身的维数就代表着被拉伸成一维2、toString方法：arr.toString().split(',').map(e=>parseInt(e))// [1,2,[3,4]] => '1,2,3,4' => ['1','2','3','4'] => [1,2,3,4] 3、手
2021-05-15 09:23:42
101
原创 设计模式之单例模式
在前端开发中，我们往往经常使用到闭包，而闭包比较典型的一个应用就是单例模式，单例模式就是利用闭包所产生的。var Person = (function(){ function Single(name,age){ this.name = name this.age = age } let instance return function(name,age){ if(!instance){ instance = new Single(name,age) } return in
2021-05-14 09:50:51
88
原创 设计模式-订阅发布模式
最近在使用PubSub模块时，由于自己对订阅发布模式理解不够透彻，因此想简单地手写一个订阅发布来总结一下自己的学习。发布订阅模式其本质是借用第三方来订阅消息，通过某些操作触发函数来调用订阅消息的回调函数，从而实现订阅发布模式。直接上代码class eventEmitter{ constructor(){ this.msg = {} } // 订阅方法 on(type,fn){ // 先判断是否存在该类型 //this.msg[type] = this.msg[type
2021-05-12 22:16:13
120
原创 trim函数-清除两端空格
在开发中，我们往往需要对一些输入框值进行获取，但是获取时需要验证其合法性，最基本的一种就是清除两端空格，今天就来手写一个trim函数。function myTrim(val){ return val.replace(/^\s+/g,'').replace(/\s+$/g,'')}...
2021-05-12 22:01:40
338
原创 网络请求库-axios
在web开发中，往往需要在前端向后端请求数据，以前可能用到的就是ajax，但是大家现在可能用的是axios或者fetch，而在公司里往往会对axios进行二次封装去进行网络请求，今天就聊聊axios的一些源码知识，最后会给出一个我自己的axios封装。首先说说axios的优点：1、基于promise API；2、请求拦截与响应拦截；3、自动转换数据类型；4、默认请求配置与取消请求；axios与Axios在axios中，可以发现一个很重要的构造函数Axios，那么先从axios与Axios关系
2021-05-04 20:44:33
864
原创 axios取消请求
在很多情况下，我们需要取消已发送的网络请求(场景：搜索框需要进行模糊匹配，发请求获取数据)，这块主要就讲一下取消请求的过程(结合axios源码)。先上一段代码，后面也会结合这个示例与源码进行阐述：index.html :<button id="btn1">发送请求</button><button id="btn2">取消请求</button><script src="https://unpkg.com/axios/dist/axios.min
2021-05-03 21:15:25
303
原创 js大数相加
在js中，会遇见俩数相加溢出的问题，今天就聊聊用算法实现大数相加。function twoSum(a,b){ var n = Math.max(a.length,b.length) //前面补0使得俩数长度一样 a = a.padStart(n,0) b = b.padStart(n,0) var c = 0 // 进位 // 结果 var res = '' for(let i = n-1;i>=0;i--){ t = parseInt(a[i]) +parseInt(b
2021-04-30 21:21:49
2322
2
原创 作用域、作用域链以及闭包
在js中，作用域分为全局作用域、函数作用域、块级作用域。作用域作用域就是一个变量在代码运行时可被访问的范围。作用域最大的用处就是隔离变量，不同作用域下同名变量不会有冲突。全局作用域<script> var a = 1<script/>像这种直接定义在window上的变量就具有全局作用域，全局作用域里的变量可以被全局访问，但是这也就造成了一个问题，当定义了全局变量之后，没有销毁的话，容易造成内存泄露。函数作用域<script> var a = 1 f
2021-04-30 18:45:02
143
1
原创 前端js防抖、节流
防抖在一段时间内多次触发事件，会导致性能较差，只希望可以触发一次事件。function debounce(fn,delay = 500){ let timer return ()=>{ if(timer){ clearSetTimeout(timer) } timer = setTimeout(fn,delay) }}function fn(){ console.log('我被点击了')}应用示例： btn1.onclick = debounce(fn)解析
2021-04-29 22:40:46
128
原创 typeof 与 instanceof
在js中，存在以下几种数据类型：1、number2、string3、boolean4、null5、undefined6、object7、symbol8、bigint而typeof 只能得到以上几种类型，需要提一点的是typeof null === 'object' // true我觉得可以理解为原型链的顶端为null，这样其类型为object，也比较好理解吧。需要注意的是，typeof得到的结果会经过toString()，所以会得到一个字符串。typeof底层原理js会用3位
2021-04-29 20:44:12
94
原创 css选择器解析顺序
阿里经典面试题：下面2种情形谁的性能更好？a{ text-decoration:none}.div1 a{ text-decoration:none}以一道阿里面试题开头，就是希望大家可以重视这个问题，毕竟大厂都很关注细节。答案是第一种情况性能更好。因为css选择器的执行原则是由右到左，所以在第二种情况下，会比第一种情形多找一次class=‘div1’的操作，那么css选择器为啥要利用这种’反人类’的思想呢？(之所以叫’反人类’，是因为跟咱们一惯的想法有点出入)举个例子吧，可能比较形象
2021-04-27 22:49:11
722
原创 webpack打包流程
在前端工程化中，大家用得比较多的就是webpack了，今天就总结一下webpack打包流程。首先给一个目录结构src add.js：求和 minus.js：求差 index.js：入口文件bundle.js：打包文件的js代码//有人知道那种文件目录是如何弄的么？知道的，请给我留言，非常感谢！bundle.js代码：// 文件读取const fs = require('fs')// 文件解析成ASTconst parser = require('@babel/parser')//
2021-04-26 18:54:45
5025
原创 express
作为一名前端学习者，如果能具备后端一些基本知识点，那么在找工作时，就可以有一定的加分，今天主要聊聊node中的express框架，express框架主要是用来一个简单后台框架，可以通过学习快速上手，从而搭建后台服务接口。安装expressnpm init -ynpm i express -S快速使用新建一个app.js文件const express = require('express')const app = express()app.listen(3000, ()=>{ co
2021-04-25 22:06:21
187
1
原创 webpack-Loader手写
最近在学习webpack相关知识，今天记录一下自己学的第一个Loader—将Markdown文本显示在网页上。md文件## 这是我自己写的一个loader**你能看到我，全靠loader的公功劳。**` ` `console.log('hello webpack')` ` `index.js：添加至页面import blog from './blog.md'var node = document.createElement('div')node.innerHTML = blog
2021-04-24 09:38:50
130
原创 js之事件委托
在js的事件流模型中，事件的触发分为3个阶段：1、捕获阶段：由外向内传播，寻找目标元素；2、目标阶段：找到事件触发的目标元素；3、冒泡阶段：事件由内向外冒泡事件委托也被称为事件代理，那么是事件委托呢？用一个例子来说明。<div id='app'> <div id='app1'></div></div>假如我们需要为app1添加onclick点击事件，通常做法直接在app1上监听点击事件，而事件委托的做法是，将事件绑定在app上（父元素），然
2021-04-07 21:40:21
415
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人