sybh的博客

在学习引擎源码之前，我们需要了解源码的结构，就好比我们看书时需要先看大纲一样。那么引擎的源码结构是怎样的呢？前文我们编译的 SlowJS 是经笔者调整过的引擎源码，大家不免有疑问，为什么不直接使用引擎原始的源码呢？为了回答上面的两个问题，本节我们先一起看看 QuickJS 原始仓库的目录结构及编译方式，然后看看 SlowJS 的源码结构及编译方式。

单纯学习源码的效率是很低的，编程的一大乐趣就是其交互性，所以首先我们需要将引擎跑起来。本节我们将完成环境的配置工作，配置引擎的编译、运行以及开发环境。

如果有个方式，可以使用较少的时间，先获得「原来引擎内部大致如此」的感觉，再进行系统性地学习，就可以事半功倍 - 分析一个实现简单清晰，功能相对完备的引擎的源码，就是这样的方式。当然，有效的人机交互也是必要的，真就直接编写字节码的话，其效率可想而知。这些特点，可以树立我们学习引擎实现的信心，方便我们将注意力更多地放在引擎的核心功能上，花费较少的时间了解到引擎内部执行的全貌。JavaScript 引擎是有着一定复杂度的软件，如果说为了研究引擎的实现，开始就想着从无到有实现一个引擎，几乎是不可能的。

小册介绍也许你还不知道 QuickJS 是什么，但你肯定听说过 V8 引擎。V8 引擎是当今主流的 JavaScript 引擎（JS 引擎）之一，相比 V8 这类引擎动辄百万行的代码量，QuickJS 仅通过约 5.4 万 C 代码就达到了与之相媲美的完成度。比如，从下图 QuickJS、V8、JSC 等引擎执行 Test262 的情况中，我们就能看出，QuickJS 与主流引擎对 ECMAScript 标准的支持度是差不多的。QuickJS、v8、JSC 等引擎执行 Test262 的结果对比。

Canvas 我们需要知道一些小技巧，比如变换坐标轴、dpr 适配、如何解决文字倒置问题等。K 线图的核心难点在于范围筛选导致的图形变化，提前考虑并管理好数据，能极大方便我们后续的开发。K 线图的性能优化我们可以从 Web Worker、离屏渲染、分层渲染等考虑。下一节我们将通过 Konva 框架快速实现一个图形编辑器。

最后，我们总结下这一节的关键知识点。D3 基于 SVG 的数据驱动视图的库，通过链式调用、封装比例尺、数学方法、数据状态的管理等，我们可以轻松绘制复杂的图表。我们的关注点只在数据，不用深入数据背后的调用，修改数据意味着视图会被更新。定义绘图区域 -> scaleBand 用于离散数据，用在 x 轴的比例尺；在 y 轴我们用scaleLinear，生成比例尺 -> 生成坐标轴 -> 通过 rect 生成柱体。

其实从总的学习路径来说，我们将从理论 -> 2D -> 3D 应用 -> 3D 底层（图形接口 + Shader）学习。通过小册的学习，你将能体系化地吸收并综合应用到你未来的编辑器、图表、三维应用、游戏开发中，所以是物超所值的。

例如：CSS复制代码。

简单地说，CSS 变换特性允许你通过应用位移（translate）、旋转（rotate）、缩放（scale）和倾斜（skew）等变换效果，以及三维空间的变换，改变 Web 元素的位置、大小和外观，从而创建各种动画、视觉效果和交互效果。这些变换可以通过 CSS 的transform属性应用于 HTML 元素，使得 Web 开发者能够实现富有创意和引人入胜的用户界面。CSS 变换和许多 CSS 功能一样，异常出色，绝不仅限于动画开发中。

在这个竞争激烈的环境中，所有人正在拼命寻找捕捉和保留人们注意力的方法。当我们在日常生活中进行活动时，从街头的动画广告、手机上的视频，更不用说社交媒体的信息流中涌来的无尽视觉刺激，都营造了一种不断移动的感觉，争相吸引我们的注意力。我们对环境中的运动产生的瞬时反应是出于生存的需要，由感知为潜在威胁或有害的环境刺激触发；人们会额外关注那些运动的事物。当我们眼角瞥见一些快速运动的东西时，大脑会在瞬间提醒我们，因为我们的潜意识早在我们的意识有时间处理信息之前就已经对危险作出了反应。

大漠，W3CPlus 创始人，《现代 Web 布局》、《防御式 CSS 精讲》、《现代 CSS》小册作者，曾就职于淘宝。对 HTML、CSS 和 A11Y 等领域有一定的认识和丰富的实践经验。CSS 中国布道者，2014 年出版《图解 CSS3：核心技术与案例实战》。在当今数字时代，Web 页面已经不再是简单的文本和图像，已经演化成了充满生命的艺术品。其中，关键元素就是 Web 动画。《Web 动画之旅》将带领你踏上一场充满创意、技术与艺术的旅程，深入探讨 Web 动画的世界。

