随笔分类 -  (新) DOM & BOM

1
摘要:前言 Clipboard API 就是和 copy and paste 相关的 BOM API。 Copy Text 我们经常能看见这样的交互体验 点击 Copy code 以后,下面的代码就会被 copy 起来。 等同于我们 select 那些 code 之后按 ctrl + c。 这个就是用 C 阅读全文
posted @ 2024-11-24 18:15 兴杰 阅读(28) 评论(0) 推荐(0) 编辑
摘要:前言 以前有写过一篇关于 canvas 处理图片的文章. 非常乱, 这篇做一个整理. 参考 Stack Overflow – HTML5 Canvas Rotate Image Stack Overflow – How to flip images horizontally with HTML5 c 阅读全文
posted @ 2023-04-09 12:45 兴杰 阅读(103) 评论(0) 推荐(0) 编辑
摘要:前言 Cookie 和 LocalStorage 是非常基础的东西. 我是学编程后, 第 3 年才开始写博客的, 所以很多在第 1, 2 年学的知识完全都没有记入下来. (比如 C#, JS 语法等等) Cookie 和 LocalStorage 也是其中的一个. 今天就补上呗. 参考: 面试不再怕 阅读全文
posted @ 2023-01-08 21:17 兴杰 阅读(105) 评论(0) 推荐(0) 编辑
摘要:前言 很多年前有记入过一篇 box-sizing 和 dom width. 想想也挺可悲的, 那年我是负责后端的, 却要帮着前端去学习这些知识来解决问题... 也好, 现在 full stack, 也算没有浪费当年的努力. 这篇是翻新版本. 和 Dimension 相关的属性 我这里以 div he 阅读全文
posted @ 2022-11-05 12:17 兴杰 阅读(53) 评论(0) 推荐(0) 编辑
摘要:前言 之前写过 2 篇关于读写文件和二进制相关的文章 Bit, Byte, ASCII, Unicode, UTF, Base64 和 ASP.NET Core – Byte, Stream, Directory, File 基础, 不过是 ASP.NET Core 和 C# 的版本. 今天想介绍用 阅读全文
posted @ 2022-10-06 20:24 兴杰 阅读(128) 评论(0) 推荐(0) 编辑
摘要:前言 Web Components 已经听过很多年了, 但在开发中用纯 DOM 来实现还是比较少见的. 通常我们是配搭 Angular, React, Vue, Lit 来使用. 这篇就来讲讲纯 Web Components 长什么样子吧. Lit 和 Angular 的实现是尽可能依据规范的哦. 阅读全文
posted @ 2022-09-29 23:40 兴杰 阅读(638) 评论(0) 推荐(0) 编辑
摘要:介绍 游览器专门做给 tracking 用的接口. 从前我们想 tracking 用户点击 anchor 是比较麻烦的. 因为 click 事件触发后, 想发 ajxax 去做 tracking record 但在 ajax 还没有返回时, 游览器已经跳转了. 解决方案是 preventDefaul 阅读全文
posted @ 2022-08-07 23:25 兴杰 阅读(61) 评论(0) 推荐(0) 编辑
摘要:前言 ASP.NET Core 写过一篇关于操作 query 的 ASP.NET Core – 操作 Uri 和 Query. 前端偶尔也会需要做出 query. URLSearchParams 之前讲 JavaScript – Fetch 就已经有用到 URLSearchParams 了. 但主要 阅读全文
posted @ 2022-07-01 00:47 兴杰 阅读(44) 评论(0) 推荐(0) 编辑
摘要:前言 老掉牙的东西, 主要是想写 passive, 随便也写一点 bubble, capture 和 custom event 吧. Bubble Dom 监听事件是会冒泡的. 什么意思 ? 上图有 2 个 box, parent box 嵌套 child box. 假设 parent 和 chil 阅读全文
posted @ 2022-06-30 22:17 兴杰 阅读(158) 评论(0) 推荐(0) 编辑
摘要:前言 以前写过相关的文章 angular2 学习笔记 ( animation 动画 )。但在项目种很少用到 Web Animation。 体会不到它的精髓,目前的感觉是,它对比 CSS Animation 更好控制,比如它有 play、pause 这些功能。 缺点就是需要把 Styles 逻辑写到 阅读全文
posted @ 2022-06-09 12:59 兴杰 阅读(330) 评论(0) 推荐(0) 编辑
摘要:前言 为了方便管理, 我们会定义 CSS Variables, 类似于全局变量. 有时候做特效的时候还需要 JavaScript 配合, 这时就会希望 JavaScript 可以获取到 CSC Variables, 虽然 JS 可以通过 getComputedStyle 单独获取某个 CSS Var 阅读全文
posted @ 2022-06-02 16:51 兴杰 阅读(81) 评论(0) 推荐(0) 编辑
摘要:参考 Youtube – Detecting Screen Size and OS Dark Mode with matchMedia() - JavaScript Tutorial 介绍 CSS 有 Media Query, JS 呢? 没错就是用 Window.matchMedia 方法. 使用 阅读全文
posted @ 2022-06-01 23:25 兴杰 阅读(101) 评论(0) 推荐(0) 编辑
摘要:前言 之前介绍 Native Form 的时候有提及过 method="dialog", 但由于它太新了, 所以没去研究. 这篇就介绍一下. Dialog 也好 Modal 也好, 都有人叫, 我的理解是 Modal 更抽象一点, Dialog 按 Material Design, 应该是要有 ac 阅读全文
posted @ 2022-04-16 23:58 兴杰 阅读(259) 评论(0) 推荐(0) 编辑
摘要:前言 以前写过 form 表单, 但很不齐全, 这篇想做一个大整理. 主要讲讲在网站中使用原生 Form 的功能, 不足和扩展. 前端是原生的 HTML/JS, 后端是 ASP.NET Core Razor Pages. Simplest Form Overview form 的职责是让 user 阅读全文
posted @ 2022-03-16 10:55 兴杰 阅读(701) 评论(0) 推荐(0) 编辑
摘要:前言 没有深入研究过, 懂个概念就好, 等性能遇到问题在来看看. 以前写的笔记: 游览器 reflow 参考: reflow和repaint引发的性能问题 精读《web reflow》 Reflow & Repaint repaint 是小的, 性能没有那么伤, 它只是换换颜色之类的. reflow 阅读全文
posted @ 2022-03-11 21:33 兴杰 阅读(79) 评论(0) 推荐(0) 编辑
摘要:介绍 它和 IntersectionObserver, ResizeObserver 差不多, 都是观察 element 变化的. 它可以观察元素的 attribute 增加, 移除, 修改, append child 等等. 建议先看前 2 篇 IntersectionObserver 和 Res 阅读全文
posted @ 2022-03-11 21:15 兴杰 阅读(178) 评论(0) 推荐(0) 编辑
摘要:介绍 想监听一个 element 的 size changes 就可以使用 ResizeObserver 了. 在看这一篇之前, 建议先看看 DOM & BOM – IntersectionObserver, 它们的模式很像, 一起了解会比较容易. 效果 参考: MDN – ResizeObserv 阅读全文
posted @ 2022-03-11 19:38 兴杰 阅读(240) 评论(0) 推荐(0) 编辑
摘要:介绍 IntersectionObserver 的作用是监听某个元素是否出现在框内 (比如 viewport). 它可以实现 lazy load image, 一开始图片是没有加载的, 当图片出现在 viewport 时才去加载. 也可以用来做 tracking, 比如某个商品 (card 元素), 阅读全文
posted @ 2022-03-11 15:13 兴杰 阅读(387) 评论(0) 推荐(0) 编辑
摘要:JS 无法 query select 到伪元素 参考: 使用JS控制伪元素的几种方法 JS style remove property 是 kebab-case set property 是 camelCase navList.style.maxHeight = `${window.innerHei 阅读全文
posted @ 2022-02-01 09:12 兴杰 阅读(95) 评论(0) 推荐(0) 编辑
摘要:Document.scrollingElement 参考: why to use 'html, body' for scrollTop instead of just 'html' MDN 使用document.scrollingElement控制窗体滚动高度 要监听 root scrollbar 阅读全文
posted @ 2021-10-10 23:39 兴杰 阅读(228) 评论(0) 推荐(0) 编辑

1
点击右上角即可分享
微信分享提示