Skip to content

Commit b6563b4

Browse files
author
梁怀刚
committed
feat: 整理网站内容
1 parent 97b64d4 commit b6563b4

File tree

36 files changed

+88
-2961
lines changed

36 files changed

+88
-2961
lines changed

‎blog/2022-01-06-送自己一个生日礼物.md‎ renamed to ‎blog/2015-01-06-送自己一个生日礼物.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ tags: [daily]
55

66
建站初衷: 自问是一个比较喜欢 it，喜欢学习，但是往往学习过的工作中不太常用的知识总是遗忘，所以秉承“好记性不如烂笔头”的宗旨决定自己建站，用于自己的学习记录，便于快速回顾知识点，可能有人会说直接注册一个掘金账号不就行了，但是我希望我的产出始终在我自己这里，而不是在别人的数据库。综上所述，有了现在的这个网站。
77

8+
<!-- truncate -->
9+
810
> 简单的事情简单做, 今天用最简单的方式完成了这个网站，用最简单的方式做一个生活的记录，没有数据库，没有后端，只有简单的 Markdown。
911
1012
## 当前网站使用的技术

‎blog/2016-04-30-Web端裁剪图片方法.md‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
## Web端裁剪图片方法
2-
3-
4-
1+
---
2+
authors: Harry
3+
tags: [daily]
4+
---
55

66
由于在Web端，JavaScript不能直接处理本地文件，因此可以在后台裁剪图片，或者利用html5的canvas来处理。
77

8+
<!--truncate-->
9+
810
### 方法1：传送到后台剪切
911

1012
**步骤1：上传图片到后台，向前端返回图片URL**

‎blog/2016-12-09-jQuery实现弹幕效果、文字水平滚动垂直滚动插件.md‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
1-
## jQuery实现弹幕效果、文字水平滚动/垂直滚动插件
2-
3-
4-
<!--kg-card-begin: markdown-->
1+
---
2+
authors: Harry
3+
tags: [daily]
4+
---
55

66
在写这个插件之前，已经在很多专题页面需要用到弹幕，或者是文字滚动等效果，原理大致相同（也有细微区别），但一直没有封装成插件。也是在这些工作中尝试使用了多种方法，在这里也将一一列举其中的优缺点。
77

88
### **一、使用CSS Animation的解决方案**
99

1010
使用CSS Animation这个解决方案并不好，但这也是我最开始的一个思路。我个人认为这是一个最差的解决方案，在实际使用过程中发现了许多意外的问题。它的兼容性倒是其次，更大的问题是弹幕元素的不可控制，以及窗口失去焦点后，动画暂停，但是JS并没有暂停。这就导致了重新恢复窗口焦点后，弹幕一堆的出现。是一个非常不好的效果。
1111

12+
<!--truncate-->
13+
1214
**思路：**
1315

1416
使用@keyframes定义一个移动的动画，通过JS动态的加载弹幕元素到显示区域边缘，并指定相应的类。那么添加的元素就会执行我们定义的这个移动动画。那么这个弹幕的效果就实现了。当然这些元素都是绝对定位元素。

‎blog/2016-12-22-《JavaScript设计模式》学习笔记——发布订阅者模式.md‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
1-
## 《JavaScript设计模式》学习笔记——发布订阅者模式
2-
3-
4-
<!--kg-card-begin: markdown-->
1+
---
2+
authors: Harry
3+
tags: [daily]
4+
---
55

66
因前段时间业务需要使用到了观察者（Observer）模式，同时在使用的过程中，让我想起了Publish/Subscribe（发布/订阅）模式。起初感觉这两种模式非常相似，但是细细观察你会发现，Obsever模式要求希望接收到主题通知的观察者（或对象）必须订阅内容改变事件。
77

88
然而Publish/Subscribe模式使用了一个主题/事件通道，这个通道介于希望接收到通知（订阅者）的对象和激活事件的对象（发布者）之间。其目的是避免订阅者和发布者产生依赖关系。这与Obsever模式不同，因为它允许任何订阅者执行适当的事件处理程序来注册接收发布者发出的通知。
99

