Skip to content

Commit

Permalink
文件格式优化,以及添加keyword页面
Browse files Browse the repository at this point in the history
  • Loading branch information
yanghcc committed Jul 29, 2019
1 parent 28ddce5 commit fd51d95
Show file tree
Hide file tree
Showing 6 changed files with 85 additions and 28 deletions.
5 changes: 2 additions & 3 deletions docs/.vuepress/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ module.exports = {
editLinks: true, // 默认是 false, 设置为 true 来启用
// repoLabel: '查看源码',
lastUpdated: 'Last Updated', // string | boolean
displayAllHeaders: true, // 显示所有页面的标题链接
displayAllHeaders: false, // 显示所有页面的标题链接
// 添加导航栏
nav: [
{ text: 'home', link: '/' },
Expand Down Expand Up @@ -50,13 +50,13 @@ module.exports = {
'/note/glob',
'/note/vue',
'/note/reg',
'/note/keyword',
'/note/bit-opration',
'/note/crypto',
'/note/fragmentation',
'/note/git',
'/note/html',
'/note/nginx',
'/note/git',
'/note/remind',
'/note/md-sytax',
'/note/reg',
Expand Down Expand Up @@ -93,7 +93,6 @@ module.exports = {
'/collection/interview',
'/collection/skill-tree'
],

}
}
}
34 changes: 18 additions & 16 deletions docs/note/click.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,57 +2,59 @@

穿透现象与click的延迟解决方法是分不开的,若要了解穿透现象,需要先了解click延迟的解决原理。

### 移动端click事件300ms的延迟现象的原因:
## 说明

### 移动端click事件300ms的延迟现象的原因

在最早iphone的safar浏览器中,为了实现触屏中双击放大效果,当用户点击屏幕时后会判断在300ms内是否有第二次点击,如果有,就理解成双击,若没有就是单击, 就会触发click事件. 当你点击移动设备的屏幕时, 可以分解成多个事件,顺序依次为:touchstart — touchmove — touchend — click, 这些事件是按顺序依次触发的.

### 解决延迟的思路
### 解决延迟的思路

touchstart touchend是没有延迟的,可以在touchend时触发用户想要在click时触发的事件.

### zepto 解决click延迟的原理
### zepto 解决click延迟的原理

自定义tap事件,当用户点击元素时,touchend事件先发生, 当touchend事件冒泡到document时触发目标元素绑定的tap事件

简单模拟zepto tap的实现方式(这里忽略touchstart与touchend的点击位置的判断):

