相关文章：《基础篇》：https://blog.krimeshu.com/2021/07/04/promise-practice/上一篇的最后，我们列举了两个简单的逐个串行与并发执行的例子。不过日常实际开发中，我们还会遇到更复杂的场景——比如下载 300 张图片，上一篇中简单的写法就无法应对了。这次我们来说说如何更恰当地处理这类批量异步任务。[TOC]1. 批量异步任务如果我们需要下载 300 张图片，该怎么处理呢？(1) 同步编程思路下载 300 张图片之前，我们应该会有它们的 URL，存在一个数组内。按照传统的同步编程思路，我们首先想到的大概是这个样子：12345678910111213141516171819consturlList = [/* 这是300张图片的 URL... */];functiondownloadImage(url) {/* 这是一个同步下载图片的函数 */}urlList.forEach((url) =>{console.log('开始下载:', url);downloadImage(url);console.log('下载完成:', url);});// 或者使用 for 循环for(leti =0, total = urlList.length; i < total; ...继续阅读 (35)

异步任务是我们日常开发中离不开的一环，例如用户操作后的网络请求、动画延时回调、node.js 中各种异步 IO/进程操作等等。过去通常是通过传递回调函数的形式使用，如今我们通常使用Promise，配合async/await，让日常这些异步处理方便了很多。不过对于刚接触Promise的新同学来说，日常可能只接触和使用过其中比较基础的使用形式，又没有花时间去了解其中的实现原理，这就可能会导致一些错误理解和反模式实践。这里将平时遇见过的问题列举出来，结合自己的理解，希望能帮新同学们绕开一些可以避免的坑。[TOC]1. 简要介绍(1) 什么是 Promise个人认为，Promise是一种可链式触发的单向异步任务单元。它基于异步任务进行封装，内部维护一个任务进行状态：进行中、已完成、已拒绝。初始状态为进行中，可单向流转：进行中→已完成/已拒绝；不可以逆向流转。一个Promise实例在进行中状态下，可以通过它的then(onResolved?, onRejected?)函数指定完成/拒绝状态回调函数。异步任务执行完毕时，可以执行以下A/B操作之一：(A) 给完成状态回调函数传递一个结果值，进入已完成状态；(B) 给拒绝状态回调函数传递一个理由，进入已拒绝状态。上面是Promise基本概念，看起来似乎“平平无奇”。然而它又通过以下机制实现了链式触 ...继续阅读 (43)

这次再说一说父子组件之间的传值与通信场景。前文:《初探 Vue 3.0 的组装式 API（一）》《初探 Vue 3.0 的组装式 API（二）》《初探 Vue 3.0 的组装式 API（三）》（四）组件通信与跨级传值1. emit 与 slotsVue3 中从父级向子级传值与 Vue2 一样，就是在模板里创建子组件的标签时，通过v-bind:/:指令传值。而父组件通过v-on:/@绑定的事件监听器，需要在子组件触发事件时，需要通过props之后的第二个参数context调用：1234567// child.vueexportdefault{setup(props, context) {constonClick= () => context.emit('click-child');// ...},};同时，context中还提供了我们操作子组件时经常需要用到的插槽slots：12345678// parent.vueexportdefault{setup(props, context) {const{ slots } = context;constchildren = (slots.default? slots.default() : []);// ...} ...继续阅读 (34)

在基础的响应式数据和事件函数之后，我们再来说说 computed 计算属性 和 watch 监听吧。前文:《初探 Vue 3.0 的组装式 API（一）》《初探 Vue 3.0 的组装式 API（二）》（三）组件属性、计算属性与监听1. 组件属性通过数据和事件处理的几个例子，大家或许发现了 Vue3 的两个基本变化思路：开发人员自己动手组装响应式数据；事件处理对象方法降级为普通函数。而这两者都避免了再将各种不同层级的属性、方法绑定到$vm上，从而避免了混乱的this指向问题。以至于我们在 Vue3 的例子里基本没再用到过this。对于父级组件传入的属性值，以前都是通过this.<属性名>访问的，在 Vue3 的setup()中怎么获取组件属性呢？很简单，setup()函数收到的第一个参数就是传入的属性值了：12345678910exportdefault{props: {name:String,},setup(props) {const{ name } = props;return{ name };},};不过由于传入的props是一个响应式数据，为了确保传入的非引用型数据发生变化时，页面内状态能动态更新，我们还得用toRefs从里面解构取值：123456789101112impor ...继续阅读 (42)