10+
<!--truncate-->
11+
1012
```
1113
let pubsub = {};
1214

‎blog/2017-02-18-CSS3硬件加速技巧.md‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
## CSS3硬件加速技巧
2-
3-
4-
<!--kg-card-begin: markdown-->
1+
---
2+
authors: Harry
3+
tags: [daily]
4+
---
55

66
使用3D硬件加速提升动画性能时，最好给元素增加一个z-index属性，人为干扰复合层的排序，可以有效减少chrome创建不必要的复合层，提升渲染性能，移动端优化效果尤为明显。
77

@@ -11,6 +11,8 @@
1111

1212
最近深入了解了一些浏览器内核的细节，感觉这里面其实有坑啊。。。
1313

14+
<!--truncate-->
15+
1416
事情要从最近看的《[WebKit技术内幕](http://book.douban.com/subject/25910556/?ref=zhelin.me)》说起，第二章介绍了网页的结构，其中提到了Webkit硬件加速的方式，会把需要渲染的元素放到特定的『Composited Layer』中，在chrome的控制台可以这样开启：
1517

1618
![CSS3硬件加速技巧](https://cdn.jsdelivr.net/gh/HarryPoint/oss@main/uPic/2024-07-12_15:06:02_rJ2GXd.png)

‎blog/2018-04-22-再谈JavaScript作用域.md‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
1-
## 再谈JavaScript作用域
2-
3-
4-
<!--kg-card-begin: markdown-->
1+
---
2+
authors: Harry
3+
tags: [daily]
4+
---
55

66
### 什么是作用域？
77

88
作用域，这个词在编程界经常能听到看到，每一个程序员几乎都有被问到过。在前端圈，面试JavaScript相关知识，这可以算说是一个非常基础的问题了。但早年间我长期陷入了一种“只可意会不可言传”的地步，我不知道是不是有许多小伙伴与我曾经有一样的经历，所以我就抽时间把书本中看到的东西整理了一下。把提炼的东西分享给大家。
99

10+
<!--truncate-->
11+
1012
可能大多对作用域的通用解释是这种：
1113

1214
> 作用域就是变量（标识符）适用范围，控制着变量的可见性。

‎blog/2018-05-06-简述Node.js内存限制.md‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
1-
## 简述Node.js内存限制
2-
3-
4-
<!--kg-card-begin: markdown-->
1+
---
2+
authors: Harry
3+
tags: [daily]
4+
---
55

66
前段时间在Ghost博客系统群与群友交流，谈到了Node内存管理的问题，发现很多小伙伴对Node内存管理完全处于一个“零认识”的状态，这可能与本身工作没有接触到相关，毕竟我们大多数工作可能与DOM打交道，当页面内存占用过多（可能性也很低），几乎不用等GC，用户已经刷新或关闭了网页。
77

88
做为前端工程师的我们，大多使用Node做一做小工具，这大多是短时间执行的场景，即使内存使用过多或是内存泄漏，也只会影响到我们使用者，随着进程的退出，内存也会释放。但面对Node服务端应用的开发，内存管理这样一个话题就不可避免的摆在了我们面前。虽然我对Node的认知也比较浅薄，但觉得也有必要将知道的内存相关知识整理一下。
99

1010
第一次看重内存管理是在做[推妹子前端占位图](https://tuimeizi.cn/?ref=zhelin.me)的时候，顺便了解了一下相关知识，算下来正好快一年了。基于Node无阻塞、事件驱动建立的网络服务，本身就具有内存消耗低的优点，但面对海量的图片处理请求，也不得不让我考虑超低配云服务器内存的问题。
1111

12+
<!--truncate-->
13+
1214
### V8内存管理
1315

1416
在浏览器开发工作中，我几乎没有遇到过垃圾回收对程序构成的性能影响。知道的也就是老生常谈的通过eval('Code')或是setTimeout('Code', 0)等方法动态改变作用域带来的性能影响。但都不会这样去写代码。我们知道Node的JavaScript执行引擎是V8，关于V8的历史，或是关于Node的历史我们就不在这里赘述了，毕竟学一门语言和使用一门框架，最先应该了解的是它是基于怎样的场景为了解决什么样的问题而诞生的。但我们必须要记住和了解的是：*Node对JavaScript执行的优异表现直接受益于V8。它可以随着V8的升级享受到更好的性能表现和实现新的语言特性。但也会因为V8受到一些限制。*

‎blog/2018-09-28-前端基础算法——二分查找.md‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ tags: [daily]
55

66
## 前端基础算法——二分查找
77

8+
<!--truncate-->
89

910
> 二分查找，其查找的列表必须有序。时间复杂度为：O(log n)
1011
@@ -16,7 +17,7 @@ tags: [daily]
1617

1718
二分查询/简单查询对比（查找数1）
1819

19-
<!--kg-card-begin: markdown-->
20+
2021

2122
```
2223
function binarySearch (list, item) {
@@ -41,6 +42,4 @@ function binarySearch (list, item) {
4142
}
4243
```
4344

44-
<!--kg-card-end: markdown-->
45-
4645
[binarySearch](https://codepen.io/ZhelinCheng/embed/preview/dQjjZK?height=300\&slug-hash=dQjjZK\&default-tabs=js,result\&host=https://codepen.io)

‎blog/2018-10-01-前端基础算法——选择排序.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
## 前端基础算法——选择排序
2-
3-
4-
<!--kg-card-begin: markdown-->
1+
---
2+
authors: Harry
3+
tags: [daily]
4+
---
55

66
> 选择排序，运行时间：O(n^2)
77
@@ -35,6 +35,6 @@ function selectionSort (arr) {
3535
}
3636
```
3737

38-
<!--kg-card-end: markdown-->
38+
<!--truncate-->
3939

4040
[Selection Sort](https://codepen.io/ZhelinCheng/embed/preview/WYaZOX?height=300\&slug-hash=WYaZOX\&default-tabs=js,result\&host=https://codepen.io)

‎blog/2019-09-18-Nest.js学习笔记.md‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
## Nest.js学习笔记
2-
3-
4-
<!--kg-card-begin: markdown-->
1+
---
2+
authors: Harry
3+
tags: [daily]
4+
---
55

66
## 控制器Controller
77

88
@Controller() 装饰
99

10+
<!-- truncate -->
1011
### 使用
1112

1213
```

0 commit comments

Comments
 (0)