- 博客(129)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 根据微前端原理解决代码冲突--居然还有额外好处
本篇文章参考以下博文如何“取巧”实现一个微前端沙箱？文章目录前言页面样例前言 我们开发的过程中，如何能提高开发效率？这是一个合格程序员始终都要考虑的问题，在前段时间的开发过程中，发现同事们在代码提交的时候，总会或多或少的有一些代码冲突，由于公司是使用的 SVN 进行代码管理的，要迁移到 Git 的话成本太高，所以就思考，有没有什么方法能够避免掉这个冲突，修改又不用很大？ 结合以前的项目，配置路由的时候，把所有页面的入口引入到一个配置文件中，路由在匹配入口的时候，也从配置文件中读取，这样解
2021-05-10 14:38:17
635
2
原创 页面白屏不要慌，开发工具来帮忙
本篇文章参考以下博文《页面卡顿？内存泄漏？一文详解如何排查》–魔术师卡颂文章目录前言1.定义2.JS数据存储3.垃圾回收前言 我们页面白屏了，大部分情况下是某个报错导致，只要打开开发者工具，查看报错提示就可以了。。如果 webpack 配置了 source-map ，那么就更容易定位了，可以直接精确定位到哪一行，哪一列的代码出现了问题。 但是有时候白屏问题的出现，是因为页面的内存泄漏，那这就都有无从下手的感觉了，今天我们就来看看，这个内存泄漏，该怎么办？1.定义 内从泄露作为一名开发
2021-04-25 14:30:16
1143
原创 React-router源码—好家伙！
本篇文章参考以下博文《图解React-router源码》–魔术师卡颂文章目录前言路由原理实现步骤一、监听 url 变化前言 最近在与前辈的交流过程中，大佬抛出来一个问题，webpack 是如何实现懒加载的？原理可以类比到 react-router 动态路由如何实现？那么带着这一问题，我们今天就来一起研究研究，react-router 源码中，如何做到动态路由的。路由原理 首先我们需要先有一个概念，那就是路由是怎么实现的？原理呢其实就是页面的url发生变化，然后去匹配路径，渲染对应组件。
2021-03-31 00:31:49
426
原创 React Hook 到底是个啥？
本篇文章参考以下博文React技术揭秘文章目录前言举个例子自己实现 useState状态保存Hook 数据结构模拟React调度更新流程计算 State前言 最近在和同事们交流的时候，发现大家对 hook 的理解是，这玩意就是生命周期，原来放在生命周期里的东西，现在都要放到 hook 里。 如果刚接触 hook 的话，那么这个解释可以帮助你快速明白 hook 的用法，但是往深了说， hook 与生命周期还是有一定区别的。今天咱们就来研究研究，区别在哪？ 阅读
2021-03-24 16:43:41
541
原创 手把手撸 React
本篇文章参考以下博文Build-your-own-reactReact技术揭秘文章目录前言准备：Review第一步：creatElement Function第二步：The render Function第三步：Concurrent Mode第四步：Fibers前言 本篇文章带大家一起认识一下 React 的实现原理，然后实现一个小型 React 库。 如果是刚刚接触 React 的同学，不建议直接阅读，文中很多专业名词需要在会使用的基础上再加以理解，如
2021-02-22 12:11:54
594
1
原创 代码要写成别人看不懂的样子（二十八完结篇）
本篇文章参考书籍《JavaScript设计模式》–张容铭文章目录前言MVVM 模式视图模型层总个小结前言 各位，本节是看不懂系列的最后一篇文章了，非常感谢张容铭老师的 《JavaScript设计模式》 这本书我从头到尾完整的读了三遍，对我个人的提升真的非常巨大，也推荐各位有机会也读一读。 本节要介绍的设计模式，也是书中的最后一章，是目前公认的最优框架模式， MVVM ，从名字就可以看出， MVVM 也是从 MVC 模式演变过来的，准确的说是从 MVP 模式演变的。
2021-01-12 09:53:20
368
2
原创 Flex布局，真香！
本篇文章参考以下博文Flex 布局教程：语法篇Flex 布局教程：实例篇文章目录前言1.基本原理2.容器属性2.1 flex-direction 属性2.2 flex-wrap 属性2.3 flex-flow 属性2.4 justify-content 属性2.4 align-items 属性2.5 align-content 属性3.项目属性3.1 order 属性3.2 flex-grow 属性3.3 flex-shrink 属性3.4 flex-basis 属性3.5 flex 属性3.6
2020-06-02 12:03:28
5036
20
原创 prototype，__proto__，constructor到底是什么关系（图解）
本篇博客基于以下博客学习而来，这里面的解释更为详细。https://blog.csdn.net/cc18868876837/article/details/81211729总结1.prototype属性只有函数才有，
2020-03-26 20:32:49
810
原创 JavaScript各种继承，原型继承，构造函数继承，组合继承，寄生组合，ES6继承，我能学会你也可以
本篇文章，是近期对于继承方面的一些学习感悟，一直以来对继承的理解比较浅显，所以下定决心要弄懂继承，终于通过几天潜心学习，有所收获，以此博文来记录总结，方便日后复习。文中不足之处，请各位老师指点。借鉴了以下各位前辈的博客https://blog.csdn.net/qq_32682137/article/details/82426401http://www.fly63.com/article/...
2020-03-26 20:32:20
889
原创 如何使用 Next.js 进行服务端渲染（Server-Side Rendering, SSR）
Next.js 本身就支持 SSR 并提供了一系列内置的方法来简化这个过程。下面将详细介绍如何使用 Next.js 进行 SSR，并提供具体的示例代码。_app.js 文件是 Next.js 应用的根组件，你可以在这里自定义全局的布局和样式。return (<><Head></Head></>_document.js 文件用于自定义生成的 HTML 文档结构。你可以在这里添加自定义的 标签等。
2024-09-19 19:31:12
1222
原创 qiankun沙箱实现原理
Qiankun 设置沙箱（Sandbox）主要是为了实现子应用之间的隔离，防止子应用之间的全局变量污染和副作用。Qiankun 使用了多种技术手段来实现这一目标，包括但不限于 JavaScript 的 Proxy 对象、自定义的全局变量管理等。Qiankun 通过使用 Proxy 对象来拦截全局变量的访问和修改，通过创建沙箱 DOM 环境来隔离子应用的 DOM 操作，并通过自定义的事件监听来管理子应用中的事件。这些措施共同实现了子应用之间的隔离，确保了主应用和子应用之间的互不干扰。
2024-09-19 18:01:05
860
原创 毕业三年，我从鉴黄师转行到阿里做前端
@ali/f1-address-pcThe address component using at PC web platform at F1 project如何开发tnpm installtnpm run startAPI参数名说明必填类型默认值备注data内部传入的数据，参考否object--containerdocument 节点是DOM--requestConfig请求配置否object--customizatio
2021-07-19 00:38:56
9625
45
原创 Webpack常用的压缩，CSS，JS，图片
本篇文章参考以下博文webpack常用的三种JS压缩插件webpack怎样压缩css？webpack5单独提取css文件，兼容处理及压缩（四)webpack提取图片文件打包压缩文章目录前言JavaScript压缩terser-webpack-pluginCSS 压缩Optimize css Assets webpack Plugin图片压缩image webpack loader前言 针对现在常用的 webpack 压缩方法进行一下总结，方便自己后续使用和查看。JavaScript压
2021-03-21 17:04:51
549
原创 前端性能如何优化？
本篇文章参考以下博文前端性能优化 24 条建议（2020）React技术揭秘文章目录前言一、减少延迟感知二、提高页面加载速度2.1 减少 HTTP 请求2. 使用 HTTP2前言 最近在学习过程中突然看到这个问题，也想总结以下自己关于性能优化的理解，这个问题比较大，我们需要逐步解耦来处理，回答需要有条理，有逻辑，才不至于涵盖面不全，有遗漏点。 首选我们要弄清楚一个问题，为什么要性能优化？或者说性能优化的目的是什么？那肯定是为了快速响应客户的操作。那么怎么样才能实现快速响应呢？可以从两方面
2021-03-11 17:26:35
453
原创 恶补基本功-JavaScript中的分号
本篇文章参考书籍《JavaScript权威指南》文章目录前言JS理解的分号前言 最近在和一些前辈交流的时候，感觉自己的基础知识不是很全面，很多东西并不能一针见血的指出要害，经济基础决定上层建筑，为了强化自己的知识系统，从本篇文章开始，对基础知识问题来一次全面扫荡，各位兄弟姐妹，欢迎查漏补缺，一起进步。JS理解的分号 我们知道 JS 使用（ ; ）将语句分隔开，这对于增强代码的可读性和整洁性非常重要。 缺少分隔符，一条语句就成了下一条语句的开始，反之亦然。现在很多格式校验的插件可以提
2021-03-10 14:15:22
311
2
原创 输入 URL 之后，浏览器背着我们都做了什么事？
本篇文章参考以下博文浏览器工作原理：从 URL 输入到页面展现到底发生了什么？文章目录前言整体流程1. 输入URL并回车2.URL 解析 / DNS 查询3. 应用层客户端发送HTTP请求4. 传输层TCP传输报文前言 如题，这是一个只有在面试里才会出现的题目，主要目的是让你描述一下浏览器工作原理，通过这些流程，了解你个人对于整个前端整体的掌握程度，顺便了解一下你的知识深度和广度。 有些同学可能不解，作为前端开发，写好页面不就行了？知道这些有什么用？ 最直接的结果就是，了解之后工资很
2021-03-06 15:34:31
831
原创 WebPack打包性能优化
本篇文章参考以下博文WebPack实战教程文章目录前言开发环境性能优化HMR（必用）source-map生产环境性能优化优化打包构建速度oneOf缓存多进程打包externalsdll优化代码运行性能缓存（第二次访问速度更块）tree shakingcode split懒加载 / 预加载PWA前言 平时做项目的时候，最开始是在本地进行调试，调试完成后部署到服务器上，偶尔会出现与本地调试有出入的地方，导致需要重新打包，重新部署，相当耗费时间。 为解决这一问题，可以使用 webpack
2021-03-01 14:13:27
350
原创 Webpack-生产环境基本配置
本篇文章参考以下博文WebPack实战教程文章目录前言生产环境基本配置前言 最近在做一些简单项目的打包，每个小项目的依赖库有细微差异，但是主要的配置信息都相似，css兼容，js兼容，html插件等，不同的是相关插件的使用情况。 本篇文章就初始化一个生产环境的基本配置，方便以后用来直接使用。生产环境基本配置 基本配置如下：首先配置了入口和出口；然后做css的配置，其中包括兼容和压缩；less文件配置js语法检查js兼容图片检测html中的图片其他文件最后插件的部分对
2021-02-17 23:24:34
288
原创 Webpack-JS兼容处理的三种方式
本篇文章参考以下博文WebPack实战教程文章目录前言JS兼容处理的三种方式babel-loader@babel/polyfillcore-js前言 最近在打包项目的时候，文件是打出来了，但是打出来的文件体积太大，主要是没几行的代码居然打出来了几百 KB ，这就有点离谱了。 查看了一下打包出来的文件，发现了一堆没用的 ES6 兼容内容，代码里根本没有使用，居然一股脑的全部打包进去了。 重新检索了一遍打包配置，发现是其中一项对于 js 的兼容处理有问题。记录一下，提
2021-02-16 21:26:35
682
原创 微信小程序跳转其他页面并后退
本篇文章参考以下博文微信小程序页面跳转和后退页面微信官方文档文章目录navigator 组件跳转navigateTo 跳转(JS)navigateBack 返回传参问题navigator 组件跳转 这个组件类似 <a> 标签，只需要包裹住需要跳转的部分，然后配置 url 即可。<navigator url="page/component/search"> ...</navigator> 这个组件是自带后退功能的，如下图所示：
2021-01-21 14:14:50
1676
原创 Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
Error: Invalid hook call. Hooks can only be called inside of the body of a function component.This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might ...
2021-01-18 13:57:07
33611
1
原创 GitHub上如何快速搜索到需要的项目
本篇文章参考博文你真的知道如何在 GitHub 上高效搜索开源项目吗？文章目录前言利用排序巧用搜索 in:name in:description in:readme stars: > 数字 stars: 100..200 size:>= 数字 pushed:>yyyy-mm-dd license:apache-2.0 language:javascript user:gaearon 前言 想要向大佬看齐，就要先模仿大佬，最直接的办法就是去
2021-01-15 14:29:04
981
原创 代码要写成别人看不懂的样子（二十七）
本篇文章参考书籍《JavaScript设计模式》–张容铭文章目录前言MVC 模式总个小结前言 嗨！各位乡绅，上一节的字符串模板，有没有很崩溃，模板引擎写起来是有点费劲，但是思路比较简单，慢慢梳理就好。 本节我们来个硬货，如果各位经常浏览招聘信息，那么很多公司都会在岗位要求上面写上，熟悉 MVC 框架者优先。今天我们就来搞搞，到底什么是传说中 MVC 。MVC 模式 MVC 即模型（model）—视图（view）—控制器（controller），用一种将业务逻辑、数据、视图
2021-01-08 17:58:13
246
原创 使用npm更新所有依赖包到最新版本
本篇文章参考文章 - npm包之npm-check-updates文章目录npm-check-updates背景交代npm-check-updates 一键升级所有依赖的插件为 npm-check-updates需要执行以下步骤：安装npm install -g npm-check-updates检查npm-check-updates // 检查当前项目中有没有哪些依赖包可更新（简写ncu） 检查结果如下所示：更新ncu -u // 更新package.json
2021-01-07 11:17:23
9360
原创 代码要写成别人看不懂的样子（二十六）
本篇文章参考书籍《JavaScript设计模式》–张容铭文章目录前言MVC 模式总个小结前言 嗨！各位乡绅，上一节的字符串模板，有没有很崩溃，模板引擎写起来是有点费劲，但是思路比较简单，慢慢梳理就好。 本节我们来个硬货，如果各位经常浏览招聘信息，那么很多公司都会在岗位要求上面写上，熟悉 MVC 框架者优先。今天我们就来搞搞，到底什么是传说中 MVC 。MVC 模式 MVC 即模型（model）—视图（view）—控制器（controller），用一种将业务逻辑、数据、视图分
2021-01-06 10:30:27
324
2
原创 我的2020
今天是 2020 年最后一天了，刚才还在抓紧时间赶一篇博客，想着多写一篇是一篇，这样我今年的发布数量就会又多加一篇，但是期间收到了好多推送消息，很多都是大家关于2020年的感悟。 突然想趁着跨年这个日子，回头看看自己的今年。 我平时是一个不太懂抒情的人，这也是我第一篇记录心情的博客，可能很矫情，很无聊，很没有水平，但贵在真实。 今年三月份的时候我在社区写了第一篇博客，当时机缘巧合遇到一位前辈，经过他的指点，让我本来平平淡淡的日子，变得开始朝九晚五。 我毕业之后第一份工作其实不是程序员，而
2021-01-01 00:03:06
292
2
原创 代码要写成别人看不懂的样子（二十五）
本篇文章参考书籍《JavaScript设计模式》–张容铭文章目录前言Widget模式总个小结前言 大家如果熟悉组件，那么学习本节内容会比较又感触，上一节我们学习了模块化开发，可以把功能细化，逐一实现每个微功能，这是一种很好的变成实践。不过对于页面视图的开发，这种思想应该怎么实现？Widget模式 （Web Widget 指的是一块可以在任意页面中执行的代码块）Widget 模式是指借用 Web Widget 思想，将页面分解成部件，针对部件开发，最终组合成完整的页面。 多人合作开发的时候，
2020-12-29 21:19:36
179
原创 代码要写成别人看不懂的样子（二十四）
本篇文章参考书籍《JavaScript设计模式》–张容铭文章目录前言异步模块模式总个小结前言 上一节的同步模块应用范围多在服务端，那对于客户端的架构模式，我们通常选择异部模块模式，因为浏览器环境不同于服务器环境，在浏览器中对文件的加载时异步的。因此要使用未加载文件中某些模块方法时必然经历文件加载过程。 对未加载文件中的模块引用，同步模块模式是无能为力的，为了解决这个问题，我们一起研究下今天的课题。异步模块模式 模块化：将复杂的系统分解成高内聚、低耦合的模块，使系统开发变得可控，可维护，可扩
2020-12-28 21:06:51
214
原创 代码要写成别人看不懂的样子（二十三）
本篇文章参考书籍《JavaScript设计模式》–张容铭文章目录前言同步模块模式前言 同学们好，技巧类的设计模式我们告一段落了，本届开始，我们一起学习一个新的种类，架构型设计模式，之前我们学习的都是解决具体问题的相关设计模式，本节开始，我们学习项目框架，这就涉及多人共同开发大型复杂项目了。 架构型设计模式是一类框架结构，通过提供一些子系统，指定他们的职责，并将他们条理清晰的组织在一起。同步模块模式 模块化：将复杂的系统分解成高内聚、低耦合的模块，使系统开发变得可控，可维护，可扩展，提高模块
2020-12-26 14:05:06
196
2
原创 代码要写成别人看不懂的样子（二十二）
本篇文章参考书籍《JavaScript设计模式》–张容铭文章目录前言等待者模式前言 本节我们处理一个老生常谈的问题，异步。为什么会出现异步这个问题呢？这要从 JS 出生之前说起。 很久很久以前，天和地还没有分开，宇宙混沌一片。有个叫盘古的巨人，在这混沌之中，一直睡了一万八千年。 有一天，盘古突然醒了。他见周围一片漆黑，就抡起大斧头，朝眼前的黑暗猛劈过去。只听一声巨响，混沌一片的东西渐渐分开了。轻而清的东西，缓缓上升，变成了天；重而浊的东西，慢慢下降，变成了地… 扯远了哈，异步问题是因为
2020-12-25 11:49:47
233
原创 代码要写成别人看不懂的样子（二十一）
本篇文章参考书籍《JavaScript设计模式》–张容铭文章目录前言参与者模式前言 熟悉 react 的同学，给绑定事件传递额外参数，这种操作是不是信手拈来，这是得益于 jsx 语法，所有代码都是 js 当然可以为所欲为了，但是当不使用框架的时候，我们又应该怎么实现这种功能呢？ 本节就来学一个参与者模式，帮我们解决传参问题。参与者模式 在特定的作用域中执行给定的函数，并将参数原封不动地传递。 ...
2020-12-24 11:30:33
167
原创 代码要写成别人看不懂的样子（二十）
本篇文章参考书籍《JavaScript设计模式》–张容铭文章目录前言惰性模式前言 各位接触过机器学习没有，没了解过也没关系，这东西的大体思路就是，当第一次执行某种情况时，机器会去判断一些情况，到第二次执行的时候，就不需要再重复判断了，那么机器学习就会在第一次执行完成后，记录当时的计算过程，参数等数据，然后重新定义这种特定情况，当再次遇到后，不需要重复判断，直接获取上次的结果就行。 这个机器学习，就很像我们今天要说的惰性模式。真的超级像（我个人猜测，有可能当年发明机器学的人，就是惰性模式用的比较好
2020-12-22 21:05:49
197
原创 代码要写成别人看不懂的样子（十九）
本篇文章参考书籍《JavaScript设计模式》–张容铭文章目录前言简单模板模式前言 大家有没有遇到过操作大量节点的情况，比如我们在页面上想要创建一个展示区域，这块区域，需要跟不同的选项来展示不同结构的内容，那我们就需要根据选项来操作不同的节点。首先创建节点，然后创建节点内容，将节点内容插入到创建的节点中，最后将节点插入到父节点中。 这一套操作下俩，一个节点就需要 4 步，如果节点比较多，那这性能消耗就有点遭不住了。 为了解决这一个问题，我们可以使用简单模板方法。如果各位接触过模板字符串
2020-12-17 22:01:29
284
原创 代码要写成别人看不懂的样子（十八）
本篇文章参考书籍《JavaScript设计模式》–张容铭文章目录前言节流模式前言 今年3月份的时候，写过几篇文章，，介绍了一下浏览器的回流，重绘，以及对应的解决办法分别是节流和防抖。当时刚开始写博客，还很青涩，各位要是不嫌弃，可以简单扫一眼，链接在下面。react中的防抖和节流，大佬封装的方法用起来就是爽–我们一起读源码JavaScript防抖和节流–造轮子它不香吗浏览器的小秘密–回流和重绘 今天我们一块研究的设计模式，就跟节流有关，这个东西平时不常用，但是一旦遇到相关问题后，不用还不
2020-12-17 12:05:06
156
原创 代码要写成别人看不懂的样子（十七）
本篇文章参考书籍《JavaScript设计模式》–张容铭文章目录前言数据访问对象模式前言 各位作为一名前端开发，大家有没有遇到过前端存储，比如用户初次进入程序，会有一个个性化引导，一般来说这块功能是交给后台同事来做的，但是有时候需要放在前端，来保存是否第一次登陆的字段。 那我们在本地存储的时候呢，可能会遇到很多问题，每添加一组数据，担心会不会覆盖别人的数据等等，本节的设计模式，就介绍怎么合理前端存储。数据访问对象模式 抽象和封装对数据源的访问与存储， DAO通过对数据源链接的管理方便对数据
2020-12-15 15:10:16
198
原创 代码要写成别人看不懂的样子（十六）
本篇文章参考书籍《JavaScript设计模式》–张容铭文章目录前言链模式前言 大家一定用过 JQuery 吧，这东西的一大特性就是链式调用，获取到某个元素后，直接连续执行多个方法，贼帅，其实我们也可以做到。 本节开始，就给大家介绍一些技巧性的设计模式，平时能经常用到，类似语法糖一样，简单易懂，而且功能奇妙，不会像前面的设计模式那样长篇大论，肯定比前面容易接收，而且有趣。链模式 通过对象方法中，将当前对象返回，实现对同一个对象多个方法的链式调用。
2020-12-10 15:41:01
152
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人