- 博客(203)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 日常开发小技巧经验汇总（持续更新中）
react jsx 中使用 switch case 示例在JSX的render html中无法写类似if，switch这样的语法，但是可以写函数或者三元表达式。所以可以利用一个立即执行的匿名函数来包装你的方法。<div> <span>适用平台：</span> <span>{(() => { switch (curren...
2020-04-20 17:46:21
521
转载 实用但却被忽略的Web API！！！
转载自https://juejin.im/post/5d5df391e51d453b1e478ad0#heading-18文列举了一些列比较不常见的Web API，内容较多，所以有关兼容性的内容在本文不会出现，大家可以自己去查阅。 以下案例能配动图的我尽量去配了，以免内容枯草乏味，但是如果内容有误，也请大家亲喷或者纠正?方法列表querySelector（元素向下查询，返回一个） ...
2019-08-26 10:56:20
238
转载 docker入门
引言今天，是你去新公司入职的第一天。早上起了个大早，洗漱干净带着材料去新公司报道。签完合同到达工位，开机，泡一杯红糖枸杞（不要问我为什么，我也不知道。。。）。然后开始下载 vscode、chrome、nodejs，配置 NODE_PATH、cnpm、安装 webpack、webpack-cli、@vue-cli、yarn、、、（此处省略 1k+插件）。如果顺利的话，这个时候你应该已经准备下班了。当然，一般都不会很顺利。。。在这个过程中，你可能会遇到网络问题、环境问题、配置问题、兼容问题、、、（此
2021-11-09 17:13:36
192
转载 前端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
781
原创 闭包前端分享
函数能够记住并访问其所在的词法作用域中的变量，称为闭包词法作用域编译器在编译的代码的第一个阶段会将js代码词法化，词法作用域就是在词法化阶段形成的作用域。通俗一点的说，就是函数在声明的时候形成的一个作用域从上图可以看到 全局作用域包含标识符count和main，main的作用域包含内部标识符count和bar，bar作用域又包含count和foo，最后foo标识符包含count。foo 函数作用域—>bar 函数作用域—>main 函数作用域—> 全局作用域形..
2021-04-01 18:33:55
204
原创 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
1193
1
转载 Markdown语法图文全面详解及其工具介绍
转载自:https://www.jianshu.com/p/c0a2897ad4eb本文出自 AWeiLoveAndroid的博客【前言】写过博客或者github上面的文档的，应该知道Markdown语法的重要性，不知道的朋友们也别着急，一篇博客轻松搞定Markdown语法。话说这个语法超级简单，一看就会，不信你点开看看。目录:一、快捷键二、基本语法三、常用技巧四、高端用法五、Markdow工具六、不同平台功能对比七、使用MarkdowPad软件遇到的坑一、快捷键..
2021-02-24 14:57:45
860
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
7692
2
原创 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
1038
1
原创 react里数据流向
react里数据流向方式大概分为三种：1. 最常用的props传递 （父传子）2.Provider-Consumer 方式3.发布订阅模式。下面主要介绍第三者方式。好处是可以跨越多个层级，不用关心数据的流向，只需在需要的组件订阅，在适当的时机触发发布就可以改变组件的状态。当然坏处是可能会破坏组件的独立性，使得数据流向不受控。实现：dep.jsclass Dep { constructor() { this.list = []; } subscribe(
2021-01-15 17:40:30
474
原创 微前端公共模块复用方案
什么是微前端？微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。微前端的核心在于拆, 拆完后在合!2018年 Single-SPA诞生了， single-spa 是一个用于前端微服务化的 JavaScript 前端解决 方案 (本身没有处理样式隔离， js 执行隔离) 实现了路由劫持和应用加载。2019年 qiankun 基于Single-SPA, 提供了更加开箱即用的 API （ single-spa + sandbox + ...
2020-12-29 10:58:36
3544
原创 观察者与发布订阅
结论：观察者模式和订阅模式很容易混淆一谈，其实订阅模式有一个调度中心，对订阅事件进行统一管理。而观察者模式可以随意注册事件，调用事件，虽然实现原理都雷同，设计模式上有一定的差别，实际代码运用中差别在于：订阅模式中，可以抽离出调度中心单独成一个文件，可以对一系列的订阅事件进行统一管理。这样和观察者模式中的事件漫天飞就有千差万别了，在开发大型项目的时候，订阅/发布模式会让业务更清晰！// 观察者模式 vue的依赖收集 // 被观察者 class Subject { .
2020-12-29 10:38:10
96
原创 手写MVVM
大体思路主要分为模板编译、数据劫持、观察者（包含发布订阅）三个部分 模板编译：获取vm实例里html模板，针对其中的字符串模板{{}}及v-指令进行“翻译”，写出其底层相应操作 数据劫持：遍历vm实例里data对象，为每个数据绑定setter和getter，触发get时将当前元素watcher推入订阅者数组，触发set时，如果值更新则通知订阅者更新数据 观察者：给数据对应的元素绑定一个观察者实例，并推入订阅者数组，当数据更新时发布订阅通知元素数据变化具体模块MVVMconstr...
2020-12-29 10:17:10
158
转载 深入了解 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
581
原创 如何自己发布一个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
169
1
转载 2020年你必须要会的微前端 -（实战篇）
2020年你必须要会的微前端 -（实战篇）最近你有没有经常听到一个词，微前端？ 是不是听上去感觉非常地高大上！然而~微前端其实非常地简单，非常地容易落地，而且也非常不高大上~那么就来一起看看什么是微前端吧：一.为什么需要微前端?这里我们通过3W(what,why,how)的方式来讲解什么是微前端：1.What?什么是微前端?微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。微前端的核心在于拆, 拆完后再合!2.Why?为什么..
2020-07-29 11:00:18
283
转载 前端埋点实现及原理分析
正如在宏观介绍的博客中写到的，做用户行为分析的方式有“前端埋点”和“后端埋点”的区分，真好今天敲了一个坤哥整理的“前端埋点”的程序，理解了之后结合demo来简单讲解“前端埋点”如何做。前端埋点原理图：如上所示，从broswer到page，再到javascript以及后端backend，浏览器返回正常程序运行结果，本地文件中返回最终的log，这很像是在用户程序中埋下了一段“暗代码”，无形之中“窃取”了用户的行为信息，淘宝、网易等都有这样的功能。（可以参考goo...
2020-07-23 17:43:41
898
转载 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
831
转载 微前端介绍及解决方案
转载自https://zhuanlan.zhihu.com/p/78362028前言TL;DR想跳过技术细节直接看怎么实践的同学可以拖到文章底部，直接看最后一节。目前社区有很多关于微前端架构的介绍，但大多停留在概念介绍的阶段。而本文会就某一个具体的类型场景，着重介绍微前端架构可以带来什么价值以及具体实践过程中需要关注的技术决策，并辅以具体代码，从而能真正意义上帮助你构建一个生产可用的微前端架构系统。而对于微前端的概念感兴趣或不熟悉的同学，可以通过搜索引擎来获取更多信息，如知乎上的相关..
2020-07-03 11:24:18
1658
转载 什么是微服务架构？
知乎版块回答链接https://www.zhihu.com/question/65502802作者：老刘链接：https://www.zhihu.com/question/65502802/answer/802678798来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。一文详解微服务架构本文将介绍微服务架构和相关的组件，介绍他们是什么以及为什么要使用微服务架构和这些组件。本文侧重于简明地表达微服务架构的全局图景，因此不会涉及具体如何使用组件等细节。要..
2020-07-03 11:19:03
520
转载 Github上 10 个开源免费且优秀的后台控制面板
来自：SevDot| 责编：乐乐链接：jianshu.com/p/3bc7404af887Web 开发中几乎的平台都需要一个后台管理，但是从零开发一套后台控制面板并不容易，幸运的是有很多开源免费的后台控制面板可以给开发者使用，那么有哪些优秀的开源免费的控制面板呢？我在 Github 上收集了一些优秀的后台控制面板，并总结得出 Top 10。一、AdminLTEGithub Star 数 24969 ，Github 地址：https://github.com/almasaeed2...
2020-07-03 10:57:04
743
转载 如何在React中实现keep-alive？
写在开头 不推荐你使用本文这个库，这个库会造成数据驱动断层（即你缓存后，切换回来，确实可以看到跟之前一样的dom，但是数据驱动此时失效了）,下周我会写另外一个可以不断层的库解析 ❝现代框架的本质其实还是Dom操作，今天看到一句话特别喜欢，不要给自己设限，到最后，大多数的技术本质是相同的。❞ 例如后端用到的Kafka , redis , sql事务写入 ，Nginx负载均衡算法,diff算法，GRPC,Pb 协议的序列化和反序列化，锁等等，都可以在前端被类似的大量复用逻辑，即便js和Nod
2020-06-17 20:47:36
7734
转载 如何让用户选择是否离开当前页面？
为什么要让用户选择是否离开页面 如果用户填写了很多数据此时 不小心点了其他a标签或者关闭了浏览器，不做判断，那么用户数据直接丢了 梳理需求 离开页面方式，被location.href,a标签,关闭浏览器或者当前tab页等... 需要判断数据是否跟初始化时一致（用户有无填写表单...） 用户选择离开就要继续逻辑，反之则不离开 正式开始 首先要知道一个事件:onbeforeunload,MDN的说明是：当浏览器窗口关闭或者刷新时，会触发beforeunlo
2020-06-17 20:40:44
360
转载 别再乱提交代码了，看下大厂 Git 提交规范是怎么做的！
来自丨掘金，作者丨人人贷大前端技术中心链接：https://juejin.im/post/5d0b3f8c6fb9a07ec07fc5d0Git commit message 规范git是现在市面上最流行的版本控制工具，书写良好的commit message能大大提高代码维护的效率。但是在日常开发中由于缺少对于commit message的约束，导致填写内容随意、质量参差不齐，可读性低亦难以维护。在项目中引入commit message规范已是迫在眉睫。用什...
2020-05-27 10:22:37
634
转载 html页面锚点跳转方法
项目中经常会出现点击跳转锚点的方法，比如给一个a标签一个href=“#锚点”，然后要跳的锚点给个id=“锚点”，这样就实现简单的跳转，但是这样在url地址栏后面都会出现一个诸如www.csdn.net#锚点，然后你点击给一次后退都是退回上一个选择的锚点url，这里总结一些跳转锚点的方法。第一种方法，也是最简单的方法是锚点用<a>标签，在href属性中写入DIV的id。如下：<!DOCTYPE html><html><head><sty.
2020-05-15 17:07:30
2372
原创 推荐大家使用的JS代码规范
一种写JavaScript更合理的代码风格。目录类型 引用 对象 数组 解构 字符 方法 箭头函数 模块 属性 变量 比较运算符和等号 控制语句 注释 空白 分号 类型转换和强制类型转换 命名规范 事件 测试类型 1.1 原始值: 当你访问一个原始类型的时候，你可以直接使用它的值。 string number boolean ...
2020-04-29 16:57:15
304
转载 推荐大家使用的CSS书写规范、顺序
转载自https://www.shejidaren.com/css-written-specifications.html写了这么久的CSS，但大部分前端er都没有按照良好的CSS书写规范来写CSS代码，这样会影响代码的阅读体验，这里设计达人网总结一个CSS书写规范、CSS书写顺序供大家参考，这些是参考了国外一些文章以及我的个人经验总结出来，我想对写CSS的前端用户来说是值得学习的。CS...
2020-04-21 14:03:51
606
原创 cookie填坑
删除cookie的方法一般都是给他个过期时间就可以了。有个需求是在退出登录的时候去删除一个cookie，结果却发现怎么也删不掉，仔细检查后发现是因为和当前不在同一个域下。最简单的话可以使用下面这个去删除，记得指定好domain就可以了。document.cookie = `LG_TK_SAAS=; expires=${new Date(0).toUTCString()}; domai...
2020-03-25 11:47:59
1398
转载 关于iTerm2 你不知道的一些事
Terminal 是我们日常工作中使用频率比较高的一个工具，一个好的Terminal 肯定对我们的开发效率提高不少，今天要讲的就是Mac下的神奇iTerm2。其实早就在使用iTerm2,只不过只用到了一些基础功能，今天在官网看了下，发现有不少有趣的功能，故在此记录下iTermi2的一些常见功能。由于本文章主要是讲iTerm2的常见用法，未安装的话，请点此传送到iTerm2的官网下载安装文...
2020-03-25 10:47:45
450
转载 动图演示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
489
转载 访问图片出现403的解决办法
在写小程序的时候,访问一个网址获取图片,但是显示会出现403(防止盗链)的错误.总结了一下,有两种方法是可以解决这个问题的:使用images.weserv.nl方案使用no-referrer方案第一种:使用images.weserv.nl方案getImage(url){ console.log(url); // 把现在的图片连接传进来，返回一个不受限制的路径 ...
2019-12-27 16:34:15
442
转载 使用SVG + CSS实现动态霓虹灯文字效果
转载自https://segmentfault.com/a/1190000010963326?_ea=2523065早上无意间进入一个网站，看到他们的LOGO效果略屌，如图：刚开始以为是gif动画之类的，审查元素发现居然是用SVG + CSS3动画实现的，顿时激起了我的(hao)欲(qi)望(xin)，决定要一探究竟，查看代码之后，发现原理居然是如此简单：多个SVG描边动画使...
2019-11-29 15:24:23
273
转载 webpack系统学习之路——基础篇
作者：anunwu链接：https://juejin.im/post/5dba938c6fb9a0205a011285来源：掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。前言用vue-cli脚手架自动生成项目，里面的webpack配置苦涩难懂，于是下定决心想要系统学习webpack，写下此文来记录学习过程。一. webpack主要是做什么的？首...
2019-11-27 16:00:51
1508
转载 一网打尽react重难点
作者：神奇的Aym链接：https://zhuanlan.zhihu.com/p/83079398来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。网上各种言论说 React 上手比 Vue 难，可能难就难不能深刻理解 JSX，或者对 ES6 的一些特性理解得不够深刻，导致觉得有些点难以理解，然后说 React 比较难上手，还反人类啥的，所以我打算写两篇文...
2019-11-27 15:25:40
978
转载 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
355
转载 setState异步同步问题
转载自https://www.jianshu.com/p/3a4dcd2b5b80关于setState异步同步的问题，以官方文件中较精确的说法：'它不是保证同步的"。那么什么时候异步，什么时候同步？答案是在React库控制时，异步；否则同步。如：setState方法写在constructor(props){ super(porps); this.state ...
2019-10-14 23:41:09
896
转载 稍微整理了几个经常在H5移动端开发遇到的东西
作者：聪明的汤姆链接：https://juejin.im/post/5d6e1899e51d453b1e478b29来源：掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。不用说我也知道，此类文章太多太多了，常见的譬如：viewport、强制浏览器全屏、IOS的Web APP模式、可点击元素出现阴影（这个我觉得真没必要去掉，用户点击是需要反馈的，而这个背景...
2019-10-09 15:54:50
295
转载 8张图让你一步步看清 async/await 和 promise 的执行顺序
为什么写这篇文章？说实话，关于js的异步执行顺序，宏任务、微任务这些，或者async/await这些慨念已经有非常多的文章写了。但是怎么说呢，简单来说，业务中很少用async，不太懂async呢，研究了一天，感觉懂了，所手痒想写一篇，哈哈毕竟自己学会的知识，如果连表达清楚都做不到，怎么能指望自己用好它呢？测试一下自己有没有必要看所以我写这个的文章，主要还是交流学习，如果...
2019-09-29 10:16:08
113
原创 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
4179
原创 防抖与节流
防抖函数防抖，这里的抖动就是执行的意思，而一般的抖动都是持续的，多次的。假设函数持续多次执行，我们希望让它冷静下来再执行。也就是当持续触发事件的时候，函数是完全不执行的，等最后一次触发结束的一段时间之后，再去执行。<input type="text" id='input'>function debounce(fn, time) { var timer = null...
2019-09-02 11:31:48
200
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人