Skip to content

TNotes.html-css-js

Main Navigation 👀 TOC

⚙️ Settings

📂 TNotes.yuque

Appearance

Sidebar Navigation

1. roadmap

✅ roadmap

2. var、let、const

✅ var 关键字和变量

✅ 变量声明提升和暂时性死区

✅ let 关键字

✅ const 关键字

3. 作用域

✅ 区块和块级作用域

4. js 执行环境

✅ 常见的两个 JS 运行环境：浏览器、NodeJS

5. 语句和表达式

✅ 语句和表达式

6. 符号

✅ JS 中的符号

✅ 转义符

✅ 标识符

7. 流程控制语句

✅ 条件语句 - if 结构

✅ 条件语句 - if...else 结构

✅ 条件语句 - switch 结构

✅ 条件语句 - 三元运算符

✅ 条件语句 - 练习

✅ 循环语句 - for 循环

✅ 循环语句 - while 循环

✅ 循环语句 - do...while 循环

✅ 循环语句 - break 语句和 continue 语句

✅ 循环语句 - 标签（label）

✅ 循环语句 - 练习

✅ 注释

✅ 字面量

8. 数据类型

⏰ boolean 类型

⏰ 与数值相关的全局方法

⏰ 数值类型【扩展】

⏰ 字符串定义

⏰ 模板字符串

⏰ 字符串与数组

⏰ 字符串类型【扩展】

⏰ null 和 undefined 类型

⏰ 数组的本质

⏰ 数组的索引和 length 属性

⏰ 数组空位

⏰ 伪数组

⏰ 使用 in 运算符判断属性是否存在于数组中

⏰ 使用 for...in 循环遍历数组

✅ 防抖、节流

⏰ 数组类型【扩展】

⏰ 数组【练习-1】

⏰ 数组【练习-2】

⏰ 对象属性读、写、删

⏰ 对象的字符串键名的多种写法

⏰ 判断某个属性是否存在于对象中

⏰ 使用 for...in 循环遍历对象属性

⏰ 对象的引用

⏰ 对象类型【练习】

⏰ 引用类型【面试题】

⏰ 使用 instanceof 判断值的数据类型

⏰ 使用 typeof 运算符判断值的数据类型

⏰ 原型链

⏰ 加法运算符

⏰ 对象类型的加法运算【扩展】

⏰ 作用域【面试题】

⏰ 使用 customElements 创建一个 myButton 自定义元素

⏰ 使用 MessageChannel 实现不同模块之间的相互通信

⏰ 在 Worker 中使用 MessageChannel

⏰ 使用 MessageChannel 实现父子窗口之间的互相通信

⏰ new 命令

⏰ 使用 Object.create() 创建实例对象

⏰ 构造函数

9. 模块化

⏰ 在浏览器中引入 ESM 模块

⏰ ESM 绑定再导出

⏰ ESM 模块的基本导出、导入

⏰ ESM 模块的默认导入、导出

⏰ ESM 依赖预加载和依赖延迟加载

⏰ ESM - 练习 - 推箱子小游戏

⏰ CMD

⏰ AMD

⏰ JS 导入断言

⏰ CommonJS 规范

⏰ 认识 nodejs 是如何实现 CommonJS 规范的

⏰ CommonJS 模块缓存

⏰ CommonJS 练习 - 制作一个斗地主洗牌发牌的程序

⏰ 订阅发布模式

⏰ 观察者模式

⏰ 使用 Array.form 来创建一个二维数组

⏰ encodeURIcomponent

10. ⚙️ window 对象

✅ window.onbeforeunload

✅ window.confirm

✅ 使用 postMessage 实现跨标签页通信

⏰ DOMParser

⏰ XSLTProcessor

11. css 属性

⏰ background

⏰ clip-path

12. html 元素

⏰ style 元素的 sheet 属性

⏰ script 元素的 crossorigin 属性

⏰ script 元素的 type 属性

13. prettier

✅ 学习 prettier 基本配置字段的书写

14. eslint

✅ eslint 是什么？

⏰ eslint 的配置文件的命名

⏰ VSCode 中的 eslint 插件

⏰ 使用 no-unused-vars 配置规则：未使用的变量报错

⏰ eslint 配置格式

⏰ 忽略文件 .eslintignore

15. color picker

⏰ 自定义 color picker 组件

16. ⏰ html-css

⏰ img 元素宽度撑满，防止溢出容器

⏰ 容器高度自适应图片高度

⏰ 普通元素的参考系是父元素的 content-box

⏰ absolute 定位元素的参考系是父元素中的定位元素的 padding-box

⏰ 表单单选框

⏰ 表单提交、重置按钮

⏰ 表单元素 select 多选

⏰ 密码输入框

⏰ 认识 table 元素结构

⏰ 定位练习 - 侧边广告

⏰ 定位练习 - 视口居中

⏰ 定位练习 - 视频卡片

⏰ 盒模型 content-box vs. border-box

⏰ 精灵图

⏰ 属性值的计算过程

⏰ 字体图标

⏰ a 元素的爱恨法则

⏰ 伪类选择器 first-child、nth-cihld

⏰ 伪类选择器 nth-cihld

⏰ 伪类选择器 first-child

⏰ 伪类选择器 first-of-type

⏰ 颜色的 alpha 通道

⏰ 一些常见的通用 css

to top

目录

open in vscode

Copied!

✅ 已完成：30

0054. 使用 customElements 创建一个 myButton 自定义元素

1. 📝 summary
2. 🔗 links
3. 📒 notes
4. 💻 demo
5. 🤖 AI

1. 📝 summary

2. 🔗 links

3. 📒 notes

4. 💻 demo

5. 🤖 AI

👣 9437 | 2025年04月29日周二 14:29:12

Last updated:

Pager

上一篇⏰ 作用域【面试题】

下一篇⏰ 使用 MessageChannel 实现不同模块之间的相互通信