上一篇我们介绍了， 在其中初步讨论了解析器parser，它的作用是将模板字符串转化为模板AST。 要实现一个完整的HTML解析器远比想象的要复杂的多，本篇就来详细介绍一下解析器的实现。 文本模式 解析器在解析文本过程中会进入一些特殊状态…

编译器说来很简单，它就是一段代码，作用是将源代码翻译成目标代码。 为什么需要翻译呢，因为机器能阅读运行的代码往往晦涩难懂，而人们需要编写易于阅读和维护的代码， 那我们写出来的代码需要运行就需要用到编译器。 Vue…

上一篇我们介绍了， 了解了组件就是对一组DOM节点的封装，对于渲染器它就是特殊的虚拟节点，也了解了渲染器是如何处理组件的。 vue中有几个非常重要的内建组件，包括 、 、 等等…

在上一篇中，我们了解了虚拟DOM，以及渲染器如何将虚拟DOM渲染为真实DOM。 下面这段代码就是用虚拟DOM的结构来表述一个真实DOM。 当我们编写复杂页面时，描述页面结构的虚拟DOM的代码量会很多，也就是编写的模板会很大，这时候就需要有组件化的能力…

在页面上创建出真实DOM的过程称之为渲染。浏览器中有渲染引擎它会解析HTML、css和JavaScript代码来创建DOM。 而在vue中，需要支持用户使用模板来编写代码，所以很多原本浏览器的工作，就需要vue框架自身来提供了。 虚拟DOM vue是一个声明式的UI…

介绍了响应式的概念与基本实现，这一篇我们针对具体的响应式数据，来探讨一下如何实现完整的响应式功能。 Reflect 上一篇中我们介绍了Proxy，列举了传入Proxy中的拦截器方法。JavaScript中还有一个全局对象叫做Reflect，其下有许多方法…

总结一下写出高质量prompt的十大要点。 为什么要研究prompt 最近搭建了一个基于大语言模型的自动代码生成应用，整个搭建的过程，超过8成的时间都在调整prompt。 虽然平时也经常使用chatGPT生成代码或者文本什么的，觉得写prompt还挺容易的…

总结一下学习大语言模型过程中遇到的一些知识点。列了很多，能看出来近几年的一个发展过程。 机器学习 机器学习是实现人工智能的一个核心技术。它使得计算机可以在训练数据中进行”自学“，来做出自己的预测，而不需要人类进行显示的编程。 从图上可以看出机器学习基本分成有监督学…

什么是响应式？ 此时我们更改a和b的值，观察c。 c仍旧是3，不会改变。因为JavaScript语言本身是不具备响应性的。 那么vue是如何实现数据的响应式的呢，让我们来一步一步分析。 Proxy 在讲响应式之前，我们先来了解一下Proxy。 Pro…

写了这么多年的vue，从vue2到vue3，从.vue到.tsx，一直没有系统性地去了解这个框架，有很多问题没有深入去思考过。 ref、reactive背后的响应式是如何实现的。 我们写的template是如何变成真实dom展示在界面上。 声明式的代码其性能如何做到…

从使用React开始就知道了这么个概念，叫做虚拟DOM，Vue中(包括Vue2和Vue3)也用到虚拟DOM，或者叫虚拟节点VNode。 那么什么是虚拟DOM，又为什么要使用它呢，让我们一起来了解一下(下文中的代码示例都基于Vue3)。 什么是虚拟DOM 虚拟DOM对…

写了那么多年spa应用，知道它是单页应用，也知道啥是单页应用，但是还有很多深层问题一直没有探究到，直到某天踩进坑里。 spa应用 什么叫spa，Single-page application，也就是单页应用。 什么叫单页，就是整个网站只有一个html…

前一阵子买了个伪苹果键盘，因为机械键盘给我手心搞了个茧子(让我研究了一下我的打字手势)，决定换回苹果键盘。然而买的这个它竟然不支持你设置 将F1、F2等键用作标准功能键，也就是说我每次打开控制台都得按Fn+F12。这就导致一上午我就在 想打开控制台 --> F12…

热更新是开发过程中必不可少的功能，想象一下开发一个表单，好不容易填完了所有信息，提交发现逻辑错误，改完代码发现页面刷新了，要挨个重填一次， 直接原地qushi，而有了热更新，页面的状态就都能保留，极大地提升开发效率。 用了这么多年热更新，是时候来理一理它的原理了。…

