坐标和尺寸
December 12, 2023
坐标系 # 相对于 window 相对于 document
notes
小程序相关
February 26, 2023
架构 # 渲染层的界面使用 webview 进行渲染；逻辑层采用 JSCore运行JavaScript代码 无论是线程之间的通讯、数据的传递、网络请求都由Native层做转发 框架 # Taro # 为了统一跨平台的开发方式，通过运行时框架、组件、API 去抹平多端差异 跨端 # 原生小程序 #
前端框架
February 26, 2023
Umi.js # MFSU # Module Federation Speed Up Umi 3.5+ 后支持, Umi4 默认支持，Umi3 在 config.ts 中添加 mfsu:{} 开启 基于 webpack 5 Module Federation 特性的提速方案 启动快、热更快、页面打开也快、 CI & CD 流程也快 Umi4 # 默认快 依赖预打包 双构建引擎 React Router 6 Next.js #
Koa
February 19, 2023
API # Request # Koa Request 是 Node 原始 request 对象的抽象，提供额外的功能用于 http 服务的开发 api 有： request.method request.query … Response # Koa Response 是 Node 原始 response 对象的抽象，提供额外的功能用于 http 服务的开发 api 有: response.header response.headers response.get() … Context # 封装 node 的 request 和 response 对象到一个对象中，提供额外的辅助方法便于应用开发 每个 http 请求都会创建一个 context 对象 app.use(async ctx => { ctx; // is the Context ctx.request; // is a Koa Request ctx. ...
Node.js
February 17, 2023
Concepts1 # JS 引擎 解析和执行 JS 代码，如 v8 JS 运行时 JS 运行时可以理解为 JS 本身 + 一些拓展的能力所组成的一个运行环境 Libuv 跨平台的异步 IO 库 它主要是封装各个操作系统的一些 API，提供网络还有文件进程这些功能 Node 架构 # 单线程 + 事件驱动 + 非阻塞 IO 如下图 事件驱动 事件驱动是操作系统提供的订阅发布机制，由操作系统的 IO 多路复用模块实现，不同的操作系统中提供的 API 不一样，比如 Linux 的 epoll、MacOs 的 kqueue、windows 的 IOCP 当 Node.js 中没有任务处理时，它就会阻塞在这里，有事件发生后，就会被唤醒继续执行 Event Loop # Node.js 的任务分为宏任务和微任务，宏任务包括定时器、网络 IO、文件 IO，微任务包括 Promise、process. ...
HTML
February 17, 2023
Web components # custom element # 名字里必须要有 hyphen - Autonomous custom elements – “all-new” elements, extending the abstract HTMLElement class. class MyElement extends HTMLElement { constructor() { super(); // element created } connectedCallback() { // browser calls this method when the element is added to the document // (can be called many times if an element is repeatedly added/removed) } disconnectedCallback() { // browser calls this method when the element is removed from the document // (can be called many times if an element is repeatedly added/removed) } static get observedAttributes() { return [/* array of attribute names to monitor for changes */]; } attributeChangedCallback(name, oldValue, newValue) { // called when one of attributes listed above is modified } adoptedCallback() { // called when the element is moved to a new document // (happens in document. ...
微前端
February 15, 2023
概念 # 微前端是一个架构理念 适用场景 # 把一个大系统，拆成若干小的子系统，分开去迭代维护 把若干分散的子系统(不同或同一技术栈）合在一起，避免过多的跳转 实现方案 # iframe # 优点：先天隔离，成本最低 缺点：性能低、通信复杂、双滚动条、弹窗问题(无法全局覆盖?) npm 包 # 子应用拆成 npm 包 优点：性能和兼容性上是最优的方案 缺点：版本管理，包更新后，包的使用方是否需要同步更新？ single-spa # 渲染原理：路由监听, 监听 url change 事件 出现最早、最有影响力的微前端框架 qiankun # 阿里出的 在 single-spa 基础上进行了封装，提供了js沙箱、样式隔离、预加载等功能，并且与技术栈无关，可以兼容不同的框架 渲染原理：路由监听, 监听 url change 事件 html 作为资源入口，通过加载远程 html，解析其DOM结构从而获取js、css等静态资源来实现微前端的渲染，这也是qiankun目前采用的渲染方案。 缺点： 接入成本高 主子应用通信： import { initGlobalState, MicroAppStateActions } from 'qiankun'; // 主应用初始化 state const actions: MicroAppStateActions = initGlobalState(state); actions. ...
前端性能优化
February 15, 2023
性能监测 # 监测方式: devtool performance tab, lighthouse(lab data) 插件 window.performance， 可编程的性能 api 性能指标 # 分类: In the field 用户实际体验到的指标 In the lab 利用工具去跑性能指标数据 常用指标： FP First Paint 首次绘制 FCP First Contentful Paint 首次内容绘制 TTFB Time to First Byte LCP Core Web Vital Largest Contentful Paint 最大内容绘制 用来衡量页面的加载性能，2.5s 以内最佳 FID Core Web Vital ...
JavaScript 基础
February 2, 2023
数据类型 # Symbol # 符号类型，跟其他语言（ruby, racket 等）里的 Symbol 不一样 表示 唯一 标识符，创建即唯一 可用作对象的属性 key 对象的属性 key 只能是 string 或 symbol 类型，其他类型的值会被转为 string 类型 // id is a symbol with the description "id" let id = Symbol("id"); let id1 = Symbol("id") id !== id1 Symbol 不会被自动转为字符串，可以通过 toString() 方法进行转换 通常用于为第三方库的对象添加 隐藏 属性，而不对其他使用者造成影响 for in 遍历不会遍历 Symbol，Object.keys() 亦如是 Object.assign() 会 copy string 和 symbol 属性 Global Symbol 用途：全局唯一标识符 name 一样，即为同一个 Symbol ...
CSS
January 2, 2023
Web 布局1 # 无布局模式 表格布局模式 浮动、定位和框架( CSS Frameworks )布局模式 浮动的初衷是用于排版的，只不过在那个年代，Web 开发者利用其特性来构建 Web 的布局，而且运用于 Web 布局很多年 其中要属“圣杯 ”和“双飞翼 ”两者最为经典。这两种方法实现的都是以三列布局为主，而且两边的宽度是固定的，中间列是自适应，它们实现的效果是一样的，只是实现的思路不同 定位布局的局限性: 需要明确指定元素的大小 需要明确计算元素位置坐标 难于维护 css框架，如 bootstrap 响应式布局 Intrinsic Web Design 不是内容以设计为导向（Content Design-Driven），而是只专注于让设计受内容驱动（Design Content-Driven） 组件驱动式 Web 设计（CDWD） Flex && Grid 加载方式 # @import 从其他样式表里加载 css 到当前位置 @import "custom.css"; @import url("chrome://communicator/skin/"); @属性 # @charset 声明当前样式表的字符集编码 ...