Ghosie的博客

flex-grow 的计算方式flex-grow 属性决定了父元素在空间分配方向上还有剩余空间时，如何分配这些剩余空间。其值为一个权重（也称扩张因子），默认为 0（纯数值，无单位，表示有剩余空间也不放大），剩余空间将会按照这个权重来分配。 比如剩余空间为 x，三个元素的 flex-grow 分别为 a，b，c。设 sum 为 a + b + c。那么三个元素将得到剩余空间分别是 x * a / sum, x * b / sum, x * c / sum，是为权重也。 举个例子： 父元素宽度为 500px，三个子元素的 width 分别为 100px，150px，100px。那么剩余空间为 150px 三个元素的 flex-grow 属性分别为 1，2，3，于是 sum 为 6，则三个元素所得到的多余空间分别是： 150px * 1 / 6 = 25px 150px * 2 / 6 = 50px 150px * 3 / 6 = 75px 三个元素最终的宽度分别为 100px + 25px = 125px 150px + 50px = 200px 100px + 75px = 175 ...

A安得广厦千万间，使我不得开心颜 C采菊东篱下，莫道不消魂 垂死病中惊坐起，笑问客从何处来 垂死病中惊坐起，夜深还过女墙来 垂死病中惊坐起，笑问客从何处来 垂死病中惊坐起，一枝红杏出墙来 春宵一刻值千金，绝知此事要躬行 D东风不与周郎便，遍插茱萸少一人 多情自古空余恨，此恨绵绵无绝期 但使龙城飞将在，从此君王不早朝 E而今才道当时错，当时只道是寻常 F返景入森林，空翠湿人衣 G过尽千帆皆不是，蓦然回首，那人却在，灯火阑珊处 H后宫佳丽三千人，铁杵磨成绣花针 J京中有善口技者，从此君王不早朝 江湖夜雨十年灯，路上行人欲断魂 K可怜身上衣正单，将登太行雪满山 L老妪力虽衰，波撼岳阳城 老夫聊发少年狂，日啖荔枝三百颗 凉风起天末，万里故乡情 M莫愁前路无知己，西出阳关无故人 N男儿当自强，对镜贴花黄 南去北来人自老，桃花依旧笑春风 Q劝君更进一杯酒，偷得浮生半日闲 劝君更进一杯酒，至今遗恨水潺潺 清风明月本无价，近水远山皆有情 R人闲桂花落，天寒红叶稀 S少小离家老大回，安能辨我是雄雌 T天堂有路你不走，学海无涯苦作舟 W问君能有几多愁？才下眉头，却上心头 我寄愁心与明月，明月何时照我还 我 ...

跨源资源共享跨源资源共享（CORS：Cross-Origin Resource Sharing）定义了浏览器与服务器如何实现跨源通信。CORS 背后的基本思路就是使用自定义的 HTTP 头部允许浏览器和服务器相互了解，以确实请求或响应应该成功还是失败 预检请求CORS 通过预检请求（preflighted request）的服务器验证机制，允许使用自定义头部、除 GET 和 POST 之外的方法，以及不同请求体内容类型。在要发送涉及上述某种高级选项的请求时，会先向服务器发送一个“预检”请求。这个请求使用 OPTIONS 方法发送并包含以下头部： Origin：发送请求的页面的源（协议、域名、端口） Access-Control-Request-Method：请求希望使用的方法 Access-Control-Request-Headers：（可选）自定义头部列表，多个使用逗号分隔 在这个请求发送后，服务器可以确定是否允许这种类型的请求。服务器通过在响应中发送如下头部与浏览器沟通信息： Access-Control-Allow-Origin：发送请求的页面的源（协议、域名、端口） A ...

学习中遇到的 mongoose 有的没有中文文档，自己翻译记录，如有讹误，望不吝赐教根据 v7.6.7 官方文档翻译 模式（Schemas） 模式类型（SchemaTypes） APIModel Model.findByIdAndUpdate()