从一个bug开始，了解一下js的模块系统，主要是commonJS和ES module。 问题 今天遇到一个bug，代码我简化了一下如下，问题是url.ts中导出的url值始终为b，理论上当common.ts中的commonConst值为true时，url就会为a呀。…

去年开始使用nuxt2，今年参与了一个nuxt2升级nuxt3的项目，对关于选择nuxt重构项目的背后原因，以及使用nuxt3开发过程中碰到的许多问题进行了探索和梳理 在这里完整的地记录一下。 本文主要介绍一下什么是ssr，为什么要使用它…

1. 微前端 微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。 通俗来说，就是在一个web应用中可以独立的运行另一个web应用 现在前端的应用越来越大，而前端技术又是日新月异，今天vue2，明天vue3…

不知道有多少小伙伴跟我一样，是chatGPT火了之后才第一次知道LLM这个概念的，第一次听到这个词，然后去问chatGPT: LLM的全称是什么，chatGPT回答我LLM的全称是Master of laws，法律硕士。LOL。。。 LLM火出圈了…

在js中，一切排序都可以通过Array.sort方法来实现，你可能不曾注意到，在不同浏览器中，它的表现可能不一致。 问题 今天遇到了一个在Firefox浏览器上出现的bug，有一个对象数组，需要按照其id是否存在与另一个数组中进行排序，在chrome上是正常的…

最近学习了一下，介绍如何做响应式设计。 搭建这个博客的时候也考虑了适配不同size的屏幕以及手机，最开始就是凭着感觉和经验去适配，或者看看别的网站是怎么设计的。 Learn Responsive Design…

webpack系列的开篇中提到学习webpack源码的契机是模块联邦，这是webpack5的一个新特性， 它可以让多个独立的构建组成一个整体应用，这些构建之间没有依赖相互独立，可以各自开发部署。 我们就来看看模块联邦到底是如何实现的…

上一节中介绍了webpack编译的第一部分初始化阶段， 这个部分创建了compiler、compilation、NormalModuleFactory，将插件注册到了生命周期的各个节点中，为下一阶段做好了准备工作。 那么这一节我…

上一节介绍了一些编译过程会遇到的概念，例如compiler、compilation、plugin等等， 那么这一节我们就从compiler开始看看这些词到底扮演了什么样的角色。 创建Compiler 上回说到require…

AI工具 文案润色 Chat with documents 阅读助手 开发人员的AI搜索引擎 工具 图片压缩 生成临时邮箱 网页双语扩展翻译 插件 chatGPT浏览器插件 书籍 zhelper search 配置小工具 Internet Archive 查询 Can I use…

上文讲到通过webpack-cli或者其它任何方式处理完参数后， 都会执行webpack(config)。 接下来我们就进入webpack一探究竟。 require('webpack') webpack的入口文件…

在上一篇中介绍了webpack的使用方法，我们后续的demo也是基于此创建的。 源码版本如下: webpack指令 先来看webpack的package.json文件，在这里面可以看到webpack的入口文件是lib/index…

在使用webpack的很长一段时间里，它对我来说基本是无感的。接触最多的可能就是webpack.config.js，需要某个功能了，了解一下相关配置添加进去。 它一直以来does such a good job以至于我对它一无所知。 去年底的时候我接触了一个概念叫做…

先来沉浸式体验一下小游戏 当我知道这是仅html+css实现时，我是不信的，下面是我从不信到相信的全过程。 1. type="reset" 先从简单的来，如何做到点击 来重置游戏的呢 看一下html部分的代码…

vue2的框架，引入了qiankun模块，遇到一个比较诡异路由问题，请教了大佬才得以解决，收获不少。 1. 问题 使用window.history.pushState修改url(urlA --> urlB)，但是之后url又莫名被改成了urlA 2. 解决之道…

鸭子类型想必大家都耳熟能详，只要你走起来像鸭子，叫起来像鸭子，那么你就是只鸭子。 Structural Typing JavaScript天生就是鸭子类型，而TypeScript也使用Structural Typing模拟了这个行为，即 不用显示声明类型T实现了接…

本文是对《Effective TypeScript》中归纳总结(Things to Remember)的翻译 1. 理解TypeScript与JavaScript的关系 Item 1:Understand the Relationship Between TypeScript…

我在使用TypeScript的很长一段时间里，都没有认真地思考过它到底是一个什么东西，I mean我知道它给JavaScript增加了类型约束， 但是是以一种什么样的方式，又会在何种程度上影响我的JavaScript代码呢？ 1. What is Ts是Js的超集…