在 RC13 之后，Vue 推出了 3.0 正式版。之前我们尝试了使用新的组装式 API 实现响应式数据，并且和 Vue2 进行了简单对比。今天继续看看其它日常使用方式的变化与对比吧。前文:《初探 Vue 3.0 的组装式 API（一）》（二）事件处理与 mixin 复用1. 简单例子Vue2 中，模板使用到的事件处理函数，通常都被放在 vm 构造参数的methods属性中，然后才能通过v-on:/@标记到对应 DOM 上：123456789101112131415161718192021Count: {{count}}Increaseexportdefault{data() {return{count:0,};},methods: {increase() {this.count+=1;},},}上面的increase()方法中，this看似指向methods属性的对象，实际上和之前data返回对象一样，指向的其实是最终创建的 vm 对象，日常指代混乱。data中返回了数据模板，告知 vm 会有一个名为 count 的响应式数据；methods对象作为方法模板，告知 vm 需要创建一个名为 increase 的方法，供模板事件处理；两 ...继续阅读 (29)

Vue3 已经更新到 RC9，正式发布在即，其中让人倍加关注的重大更新：组装式 API (Composition API) 到底是什么，相比 Vue2 又有什么优势呢？（一）响应式数据1. 简单例子从最简单的数据绑定开始，在 Vue 2.0 中，我们这样将一个数据绑定到模板的指定位置：在组件创建参数的data构造函数中返回一个用来绑定的数据对象，其中有个now字段，会被渲染到模板内的.app > p内。1234567891011121314151617Hello world!Now is: {{now.toString()}}// Vue 2.0exportdefault{data() {return{now:newDate(),};},};用 Vue3 的组装 API 实现的话，则是这样：12345678// Vue 3.0exportdefault{setup() {return{now:newDate(),};},};2. 更新数据奇怪，看起来好像没啥区别，只是把data改成了setup吗？并不是，假如我们现在对这个 DEMO 做个小改动，让它每秒钟刷新一次时间，用 Vue2 大概是这样实现：1234567891011 ...继续阅读 (33)

[TOC]不知道大家是否还记得，在第二篇《PixiJS 修炼指南 - 02. 项目重构》中，我们创建第一个场景时曾经声明了一个名为IScene的场景接口，今天让我们开始实现场景管理器把它给用起来。场景管理器创建和资源管理模块 (AssetsManager)一样，我们同样以静态类的形式创建一个场景管理器 (SceneManager)出来：12345678910// src/services/scene-manager.tsimport{Container}from'pixi.js';/** 场景管理器 */exportclassSceneManager{privateconstructor() {// 构造函数私有化，避免被外部实例化出新对象thrownewError('请勿调用此构造函数');}}然后，添加app、root和currentScene三个基本成员，控制可访问性使它们对外只读：1234567891011121314151617181920212223242526272829exportclassSceneManager{// .../** 当前应用 */privatestatic$app:Application|null=null;/** 当前应用 (Publi ...继续阅读 (23)

[TOC]# PixiJS 修炼指南 - 04. 资源加载（下）上一篇中，我们实现的项目资源管理模块AssetsManager功能基本还只是雏形，这次我们来对它进行一些改进和加强，完善诸如对精灵表的支持、总进度回调这样的能力。补充改进其实相比普通的Sprite精灵对象，PixiJS 官方表示更推荐使用Spritesheet“精灵表”。官方文档:https://pixijs.io/guides/basics/sprite-sheets.html它使用起来就像 Web 开发中的 CSS “雪碧图”，将许多的小图合并到一张大图内，再根据需求来控制展示大图的部分区域。（顺带一提，其实“雪碧图”的原文Sprites精灵图，应该就是指早期电视游戏开发中就已有之的精灵图概念。只是 Web 开发的同学可能很多都是先接触到 CSS Sprites，再看到游戏开发的精灵图时反而有前者像后者的感觉。这波可以说“这爸爸长得真像儿子”了属于是。）按照 PixiJS 文档中所说，SpriteSheets至少有以下两个明显优点：首先，可以加快加载速度，在浏览器的下载并发限制下，减少请求数可以减少整个加载过程的等待时间；其次，它可以提升批量渲染，WebGL 的渲染时间打制和绘制调用次数成正比，同一个Spritesheet内的素材更有可能在同义词调用内批量渲染，提高渲染效率。所以我们来改进一下之前的AssetsMa ...继续阅读 (27)

