04 2022 档案
摘要：最近看到涉及 node_modules 的问题比较多，所以决定深入学习一下，正好看到一篇文章，写的还挺详细的 Ryan对于node.js的十大遗憾之一就是支持了node_modules，node_modules的设计虽然能满足大部分的场景，但是其仍然存在着种种缺陷，尤其在前端工程化领域，造成了不少的
阅读全文
摘要：当我们使用 npm 上的第三方依赖包，如果发现 bug 时，怎么办呢？ 想想我们在使用第三方依赖包时如果遇到了bug，通常解决的方式都是绕过这个问题，使用其他方式解决，较为麻烦。或者给作者提个issue，然后等待作者的修复，等待的时间不可控。那么这时候是不是就可以借助patch-package自己动
阅读全文
摘要：一、CSS shapes 布局 shapes 表示形状，CSS Shapes 布局可以实现不规则形状的文字环绕效果，需要和浮动配合使用。 CSS shapes 布局相关属性并不多，主要是这 3 个属性：shape-outside、shape-margin、shape-image-threshold
阅读全文
摘要：今天无意间看到原来 SpringSecurity 自带了 CSRF 防御处理，所以记录下，不得不说 SpringSecurity 功能还是挺强大的，蛮多业务场景都提供了支持。 CSRF 就是跨域请求伪造，英文全称是 Cross Site Request Forgery。这是一种非常常见的 Web 攻
阅读全文
摘要：长列表网页相信大多数开发者都遇到过，在DOM元素过多的情况下，浏览器渲染会很慢，非常影响用户体验。因此我们会经常采用时间分片、虚拟滚动、分页、上拉加载更多等不同的方式来进行优化，这些方式的思想都是一样的，都是只渲染可见区域，等用户需要时再加载更多的内容。而以上的方式无论哪种，都需要写大量的js或者c
阅读全文
摘要：一、Jest 和 Mocha 对比选型 至于：前端为什么做单元测试？JavaScript 单元测试的现状，常见单元测试工具：Jest 和 Mocha 的对比，可以看这篇文章了解：https://mp.weixin.qq.com/s/r08NghhRybAwBX9dzcoE1w 从 github st
阅读全文
摘要：Code Lint是前端工程化中的一个重要环节，它可以帮助我们在部署代码到生产环境之前及时发现错误并纠正它们，也可以规范我们的编码习惯，让团队的代码风格保持统一。 Code Lint的工作原理是借助一些lint工具对代码进行静态分析，并在合适的时机触发校验，提示错误。 在一个团队项目中，代码风格不统
阅读全文
摘要：一、背景介绍 我们在使用一个比较厉害的框架或者库的时候，经常可以看到 CHANGELOG.md，维护版本更新内容。 这种版本更新内容是非常必要的，如果用户使用了你的轮子，连更新内容都不知道，试问你敢用吗？ 那么这些都是怎么写的呢？每次发版都要手动记录吗？显然不是，这些都是靠提条记录生成的。 比如我们
阅读全文
摘要：一、命名规范 经过社区的不断发展，协定了命名包含以下几种规范： 1、下划线命名：user_name 2、中划线命名：user-name 3、小驼峰命名：userName 4、大驼峰命名：UserName 有了这些规范，开发者们起名字的时候心里就有谱了。而且这些规范目前也被大多数开发者们接受，如果不按
阅读全文
摘要：一、css 样式覆盖实现 1、核心：通过切换 CSS 选择器的方式实现主题样式的切换 在组件中保留不变的样式，将需要变化的样式进行抽离 提供多种样式，给不同的主题定义一个对应的 CSS 选择器 根据不同主题设置不同的样式 2、如何实现： （1）通过 vuex 存储和控制全局的主题色； （2）在 te
阅读全文
摘要：localStorage 存储我们经常使用，但是你有没有深入思考下面这些问题呢？ （1）localStorage 存储的键值采用什么字符编码 （2）5M 的单位是什么 （3）localStorage 键占不占存储空间 （4）localStorage的键的数量，对写和读性能的影响 （5）写个方法统计一
阅读全文
摘要：一、stream流导致分页失效的问题 今天发现使用 PageHelper 进行分页时，分页失效了。查了下发现是这个原因，改了之后就正常了，记录一下。代码就不贴了，贴别人的。 1、问题场景：前端分页数据不对，始终只有 pageSize 10 条数据 2、业务代码 public ResultVo<Pag
阅读全文
摘要：一、为什么需要声明文件 1、创建 src/sum/index.js 文件，内容如下： 这是一个最普通不过的 js 文件，对外暴露 sum() 方法，在 nodejs 中运行。 function sum(a, b) { return a + b } module.exports = sum 2、创建
阅读全文
摘要：官方文档：https://developers.weixin.qq.com/doc/offiaccount/Message_Management/Template_Message_Interface.html 1、登录公众号管理平台：广告与服务 - 模板消息 在这里需要添加“消息模板”（这里是需要拿
阅读全文
摘要：一、编写 Loader 和 Plugin 介绍及模板 1、Loader 本质及编写 Loader 在编写 Loader 前，我们首先需要了解 Loader 的本质。其本质为函数，函数中的 this 作为上下文会被 webpack 填充，因此我们不能将 Loader 设为一个箭头函数。 函数接受一个参
阅读全文
摘要：Webpack 是一个用于现代JS应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。 我们看一下Webpa
阅读全文
摘要：array.map() 是一个非常有用的映射函数：它接收一个数组和一个映射函数，然后返回一个新的映射数组。 但是它只能一对一的映射。现在有一个替代 array.map() 的方法：array.flatMap()，这个方法给了我们映射的能力，同时也可以在生成的映射数组中删除，甚至添加新的项目。 一、更
阅读全文
摘要：一、require 函数 1、require 函数是什么？ 首先，直接说require函数的功能：用来加载目标js库，并返回目标js库公开的属性成员函数/变量。 我们在终端 node shell 输入 this.require require，可以看到为 true 由此可得出结论：require是N
阅读全文
摘要：一、使用游戏来理解协程的概念 如果你还在想办法理解协程是什么，那么就让我们玩一玩分手厨房。分手厨房（overcooked)，是一款多人烹饪游戏，玩家需要在特定的时间内做出尽可能多的订单。协程 (coroutine)有些人花了很多时间并不一定能理解它，而游戏，却很容易理解。 1、如何玩？先让我们来看看
阅读全文
