可以清心

JavaScript中的几个Observer IntersectionObserver MutationObserver ResizeObserver PerformanceObserver IntersectionObserver 如果需要监听某个元素，当它在视口中可见的时候希望可以得到通知，这个 api 就是最佳选择，以往我们的做法是绑定容器的 scroll 事件，或者设定时器不停的调用 getBoundingClientRect() 获取元素位置，这样做的性能会很差，因为每次获取元素的位置都会引起整个布局的重新计算，如果一些元素被放到 iframe 里面，想要知道它们何时出现几乎是不可能的 IntersectionObserver 提供了一种异步观察目标元素与其祖先元素或顶级文档视口（viewport）交叉状态的方法，其祖先元素或视口被称为根 当一个 IntersectionObserver 对象被创建时，其被配置为监听根中一段给定比例的可见区域。一旦 IntersectionObserver 被创建，则无法更改其配置，所以一个给定的观察者对象只能用来监听可见区域的特定变化 ...

web控制台 Web 控制台是一个工具，主要用于记录与网页相关的信息，例如：网络请求、JavaScript 安全错误、警告、CSS 等。它使我们能够通过在网页内容中执行JavaScript 表达式来与网页交互 控制台的类型 console.log() console.error() console.warn() console.clear() console.time() console.table() console.count() console.group() console.log() 用于将输出信息打印到控制台，log() 可以放入任何类型 1234567console.log('111');console.log(111);console.log(true);console.log(null);console.log(undefined);console.log({a: 1});console.log([1, 2]); console.error() 用于将错误消息记录到控制台，默认情况下，错误消息将突出显示为红色 1co ...

package.json package.json 是一个用于描述和配置项目的重要文件，其中包含了许多字段和选项，可以影响项目的构建、依赖管理、脚本执行等方面。了解这些字段可以帮助开发者更好地理解和控制项目的行为 package.json 对于大部分前端开发者来说，知道 dependencies 与devDependencies 就够了。但对于库开发者或有更高级需求的开发者来说，了解 package.json 的其他字段是非常有必要的 必须属性 name 定义项目的名称，不能以 . 和 _ 开头，不能包含大写字母 version 定义项目的版本号，格式为 大版本号.次版本号.修订号 描述信息 description 项目描述 keywords 项目关键字 author 项目作者 1"author": "name (https://github.com)" contributors 项目贡献者 123"contributors": [ "name <emial> (https ...

Object.defineProperty语法 Object.defineProperty() 的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性 Object.defineproperty 可以接收三个参数 Object.defineproperty(object, prop, desc) object 需要定义或修改的对象 prop 需要定义或修改的属性名 options 配置项，也叫属性描述符 传统的对象属性的赋值是可以删除的，但是通过 Object.defineProperty 定义的属性可以通过属性描述符进行更精准的控制对象属性 12345678910111213141516// 传统的对象添加或修改属性值const person = { name: 'suxi', age: 18};person.sex = '男';person.age = 17;Object.defineProperty(person, 'score', { value: ...

TypeScript 入门 TSC 编译器 1npm i -g typescript 12// hello.tsconsole.log('Hello World') 1tsc hello.ts 发出错误 --noEmitOnError 不允许发生错误，一旦发生错误将不会生成 js 文件 1tsc --noEmitOnError hello.ts 显式类型 明确指定参数或变量的类型 但是我们不总是需要编写明确的类型，在大多数情况下，TypeScript 会自动推断代码中的类型 123456function greet(person: string, data: Date) { console.log(person); console.log(data);}greet("suxi", new Date()); 擦拭类型 tsc 编译后的 js 将类型擦除掉 类型注释永远不会改变程序的运行时行为 降级编译 tsc 指定编译生成 js 的版本 tsc --target es2015 hello.ts 严格模 ...

npm 介绍 npm 全名 node package manager 基本命令 1234567891011# 查看 npm 命令列表npm help# 查看各个命令的简单用法npm -l# 查看 npm 版本npm -v# 查看 npm 配置npm config list -l npm 使用 npm init 一路回车，初始化 package.json 文件 如果使用 -f(代表 force)、-y(代表 yes)直接跳过询问阶段，直接生成 package.json 文件 1234npm init -ynpm init -f# -y 和 -f 一样的效果 npm set 设置环境变量 mac 的配置文件在 vim ~/.npmrc * 1234npm set init-author-name 'your name'npm set init-author-email 'your email'npm set init-author-url 'your website'npm set init-license '开 ...

冰老师的 api 年久失修了，所以重新用 node 写一个 githubcalendar 的爬虫 可以在冰老师原有的教程修改修改即可使用该 api 冰老师教程贴https://zfe.space/post/hexo-githubcalendar.html fork仓库方式源码方式fork 如下仓库 仓库https://github.com/milkdue/github-contribute 修改 vercel.json，替换 headers 的跨域设置为自己的域名 123456789101112131415161718192021{ "headers": [ { "source": "/(.*)", "headers": [ { "key": "Access-Control-Allow-Origin", "value&qu ...

记录 react native 环境搭建过程，rn 迭代速度太快，本文记录 0.67 版本 rn 搭建 android 过程所遇到的坑，本人很多软件卸了再装，装了再卸，😭 下方附上 react native 官方文档 react native官方文档https://reactnative.cn/docs/getting-started 安装依赖 node，注意 node 的版本应该大于 12 (傻瓜式安装) node jdk，0.67 版本需要的 jdk 版本是 11 版本，查看 jdk 版本 javac -version，低于 0.67 版本的 rn 需要 jdk1.8 版本 (安装后配置环境变量，具体安装教程已经有很多了，这里不多做介绍) jdk android studio android studio python2(之前需要安装py，建议安装) 安装 Android Studio ...

e968ff55a3669089b399a90adc3cad3e337ca51bd17ed531faf7531a3ec2f63862ee53d039a1bd7c4a93f6d7ff6ef3ce076730832f6e3d38a449b1270fa5e33fc918d9fa3badad294e7c10920649105343c87dd0e500897ffbd691c10dfe4ce2c38b8138444f26dfaf8d88b2357e34b357ba7c1b7b45fb60e9186aa41d3e88eaa5f5493959d7e55482136796244da064625e2f9eeb8d5fcf4861f2beadf862ce140cecff5b42567e2c5088f2fdbfafd6ff6bb3ff166deb42d1ea6ecdc8c3b7fb967aaa097b0b129e171f97f0f6929d9cba1d140cd7af71064d6cca4a6eafe249c1a2f36afafb6fe0ae795ab0af49272d242b3787b2d364ac2 ...