本篇我们来实现 React Notes 的左侧侧边栏部分。客户端组件下移使用 Suspense。

欢迎来到实战篇！基础篇的目标是带大家复习基础知识，以及用作使用手册，方便大家在以后的项目开发中查询 API 用法，属于这本小册的“赠送面积”。从本篇起就进入小册的正式内容了。我们的第一个实战项目是，因为 Next.js v14 基于 React Server Component 构建的 App Router，而 React Server Component 的起源是 2020 年 12 月 21 日 React 官方发布的关于 React Server Components 的介绍文章。

路由处理程序是指使用 Web Request和 ResponseAPI 对于给定的路由自定义处理逻辑。通俗的理解就是我们常说的“写接口”，用于实现前后端交互。本篇我们会讲解如何定义一个路由处理程序以及写路由处理程序时常遇到的一些问题。写路由处理程序，你需要定义一个名为route.js的特殊文件。（注意是route不是router该文件必须在app目录下（对应 Pages Router 下的 API Router），可以在app嵌套的文件夹下，类似于page.js和layout.js。但是要注意。

实际项目开发的时候，有的路由场景会比较复杂，比如数据库里的文章有很多，我们不可能一一去定义路由，此时该怎么办？组织代码的时候，有的路由是用于移动端，有的路由是用于 PC 端，该如何组织？如何有条件的渲染页面，比如未授权的时候显示登录框？如何让同一个路由根据情况不同展示不同的内容？本篇我们会一一解决这些问题，在此篇，你将会感受到 App Router 强大的路由功能。

路由（routers）是应用的重要组成部分。所谓路由，有多种定义，对于应用层的单页应用程序而言，路由是一个决定 URL 如何呈现的库，在服务层实现 API 时，路由是解析请求并将请求定向到处理程序的组件。简单的来说，在 Next.js 中，路由决定了一个页面如何渲染或者一个请求该如何返回。Next.js 目前有两套路由解决方案，之前的方案称之为“Pages Router”，目前的方案称之为“App Router”，两套方案是兼容的，都可以在 Next.js 中使用。

冴羽，一个正经的前端工程师，在淘宝主导负责过多个亿级流量产品。技术写作 8 年，全网千万阅读，GitHub 中国区 Top 30，GitHub Blog 28k Star，掘金签约作者、思否 Top Writer，写有 JavaScript 深入系列、JavaScript 专题系列、ES6 系列、TypeScript 系列、博客搭建系列、React 系列等多个系列文章，维护“冴羽的JavaScript博客”公众号，同时在个人成长、心理学领域有非常多的输出。

CSS预处理器是一种工具或语言，它扩展了原生CSS的功能并增加了一些额外的功能和语法，以提高样式表的编写效率、可读性和可维护性。其工作基本原理编写使用预处理器的特定语法的样式文件，然后将其编译为普通的 CSS 文件，供浏览器解析和渲染。以下是市面上流行的三种CSSSass：一种成熟且广泛使用的 CSS 预处理器。它扩展了CSS并引入了变量、嵌套、混合、继承等功能。SassSass风格使用类似于 Ruby 的缩进语法，而Scss风格的语法则采用更类似于CSS的大括号语法。Less：另一种流行的CSS。

本篇文章比较长且有些地方难以理解，如有不明白的地方烦请多读几遍。文章开始先介绍了以往我们所认知的CSS 优先级，到后面为了更好理解!important的概念及作用，我们又说明了CSS 的三大起源概念。到最后我们讲解了layer的作用及优先级。

众所周知，在Web项目开发中，无论是企业官网，还是门户或者平台网站，再到后面发展流行起来的移动端 Web 页面，其美轮美奂的效果都离不开CSS。虽然相较于其他语言（如 JavaScript），CSS语言本身简单且好理解，但是真正能做到通过各种属性样式组合出各种场景或者动画效果却也不是一件简单的事，这需要大量的实战经验，不断学习、不断总结才可以致于此。随着大众对审美的要求日渐提高，CSS作为网站的“颜值担当”存在，自然而然地位也是水涨船高。关于CSS样式的具体用法，本小册可能不会涉及太多，我们主要从。

清清玄，高级前端工程师，阿里云认证专家博主，开源框架 AdminWork 的作者。有多年Android移动端开发经验，现致力于Web 前端开发。对原生移动端开发VueReact小程序uni-app等技术有一定的认识和丰富的开发经验。开源框架 AdminWork 官网：众所周知，在 Web 项目开发中，无论是企业官网，还是门户或者平台网站，再到后面发展流行起来的移动端 Web 页面，其美轮美奂的效果都离不开 CSS。