[TOC]# PixiJS 修炼指南 - 03. 资源加载（上）不知道有没有同学注意到，第一篇中我们创建精灵时使用的是Sprite.from(textureUrl)方法，但是第二篇重构后却改用了Assets.load(textureUrl)加载纹理，然后再设置到this.texture属性内来完成精灵纹理素材加载的。这里的Assets是 PixiJS 提供的资源管理器，由它负责处理下载、缓存、转换等工作，将项目资源变成你需要的形式。和其他 PixiJS 模块一样，虽然它的功能很强大，但使用起来还是有些骨感。对于日常开发还需要将其做一些封装和完善，改造为更方便的开发模式来使用。模块介绍Pixi.Assets模块的前身是 PixiJS 6.x 之前的版本中的Pixi.Loader，经过改进完善后，它提供了更现代化的 Promise 风格 API。Assets模块工作时，在后台自动进行并发加载的控制调度，缩短加载时间，加快启动速度；缓存机制避免重复加载相同的资源，提高效率；可扩展的转换器系统，允许我们轻松扩展和定制更多需要的资源格式。在没有添加第三方转换器的情况下，PixiJS.Assets内部默认提供了以下几类资源的支持：纹理 (Textures):avif, webp, png, jpg, gif精灵表 (Sprite sheets):json位图字体 (Bitmap fonts): ...继续阅读 (31)

[TOC]# PixiJS 修炼指南 - 02. 项目重构潜在问题在上一篇最后的例子中，我们写了一段代码实现一个简单的静态场景 demo，它跑起来了而且目前看起来也不复杂——从上到下写过来的代码，可以说是相当地“平铺直叙”了。但是设想一下，随着项目开发的正式启动，其中的场景成员越来越多可能达到几十甚至上百以计的规模。而且通常游戏都不会只有一个场景，每个场景、成员之间的控制和回调代码相互交织，结果显然将会变成一团混乱的面条代码，彻底走向失控。所以我们通常推荐在项目跑起来后，通过面向对象的方式将代码进行抽象归类，再通过启动入口、场景管理器等核心部分进行统一调度管理。以合理的代码组织方式进行项目重构，来达到各部分之间的界限清晰、分工明确的效果，确保项目的可维护性。结构梳理1. 启动代码一般而言，我们的项目会有一个固定入口，我们会在其中进行项目启动时的初始化设定，这里的代码相对固定，而且不需要在具体业务逻辑中复用，我们将它们划分为启动代码(Bootstrap)。我们通常会在这里做以下事情：配置插件：引入插件，设置插件参数；补丁与HACK：引入补丁/HACK 处理模块；项目初始化：引入基础样式、初始化公共模块；创建应用：决定启动参数，创建应用的实例；创建核心对象：配置场景管理器等核心对象；全局事件：监听全局事件（如页面尺寸变化），通知应用进行处理；启动应用：串联各部分流程，启动进入 ...继续阅读 (31)

