# > 轻盈的鱼

animation-timeline-demo

// @ 2026/03/18

Markdown 语法与样式展示

// @ 2026/03/04 ·▸ guide ·# Markdown 语法 样式

本文展示尽可能多的 Markdown 语法和样式，包括标题、段落、列表、代码块、表格、脚注等，便于调试和预览。

Markdown 扩展展示

// @ 2026/03/04 ·▸ guide ·# Markdown 扩展 directive

展示 Admonitions、GitHub 卡片、Details、Tabs、Steps、Quote 等 Markdown 扩展的用法。

通过takeUntil取消订阅可观察对象

// @ 2023/03/01 ·▸ javascript ·# Rxjs Angular

Angular 中的单例 Service通过@NgModule()装饰器来声明一个service时， 会与整个应用的生命周期保持一致， 属于单利service （单例模式）。Angular 中的非单例 Service通过@Component()装饰器来声明一个service时，会成为一个非单例的se

将布尔表达式转成json格式

// @ 2022/11/19 ·▸ javascript

简单的词法分析和推栈的应用

pnpm install报错

// @ 2022/08/26 ·▸ nodejs ·# pnpm

在使用pnpm 安装依赖的时候有时候会出现lock文件损坏等情况解决方法安装重试失败， 可以先删除 pnpm本地store- 执行- 执行 rm -rf $(pnpm store path)- 重新安装目前个人碰到的几种失败情况， 都能解决， 以后碰到更多的情况再补充

Linux npm -g 全局安装的命令找不到

// @ 2022/08/26 ·▸ linux, nodejs

在Linux 上通过npm -g全局安装 pm2、yarn、pnpm 等命令找不到的解决方法修改 ~/.bash_profile vim ~/.bash_profile新增环境变量export PATH=$(npm prefix -g)/bin:$PATH在宝塔面板中export PATH=$PAT

在Directive中获取组件DOM以及实例

// @ 2022/06/29 ·▸ angular ·# angular directive

在Directive中获取组件DOM以及实例

Yarn && npm设置镜像源

// @ 2020/04/18 ·▸ nodejs

安装yarnnpm i -g yarnyarnyarn config set registry https://registry.npm.taobao.org --global && \yarn config set disturl https://npm.taobao.org/d

通过视频url，获取缩略图

// @ 2019/06/20 ·▸ canvas

通过视频url，获取缩略图 getVideoImg (url) { let _this = this // 创建视频对象 let video = document.createElement('video') video.src = url video.

“被污染”的 canvas

// @ 2018/04/19 ·▸ canvas

什么是“被污染”的 canvas?尽管不通过 CORS 就可以在画布中使用图片，但是这会污染画布。一旦画布被污染，你就无法读取其数据。例如，你不能再使用画布的 toBlob(), toDataURL() 或 getImageData() 方法，调用它们会抛出安全错误。这种机制可以避免未经许可拉取远程

koa2 + redis使用笔记

// @ 2018/04/19 ·▸ nodejs

安装redisyum install redis启动服务systemctl start redis添加开机启动项systemctl enable redisredis配置修改配置文件 /etc/redis.conf注释掉 bind 127.0.0.1去掉#requirepass foobared的注

javascript观察者模式的简单实现

// @ 2018/03/14 ·▸ javascript

观察者模式当一个对象的状态发生改变，所有依赖于它的对象都将得到通知，也叫做发布-订阅模式基本的代码框架function PubSub() { this.handlers = {};}PubSub.prototype = {

javascript 函数式编程之柯里化(currying)

// @ 2018/03/14 ·▸ javascript

HTML5 Canvas手机九宫格手势密码解锁 ，支持N*N个点

// @ 2018/03/10 ·▸ canvas

对于canvas不熟悉的可以查看 MDN 上的canvas教程在开始之前，先介绍一个数学知识，怎么判断一个点是否在圆内通过判断一个点到圆心的距离是否大于半径。例如：半径是R  如O(x,y)点圆心，任意一点P（x1,y1） （x-x1）*(x-x1)+(y-y1)*(y-y1)>R*R 那么在

X-Frame-Options 响应头

// @ 2017/06/07 ·▸ notes, http

做了一个页面，需要加载一个带分页列表，原本代码中没有ajax分页组件，所以就直接用iframe加载了一个页面进来，结果发现页面无法加载。控制台提示：Refused to display ‘XXXX’ in a frame because it set ‘X-Frame-Options’ to ‘de

NODE.JS采集练手

// @ 2017/05/03 ·▸ nodejs

使用类库request发送请求获取网页内容co执行Generator函数cheerio解析html，和jQuery一样通过选择器获取node-xlsx生成excel文档代码如下"use strict";const request = require('request&#3

Web动画优化--requestAnimationFrame

// @ 2017/05/03 ·▸ canvas

什么是requestAnimationFramewindow.requestAnimationFrame（callback）方法告诉浏览器您希望执行动画，并请求在下一次重新绘制之前,浏览器调用指定的函数更新。 callback该方法作为参数，在重绘之前调用回调。注意：如果您要在下一次重新绘制时进行别

canvas实现圆形进度条

// @ 2017/04/30 ·▸ canvas

浏览器指定内核访问

// @ 2017/04/30 ·▸ notes, html

360页面默认使用极速内核<meta name="renderer" content="webkit">页面默认使用ie兼容内核<meta name="renderer" content="ie-comp&quo

深入分析css中单位px和em,rem的区别

// @ 2017/04/30 ·▸ css

PX特点IE无法调整那些使用px作为单位的字体大小;EM特点em的值并不是固定的;em会继承父级元素的字体大小。比如父元素设置了1.2em,子元素也设置了1.2em 那么事实上子元素设置的是1.2*1.2 emrem特点rem是CSS3新增的一个相对单位(root em，根em)。这个单位与em有什

让浏览器兼容placeholder

// @ 2017/04/30 ·▸ html

什么是placeholderplaceholder 属性提供可描述输入字段预期值的提示信息（hint）。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。placeholder兼容性解决$(function(){ if(!placeholderSupport()){ // 判断浏览器

jQuery 省市三级联动

// @ 2017/04/30 ·▸ javascript

express实践

// @ 2017/04/30 ·▸ nodejs

Node.js 7.0发布之前，写一篇关于express的文章项目创建使用express-generator使用npm install express-generator -g代码修改自动重启使用nodemonnodemon ./bin/www全局设置//加载配置项global.Config = r

短 URL 系统设计

// @ 2017/04/30 ·▸ notes

原理通过发号策略，给每一个过来的长地址，发一个号即可，小型系统直接用mysql的自增索引就搞定了。如果是大型应用，可以考虑各种分布式key-value系统做发号器。不停的自增就行了。实现方式将长连接保存到数据库，获得自增ID，将自增ID转化为62进制，拼接到链接后面通过访问短连接获取到62进制字符串