SF
青檬前端
青檬前端
注册登录
关注博客
注册登录
主页
关于
RSS
vscode支持webpack alias的路径跳转
sheldon
2021-03-03
阅读 1 分钟
4.9k
使用了webpack alias配置路径别名之后,vscode就无法感知到别名的实际物理路径,导致无法cmd+鼠标 来智能跳转到定义。通过vscode的jsconfig文件配置后,可以让vscode继续支持跳转。
[译] Node.js的性能监控 - Part 1: 监控的指标
sheldon
2021-03-03
阅读 1 分钟
3.3k
在深入研究Node.js应用程序的性能以及如何提高性能时,有几个比较核心的指标非常重要和有帮助,让我们从以下几个关键的指标来学习分析Node.js的性能。
开发 Node.js 命令行程序的一些常用工程实践
sheldon
2021-03-03
阅读 8 分钟
3.4k
node开发命令行程序非常方便,我们常用的webpack,babel,http-server,express-generator, yeoman等等,都是node.js开发出来的命令行工具。
tsw初探
sheldon
2021-03-03
阅读 2 分钟
1.6k
TSW是一个支持抓包、全息日志、监控的基于Node.js的web server。 说人话 就是一个内置了日志采集、请求上报能力的http-server。
再理解reflow重排和repaint重绘
sheldon
2020-11-18
阅读 10 分钟
4k
我们都知道浏览器中有 “重绘” 和 “重排” 两个概念,但浏览器对于我们是一个黑盒,我们很难真正弄清楚其真实的代码逻辑如何,除非去研究浏览器内核源码。
Koa入门教程[6]-初探源码
sheldon
2020-11-13
阅读 10 分钟
1.8k
本文大纲express与koa的对比Koa1 内核源码简要介绍 Koa2 内核与 koa1 的区别了解 Koa 中 http 协商缓存的实现机制koa-router 源码koa-view 源码express本文我们不讲解express的源码。但是express的实现机制对于我们了解 TJ 在设计框架时的思路有一定的参考意义。express 实现了一个类似于流的请求处理过程,其源码比 Koa...
Koa入门教程[5]-升级为Koa2
sheldon
2020-11-13
阅读 3 分钟
2k
先来翻译一波 官方的 migration指南:从 Koa v1.x 迁移到 v2.x新的中间件函数签名Koa v2 引入了一个新的中间件签名老的中间件签名方式 (v1.x) 将在v3版本删除新的 middleware 签名如下: {代码...} 你不是只能用async函数-你只需要保证传递一个返回promise的函数一个普通返回promise的函数照样可以工作。这个中间件函数签...
Koa入门教程[4]-开发并部署todo-list应用
sheldon
2020-11-02
阅读 1 分钟
1.6k
项目简介todo-list 应用是一个常用的练手应用。他主要包含以下几个功能:input框添加任务,回车后添加到任务列表点击任务列表条目,或点击条目后的删除按钮,可以删除一个todo项目点击 完成 按钮,可以把某个条目标记为已完成这个项目我们采用前后端完全分离的方式来开发前端技术栈: Vue2.x、Axios、Vue-Router、Vuex 、c...
Koa入门教程[3]-错误和异常处理
sheldon
2020-11-01
阅读 4 分钟
4.4k
Node.js 中的异常Node.js 跟 JavaScript一样,同步代码中的异常我们可以通过 try catch 来捕获.异步回调异常但异步代码呢? 我们来看一个 http server 启动的代码,这个也是个典型的异步代码。 {代码...} 我们发现异步代码的异常无法直接捕获。这会导致 Node.js 进程退出。最明显的就是 web server 直接挂掉了。异步代码...
Koa入门教程[2]-常用中间件
sheldon
2020-10-30
阅读 6 分钟
4k
中间件执行流程中间件的执行流程,可以用下面这张图片来生动的说明(图片使用了 Koa 2 的 async 语法):对于 Koa 1 来说也类似,只是 async 函数换作 generator 函数,await 换作 yield 关键字。对于前端程序员,可以把 yield 之前的代码认为是捕获阶段,yield 之后的认为的冒泡阶段,从而理解多个中间件之间代码的执行流...
基于contenteditable技术实现@选人功能
sheldon
2020-10-30
阅读 19 分钟
9.5k
之前我在小程序里在没有 contenteditable 的input中实现了一个输入 @ 字符实现 at 选人功能的需求。无米之炊: 小程序内实现一个具有“@功能at功能”的输入框。当时由于小程序缺少富文本输入框,因此只能在纯 input 里面实现人名输入和用户信息还原。
再学babel配置
sheldon
2020-10-24
阅读 5 分钟
1.6k
babel 每次学习都有新的理解,哪怕是其配置都与我们前端生态中的各种概念息息相关。近期再次复习babel知识从而更好的编写js类库,本文是学习过程所做的记录。
无米之炊: 小程序内实现一个具有“@功能at功能@选人功能”的输入框
sheldon
2020-10-19
阅读 6 分钟
5.7k
例如:微博输入框,QQ空间的说说输入框。我们可以在一个输入框内输入 "@" 字符,然后会调起一个选人浮层或全屏选人控件(在桌面端通常是个浮层,在移动端通常是一个全屏控件)。
JavaScript运行时的事件循环机制
sheldon
2020-10-18
阅读 7 分钟
2.4k
误解1:在JavaScript平台上有一个用户态的主线程,用来执行 JavaScript 代码;除此之外,还有个EventLoop线程用来做事件循环的检查,检查到有事件任务时,再交给JavaScript执行线程来执行
一种小拖大的jssdk加载方案
sheldon
2020-10-11
阅读 7 分钟
3.7k
jssdk 是在前端中完成某些业务功能的 JavaScript 函数库,通常由 sdk 的开发者开发完毕后,交给业务的页面来引入使用。例如:
Koa入门教程[1]-开端
sheldon
2020-10-11
阅读 3 分钟
2.7k
前言Koa 是一个精致小巧的基于 Node.js 的 Web 框架。目前有 1.x 和 2.x 2 个大的版本其中 2.x 版本使用了 Node.js v7.6.0 之后支持的 async await 语法糖,提供了更优雅的异步编程模式。Koa 有如下特点:内核精简,不内置中间件. 小巧但富有表现力。类似栈的方式运行中间件,Koa 调用下游,然后堆栈展开再将控制再流回上...
通过mongodb TTL机制让集合中的数据自动过期删除
sheldon
2020-09-02
阅读 3 分钟
8.8k
MongoDB的集合有衣蛾 TTL (即 time to live,即生存的时间) 的特性。TTL可以让mongodb自动移除过期了的数据,(咦,这岂不是正好符合日志类的数据诉求)。这种机制便比较适合一些 日志数据 机器产生的事件数据 甚至可以用来做 session会话 。
Chrome新增的cookie属性SameSite
sheldon
2020-08-16
阅读 1 分钟
4.1k
咦,看起来像是阻止了我的 cookie 发送。经过查询方知,原来谷歌为了防止CSRF攻击,已经逐步开始启用 SameSite 这个cookie属性,以更强制的手段来降低 CSRF 的风险。而这个特性从76版本后,就已经开始逐步加入到 chrome 稳定版当中了。我看了下自己的 chrome,赫,都已经 84版了,必然命中这个特性了。
Node.js+Redis实现消息队列的最佳实践
sheldon
2020-08-01
阅读 7 分钟
14k
最近在开发一个小型前端监控项目,由于技术栈中使用到了 Node + Redis 作为消息队列实现,因此这里记录下在 Node 中通过 Redis 来实现消息队列时的 使用方法 和 注意事项
IOS9兼容性问题解决: Attempting to change configurable attribute
sheldon
2019-11-27
阅读 4 分钟
5k
排除法缩小问题范围:请远在北京的这位测试同学通过HTTP代理抓包的方式查看是否拉取了我们的jssdk,以及是否发起了广告拉取请求。结果是:js已拉取,但下一步的ajax请求未发出;这便说明问题肯定出现在jssdk的加载或执行过程当中了。
剖析setTimeout和click点击事件的触发顺序
sheldon
2019-10-12
阅读 3 分钟
8.7k
下面是一段非常简单的JavaScript代码 {代码...} 但是当你点击这个按钮时,产生的效果可能会让你有些困惑。下面我们来看下: 页面打开2s内点击一次按钮 这段JavaScript代码当你在页面打开2s时间内点击一次按钮,效果是这样的: 页面卡住大约5s钟 大约5s后弹出 click handler 点击弹窗确认后,弹出 timer handler 当你继续再...
REGEXPER正则表达式图形工具的使用
sheldon
2019-09-23
阅读 4 分钟
6.5k
我们在使用正则表达式的时候,看到一坨繁琐的式子经常头大,如果转换成图形描述或许更加清晰点。本文介绍一个叫做 REGEXPER 的网站,REGEXPER 网站提供了一种工具,可以把你的正则表达式转换为 铁路图(Railroad Diagram),通过铁路图,或许能让我们更清晰的理解我们所编写的正则表达式。
通过focusout事件解决IOS键盘收起时界面不归位的问题
sheldon
2019-07-16
阅读 4 分钟
11.2k
当用户在手机上输入联系电话时,IPhone键盘会弹出,此时iphone上为了让用户可以看到电话输入框,会将整个页面整体向上移动(不然键盘会遮住电话输入框)。此时,实际上页面顶部是离开了我们的视口一部分距离的(我们看到界面中消失了一行输入框)。
Node.js性能分析工具alinode的安装和使用简介
sheldon
2019-07-08
阅读 6 分钟
8.5k
alinode是基本上是免费开源的,不只是可以运行在ECS里面,理论上可以应用在任何地方(只要面子上过得去)。本文将赘述一下alinode的使用方法。
[译]保持Node.js的速度-创建高性能Node.js Servers的工具、技术和提示
sheldon
2019-07-07
阅读 14 分钟
9.8k
Node 是一个非常多彩的平台,而创建network服务就是其非常重要的能力之一。在本文我们将关注最主流的: HTTP Web servers.
一文读懂 babel7 的配置文件加载逻辑
sheldon
2019-03-01
阅读 7 分钟
12.1k
近期,在波洞星球的PC官网项目中,我们采用了新版的 babel7 作为 ES 语法转换器。而 babel7 中的一大变更就是对配置文件的加载逻辑进行了改进,然而实际上对于不熟悉 babel 配置逻辑的朋友往往会带来更多问题。本文就是 babel7 配置文件的中文指南,它是英语渣渣的救星,是给懒人送到口边的一道美味。如有错误 概不负责 ...
从零搭建webpack前端类库脚手架[3]-强悍的babel
sheldon
2018-09-11
阅读 26 分钟
5.2k
上一节我们提到了ES6语法转换插件 babel-loader, 然而babel-loader只是webpack调用 babel的一个桥梁。 实际上,babel是一个具有强大语言转换功能的独立程序。它的主要功能是把ES6或者更新的语言语法转换为浏览器可识别的ES5语法。
JavaScript即学即用教程[1]-类型系统
sheldon
2018-05-13
阅读 3 分钟
1.5k
基本类型 Number, Boolean, String, null, undefined 什么样的变量是 undefined 声明了变量却没赋值 未声明的变量 包装类型 其实js里面也有像java,c#里所谓的包装类型 {代码...} 请问a既然是一个简单的基本类型,内存栈上的4个字节的数字类型,为什么有toString方法呢?显然,这里也发生了包装,其过程大概是这样的...