[TOC]# PixiJS 修炼指南 - 01. 启程简介什么是 PixiJSPixiJS 是一个使用便捷且高效的2D渲染引擎——没错，它不是大而全的游戏引擎，而是更轻量的渲染引擎。这也使得它更专注于做好高效的2D渲染工作，给予WebGL高效渲染，实现上万对象渲染的粒子效果；同时也提供了更高的自由度，可用于做任何游戏类型的渲染层，甚至仅仅用于宣传页面的2D动画绘制。同时，作为渲染引擎，它又比纯粹的 Canvas 使用起来更为便捷，可以直接通过操作Sprite、Container、Graphics等对象的属性完成画面中渲染效果的更新。这样轻量易上手而又高效的渲染引擎，对于快速搭建轻量级的H5小游戏或者游戏 demo 来说可谓再合适不过。而且，从2014年10月的第一个版本发布至今已过去近十年，仍然在不断更新迭代。2022年的 PixiJS v6 开始更是提供了 TypeScript 的支持，提供了内部对象更加方便的智能提示支持，也让大型项目使用 TS 开发后更加规范和可维护。最新的 v7 更是抛弃了各种历史包袱，更新到了现代化的前端项目生态，并且改进了一些历史 API（比如interactive)，提供新的更深入优化项目性能的能力。对于诸如骨骼动画、游戏滤镜、物理引擎、跨平台框架等需求，PixiJS 也有各种第三方工具、插件的支持，可扩展性也十分优秀。为什么写这篇文章这样优秀的工具， ...继续阅读 (28)

写 JS 代码的同学们不知道有没有注意过，后台接口通过 JSON 处理汉字字符、emoji 时，返回的是像\u00ff这样转义处理的字符，而不是它们的明文原文。这是为什么呢？123phpechojson_encode('再会，谢谢所有的🐟');// -"\u518d\u4f1a\uff0c\u8c22\u8c22\u6240\u6709\u7684\ud83d\udc1f"1234importjsonprint(json.dumps('再会，谢谢所有的🐟'))# -> "\u518d\u4f1a\uff0c\u8c22\u8c22\u6240\u6709\u7684\ud83d\udc1f"以及，这个问题和今天要说的 MD5 转换编码的踩坑又有什么关系呢？踩坑最近在小程序项目中，对于一些请求数据的防篡改处理，与后台约定了在表单内增加一个校验字段，为原始数据进行 MD5 换算后的结果。最初调试走通后没发现什么问题，就发布上线了。之后陆续有部分用户反馈，偶尔发现部分页面无法正常显示，与后台同学定位发现这些用户请求时无法通过防篡改校验，导致被拦截策略误伤。只好对这些情况作了一些白名单的临时处理，待有时间时再彻底定位处理。后来逐渐发现，出现 MD5 处理结果异常的用户，往往名字里有 emoji 或者生僻汉字出现，莫非问题和这些字符的编码方式有关——通 ...继续阅读 (26)

在之前单《手动篇》里，我们已经手动完成了打包一个.epub所需要的基本文件内容，并且梳理出可以通过工具自动完成的流程，以及需要补充信息来完成的流程。这次我们正式开始动手，编码实现我们的电子书生成小工具了。开始动手：自动篇1. 创建项目创建一个目录kepub执行npm init -y，然后修改package.json文件，设置"type": "module"启用 ES Module 模式。安装 eslint，以及我们选择的 airbnb 标准和相关依赖：1npm i -D eslint eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-import然后根据自己的需要，微调一下 ESLint 配置：123456789101112131415# .eslintrc.ymlparserOptions:ecmaVersion:2021sourceType:moduleextends:-airbnbrules:indent:-off-4no-console:offimport/extensions:-warn-always-js:always我们选用marked进行 Markdown 文章的渲染，再通过cheerio对文章中使用到的图片等资源进行解析和收集整理。最后的 zip 打包的话用a ...继续阅读 (26)

# 用 Markdown 写一本自己的电子书吧不知道大家平时有没有阅读电子书的习惯，这里指的并不是.txt的文本文档，而是通常带有精美封面、便捷目录、图文并茂的.epub电子书。它是怎样实现这些效果的呢？我们能不能把自己平时用 Markdown 写的技术笔记、博客文章做成一本属于自己的电子书呢？背景EPUB 格式是什么其实做 Web 开发的同学，如果把.epub文件通过 zip 打开后就会发现，其实它并不神秘，反而相当开放直观和熟悉──其内在就是一堆xhtml 页面、css 样式、图片，以及描述这些资源关系的xml 配置信息，把它们一起打个 zip 包就是.epub电子书了。在我们解压出来的文件，往往会有一个.opf文件，内容开头一般是：1234xml version='1.0' encoding='%SOUP-ENCODING%'...我们只要访问命名空间属性中的这个http://www.idpf.org/2007/opf链接，就可以查询到关于这个OPF电子书的所有规范描述了。简单来说，这就是一个由国际数字出版论坛和 W3C 组织一起完成的开放电子书标准，在 2007 年 9 月取代了之前的 Open eBook，被国际数字出版论坛选为新的正式标准。既然 epub 内部就是 html 页面，我们的 Markdown 文章也能编译成 html，那我们写个工具将以往的文档处理成符合 ...继续阅读 (28)

