梧木栖凰

[1] Vue 性能优化：如何实现延迟加载和代码拆分？

一、flex-basis 的含义 CSS 属性 flex-basis 指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。 Note: 当一个元素同时被设置了 flex-basis (除值为 auto 外) 和 width (或者在 flex-direction: column 情况下设置了height) , flex-basis 具有更高的优先级. 二、flex-basis 的使用2.1. 取值 值/类型 描述 auto 默认值，意为“参照我的 width 和 height 属性” number 宽度值，可以是长度单位（如10px、10em等）或百分数（基于其父弹性盒容器主轴尺寸，若父容器尺寸依赖于子元素，则效果同 auto） content 基于 flex 的元素的内容自动调整大小 尺寸关键词 fill, max-content, min-content, fit-content 等； 全局数值 inherit, initial ...

使用 Hexo + GitHub Pages 一步步搭建个人博客

前言今日，在阅读 vant 组件源码时，发现了这样的语句： 1var _createNamespace = (0, _utils.createNamespace)('radio') 偶尔也会在其他一些地方见到类似的，如 webpack4 源码中有 1var test2 = (0, _test2.default)(); 抽象一下 1(0, function)(); 提问：这个语法的结果是什么？使用这个语法的意义又是什么？ 一、逗号操作符MDN 上对”逗号操作符”的解释为对它的每个操作数求值（从左到右），并返回最后一个操作数的值。 1.1. 使用场景大致上，需要用到逗号操作符大致有下面两种情况： 当你想要在期望一个表达式的位置包含多个表达式时，可以使用逗号操作符。 举例来说， 123// 多变量循环for (var i = 0, j = 9; i <= 9; i++, j--) document.writeln("a[" + i + "][" + j + "] = " + a[i][j]); ...

前言今天在练习 JavaScript 时遇到一个有意思的问题： 我有这样一段代码，最外层写着 12var x = 10;console.log(this.x); 当我习惯性地使用 node 命令运行这个 js 文件时，打印出了 undefined ，而非预期的 10。 查阅部分资料获知原因，本篇文章用于记录此事。 Window 中的 var 声明window 中，不使用关键字声明的变量，和在最外层声明的变量都是全局变量 window 的属性。 1234x = 10;console.log(x, window.x); // 10, 10var y = 20;console.log(y, window.y); // 20, 20 Node 中的 var 声明Node 中，没有全局变量 window，取而代之的是 global。关键字 this 也指向 global。声明分两种情况： REPL 中，同 window； 1234x = 10;console.log(x, this.x, global.x); // 10, 10, 10var y = 20;console.log(y, ...

背景因开发需要，父级元素 div 有 flex: 1; 属性，需要子元素 p 的文字超出范围的以省略号显示，正常配置后发现 p 元素的内容将上级元素撑开，而未正确隐藏。 后查阅资料解决，记录备忘。 问题描述简化代码如下 12345678910111213141516171819202122232425262728293031<style> * { margin: 0; padding: 0; } .root { display: flex; } .root .left { flex: none; width: 100px; background-color: blueviolet; } .root .right { flex: 1; margin-left: 10px; background-color: burlywood; } .root .right .content { overflow: hid ...

前言如果我们想要深入地学习 JavaScript，那么手写 Promise 无可避免。 手写 Promise 需要使用多种技术手段和逻辑思路，对学习 JavaScript 或者其他语言、框架等都可以起到积极的作用。 本篇文章详细记录笔者尝试实现 Promise 的每个步骤以及在此过程中遇到的各种问题。 Promises/A+ 规范Promise 并不是一个新事物，而是按照一个规范实现的类。这个规范有多个版本，如 Promises/A、Promises/B、Promises/D 以及 Promises/A+ 等。ES6 采用 Promises/A+ 这一版，那么我们自然也就按照这一版来实现 Promise。 Promises/A+ 规范包含术语（Terminology）、要求（Requirements）和注意事项（Notes）3 个部分。我们主要按第二部分逐步实现 Promise。 实现步骤I. Promise States 一个合乎规范的 promise 应该有 pending、fulfilled、rejected 三个状态； promise 的状态可以由 pending 转为 ...

前言diff 是 Vue 执行种的一个重要过程，是深入学习 Vue 时不容忽视的部分。 本篇文章暂时仅分析 Vue2 的 diff 基本原理，后续考虑补充源码分析和其他框架，如 React、Vue3 的 diff 相关内容，视情况而定。 是什么在学习 Diff 算法之前，我们需要先了解几个概念。 1. Virtual DOM虚拟 DOM（Virtual DOM）是一种将浏览器 DOM 的信息存储在 JavaScript 内存中的方法，是以 JavaScript 对象表示的抽象化的 DOM。 相比于操作 DOM，通过 JavaScript 操作 Virtual DOM 的开销要小得多。 2. VNodeVirtual DOM 为 DOM 的抽象表示。相同的，VNode 就是是 DOM 节点的抽象表示，是 Virtual DOM 的节点。 VNode 同样也是一个 JavaScript 对象，包括这个 DOM 节点的所有属性内容。 3. ASTAST（Abstract Syntax Tree），即抽象语法树，是源代码语法结构的一种抽象表示（树状形式）。树上的每个节点均代表源代码的一种结 ...

笔者有话要讲我们在使用 TypeScript 时，经常会用到这两个声明 interface 和 type，我一直存在一个疑惑，这两个究竟有什么区别，各自又该用在什么场景。 恰巧关注的公众号——《大迁世界》推送了一篇文章——《使用 TypeScript 常见困惑：interface 和 type 的区别是什么？》，感觉文章排版有些错乱，看着属实难受。所幸本人还是能看懂一点点英文的（指有道词典），所以干脆找到原文直接自己翻（run）译（se）好了，顺便还加了一点点补丁（patch）。 typescript 版本：4.4.4 一、概念1.1. 类型 Types我们知道 TypeScript 中有许多类型，有基础的类型如 string, number, 和 boolean，也有特殊的如数组 Arrays、元组 Turple 等等。这些类型使用起来非常简单，比如 12const ExampleStr:string = 'my name';const ExampleArr:number[] = [1, 2, 3]; 1.2. 联合类型 Union Types理所当然的，一 ...

如何在 Vue3 项目中使用 keep-alive 组件为什么要写这篇文章？最近在学习 Vue3 的使用，在使用 vue-router 插件时，想到组件缓存的问题。我想要实现的效果是，搭配 vue-router， 定义路由表时，在 meta 中添加 keepAlive 变量，并通过 route.meta.keepAlive 这一变量控制页面组件的缓存与否，这也是使用 Vue2 时的缓存思路。 在使用 <keep-alive> 时遇到了一些问题。 我首先习惯性地尝试使用 Vue2 的方式使用 <keep-alive> 处理需要缓存的组件 ，但 Vue3 中，<keep-alive> 的使用方式与 Vue2 有所不同，Vue2 的使用方式并不能实现组件缓存。 1234567// App.vue<template> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-a ...