默认情况，在构建的时候，会使用系统自带的原生窗口样式，比如在MacOS下的样式：在有些情况下，操作系统的原生窗口并不能符合我们的一些视觉和交互需求。所以，在使用electron创建桌面应用的时候，有时候我们希望能完全掌控窗口的样式，而隐藏掉系统提供的窗口边框和标题栏等。这个时候就需要用到自定义窗口。既然无法做到全屏拖拽移动窗口，那么有没有更好的办法呢？其实另一种方案就是自定拖拽移动，具体怎么做呢？Electron 需要拖拽的窗口的内容区域监听mousedown事件，如果是鼠标左键按下，则开启可拖拽开关。

其实这个场景我们经常碰到，比如微信、钉钉、QQ 这些聊天类软件，它们自带了多端数据同步的能力：当我们在手机上进行聊天时产生了大量数据，在当我们登录电脑设备时，这些数据又可以被同步到电脑终端上。这样的软件，那你可能体验过右击菜单增强的特性：当鼠标选中图片，右击触发系统菜单的时候，会弹出系统右击菜单，并可以通过菜单面板选项进行直接上传。工具箱装载了大量的插件，如果我们工作的电脑 A 使用了这些插件并产生了一些数据，当我们再切到电脑 B 上使用插件的时候，我们是希望这些数据是能够同步的。

进程间通信（IPC）并非仅限于 Electron，而是源自甚至早于 Unix 诞生的概念。尽管“进程间通信”这个术语的确创造于何时并不清楚，但将数据传递给另一个程序或进程的理念可以追溯至 1964 年，当时 Douglas McIlroy在 Unix 的第三版（1973 年）中描述了 Unix 管道的概念。我们可以通过使用管道操作符（）将一个程序的输出传递到另一个程序，比如：bash复制代码# 列出当前目录下的所有.ts文件 ls | grep .ts。

前端工程师这一角色随着互联网的发展而逐渐形成。起初，网站开发主要关注基本的HTML（超文本标记语言）、CSS（层叠样式表）和一些简单的JavaScript交互。1990 年代中期，随着互联网的普及，网站不再只是展示信息，而是开始变得更加动态和交互式。在这个过程中，前端工程师的概念逐渐确立。他们开始负责网站的用户界面（UI）和用户体验（UX），包括页面设计、交互设计、响应式设计等。

作为开发者，我们经常会和各种桌面端软件、开发工具打交道，比如图床、json 格式化、抓包代理&mock、二维码生成等工具。这些工具有的是一个个桌面端 APP，有的是一些 Web 网页，用起来操作链路比较长。也有的工具使用起来非常鸡肋，食之无味、弃之可惜。基于以上痛点，如果你有“自己造轮子”的念头产生，但是又对桌面端应用开发一点也不了解，那么 Electron将会是可以快速验证你的想法、快速上线发包的最佳选择。举个知乎上有趣的回答的例子：Electron 作为一个强大的跨端的桌面端应用框架，受益于其基于。

小程序如何做到快速打开新页面小程序快速渲染流程原理webview-pageFrame设计原理。

介绍章节我们聊了一下“小程序”的一些概念和发展历程，并且拓展了一下思路。我们从本章节开始讲解小程序的架构。小程序的双线程架构设计。双线程对比单线程的优势在哪里。传统h5开发环境有什么弊端。Native层在双线程架构中起到怎样的作用。如何解决传统h5的安全管控问题。

小程序（Mini Program）我们都很熟悉，它是一种不用下载安装就能使用的应用，它实现了应用“触手可及”的梦想。如今，微信已经把小程序打造成了新的开发者生态，而小程序也是这么多年来，中国IT行业里为数不多的能够真正影响到普通程序员的创新成果。在小程序没有出现之前，Web开发者环境基本上围绕着Web与H5。安全管控、用户体验等。在遇到违规网站的时候，H5只能通过封掉的手段管控，即只有发现问题后才能有对策，这是非常被动的。

tailwind 是一个流行的原子化 css 框架。传统 css 写法是定义 class，然后在 class 内部写样式，而原子化 css 是预定义一些细粒度 class，通过组合 class 的方式完成样式编写。tailwind 用起来很简单：所有预定义的 class 都可以通过配置文件修改值，也可以通过 aaa-[14px] 的方式定义任意值的 class。所有 class 都可以通过 hover:xxx、md:xxx 的方式来添加某个状态下的样式，响应式的样式，相比传统的写法简洁太多了。