最近一直很想好好地学习一下TypeScript，使用很长一段时间了，从一开始的觉得麻烦，到后来渐渐习惯，再到有一天突然真实地 发现TypeScript的好，是时候深入了解一下TypeScript的世界观了。 TypeScript TypeScript跟JavaScr…

当你希望你的函数或类支持多种数据类型，那么就可以用到泛型，对于函数重载，如果想要一个函数支持所有数据类型，使用函数重载如下： 但是这个过程丢失了一些信息，就是类型之间的约束关系，比如输入参数和返回值类型必须一致就无法通过这种写法进行约束。 泛型…

写css最逃不开的应该是浏览器兼容问题了吧，因为css存在一些未定义行为，各个浏览器都会按照自己的渲染规则来表现，就会存在表现不一致的情况，还有很多属性某些浏览器不支持，很多时候需要我们用更通用的方法来实现一些UI效果。本文重点来说说浏览器是如何把一个页面渲染出来的…

开篇提到css最开始的设计就是服务于图文信息的，文本处理和展示能力的强大。 不知道大家有没有用过 ，它用来控制字体大小的功能类是下图这样的，设置font-size的同时还设置了line-height，第一次用的时候很迷茫，为啥这俩要一块儿写…

1. font-size font-size字号，设置字体大小，很简单的一个属性。它的单位有很多，除了最常用的px，还有ex、em、rem等。 ex 一个相对单位，指小写字母x的高度 内联元素默认是基线对齐的，而基线就是 x 的底部，而 1ex 就是一个 x 的高度…

当某一天有个元素被另一个元素挡住，意识到，啊~~原来web界面是三维的，那个时候知道了z-index这个属性，想让谁在上面，就给谁设置一个相对更大的值就可以了。 又有一天，发现我在header上hover出来的下拉框被下面的某个内容挡住了…

css（二） 一些基本概念提到了盒子，替换元素里讲了一下content，这边我们来聊一聊剩下的三个盒子padding、margin和border 1. padding padding内间距，他是4个盒子中最温和的，基本不会出现什么反认知的现象。 padding…

CSS的默认流是水平方向的，宽度是稀缺的，高度是无限的。因此宽度的分配规则比较复杂，而高度就显得比较随意。 1. width 在经年的css使用中，width给人的感觉很复杂，从一开始的写死宽度，到之后使用百分比，到后面尽量不写宽度，让它自己撑开…

插播一则最新消息： 幽灵节点找到啦 中提到了读《CSS的世界》这本书的契机是一个bug，今天，这个困扰我1023小时又9分钟的问题，终于解决了✌️。 再描述一遍问题： 图上这个空格左右两边多了一部分空白，无法选中，没有border…

《CSS的世界》不是一本文档书，他更多的是对css的理解认知，但是其中还是出现了很多我没有完全理解或者之前没有听过的名词/概念，这边先把这些概念记录下来。 1. 元素 html的标签有很多，像常见的<div>、<span>、<li>等等，通常分成两类： 块级元素 内联元素…

css世界的定位和布局机制叫做文档流， 它跟现实世界的水流很相似，将一个块级元素(div)放入容器中，它会像水流一样，自动铺满容器，将内联元素(span)放入，它会依次排列下去，一行放不下了就换下一行。如果整体高度超过容器，就会溢出(overflow…

10 年风雨积累，踏遍 CSS 世界的千山万水，哪里有美景，哪里有秘境，哪里是陷阱，哪里是路径，我全了然于心。 从业快5年了，关于css，好像真的没有系统地学习过，大概是因为它真的是入门非常简单的语言。我学习css的开端就是坐在一位前端小姐姐边上看她调试，后来就开始照葫芦画瓢…

渐变色是一种很常见的装饰效果，经常遇见需要给背景设置一个渐变色，但是你有没有遇到过需要给边框设置渐变色的需求呢？ 1. 先说几个概念 1.1. border-image 指定作为div元素周围边框的图像 1.2. linear-gradient() 函数…

最近开发的时候被icon烦到了，之前都用的是antd或者ele的图标，就这个写法: 或者使用阿里矢量库的图标也基本是这么个用法。 但是这次的新项目不用这些，要用项目封装好的一个组件，我一直没整明白(然后就都用img，不同颜色就得再下一张图，实在蠢)，今天抽个时…