04 2023 档案
摘要：前言 众所周知，esmodule导出的值是对应模块导出值的引用，一旦模块内部使该值发生了变化，获得的值也会变化。而commonjs种的require函数，是获取了该模块导出值的拷贝，如果原模块中的值发生了变化，是拿不到最新的值的，那么有没有办法可以获取到最新的值呢。 解决思路 既然正常方法是拿不到对
阅读全文
摘要：前言 针对很多大型的web应用，往往会衍生出很多子应用，而这些子应用之间有时候又往往需要进行交互或者复用一些功能或者组件，这个时候有没有一个比较好的策略来实现这样的交互呢。答案是有的，试试webpack5提供的Module Federation。 先来个示例 万事先实操，然后再谈别的，不付诸实践的想
阅读全文
摘要：前言 Vue.extend生成一个组件的构造器，使用的场景其实不算多，一般来说，在需要实现一个全局的类似alert，message组件的时候，可以比较方便的使用它，动态地挂载。 开始读源码 Vue.extend = function (extendOptions: any): typeof Comp
阅读全文
摘要：前言 Object.create与new都可以用来生成一个对象，那么它们之间有什么区别和联系呢 分析 先看一下用法，很明显可以看出，new是生成一个基于构造函数生成一个新对象，而Object.create是基于某个对象，将这个对象作为原型链实现的一个新的空对象。 function O(a) { th
阅读全文
摘要：前言 很久没写过这种等高布局实现了，来重温一下经典。 两栏布局，高度相等，高度由最高的内容撑开，左右两边高度不固定。 固定html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-U
阅读全文
摘要：前言 之前老是听别人提到WebAssembly这个词，一直对其比较模糊，不能理解是个啥东西，后来自己实践了一下，发现其实就是一种提高代码性能的手段。 简介 WebAssembly 是一种运行在现代网络浏览器中的新型代码，并且提供新的性能特性和效果。它设计的目的不是为了手写代码而是为诸如 C、C++和
阅读全文
摘要：前言 有时候，需要提高一些开发效率，我们通常会使用一些优秀的代码编辑器，比如vscode。在使用vscode的时候，会用到很多插件，有时候也会萌发想要去开发这个插件的念头。既然想到了，那就动手试一下。 开发过程 我感觉最快的上手方式不是讲一些虚头巴脑的概念，先去试一下怎么去实现一个简单的插件，写得多
阅读全文
摘要：有时候，有些功能比较通用，但是又不好加在代码中，就可以考虑做成浏览器插件的形式。下面我以一个最基础的插件来讲一下这个插件的开发、打包、以及发布过程。 代码结构 index.html manifest.json 代码内容 // manifest.json，其它的一些配置可以参照https://deve
阅读全文
摘要：使用过很多次滑块验证码的功能，偶然一次想起来，能不能简单的实现一个呢，于是就尝试了一下，然后记录下来了，图个乐子。 思路 首先是绘制一张图片，自然而然，要用canvas了，就像下面这样，首先加载一张图片，然后去绘制到canvas中。 <div id="validate"> <canvas id="c
阅读全文
摘要：循环引用 使用JSON.stringify()时，遇到循环引用的时候，会抛出错误TypeError: Converting circular structure to JSON，如果需要强行转成字符串的话，需要利用到该方法的第二个参数。 主要思路其实就是将循环引用的部分替换成某个标识，等到解析的时候
阅读全文
摘要：背景 针对目前团队自己开发的组件库，对当前系统内引用组件库占比进行统计分析，以实现对当前进度的总结以及后续的覆盖度目标制定。 主要思路 目前找到的webpack分析插件，基本都是针对打包之后的分析打包之后的chunk进行分析，但是我希望的是分析每个页面中的import数，对比一下在所有页面中的imp
阅读全文
浙公网安备 33010602011771号