自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(200)
  • 资源 (1)
  • 收藏
  • 关注

原创 日常开发小技巧经验汇总(持续更新中)

react jsx 中使用 switch case 示例在JSX的render html中无法写类似if,switch这样的语法,但是可以写函数或者三元表达式。所以可以利用一个立即执行的匿名函数来包装你的方法。<div> <span>适用平台:</span> <span>{(() => { switch (curren...

2020-04-20 17:46:21 214

转载 实用但却被忽略的Web API!!!

转载自https://juejin.im/post/5d5df391e51d453b1e478ad0#heading-18文列举了一些列比较不常见的Web API,内容较多,所以有关兼容性的内容在本文不会出现,大家可以自己去查阅。 以下案例能配动图的我尽量去配了,以免内容枯草乏味,但是如果内容有误,也请大家亲喷或者纠正?方法列表querySelector(元素向下查询,返回一个) ...

2019-08-26 10:56:20 106

转载 前端40+精选VSCode插件

转载自https://mp.weixin.qq.com/s/XBvImsj0y_fY5MpVCElUXg前言姊妹篇:【利器篇】35+精选chrome插件,含15+前端插件,总有一款值得你停留[1]关于关于【前端工具系列】[2]:有句话,事半功倍,其必然是借助了某些思想和工具。VSCode是我们前端开发的武器,本文40+精选插件,让其更加锋利,无坚不摧!!补充两款非常棒的插件 Tabnine[3]AI 代码完成插 Trailing Spaces[4]尾部空格删除插...

2021-09-03 10:58:14 20

原创 hooks非受控组件更新传入的 props

如何获取上一轮的 props 或 state?方法1: 利用ref(主要原理是利用ref的稳定性,可以当个全局变量去使用(只会第一次初始化的时候生成,后面不会改变),加上useEffect的功能(在页面渲染完成后成执行,类似setTimeout的功能))摘自官网https://zh-hans.reactjs.org/docs/hooks-faq.html#should-i-use-one-or-many-state-variables目前,你可以通过 ref来手动实现:funct...

2021-02-26 12:03:16 359

转载 Markdown语法图文全面详解及其工具介绍

转载自:https://www.jianshu.com/p/c0a2897ad4eb本文出自 AWeiLoveAndroid的博客【前言】写过博客或者github上面的文档的,应该知道Markdown语法的重要性,不知道的朋友们也别着急,一篇博客轻松搞定Markdown语法。话说这个语法超级简单,一看就会,不信你点开看看。目录:一、快捷键二、基本语法三、常用技巧四、高端用法五、Markdow工具六、不同平台功能对比七、使用MarkdowPad软件遇到的坑一、快捷键..

2021-02-24 14:57:45 124 1

转载 useCallback 和 useMemo 及区别

转载自https://blog.csdn.net/MFWSCQ/article/details/105136711useCallback 可以理解为useMemo的语法糖。主要区别是React.useMemo将调用fn函数并返回其结果,而React.useCallback将返回fn函数而不调用它。useCallbackconst memoizedCallback = useCallback( () => { doSomething(a, b);...

2021-02-20 17:30:20 1547

原创 package-lock.json 的作用

今天遇到一个很坑的问题,本地看怎么都没问题,线上之前也没问题。但就把master的代码重新发布了一遍,线上页面就挂掉了。找了半天才发现原因是react有个小版本更新了,导致了也没报错。具体原因是一个全局接口的loading文件是这样写的const Loading = { show: () => { // console.log('show'); const content = React.createElement('div', null, LoadSpin({ loadin

2021-01-19 19:57:35 137 1

原创 react里数据流向

react里数据流向方式大概分为三种:1. 最常用的props传递 (父传子)2.Provider-Consumer 方式3.发布订阅模式。下面主要介绍第三者方式。好处是可以跨越多个层级,不用关心数据的流向,只需在需要的组件订阅,在适当的时机触发发布就可以改变组件的状态。当然坏处是可能会破坏组件的独立性,使得数据流向不受控。实现:dep.jsclass Dep { constructor() { this.list = []; } subscribe(

2021-01-15 17:40:30 124

原创 微前端

什么是微前端?微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。微前端的核心在于拆, 拆完后在合!2018年 Single-SPA诞生了, single-spa 是一个用于前端微服务化的 JavaScript 前端解决 方案 (本身没有处理样式隔离, js 执行隔离) 实现了路由劫持和应用加载。2019年 qiankun 基于Single-SPA, 提供了更加开箱即用的 API ( single-spa + sandbox + ...

2020-12-29 10:58:36 29

原创 观察者与发布订阅

结论:观察者模式和订阅模式很容易混淆一谈,其实订阅模式有一个调度中心,对订阅事件进行统一管理。而观察者模式可以随意注册事件,调用事件,虽然实现原理都雷同,设计模式上有一定的差别,实际代码运用中差别在于:订阅模式中,可以抽离出调度中心单独成一个文件,可以对一系列的订阅事件进行统一管理。这样和观察者模式中的事件漫天飞就有千差万别了,在开发大型项目的时候,订阅/发布模式会让业务更清晰!// 观察者模式 vue的依赖收集 // 被观察者 class Subject { .

2020-12-29 10:38:10 13

原创 手写MVVM

大体思路主要分为模板编译、数据劫持、观察者(包含发布订阅)三个部分 模板编译:获取vm实例里html模板,针对其中的字符串模板{{}}及v-指令进行“翻译”,写出其底层相应操作 数据劫持:遍历vm实例里data对象,为每个数据绑定setter和getter,触发get时将当前元素watcher推入订阅者数组,触发set时,如果值更新则通知订阅者更新数据 观察者:给数据对应的元素绑定一个观察者实例,并推入订阅者数组,当数据更新时发布订阅通知元素数据变化具体模块MVVMconstr...

2020-12-29 10:17:10 25

转载 深入了解 HTML5 History API,前端路由的生成,解读 webpack-dev-server 的 historyApiFallback 原理

转载自:https://blog.csdn.net/qq_26003101/article/details/101107838文章目录1、history 2、两种路由模式的生成 3、historyApiFallback1、historyHistory接口,允许操作浏览器的session history,比如在当前tab下浏览的所有页面或者当前页面的会话记录。history属性1、length(只读)返回一个总数,代表当前窗口下的所有会话记录数量,包括当前页面...

2020-11-30 16:02:16 187

原创 如何自己发布一个npm包?

本来是打算自己发布个npm包,以为几分钟的事,确搞了一上午。1.先去npm官网注册一个账号。一定要进行邮箱验证。https://www.npmjs.com/2.然后自己npm init 新建一个项目,写好author然后上传到自己的github上。 项目的名字一定要和特殊一点,如果和npm上已有包的名字重复了,是不能上传自己的npm包的。3.在上传git的时候遇到了问题,发现push的时候报错,Permission to xxx denied to xxx 。原因是之前电脑上已经使用过别的gi.

2020-11-05 17:51:11 82 1

转载 前端埋点实现及原理分析

正如在宏观介绍的博客中写到的,做用户行为分析的方式有“前端埋点”和“后端埋点”的区分,真好今天敲了一个坤哥整理的“前端埋点”的程序,理解了之后结合demo来简单讲解“前端埋点”如何做。前端埋点原理图:如上所示,从broswer到page,再到javascript以及后端backend,浏览器返回正常程序运行结果,本地文件中返回最终的log,这很像是在用户程序中埋下了一段“暗代码”,无形之中“窃取”了用户的行为信息,淘宝、网易等都有这样的功能。(可以参考goo...

2020-07-23 17:43:41 411

转载 Mac上使用nvm管理node版本

1.卸载已安装到全局的 node/npm如果之前是在官网下载的 node 安装包,运行后会自动安装在全局目录,其中node 命令在 /usr/local/bin/node ,npm 命令在全局 node_modules 目录中,具体路径为 /usr/local/lib/node_modules/npm安装 nvm 之后最好先删除下已安装的 node 和全局 node 模块:#查看已经安装在全局的模块,以便删除这些全局模块后再按照不同的 node 版本重新进行全局安装npm ls -.

2020-07-18 10:30:16 203

转载 微前端介绍及解决方案

转载自https://zhuanlan.zhihu.com/p/78362028前言TL;DR想跳过技术细节直接看怎么实践的同学可以拖到文章底部,直接看最后一节。目前社区有很多关于微前端架构的介绍,但大多停留在概念介绍的阶段。而本文会就某一个具体的类型场景,着重介绍微前端架构可以带来什么价值以及具体实践过程中需要关注的技术决策,并辅以具体代码,从而能真正意义上帮助你构建一个生产可用的微前端架构系统。而对于微前端的概念感兴趣或不熟悉的同学,可以通过搜索引擎来获取更多信息,如知乎上的相关..

2020-07-03 11:24:18 1048

转载 什么是微服务架构?

知乎版块回答链接https://www.zhihu.com/question/65502802作者:老刘链接:https://www.zhihu.com/question/65502802/answer/802678798来源:知乎著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。一文详解微服务架构本文将介绍微服务架构和相关的组件,介绍他们是什么以及为什么要使用微服务架构和这些组件。本文侧重于简明地表达微服务架构的全局图景,因此不会涉及具体如何使用组件等细节。要..

2020-07-03 11:19:03 392

转载 Github上 10 个开源免费且优秀的后台控制面板

来自:SevDot| 责编:乐乐链接:jianshu.com/p/3bc7404af887Web 开发中几乎的平台都需要一个后台管理,但是从零开发一套后台控制面板并不容易,幸运的是有很多开源免费的后台控制面板可以给开发者使用,那么有哪些优秀的开源免费的控制面板呢?我在 Github 上收集了一些优秀的后台控制面板,并总结得出 Top 10。一、AdminLTEGithub Star 数 24969 ,Github 地址:https://github.com/almasaeed2...

2020-07-03 10:57:04 677

转载 如何在React中实现keep-alive?

写在开头 不推荐你使用本文这个库,这个库会造成数据驱动断层(即你缓存后,切换回来,确实可以看到跟之前一样的dom,但是数据驱动此时失效了),下周我会写另外一个可以不断层的库解析 ❝现代框架的本质其实还是Dom操作,今天看到一句话特别喜欢,不要给自己设限,到最后,大多数的技术本质是相同的。❞ 例如后端用到的Kafka , redis , sql事务写入 ,Nginx负载均衡算法,diff算法,GRPC,Pb 协议的序列化和反序列化,锁等等,都可以在前端被类似的大量复用逻辑,即便js和Nod

2020-06-17 20:47:36 3064

转载 如何让用户选择是否离开当前页面?

为什么要让用户选择是否离开页面 如果用户填写了很多数据此时 不小心点了其他a标签或者关闭了浏览器,不做判断,那么用户数据直接丢了 梳理需求 离开页面方式,被location.href,a标签,关闭浏览器或者当前tab页等... 需要判断数据是否跟初始化时一致(用户有无填写表单...) 用户选择离开就要继续逻辑,反之则不离开 正式开始 首先要知道一个事件:onbeforeunload,MDN的说明是:当浏览器窗口关闭或者刷新时,会触发beforeunlo

2020-06-17 20:40:44 176

转载 别再乱提交代码了,看下大厂 Git 提交规范是怎么做的!

来自丨掘金,作者丨人人贷大前端技术中心链接:https://juejin.im/post/5d0b3f8c6fb9a07ec07fc5d0Git commit message 规范git是现在市面上最流行的版本控制工具,书写良好的commit message能大大提高代码维护的效率。但是在日常开发中由于缺少对于commit message的约束,导致填写内容随意、质量参差不齐,可读性低亦难以维护。在项目中引入commit message规范已是迫在眉睫。用什...

2020-05-27 10:22:37 423

转载 html页面锚点跳转方法

项目中经常会出现点击跳转锚点的方法,比如给一个a标签一个href=“#锚点”,然后要跳的锚点给个id=“锚点”,这样就实现简单的跳转,但是这样在url地址栏后面都会出现一个诸如www.csdn.net#锚点,然后你点击给一次后退都是退回上一个选择的锚点url,这里总结一些跳转锚点的方法。第一种方法,也是最简单的方法是锚点用<a>标签,在href属性中写入DIV的id。如下:<!DOCTYPE html><html><head><sty.

2020-05-15 17:07:30 653

原创 推荐大家使用的JS代码规范

一种写JavaScript更合理的代码风格。目录类型 引用 对象 数组 解构 字符 方法 箭头函数 模块 属性 变量 比较运算符和等号 控制语句 注释 空白 分号 类型转换和强制类型转换 命名规范 事件 测试类型 1.1 原始值: 当你访问一个原始类型的时候,你可以直接使用它的值。 string number boolean ...

2020-04-29 16:57:15 165

转载 推荐大家使用的CSS书写规范、顺序

转载自https://www.shejidaren.com/css-written-specifications.html写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里设计达人网总结一个CSS书写规范、CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经验总结出来,我想对写CSS的前端用户来说是值得学习的。CS...

2020-04-21 14:03:51 535

原创 cookie填坑

删除cookie的方法一般都是给他个过期时间就可以了。有个需求是在退出登录的时候去删除一个cookie,结果却发现怎么也删不掉,仔细检查后发现是因为和当前不在同一个域下。最简单的话可以使用下面这个去删除,记得指定好domain就可以了。document.cookie = `LG_TK_SAAS=; expires=${new Date(0).toUTCString()}; domai...

2020-03-25 11:47:59 242

转载 关于iTerm2 你不知道的一些事

Terminal 是我们日常工作中使用频率比较高的一个工具,一个好的Terminal 肯定对我们的开发效率提高不少,今天要讲的就是Mac下的神奇iTerm2。其实早就在使用iTerm2,只不过只用到了一些基础功能,今天在官网看了下,发现有不少有趣的功能,故在此记录下iTermi2的一些常见功能。由于本文章主要是讲iTerm2的常见用法,未安装的话,请点此传送到iTerm2的官网下载安装文...

2020-03-25 10:47:45 103

转载 动图演示11个必备 VS Code 插件

亲测好用,转载自:https://mp.weixin.qq.com/s/np7EBSMJwfDUBut-OxNRfQ提升开发效率的插件1. Better CommentsBetter Comments 你可以使用不同的前缀来让注释显示为不同的颜色。非常适合快速扫描并发现重要的代码片段。若使用的话, 建议团队统一规范.2. Bracket Pair Colorizer...

2020-03-25 10:20:33 183

转载 访问图片出现403的解决办法

在写小程序的时候,访问一个网址获取图片,但是显示会出现403(防止盗链)的错误.总结了一下,有两种方法是可以解决这个问题的:使用images.weserv.nl方案使用no-referrer方案第一种:使用images.weserv.nl方案getImage(url){ console.log(url); // 把现在的图片连接传进来,返回一个不受限制的路径 ...

2019-12-27 16:34:15 145

转载 使用SVG + CSS实现动态霓虹灯文字效果

转载自https://segmentfault.com/a/1190000010963326?_ea=2523065早上无意间进入一个网站,看到他们的LOGO效果略屌,如图:刚开始以为是gif动画之类的,审查元素发现居然是用SVG + CSS3动画实现的,顿时激起了我的(hao)欲(qi)望(xin),决定要一探究竟,查看代码之后,发现原理居然是如此简单:多个SVG描边动画使...

2019-11-29 15:24:23 108

转载 webpack系统学习之路——基础篇

作者:anunwu链接:https://juejin.im/post/5dba938c6fb9a0205a011285来源:掘金著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。前言用vue-cli脚手架自动生成项目,里面的webpack配置苦涩难懂,于是下定决心想要系统学习webpack,写下此文来记录学习过程。一. webpack主要是做什么的?首...

2019-11-27 16:00:51 751

转载 一网打尽react重难点

作者:神奇的Aym链接:https://zhuanlan.zhihu.com/p/83079398来源:知乎著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。网上各种言论说 React 上手比 Vue 难,可能难就难不能深刻理解 JSX,或者对 ES6 的一些特性理解得不够深刻,导致觉得有些点难以理解,然后说 React 比较难上手,还反人类啥的,所以我打算写两篇文...

2019-11-27 15:25:40 376

转载 spy-debugger抓包

转载自https://github.com/wuchangming/spy-debugger关于spy-debugger一站式页面调试、抓包工具。远程调试任何手机浏览器页面,任何手机移动端webview(如:微信,HybridApp等)。支持HTTP/HTTPS,无需USB连接设备。 特性1、页面调试+抓包2、操作简单,无需USB连接设备3、支持HTTPS。4、sp...

2019-11-19 17:26:06 164

转载 setState异步同步问题

转载自https://www.jianshu.com/p/3a4dcd2b5b80关于setState异步同步的问题,以官方文件中较精确的说法:'它不是保证同步的"。那么什么时候异步,什么时候同步?答案是在React库控制时,异步;否则同步。如:setState方法写在constructor(props){ super(porps); this.state ...

2019-10-14 23:41:09 744

转载 稍微整理了几个经常在H5移动端开发遇到的东西

作者:聪明的汤姆链接:https://juejin.im/post/5d6e1899e51d453b1e478b29来源:掘金著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。不用说我也知道,此类文章太多太多了,常见的譬如:viewport、强制浏览器全屏、IOS的Web APP模式、可点击元素出现阴影(这个我觉得真没必要去掉,用户点击是需要反馈的,而这个背景...

2019-10-09 15:54:50 136

转载 8张图让你一步步看清 async/await 和 promise 的执行顺序

为什么写这篇文章?说实话,关于js的异步执行顺序,宏任务、微任务这些,或者async/await这些慨念已经有非常多的文章写了。但是怎么说呢,简单来说,业务中很少用async,不太懂async呢,研究了一天,感觉懂了,所手痒想写一篇,哈哈毕竟自己学会的知识,如果连表达清楚都做不到,怎么能指望自己用好它呢?测试一下自己有没有必要看所以我写这个的文章,主要还是交流学习,如果...

2019-09-29 10:16:08 63

原创 charles本地调试之map、remote、rewrite功能

map功能map功能,顾名思义就是将某个请求进行重定向,用重定向后的内容来响应请求的内容;map功能分为map Local和map Remote,二者区分是:map Local:是将某个网络请求重定向到本地的某个文件 map Remote:是将某个网络请求重定向到另一个网络请求 二者除了重定向文件的位置不同之外,其他功能都是一样的。他们都可以对js、css、html以及api...

2019-09-19 21:08:30 1876

原创 防抖与节流

防抖函数防抖,这里的抖动就是执行的意思,而一般的抖动都是持续的,多次的。假设函数持续多次执行,我们希望让它冷静下来再执行。也就是当持续触发事件的时候,函数是完全不执行的,等最后一次触发结束的一段时间之后,再去执行。<input type="text" id='input'>function debounce(fn, time) { var timer = null...

2019-09-02 11:31:48 57

转载 ffmpeg基础使用

参考ffmpeg常用命令ffmpeg参数中文详细解释[总结]FFMPEG视音频编解码零基础学习方法一、安装打开https://ffmpeg.zeranoe.com/builds/,该网站中的FFMPEG分为3个版本:Static,Shared,Dev。前两个版本可以直接在命令行中使用,他们的区别在于:Static里面只有3个应用程序:ffmpeg.exe,ffplay.exe,ffpr...

2019-09-01 20:37:18 646

转载 windows环境变量

环境变量相对于给系统或用户应用程序设置的一些变量,具体起什么作用这当然和具体的环境变量相关。象path,是告诉系统,当要求系统运行一个程序而没有告诉它程序所在的完整路径时,系统除了在当前目录下面寻找此程序外,还应到那些目录下去找;再象tc或bc++中,set include=path1;path2; 是告诉编译程序到哪里去找。h类型的文件;当然不仅仅是指定什么路径,还有其它的作用的,象 set d...

2019-09-01 11:56:01 779

转载 contenteditable跟user-modify还能这么玩

html中的contenteditable,他是一个全局属性,可以大致理解为"可以使一个元素处于可编辑状态",像极了textarea,不过还是存在许多不足跟问题,比如没有change钩子等,本文不作深入探讨❌开胃使一个div可以进行内容编辑:<div contenteditable>点击我进行编辑</div>复制代码乍一看,好像很普通,但是...

2019-08-26 10:57:51 87

珠峰前端架构正式课 _ 珠峰架构师课.pdf

珠峰前端架构正式课 _ 珠峰架构师课.pdf

2020-07-29

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除