IntersectionObserver
基于最新的浏览器API ( IntersectionObserver )官网地址
简单介绍
const ob = new IntersectionObserver((entries) => {
console.log(entries)
}, {
root: null, // 要观察的元素与谁交叉, 默认值视口
rootMargin: '10px', // 拓宽交叉范围 默认值 0
threshold: 0, // 交叉的预值 取值 0-1
})
示例
const ob = new IntersectionObserver((entries) => {
console.log(entries)
for(const entry of entries) {
// 做一些逻辑处理...
// ...
// 取消监听对应的dom节点
const target = entry.target;
ob.unobserve(target)
&# ...
BroadcastChannel 实现浏览器tab无刷新通讯
前提须知
使用 BroadcastChannel 来实现浏览器tab通讯必须是同源的
BroadcastChannel 支持多tab间通讯
mdn 链接
具体使用
发送方使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<button style="all: unset" onclick="onSend()">发送</button>
</div>
<script>
/**
* BroadcastChannel
* 接收方和发送发必须是同源的才行进行浏览器tab的通讯
*
*/
const broadcas ...
git
git 基本命令git init # 初始化 git 仓库
git add . # 添加到暂存区
git commit -m '提交信息' # 把本次提交内容添加到本地仓库
git push # 推送到远程 如果没有绑定远程分支 会出现提示的命令 复制提示的命令重新执行即可
git branch --set-upstream-to=origin/远程分支名称 # 推送到远程指定分支
git pull # 拉取远程分支代码 如果没有绑定会提示 按提示操作
git checkout 'develop' # 切换到 develop 分支
git checkout -b 'develop' # 创建并切换到 develop 分支
git branch # 查看本地所有分支
git branch -D 'develop' # 强制删除本地 develop 分支
git 关闭忽略文件大小写git config core.ignorecase false
强大的 git stash# 储藏工作区的所有内容
git stash
# 储藏工作区内容并且添加备注
git st ...
vue
vue小技巧
Hexo 初体验
Hexo搭建博客创建项目
全局安装 hexo-cli 脚手架
npm install -g hexo-cli
安装hexo
npm install hexo
安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。
hexo init <folder>
cd <folder>
npm install
新建完成后，指定文件夹的目录如下
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
_config.yml 文件网站的 配置 信息，您可以在此配置大部分的参数。
package.json 文件应用程序的信息。EJS, Stylus 和 Markdown 渲染引擎 已默认安装，可以自由移除
{
"name": "hexo-site",
"version": "0.0.0",
"private": true,
"hexo": {
"version": ...