Stream 流 Stream 是一个抽象接口，Node 中有很多对象实现了这个接口。例如，对 http 服务器发起请求的 request 对象就是一个 Stream，还有 stdout（标准输出） Node.js Stream 有四种流类型： Readable - 可读操作 Writable - 可写操作 Duplex - 可读可写操作 Transform - 操作被写入数据，然后读出结果 所有的 Stream 对象都是 EventEmitter 的实例。常用的事件有： data - 当有数据可读时触发 end - 没有更多的数据可读时触发 error - 在接收和写入过程中发生错误时触发 finish - 所有数据已被写入到底层系统时触发 模块机制Node 的模块实现在 Node 中引入模块，需要经历一下 3 个步骤： 路径分析 文件定位 编译执行 在 Node 中，模块分为两类：一类是 Node 提供的模块，称为核心模块；另一类是用户编写的模块，称为文件模块 核心模块部分在 Node 源代码的编译过程中，编译进了二进制执行文件。在 Node 进程启动时，部分核心模 ...

Atomics 与 SharedArrayBuffer多个上下文访问 SharedArrayBuffer 时，如果同时对缓冲区执行操作，就可能出现资源争用问题。Atomics API 通过强制同一时刻只能对缓冲区执行一个操作，可以让多个上下文安全地读写一个 SharedArrayBuffer。 Atomics 不是构造函数，因此不能使用 new 操作符调用，也不能将其当作函数直接调用。Atomics 的所有属性和方法都是静态的（与 Math 对象一样） 跨上下文消息跨文档消息有时候也简称为 XDM（cross-document messaging），是一种在不同执行上下文（如不同工作线程或不同源的页面）间传递信息的能力 XDM 的核心是 postMessage() 方法 postMessage() 方法接收3个参数：消息、表示目标接收源的字符串和可选的可传输对象的数组（只与工作线程相关） 接收到 XDM 的消息后，window 对象上会触发 message 事件，这个事件是异步触发的，因此从消息发出到接收到消息可能有延迟。传给 onmessage 事件处理程序的 event 对象包含以 ...

Array.prototype.at() 方法接收一个整数值并返回该索引对应的元素，允许正数和负数。负整数从数组中的最后一个元素开始倒数 语法1ary.at(index) 参数index：要返回的数组元素的索引。传递负数时，返回的元素将从数组的末端开始倒数 返回值参数索引对应的值。如果找不到指定的索引，则返回 undefined 描述在传递非负数时，at()方法等价于中括号表示法，例如ary[0]和ary.at(0)均返回第一个元素；当索引小于0时，该方法将访问索引index + ary.length at()方法是通用的，仅需要this具有length属性和以整数为键的属性 示例获取数组中倒数第二个元素的不同方法。虽然示例中所有的方法都是可行的，但是at()方法更加简洁和可读 12345678910const colors = ['red', 'green', 'blue']// 使用 length 获取colors[colors.length-2] // 'green'// 使用 slice() 方 ...

Promise Promise 是 ES6 新增的引用类型，可以通过 new 操作符来实例化。创建新 promise 时需要传入函数作为参数 promise 基础promise 是一个有状态的对象，可以处于以下3种状态之一： 待定（pending） 兑现（fulfilled，有时也称为“解决”，resolved） 拒绝（rejected） promise 状态落定后不能再修改，即状态不可逆promise 状态是私有的，不能直接通过 JavaScript 检测到，也不能被外部 JavaScript 代码修改 每个 promise 只要状态落定，就会有一个私有的内部值，该值包含原始值或对象的不可修改的引用。默认值为 undefined。 控制 promise 状态的转换是通过调用它的两个函数参数实现的。这两个参数通常被命名为 resolve() 和 reject()。调用 resolve() 会把状态切换为兑现，调用 reject() 会把状态切换为拒绝，同时会抛出错误 为避免 promise 卡在待定状态，可以添加一个定时退出功能 1234let p = new Promise( ...

函数实际上是对象。每个函数都是 Function 类型的实例，而 Function 也有属性和方法，跟其他引用类型一样。因为函数是对象，所以函数名就是指向函数对象的指针，而且不一定与函数本身紧密绑定 定义函数的方式 函数表达式 123let sum = function(num1, num2){ return num1 + num2}; // 函数表达式与任何变量初始化语句一样，末尾要有分号 箭头函数 12345let sum = (num1, num2) => { return mun1 + num2}; // 函数表达式与任何变量初始化语句一样，末尾要有分号<!-- 箭头函数不能使用 arguments、super 和 new.target，也不能用作构造函数，也没有 prototype 属性 --> 函数声明 123function sum(num1, num2){ return num1 + num2} // 函数定义最后没有分号 使用构造函数（不推荐） 1let s ...

基本结构一个简单示例： 123456789101112<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill="red" /> <circle cx="150" cy="100" r="80" fill="green" /> <text x="150" y="125" font-size="60" text-anchor="middle" fill="white"&g ...