【摘要】利用WebAssembly的导入导出功能可以灵活地实现宿主JavaScript程序与加载的单个wasm模块之间的交互，那么如何在宿主程序与多个wasm之间传递和共享数据呢？这就需要使用到Global这个重要的对象了。阅读全文 ...继续阅读 (72)

...继续阅读 (60)

本文翻译自How to implement Theme Switcher in JavaScript，作者：Pavel Keyzik， 略有删改。在本文中，您将学习如何在JavaScript中构建主题切换器。这应该是一件很容易的事情，但你也可以从我的代码中学到一些东西。我们需要处理哪些场景？我们应该解决的最基本的场景之一是将主题从亮到暗，反之亦然。我们需要解决的第二件事是，有些人更喜欢使用与系统中相同的设置。这对那些整天在黑暗和光明主题之间切换的人很有用。第三件事是保存用户首选项，否则刷新页面后所有设置将再次设置为默认值。创建主题存储我们创建初始函数createThemeStore()，它将包含几乎所有内容。我们在这里用这种方式实现，但这可能不是最佳方法。function createThemeStore(options) { // Initial mode const initialMode = options.defaultMode || 'system' // Initial state const state = { mode: initialMode, systemTheme: getSystemTheme(), theme: getThemeByMode(initialMode), } }在这里，我们创建一个只有3个变量的状 ...继续阅读 (91)

【摘要】在《WebAssembly入门笔记[2]》中，我们介绍了如何利用Memory在作为宿主的JavaScript应用和wasm模块之间传递数据，但是Memory面向单纯二进制字节的读写在使用起来还是不太方便，此时我们会更多地用到另一个重要的对象Table。Table利用用来存储一组指定类型的对象，说得准确一点是对象的引用，所以可以读取出来直接消费。阅读全文 ...继续阅读 (61)

不知不觉即将迎来2024龙年春节了。龙的形象在中国传统文化中有着广泛的应用，比如在传统文化中，龙代表着权力、威严、吉祥和神灵的象征，同时也是生命力和繁荣的象征。今天的文章将用原生JavaScript和Canvas API实现一个烟花的效果，效果如下所示，在放烟花的过程中将「龙年大吉」的文字逐渐显示出来。接下来开始具体的代码实现过程，针对重点实现代码进行解析，详情完整代码请看源码实现。烟花效果通常由多个元素组成，包括烟花、粒子、画布等。以下是对代码中关键部分的详细解析：Fireworks 类Fireworks类定义了烟花的行为，包括创建、绘制和更新烟花。其中的canvasLoop方法用于循环绘制画布，drawFireworks方法用于绘制烟花的效果，updateFireworks方法用于更新烟花的位置和状态。// Fireworks 类 var Fireworks = function () { // ... 省略部分代码 ... self.canvasLoop = function () { // 循环绘制画布 window.requestAnimationFrame(self.canvasLoop, self.canvas); self.ctx.globalCompositeOperation = 'destination-out'; se ...继续阅读 (89)

【摘要】利用灵活的“导入”和“导出”机制，WebAssembly与承载的JavaScript应用之间可以很便利地“互通有无”。《与JavaScript的交互》着重演示了如何利用函数的导入和导出实现功能的共享，接下来我们主要关注数据的传递或者共享。宗地来说，WebAssembly与宿主程序之间的数据传递主要有如下三种手段，本篇文章主要关注Memory。阅读全文 ...继续阅读 (89)

【摘要】前一阵子利用Balazor开发了一个NuGet站点，对WebAssembly进行了初步的了解，觉得挺有意思。在接下来的一系列文章中，我们将通过实例演示的方式介绍WebAssembly的一些基本概念和编程模式。阅读全文 ...继续阅读 (73)

本文翻译自Node.js Power Tools: 13 Libraries Every Developer Should Know，作者：Pinjari Rehan， 略有删改。Node.js被视为许多Web开发人员的理想运行时环境。它是世界上最流行的编程语言之一，Node.js提供了通过JavaScript库重用代码的能力，但是在项目中选择合适的库可能很困难。有用的库可以缩短开发时间，并为您的Web应用程序提供几个优点，例如更快的加载时间和减少应用程序包的大小。在选择库时，要考虑应用程序的复杂性、支持库的社区、更新的频率以及文档的质量。Node.js库通过Node.js包管理器npm进行维护，npm可以帮助安装各种开源库。下文选择了13个不错的Node.js库，它们使Web开发变得更简单，希望对你有帮助。什么是Node.js？Node.js是一个开源的服务器端运行时环境，用于JavaScript编程。它的异步特性和跨平台互操作性使其成为流行的Web开发基础。Node.js使用事件驱动和非阻塞I/O，使其在处理大量数据的实时分布式系统中非常高效。什么是Node.js库？库，有时称为模块，是预先编写的代码，封装了经常使用的操作。你可以利用库来加速编码过程，并鼓励代码重用，这将有助于你保持你的工作“DRY”（不要重复自己）。框架通常作为整个程序的骨架，与框架相反，库是完成的功能，可以 ...继续阅读 (114)

今天介绍JavaScript中双位非运算~~，~~操作符是一个强大且经常被忽视的特性。它提供了一种快速、简洁的方式来处理数字和执行类型转换，通常可以被用于数学计算和类型转换。我们先了解一下~~的基本概念和它的一些应用场景。~~操作符简介在 JavaScript 中，~~是双位非（bitwise NOT）操作符的双重使用。位非操作符 (~) 将其操作数的所有位进行反转（即，1 变成 0，0 变成 1）。当你连续使用两次（如~~），它会再次反转这些位，从而实际上返回原始值。在给定表达式~foo的情况下，其最终的效果是-(foo + 1)。因此双位非操作~~foo将导致-(-(foo + 1) + 1)。这只适用于整数，给定所有可能的操作数，与~~等价的真实的表达式可能是下面这样的，但真实的内部计算肯定不是这样：typeof foo === 'number' && !isNaN(foo) && foo !== Infinity ? foo > 0 ? Math.floor(foo) : Math.ceil(foo) : 0;下面是一些双位非运算的例子：~~null; // => 0 ~~undefined; // => 0 ~~0; // => 0 ~~{}; // => 0 ~~[]; // => 0 ~~(1/0); ...继续阅读 (118)

最近，有群里在群里发了这么一个非常有意思的卡片 Hover 动效，来源于此网站 --key-drop，效果如下：非常有意思酷炫的效果。而本文，我们不会完全还原此效果，而是基于此效果，尝试去制作这么一个类似的卡片交互效果：该效果的几个核心点：卡片的 3D 旋转跟随鼠标移动效果如何让卡片在 Hover 状态，有不同的光泽变化如何让卡片在 Hover 状态，有 Blink，Blink 的星星闪烁效果当然，要做到卡片的 3D 旋转跟随鼠标移动效果需要一定程度的借助 JavaScript，因此，最终的效果是 CSS 配合 JavaScript 以及一些动态效果的 Gif 共同实现。好，下面就让我们一步一步一起来实现这个效果。卡片的 3D 旋转跟随效果OK，接下来，如何实现 3D 卡片效果呢？这个效果之前在让交互更加生动！有意思的鼠标跟随 3D 旋转动效实现过一次，我们复习一下。这个交互效果主要有两个核心：借助了 CSS 3D 的能力元素的旋转需要和鼠标的移动相结合我们的目标是实现这样一个动画效果：这里，我们其实有两个核心元素：鼠标活动区域旋转物体本身鼠标在鼠标活动区域内的移动，会影响旋转物体本身的 3D 旋转，而旋转的方向其实可以被分解为 X 轴方向与 Y 轴方向。我们来看一下，假设我们的 HTML 结构如下：得到这样一个图形：这里，body的范围就是整个鼠标可活动区域，也是我们添加鼠标的m ...继续阅读 (103)

本文截取自《前端开发实战派》加作者好友进源码实战群大家好，我是杨成功。Express 是老牌的 Node.js 框架，以简单和轻量著称，几行代码就可以启动一个 HTTP 服务器。市面上主流的 Node.js 框架，如 Egg.js、Nest.js 等都与 Express 息息相关。Express 框架使用标准 Node.js 语法，主要由以下 3 个核心部分组成：路由。中间件。错误处理。认识基本结构Express 的基本结构很简单，只需要三行代码，应用就可以运行起来。const express = require('express') const app = express() app.listen(9000, () => console.log('启动成功'))假设上述代码写在 index.js 中，我们启动该应用使用命令node ./index.js，控制台会输出“启动成功”。为了方便，我们也可以在 package.json 中创建快捷命令，如下：// package.json { "scripts": { "start": "node ./index.js" } }那么现在启动应用就可以用npm run start命令。不过这种方式在本地运行项目时会有一个弊端，就是修改文件后不会立即生效，需要重新启动。为了提高效率，一般会使用一个名为 PM2 的模块启动 N ...继续阅读 (124)

...继续阅读 (50)

什么是 Vue DevToolsVue DevTools 是一个旨在增强 Vue 开发人员体验的工具，它提供了一些功能来帮助开发者更好地了解 Vue 应用程序。Vue DevTools：Unleash Vue Developer Experience. Enhance your Vue development journey with an amazing experience!典型的功能特征包括：Pages：显示当前的路由以及一些有用的信息，并提供在页面之间导航的快速方法。开发者还可以使用文本框查看每条路由的匹配情况。Components：显示组件信息，包括节点树、状态等。并提供一些交互功能，例如：编辑状态、滚动到组件等。Assets：显示项目目录中的文件，开发者可以通过一些有用操作查看所选文件信息。Timeline：允许浏览状态或事件的先前版本。Pinia： 与 pinia 集成的功能，允许查看 store 列表及其详细信息，并编辑状态Gragh：显示模块之间的关系。比如以下展示了不同功能的截图：在 Vue 项目中使用 Vue DevTools 有多种方法，比如：Vite Plugin独立 APPChrome 扩展程序Vue DevTools 的典型优质特征可以概括为以下几点：优质开发者经验：通过令人惊叹的体验增强开发者 Vue 开发之旅！广泛的应用程序：支持 Vite 插件、 ...继续阅读 (90)

在数据驱动视图的框架下，你最头疼的事情是什么？没错，就是获取dom。大部分业务逻辑都可以在数据层面进行处理，但有些情况就不得不去获取真实的dom，比如获取元素的宽高dom.offsetHeight或者调用某些dom方法等dom.scrollTop = 100通常在框架里，比如说vue中，会如何获取真实dom呢？我想大家可能都用过这样一个方法nextTick，用于在数据更新后获取dom，如下this.show = true this.$nextTick(() => ( document.getElementById('xx').scrollTop = 100 ))用过的都知道，这个方式非常不靠谱，经常会出现诸如类似这样的错误Cannot read property 'scrollTo' of undefined碰到这种情况，很多同学可能会用定时器，如果500不行，那就换1000，只要延时够长，总能获取到真实dom的。this.show = true settimeout(() => ( document.getElementById('xx').scrollTop = 0 ),500)或许这些框架底层有其他解决方式，不过我并不精通这些，那么，从原生角度，有什么比较好的方式去解决这些问题呢？换句话说，如何确保元素渲染时机呢？一、如何监听元素渲染？元素监听最官方的方式是Mutat ...继续阅读 (146)

热议话题 🔥OpenAI 推出 GPT Store：已超 300 万个应用1 月 11 日凌晨，OpenAI 推出了两款新的产品和服务：GPT Store 和 ChatGPT Team。GPT Store（GPTs）相当于大模型领域的苹果 App Store，是 OpenAI 在去年首届开发者大会上发布的重磅产品，用户无需任何代码，全程支持可视化点击操作。GPT Store 允许用户列出他们为其他人构建的个性化聊天机器人，以供下载。OpenAI 公司表示，到目前为止，其社区成员已经构建了 300 万个 GPT，并已批准了其中一系列 GPT 在 GPT Store 中供下载。GPT 构建者的收入计划将很快启动，将根据所构建的工具的用户参与度，来向美国的 GPT 构建者支付费用。OpenAI 之后将提供有关付款标准的详细信息。ChatGPT Team 则是 OpenAI 面对企业类客户的新产品，适用于用户数量少于 150 人的企业，每个用户每月支付 25 美元，按年支付；或是每个用户每月支付 30 美元，按月支付。它包括一个共享工作区，允许团队构建自己的 GPT。GPT Store 和 ChatGPT Team 的推出意味着 OpenAI 的商业化扩张之路再进一步。随着平台的搭建，后续 GPT 的收益政策将进一步完善，GPT 的生态版图进一步完善。科技资讯 🌍2023 JavaScri ...继续阅读 (88)

Handle element in an Arrayconst hobbies = ["sports", "cooking", "reading"]; console.log(hobbies[0]); # Get single element hobbies.push("surfing"); # Add new element to the end hobbies.unshift("movies"); # Add new element to th start hobbies.pop(); # remove the last element hobbies.shift(); # remove the first elementFind elementconst index = hobbies.findIndex((item) => { return item === "reading" }); console.log(index);A shorter code:const index = hobbies.findIndex((item) => item === "reading"); console.log(index); // Result 2Filter ...继续阅读 (35)

前言经过一个多月的重构，我成功打造了一款功能强大的多端趣味画板。这个画板集成了多种创意画笔，可以让用户体验到全新的绘画效果。无论是在移动端还是PC端，都能享受到较好的交互体验和效果展示。并且此项目拥有许多网上流行的画板功能，包括但不限于前进后退、复制删除、上传下载、多画板和多图层等等。详细功能我就不一一罗列了，期待你的探索。Link:https://songlh.top/paint-board/Github:https://github.com/LHRUN/paint-board在完成重构后，我计划撰写一系列文章，一方面是为了记录技术细节，这是我一直以来的习惯。另一方面则是为了推广一下，期望得到你的使用和反馈，当然如果能点个 Star 就是对我最大的支持。此篇文章是画板探秘系列的第一篇，我将会详细介绍关于撤销与反撤销的方案，示例皆以 Fabric.js 语法做示例，但思路是想通的。方案一：画板级缓存第一个方案是画板级缓存，这个是最简单的。在这种方案下，无需关心具体修改了哪些元素，也无需对整个画布数据进行差异化处理。简单来说，每当需要改变效果时（比如新增、删除、修改元素），只需将当前的画板数据 push 到历史操作栈上，然后撤销与反撤销重新加载相应的数据即可。这种方案的优势在于简单直接，无需考虑细节，历史操作栈记录了每一步的变更。然而，需要注意的是，由于是整个画布数据的无差别缓存，内 ...继续阅读 (129)

大家好，我卡颂。最近尤大的一个推文引起了不小热议，大概经过是：有人在推上夸React文档写的好，把可能的坑点都列出来尤看到后批评道：框架应该自己处理这些坑点，而不是把他们暴露给用户尤大在推上的发言一直比较耿直，这次又涉及到React这个老对手，关注度自然不低。再加上国内前端自媒体的一波引导发酵，比如知乎下这个话题相关的问题中的措辞是怒喷，懂得都懂。在这样氛围与二手信源的影响下，会给人一种大佬都亲手下场撕了的感觉，自然会引来React、Vue各自拥趸的一番激烈讨论。年年都是一样的套路，毫无新意......免费领取卡颂原创React教程（原价359）、加入人类高质量前端群面对这样的争吵，我们应该做什么呢？首先，回到源头本身，尤大diss的有道理么？有。React的心智负担重么？确实重。比如useEffec这个API，你能想象文档中一个章节居然有6篇文章是教你如何正确使用useEffec的么？造成这一现象的原因有很多，比如：Hooks的实现原理使得必须显式声明依赖显式声明依赖无法覆盖useEffect所有场景，为此专门提出一个叫Effect Event的概念，以及一个对应的新hook——useEffectEventuseEffect承载了太多功能，比如未来Offscreen的显隐回调（类似Vue中的Keep-Alive）也是通过useEffect实现当我们继续往前回溯，Hooks必须显式 ...继续阅读 (67)

osascriptosascript是macOS上的一个命令行工具，用于执行AppleScript脚本或者JavaScript脚本。它的名称来源于”Open Scripting Architecture”（OSA），这是macOS中的脚本系统。执行AppleScript脚本：osascript-e'tell application "Finder" to display dialog "Hello, World!"'这个命令告诉Finder应用程序弹出一个对话框，显示”Hello, World!”。osascript对于与macOS交互、控制应用程序等场景非常有用，可以通过命令行方便地执行脚本。在你的情况下，使用osascript来激活应用程序并将其切换到前台。例子例如，将Xcode切换到前台的命令是：osascript-e'tell application "Xcode" to activate'请确保应用程序名称与实际应用程序的名称匹配，大小写敏感。将Safari切换到前台命令是：osascript-e'tell application "Safari" to activate'请确保你输入的应用程序名称与实际应用程序的名称匹配，大小写敏感。这个命令会使用AppleScript告诉应用程序激活（activate）。请注意，有些应用程序可能需要一些时间来响应激活的命令，特别是在启 ...继续阅读 (120)

研究人员发现了向毫无防备的受害者投递 AsyncRAT 的攻击行动。在至少 11 个月的时间里，攻击者致力于通过嵌入网络钓鱼页面的 JavaScript 脚本来投递 AsyncRAT 木马。切换了 100 余个域名与三百多个样本文件后，攻击者的攻击模式始终如一。这些受害者都经过精心挑选，有一些与美国关键基础设施有关。新的攻击基础设施跟踪表明，该攻击行动仍然活跃。 ...继续阅读 (42)

在 23 年的 CSS 新特性中，有一个非常重要的功能更新 --相对颜色。简单而言，相对颜色的功能，让我们在 CSS 中，对颜色有了更为强大的掌控能力。其核心功能就是，让我们能够基于一个现有颜色 A，通过一定的转换规则，快速生成我们想要的颜色 B。其功能能够涵盖：精简调暗饱和度降低饱和度色度增强调整不透明度反转补充转换对比度调色板完整的教程，你可以看这里 --Chrome for Developers- CSS 相对颜色语法当然，今天我们不会一个一个去过这些功能，更多的时候，我们只需要知道我们能够实现这些功能。本文，我们将从实际实用角度出发，基于实际的案例，看看 CSS 相对颜色，能够如何解决我们的一些实际问题。快速语法入门首先，我们通过一张图，一个案例，快速入门 CSS 相对颜色语法：相对颜色语法的目标是允许从另一种颜色派生颜色。上图显示了将原始颜色 green 转换为新颜色的颜色空间后，该颜色会转换为以 r、g、b 和 alpha 变量表示的各个数字，这些数字随后会直接用作新的 rgb() 颜色的值。举个例子：CSS Relative Colorp { color: rgb(255, 0, 0); }实现一个 color 为红色（rgb 值为rgb(255, 0, 0)）的字体：基于上面的相对颜色语法，我如何通过一个红色生成绿色文字呢？示意如下：p { --co ...继续阅读 (109)

每周四发布，分享有趣的软件，程序，文章等。 周刊列表 | rss 订阅 祝大家元旦快乐！ 金沙湖歌剧院。 # JavaScript 工程师的 Python 指南 🔗 https://luckrnx09.com/python-guide-for-javascript-engineers/zh-cn/ 这是一份为 JavaScript 工程师准备的 Python 指南，包含四个部分。第一 ...继续阅读 (52)

本文翻译自Announcing Vue 3.4，作者：Evan You， 略有删改。今天我们很高兴地宣布Vue 3.4🏀灌篮高手版本发布！此版本包括一些实质性的内部改进，最值得注意的是重写了模板解析器，速度提高了2倍，以及重构的响应系统，使效果触发更加准确和高效。它还对很多API进行高质量的改进，包括defineModel的稳定性和绑定props时的简写语法。这篇文章提供了3.4中突出显示的功能概述。有关更改的完整列表，请参阅GitHub上的完整更改日志。可能需要修改的地方要充分利用3.4中的新功能，建议在升级到3.4时还更新以下依赖项：Volar / vue-tsc@^1.8.27（必需）@vitejs / plugin-vue@^5.0.0（如果使用Vite）nuxt@^3.9.0（如果使用Nuxt）vue-loader@^17.4.0（如果使用webpack或vue-loader）如果将TSX与Vue一起使用，请在下文全局JSX配置检查所需的操作。确保您不再使用任何弃用的功能（如果您使用了，控制台中应该会有警告）。它们可能已在3.4中删除。功能亮点2倍更快的解析器和改进的SFC构建性能在Python 3.4中，我们完全重写了模板解析器。以前，Vue使用递归调用解析器，依赖于许多正则表达式和前向搜索。新的解析器使用基于htmlparser 2中的标记器的状态机标记器，它只遍历一 ...继续阅读 (70)

前端仔整理的基于 v8 定制 javascript runtime 教程，这 part 先复习一下相关前置知识。1 source file// demo.c #includeint main() { printf("hello\n"); }范例：C/C++.c.cppRust.rsGo.go2 object file经过编译步骤，把 source file 编译为 object file，object file 内包含二进制机器码，以及一些元信息：gcc -c demo.c-c指定 gcc 只编译，不链接，结果是每个 source file 会产生一个对应的 binary object file。object file 中的内容已经是二进制了，但还不一定能被执行。部份操作系统中，object file 和 executable file 使用相同的格式，比如 linux 中都是 ELF 格式。而 windows 中，object file 使用 COFF 格式，而 executable file 使用 PE 格式可以用 objdump 解析生成的 demo.o object file，后面会给例子范例：ELFCOFFMach-O扩展阅读：https://refspecs.linuxbase.org/elf/gabi4+/ch4.intro.html2.1 header fi ...继续阅读 (76)

JavaScript 提供了一些 API 来处理文件或原始文件数据，例如：File、Blob、FileReader、ArrayBuffer、base64 等。下面就来看看它们都是如何使用的，它们之间又有何区别和联系！ArrayBufferArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区，是内存中一段固定长度的连续数据存储区的引用，你无法直接操作或修改它，只能通过 DataView 对象或 TypedArrray 对象来访问。这些对象用于读取和写入缓冲区内容。ArrayBuffer不是一个Array类型，如果想要判断其类型，可以使用toString.call(new ArrayBuffer()) === '[object, ArrayBuffer]'ArrayBuffer 本身就是一个黑盒，不能直接读写所存储的数据，需要借助以下视图对象来读写：TypedArray：用来生成内存的视图，通过9个构造函数，可以生成9种数据格式的视图。DataViews：用来生成内存的视图，可以自定义格式和字节序。TypedArray首先要弄清楚 TypedArray 的概念, 这是 ES2015(又称ES6) 中新出的一个接口,不能直接被实例化, 也就是说如下代码会报错。new TypedArray()因为这个接口就是一个抽象接口， 就像java中的抽象接口一样, 是不能被实例 ...继续阅读 (101)

哈喽大家好，我是归思君~一、引言我们知道，作用域（Scope）就是代码中变量和函数的可访问的区域，这个区域中决定了变量和函数的生命周期。在当前的高级程序语言中，主要有词法作用域（静态作用域）和动态作用域两种。静态作用域：其作用域是在编写代码时就已经确定好，静态作用域是根据变量和函数在代码中的位置来决定。函数寻找变量时，是在函数定义的位置中寻找，而不是调用的位置。现在大多数编程语言都采用的是静态作用域，比如 C, C++, Java, JavaScript, Python 等动态作用域：是在程序运行时根据程序的调用栈来动态确定，而不是在写代码时静态确定。在函数寻找变量时，根据函数调用的位置来寻找。这意味着同一个变量名在不同的调用上下文中可能指向不同的变量，可以用 Js 中的 this 值来进行理解，只有在调用时才知道 this 值的指向，动态作用域类型语言中的所有变量都是以这种形式来确定。动态作用域在现代编程语言中较少见，在某些早期语言中比如 Lisp其实这两种作用域的区别主要是作用域中的变量和函数，是在编译期还是运行期确定的，从词法分析角度讲，如果是通过静态词法分析而得出的时候，它就被称为词法作用域：JavaScript 中就采用的是词法作用域（静态作用域），下面就来详细看看：二、全局作用域和函数作用域从范围上分，JavaScript中的作用域有三种：全局作用域、函数作用域和块级作 ...继续阅读 (79)

最近的一个项目中，对于 CSS 的一些属性一些选择符可以大胆使用，然后很意外得撞上一个 iOS 中 Safari 的一个解析问题。一个组件这样的一段代码很简单，然而就是这样的一段简单的代码，在 iOS 中出现了让误以为不兼容[style*='100vh - 46px']这个写法。为什么说是误以为呢，因为当时有一个需要是要在移动端中去改变这个组件的高度，所以，我就想着，为什么不用属性选择符来快速实现呢，这样还可以不用去考虑写类名。于是我就写了这么一句 CSS。[style*='100vh - 46px'] { height: calc(100vh - 100px) !important; }在 Chrome 里模拟移动端看看，嗯，很 OK 么，高度改变了。然而也就只是高兴了一下，就在 iOS 中发现高度并没有改变。十分好奇，通过数据线接上手机，打开 Safari，进入开发者菜单找到 iPhone 选项，开始调试 iPhone 上的打开的这个页面。⇧⌘C，开始选择元素，然后在 iPhone 上点一下那个组件元素，快速定位到对应的元素上。然后在 DOM 中发现了一个很神奇现象。原本应该是100vh - 46px的属性值，变成了-46px + 100vh了。所以也就是为什么我的 CSS 没有作用的原因了。就因为这个原因，我刚开始都怀疑是不是*=这个属性选择符的规则还存在兼容问题，或者是 ...继续阅读 (107)

前言Laverna is a JavaScript note taking application with Markdown editor and encryption support. Consider it like open source alternative to Evernote.Laverna 采用 JavaScript 开发，基于 Electron，支持在线和本地加密编辑，本地应用支持 Linux、Mac、Windows 三大平台。号称开源的印象笔记替代品。实例地址https://laverna.dujun.eu.org实例配置配置描述系统Debian开发环境服务端Node.js 18服务器Nginx程序Laverna 0.7.51实例部署权限要求具有系统读写权限已安装 Nginx安装程序官网地址：https://laverna.cc项目仓库：https://github.com/Laverna/laverna成品仓库：https://github.com/Laverna/static-laverna直接使用 static-laverna 静态文件部署。实例体验进入实例深度体验后记本实例仅供参考，不定期重置数据。体验更多开源实例 ...继续阅读 (60)

简介Selenium最初是一个用于网站的自动化测试工具，支持各种Chrome、Firefox、Safari等主流浏览器，同时也支持phantomJS无界面浏览器。不过其更通常的使用在于爬虫中使用，其主要是用于解决requests无法直接执行JavaScript代码的问题，不过用于解析Dom元素更有其妙用之处。 ...继续阅读 (53)

对手写思路进行说明构造函数constructor(executor)接收一个执行器函数executor，该函数接受两个参数：resolve和reject。初始状态status设为'pending'，表示 Promise 尚未决议。value属性用于存储 Promise 解决（fulfilled）或拒绝（rejected）时传递的值。onFulfilledCallbacks和onRejectedCallbacks用于存储.then或.catch中注册的回调函数，这些回调在 Promise 解决或拒绝时执行。resolve和reject函数resolve(value)和reject(reason)函数改变 Promise 的状态并设置value，然后执行对应的回调函数列表。这两个函数检查当前状态是否为'pending'，以防止 Promise 状态被多次改变。当resolve被调用时，状态变为'fulfilled'，并异步执行所有onFulfilledCallbacks中的函数。当reject被调用时，状态变为'rejected'，并异步执行所有onRejectedCallbacks中的函数。then(onFulfilled, onRejected)then方法接收两个参数：onFulfilled和onRejected，它们分别是 Promise 解决或拒绝时的回调函数。提供默认函数以 ...继续阅读 (91)