```
```js
// document元素上绑定touchend事件, 在touchend的事件处理函数中自定义tap事件, 当点击的目标元素的touchend事件冒泡到document上时, 触发绑定在目标元素上的tap事件
document.addEventListener('touchend', function(e) {
// 自定义tap事件
var evt = document.createEvent('Event');
evt.init(tap, true, true);
var evt = document.createEvent('Event')
evt.init('tap', true, true);

// 触发绑定在目标元素上的tap事件
e.target.dispatch(evt);
}, false);
e.target.dispatch(evt)
}, false)
// -----------------------------------------------------------------
// 用户绑定tap事件
document.getElementById(‘elementid’).addEventListener('tap, function(e) {
document.getElementById(‘elementid’).addEventListener('tap', function(e) {
// click事件逻辑
}, false);
}, false)
```

### zepto的tap穿透现象
### zepto的tap穿透现象

遮罩层中有一个标签绑定了tap事件,触发时遮罩层消失,该标签正下方有一个绑定了click的按钮,此时点击上层的标签,同时也会触发下层元素的click事件,出现穿透的现象。

### 为什么会出现穿透
### 为什么会出现穿透

结合前面tap事件的原理来分析:

当触发tap事件,上层遮罩层关闭后,此时事件只进行到touchend,而click是在大概300ms后才触发,当click触发时,上面的遮罩层已消失,就相当于点击到了下层的元素。

### 下层什么样的元素才会形成穿透
### 下层什么样的元素才会形成穿透

根据原理来说,因为穿透是发生在click发生时,也就是下层绑定了click事件或click时会触发的事件(focus focusout)的元素,或点击时有默认形为的标签元素,如a input(会出系统键盘的type类型或绑定了focus事件)等。

# 如何解决穿透
### 如何解决穿透

方法一:直接将上层元素的tap事件换成click事件(会出现300ms的延迟触发事件)

方法二:在click事件触发前阻止它,如在touchend的事件中使用e.preventDefault()来阻止后续的click事件

# zepto为何不使用e.preventDefault()来解决穿透问题
### zepto为何不使用e.preventDefault()来解决穿透问题

因为zepto的tap事件统一是在document的touchend时触发的,若在这里使用e.preventDefault(),那页面上所有元素在touchend后触发的事件都不会被执行了。
因为zepto的tap事件统一是在document的touchend时触发的,若在这里使用e.preventDefault(),那页面上所有元素在touchend后触发的事件都不会被执行了。
6 changes: 4 additions & 2 deletions docs/note/git.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
# git clone克隆或下载一个仓库单个文件夹
# git常用操作

## clone git仓库单个文件夹

```bash
git init test && cd test //新建仓库并进入文件夹
Expand All @@ -9,4 +11,4 @@ echo 'tt*' >> .git/info/sparse-checkout //设置要克隆的仓库的子目录
git remote add origin git@github.com:mygithub/test.git //这里换成你要克隆的项目和库

git pull origin master //下载
```
```
40 changes: 40 additions & 0 deletions docs/note/keyword.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
# javacript 关键字

- `new` 操作符

```js
function _new() {
let target = {}
let [constructor, ...args] = [...arguments]
target.__proto__ = constructor.prototype
let result = constructor.apply(target, args)
const resultType = typeof result
if (result && (resultType === 'object' || resultType === 'function')) {
return result
}
return target
}
```

- `instanceOf`

```js
function instanceof(L, R) { //L是表达式左边,R是表达式右边
var O = R.prototype
L = L.__proto__
while(true) {
if (L === null)
return false
if (L === O)
return true
L = L.__proto__
}
}
```

- `default`
- `this`
- `void`
- `final`
- `volatile`
- ...
16 changes: 13 additions & 3 deletions docs/note/uuid.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,20 @@ function uuid() {

```js
function guid() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
return v.toString(16);
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
return v.toString(16);
});
}
function generateUUID() {
// Universally Unique IDentifier
var d = new Date().getTime();
var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = (d + Math.random() * 16) % 16 | 0;
d = Math.floor(d / 16);
return (c == 'x' ? r : (r & 0x7 | 0x8)).toString(16);
});
return uuid;
}
```

Expand Down
12 changes: 8 additions & 4 deletions docs/skill.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@

- iconfont

- websocket、Woker
- websocket、Woker、websocketd、socket.io、EventSource

- canvas、svg、webGL

Expand Down Expand Up @@ -53,7 +53,7 @@

> event loop
>
> 闭包、作用域、this关键字、new 关键字
> 闭包、作用域、this关键字、弱类型+动态
>
> 事件
>
Expand Down Expand Up @@ -153,7 +153,7 @@
#### nodejs、deno

- express|koa
- express|koa|eegjs

- [sequelize](https://demopark.github.io/sequelize-docs-Zh-CN/)

Expand All @@ -177,10 +177,14 @@

- [node-schedule](https://github.com/node-schedule/node-schedule)

- [Inquirer.js](https://github.com/yanghcc/Inquirer.js)

- [strapi](https://github.com/yanghcc/strapi)

#### 数据库

- redis
- mysql
- mysql[node-mysql](https://www.oschina.net/translate/node-mysql-tutorial)
- mongoDB

#### 后端其他
Expand Down

0 comments on commit fd51d95

Please sign in to comment.