这节我们实现了 ColorPicker 的调色板。它的布局不复杂，就是一个渐变的背景，加上一个绝对定位的滑块。就是根据位置计算颜色、根据颜色计算位置，这两个方向的计算比较复杂。根据位置计算颜色，以 x 方向为例：需要用 mousemove 时的 e.pageX（距离文档左边的距离） 减去 scrollLeft 计算出滑块距离视口的距离，然后减去容器距离视口的距离，再减去滑块半径就是滑块距离容器的距离 x。然后用这个 x 除以 width 计算出 hsv 中的 s 的值。

创建一个 dayjs 的对象，然后用 daysInMonth 方法可以拿到这个月的天数，用 startOf、endOf 可以拿到这个月的第一天和最后一天的日期。其实上一节我们也是这么做的，只不过用的是 Date 的 api，而这节换成 dayjs 的 api 了。就是先 -1、-2、-3 计算本月第一天之前的日期，然后从第一天开始 +1、+2、+3 计算之后日期。这个循环就是填充剩下的日期的，从 startDate 开始 +1、+2、+3 计算日期。再添加一个属性标识是否是当前月份的。

Calendar 或者 DatePicker 组件我们经常会用到，今天自己实现了一下。其实原理也很简单，就是 Date 的 api。new Date 的时候 date 传 0 就能拿到上个月最后一天的日期，然后 getDate 就可以知道那个月有多少天。然后再通过 getDay 取到这个月第一天是星期几，就知道怎么渲染这个月的日期了。我们用 react 实现了这个 Calendar 组件，支持传入 value 指定初始日期，传入 onChange 作为日期改变的回调。

useState：状态是变化的数据，是组件甚至前端应用的核心。useState 有传入值和函数两种参数，返回的 setState 也有传入值和传入函数两种参数。useEffect：副作用 effect 函数是在渲染之外额外执行的一些逻辑。它是根据第二个参数的依赖数组是否变化来决定是否执行 effect，可以返回一个清理函数，会在下次 effect 执行前执行。

在前端开发工作中，我们每天都在写组件。业务组件一般不会很复杂，不需要很多封装。我们也会用一些第三方组件库的组件，比如 Ant Design，这些组件的 Props、TS 类型、内部实现等都做了很多设计。如果能自己写一个这样的组件库，不仅能提升写组件的水平，写在简历里也是非常加分的。而这本小册主打的就是组件库。我们会写 Calender、Table、Form、Space、ColorPicker 等各种组件，然后把它们封装成一个类似 Antd 的组件库。

在这里，我们先装作对 Node.js 不了解，从头来过吧。你有没有假装不了解 Node.js 我不知道，但我就当作你不了解了。本节会跟大家详细剖析一下 Node.js 到底是个什么东西。在它官网上是这么讲的：翻译过来：Node.js 是一个开源的、跨平台的 JavaScript 运行时环境。这里要敲黑板划重点了，JavaScript 运行时环境。

到这里我们全面了解了 Nuxt3 中各种数据请求 API 的使用方法。如果大家有选择困难症，我建议大家减少选项，因为useFetch本质上是高层封装，可以完全替代其他几个 API，另外如果我们还是想使用传统的数据获取方式，那就选择$fetch就好了！

客户端渲染：开发速度快，节约服务器资源；首屏慢，SEO 不友好；服务端渲染：首屏快，SEO 友好，适应性强；开发约束大，服务器费用高；静态站点生成：首屏极快，SEO 友好，服务器成本低；适应性弱，可维护性差；混合渲染：按需渲染，适应性强，可维护性好；稳定性、可用性不好；边缘渲染：性能好，服务器成本低；稳定性、可用性不好。

这门课我会全面讲解 Nuxt3 核心知识，然后在后端开发方面做一个知识扩展，最后带大家完成一个完整的实战项目。Nuxt3 稳定版于去年底发布，现在 API 稳定，生态繁荣，尤雨溪等前端大佬多次力荐 Nuxt3，短短 1 年时间 Github 标星已达 12k 以上，足见其优秀程度。它深度集成 Vue3、Vite ，具备自动导入、多渲染模式和全栈开发等优秀特性，可以在全栈开发、SSR、SSG 等场景发挥巨大作用。目前，官方文档只有英文版，且不够完善，很多例子离实战开发还有很大距离。

越来越流行的 Spring BootSpring Boot 是近几年来 Java 社区最有影响力的项目之一，也是下一代企业级应用开发的首选技术，Spring Boot 拥有良好的技术基因，它是伴随着 Spring4 而产生的技术框架，在继承了 Spirng 框架所有优点的同时也为开发者带来了巨大的便利，与普通的 Spring 项目相比，Spring Boot 可以让项目的配置更简化、编码更简化、部署更方便，为开发者提供了开箱即用的良好体验，进一步提升了开发者的开发效率。