[<前情提要>](http://blog.krimeshu.com/2021/01/17/some-thinking-about-react-hooks-1/)<前情提要/>回顾之前我们学习了useState和useEffect两个基础 React Hook。通过它们，可以实现以前的类组件的大部分功能：属性值传入、自身状态维持、状态更新触发、生命周期回调。并且让你可以：在业务中常见的简单场景下，使用更简单的代码实现组件；通过副作用聚合同一数据在不同生命周期的操作，便于不同组件、项目之间复用。二、不良实践：副作用无限触发一切看起来都很美好，虽然我们基本还不知道这两个 Hook 内部是怎么样神奇的实现了维持状态和生命周期回调，但通过简单的项目 Demo 就能看到它们确实按照我们预期的效果跑起来了。去深挖黑盒的内部构造也是很有意思的，不过现在还为时尚早。为什么？不只是因为还有其它 Hook 没有讲到，而且现有的两个 Hook 我们也没有彻底理解。只需要对之前的 Demo 稍微做一点小修改，出乎你预料的麻烦事就要发生了……1. 无限触发的计数器我们将之前useState的例子做个小改动，将点击计数count改为渲染次数计数renderCount。然后设置一个副作用，不传入依赖数组，使之在每次渲染完成后都执行，执行时将renderCount加一来实现计数功能：12345678910 ...继续阅读 (32)

Vue 3 推出 Composition API 的时候，看到一些表示这和 React Hooks 很像的评论。正好最近有个项目改用了 React 的，于是趁机体验了一下 React Hooks，看看是否真是如此。简介说来惭愧，上次使用 React，还是几年前想在 React 项目里想要实现组件样式作用域，对比和选择css-modules和styled-components方案来着，最终实现体验还是不怎么样，后来大部分项目都是小程序、Vue 和node.js印象就还停留在那个年代。那什么是React Hook呢？官方的介绍如下：Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。（来源链接：https://zh-hans.reactjs.org/docs/hooks-custom.html）其中的class指的应该是ES Class也就是类语法，而state应该就是指平时通过setState更新状态来触发重渲染的组件state属性了。并且官方保证它没有破坏性改动：React Hook 是：完全可选的，可以轻松引入。如果你不喜欢，也可以不去学习和使用。100% 向后兼容，React Hook 不会包含任何破坏性改动。现在可用，Hook 已发布于 v16.8.0。第一条说明官方并不强制要求使用 Reac ...继续阅读 (23)

最近有个朋友突然问起，想买一台新的个人开发用电脑，偶尔连接公司环境做做远程开发，问我有什么推荐的配置。于是稍微梳理了一下，2020年的个人开发环境选择。分析那就万能的苹果吧。我首先想到的自然是 MBP，自己平时开发环境就是一台 iMac 和一台 Win10 机器。而从屏幕效果、开发软件源和终端体验来看，苹果家都胜出一筹。不过随后那朋友补充了自己的预算——3000，嗯，人民币。好吧，那基本告别苹果了。那 Linux 怎么样？不过除了苹果和 Windows 之外，其实还可以使用 Ubuntu 之类的 Linux 桌面环境。预想中，类似 macOS 的高清字体渲染、Unix-like 的命令环境、无缝对接服务端开发……然而理想很美好，现实还是有点骨感。在外企开发的同学估计没问题，但在国内肯定离不开 QQ、微信、企业微信等各种国内软件。而国情所限，这些国内软件往往只支持 Win 环境、偶尔支持 macOS，基本无视更通用的 Web 端等平台的开发。如果选择了 Linux，基本只能靠 wine 来跑它们了，而经过实际体验的感觉并不怎么愉快。看来还是得 Windows 了。至于 Windows 的命令行环境，有点一言难尽，不过还是有人尝试着概括成了一句话：Linux 是在命令行上做了个图形界面，Windows 是在图形界面里顺便带了个命令行。嗯，差不多就是这个感觉，Windows 环境的命令行 ...继续阅读 (33)

手里头有台六年前买的 Windows 平板——昂达 V891W。预装系统 Win8，采用当年有着英特尔补贴而被寨厂们钟爱的 Z3735F 芯片方案，以及勉强能用的 2G 内存和 32G 的 emmc——不过随着前两年升级几次 Win10 后，它的系统盘基本被系统更新占满，卡得没法再用了。最近收拾东西，把搬家后一直放着压箱底的它翻了出来，发现还能开机，突然想把它折腾一番，发挥余热。修复当初把它当作下载机和漫画阅读器，挂在床头支架上，常年插电挂机之后又放置了两三年，电池已经濒临报废。上班前开机更新 Win10 系统，下班回来后就黑屏发热再也开不了机了……目测是电池彻底报废，于是在万能的淘宝找到同型号的电池，下单到货后拆开更换上，终于重新开机。然而由于之前更新过程中的断电，似乎已经导致系统损坏，无论输入什么账号密码也无法登录。使用带供电的 OTG Hub 外接键盘，开机长按 Shift 进入特殊启动菜单，选择恢复系统。缓慢的恢复过程不提，还总在快要结束时卡住，最后突然重启又回到无法登录任何账号的状态。被折腾到没脾气，转念一想，就算重置了 Win10 系统估计也是卡得没法用，要不装个 Linux 试试？毕竟就算它的配置不高，比树莓派还是要强不少的。选择 Linux 系统经过几次尝试，最终选择了 Ubuntu 20.04，其他几个系统安装和使用中遇到但问题：Linux Mint 没法正常完成 ...继续阅读 (26)

当你使用第三方 UI 框架时，可能会遇到内置样式不满足业务需求，需要亲手修改框架提供组件的默认样式的情况。比如 UI 框架提供了一个菜单组件，但是其中标题文本的效果不符合我们的预期。我们在 Chrome Inspector 中找到对应 DOM，发现className为.title，于是就添加了这样的样式：123456789101112131415161718192021page.vue.page{margin:0;}.iv-menu{background-color:#ffffff;}.iv-menu.title{font-size:12px;}结果——添加的样式并没有生效。原因因为page.vue这里我们使用了scoped样式作用域，Vue 会为当前模板内所有元素会被增加一个特殊属性（如：[data-v-5ef48958]），并且为所有样式选择器最后一级添加这个属性的选择器。生成的样式和 DOM 大致是这样的：1234567.page[data-v-5ef48958]{margin:0;}可以看到.page选择器自动变成了.page[data-v-5ef48958]，从而达到这个组件的.page样式不污染其它同名样式的效果。而这个处理，也就是导致我们无法修改子组件内样式的原因。毕竟，不污染子组件样式其 ...继续阅读 (38)

我们都经常遇到这个情况，在 Web 项目目录结构划分得细致之后，从某个子组件引用公共模块时，如果使用准确的相对路径，路径可能会变得相当长：123456├── common│ └── net.js└── pages├── index│ └── top-bar.vue└── index.vue此时，如果在top-bar.vue里引用net.js，路径将会是这样：1import*asnetfrom'../../common/net.js'某些情况还需要写好几个../，而且一旦某些逻辑分离成单独组件时，放在了不同层级深度的目录里，这些路径代码就得一一修复引用。所以我们经常在 Webpack 里做类似这样的配置：12345678910// webpack.config.jsmodule.exports= {// ...resolve: {alias: {'@':require('path').join(__dirname,'./src'),}},// ...};然后不管需要用到公共组件的文件在哪个层级，都可以直接写成：1import*asnetfrom'@/common/net.js'问题虽然这么写是能通过编译了，但是编码过程 ...继续阅读 (28)