自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

枫之谷

断剑重铸之日,英雄归来之时。

  • 博客(21)
  • 收藏
  • 关注

原创 使用依赖注入框架管理多实例服务(以 InversifyJS 为例)

以上就是我在使用依赖注入框架重构项目时,对于多实例服务管理的一些思考与实践。它成功地帮我完成了整个项目的重构,也让我对于依赖注入框架有了更深的理解。但于此同时,我也在实践中发现了许多依赖注入框架的局限性。但这并不说明依赖注入框架不够完善,而是说明了依赖注入作为一种设计模式与思想,它有其匹配的设计哲学。例如在上述的例子中,真正按照框架的最佳实践来说,我们应当只为服务注入行为抽象,而不是某些具体的变量数据,这对代码可测性来说非常重要。

2023-06-27 17:07:06 334

原创 VSCode For Web 深入浅出 -- 插件加载机制

有开发过 VSCode for desktop 的插件的同学应该知道,vscode 插件的所有能力都是在中声明的,这也是为什么 VSCode 除了需要加载入口的外,还一定要加载插件的的原因。在插件的字段中,我们可以声明插件的各种能力,例如,命令、菜单、快捷键、主题、语言、调试器等等。对于 vscode for web 版本的插件来说,我们还可以声明webOpener能力,其所有属性都是可选的。

2023-05-08 19:08:29 822

原创 浅析依赖注入框架的生命周期(以 InversifyJS 为例)

在上一篇介绍了 VSCode 的依赖注入设计,并且实现了一个简单的 IOC 框架。但是距离成为一个生产环境可用的框架还差的很远。行业内已经有许多非常优秀的开源 IOC 框架,它们划分了更为清晰地模块来应对复杂情况下依赖注入运行的正确性。这里我将以 InversifyJS 为例,分析它的生命周期设计,来弄清楚在一个优秀的 IOC 框架中,完成一次注入流程到底是什么样的。

2023-02-10 17:46:02 778

原创 VS Code For Web 深入浅出 -- 进程间通信篇

在上一篇中,我们一起分析了 VS Code 整体的代码架构,了解了 VS Code 是由前后端分离的方式开发的。且无论前端是基于 electron 还是 web,后端是本地还是云端,其调用方式并无不同。这样的架构下,前后端的通信方式是如何实现的呢?本篇我们将一起来探究 VS Code For Web 的进程间通信方式。进程通信与调用方式进程间通信协议对于多进程架构的项目,进程之间的通信会通过进程间调用 (Inter Process Calling, IPC)。VSCode 中自己设计了专门的 IPC

2022-10-20 11:32:22 395

原创 前端首屏渲染时间的极致优化

我们知道,用户体验是 Web 产品最为重要的部分。尽可能减少首屏加载时间,更为流畅地展示用户所需求的内容,会是用户是否留存的关键因素。而随着现代 Web 业务可供用户的交互行为越来越多,前端项目的复杂度越来越高,每个页面的渲染时间也必然越来越长,这就导致了用户的体验不佳,用户的操作变慢。为此,前端工程师们在首屏请求的各个阶段中持续钻研,不断探究如何将首次页面渲染的时间减少到更小,力求提供更为优秀的产品体验。CSR(Client Side Render)浏览器渲染是最简单,最符合 Web 应用设计

2022-10-18 11:19:20 1384

原创 VS Code For Web 深入浅出 -- 导读篇

下一代 IDE 的形态究竟是什么呢?VS Code For Web 试图回答这个问题。背景众所周知,VS Code 是当前工业界最优秀的代码编辑器之一。它由《设计模式》的作者 Erich Gamma 领导开发,因此,它的设计架构在很多地方十分精妙,近些年已经成为了各家竞相模仿学习的对象。尽管 VSCode 作为桌面端应用十分优秀,但由于它基于 Electron,相当于在 Chromium 外套了一层壳,使得它的打包体积非常大,且无法直接安装在云端环境中,这就导致了它的使用场景非常有限。2019 年,

2022-10-17 14:28:51 194

原创 VS Code For Web 深入浅出 -- 导读篇

下一代 IDE 的形态究竟是什么呢?VS Code For Web 试图回答这个问题。背景众所周知,VS Code 是当前工业界最优秀的代码编辑器之一。它由《设计模式》的作者 Erich Gamma 领导开发,因此,它的设计架构在很多地方十分精妙,近些年已经成为了各家竞相模仿学习的对象。尽管 VSCode 作为桌面端应用十分优秀,但由于它基于 Electron,相当于在 Chromium 外套了一层壳,使得它的打包体积非常大,且无法直接安装在云端环境中,这就导致了它的使用场景非常有限。2019 年,

2022-10-17 14:23:00 359

原创 VS Code For Web 深入浅出 -- 导读篇

下一代 IDE 的形态究竟是什么呢?VS Code For Web 试图回答这个问题。背景众所周知,VS Code 是当前工业界最优秀的代码编辑器之一。它由《设计模式》的作者 Erich Gamma 领导开发,因此,它的设计架构在很多地方十分精妙,近些年已经成为了各家竞相模仿学习的对象。尽管 VSCode 作为桌面端应用十分优秀,但由于它基于 Electron,相当于在 Chromium 外套了一层壳,使得它的打包体积非常大,且无法直接安装在云端环境中,这就导致了它的使用场景非常有限。2019 年,

2022-10-17 14:10:34 529

原创 NodeJS 服务 Docker 镜像极致优化指北

这段时间在开发一个腾讯文档全品类通用的 HTML 动态服务,为了方便各品类接入的生成与部署,也顺应上云的趋势,考虑使用 Docker 的方式来固定服务内容,统一进行制品版本的管理。本篇文章就将我在服务 Docker 化的过程中积累起来的优化经验分享出来,供大家参考。以一个例子开头,大部分刚接触 Docker 的同学应该都会这样编写项目的 Dockerfile,如下所示:FROM node:14WORKDIR /appCOPY . .# 安装 npm 依赖RUN npm install# 暴

2022-10-14 11:24:57 456

原创 优雅地管理与同步个人工作环境——dotfiles manager

:::tip实现一个完美个性化标准的目标是:一个统一管理及备份所有应用配置方式。而本篇文章带来的,就是为了满足这个目标而诞生的最佳解决方案 Dotfiles manager。:::若想提高自己的开发效率,得心应手的工具是必不可少的。而各软件的配置种类繁多且各不相同,这需要我们花费大量的时间去学习和记忆。这给穿插使用各种工具的我们带来了较大的记忆成本,而为了减少这种记忆成本,我们会想办法统一一个个性化标准,然后在每个软件中进行设置,以尽量匹配这一标准。而实现一个完美个性化标准的目标是:一个统一管理

2022-10-13 17:11:28 521 1

原创 中文输入法中光标跟随能力触发的浏览器事件探究

:::tip最近在着手腾讯文档的输入体验优化,在其中有一个不起眼的小需求引起了我的注意,并顺便研究了一些事件监听机制相结合的特点,特此记录一下填坑过程。:::模拟光标跟随大部分的主流输入法都有这样一个特性,在输入中文时,可以通过左右方向键控制光标,移动至输入区中任意两个字符之间的位置,用户接下来的字符输入将在光标处直接插入。由于腾讯文档的渲染的画布是完全自主实现的,为了在体验上与普通可编辑画布保持一致,我们需要自己来模拟这一光标的移动行为。首先,我们需要确定的是输入法中的模拟光标进行更新的

2022-10-13 16:57:22 563

原创 有向无环图的模型设计与应用

从 TodoList 说起对于我们程序开发者来说,想要学习一个框架,从开发一个 TodoList 项目做起,这就像学习语言先学会写 Hello world 一样基础。但其实,简单的 TodoList 里面,同样可以蕴含一些复杂的算法思想。设想一下,今天需要完成若干个任务,需要规划一下工作流,可以通过 TodoList 记录下来。但与普通的线性工作不同的是,每条工作任务可能会有若干个前置工作,那么现在我们该如何分配工作顺序呢?其实这样的事情在我们自己平时的工作中经常遇到,而我们通常的做法是:优先找出不需

2020-11-06 15:38:56 895

原创 实现一个版本自动控制的 IndexedDB

随着现代大型项目复杂度的提升,渲染一个 WEB 页面需要的数据越来越多,在多次打开并渲染的过程中,有许多数据都是重复并且不常更新的,因此这部分的数据需要通过浏览器缓存来缓解网络压力,同时提升页面打开速度。IndexedDB 的存储方案比较在 IndexedDB 推出以前,浏览器数据的存储方案就已经有了一些实现,例如 cookie,localStorage 等等。cookie 不用多说,每次都需要随着请求全部带给服务端,并且大小只有可怜的 4KB。cookie 用来做存储数据缓存必然会给网络请求带来

2020-08-21 11:28:03 1091

原创 利用 React 高阶组件实现一个面包屑导航

什么是 React 高阶组件React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件。React 高阶组件在 React 生态中使用的非常频繁,比如react-router 中的 withRouter 以及 react-redux 中 connect 等许多 API 都是以这样的方式来实现的。使用 React 高阶组件的好处在工作中,我们经常会有很多功能相似,组件代码重复的页面需求,通常我们可以通过完全复制一遍代码的方式实现功能,但是这样页面的

2020-07-03 23:53:11 4623

原创 redux深入理解

redux深入理解(一)学习react的过程中,redux的熟练掌握是一个绕不开并且很难绕过去的坎。接触react已经有一段时间了,甚至连一些小项目都用react做了不少了,但redux的使用上还是有诸多不理解不熟练的地方。正好有很长一段时间没有更过博客了,就从这里着手,增强一下自己的理解。先从解决全局事件的问题开始我们都知道,react的数据流是单向的,这样做是为了保证数据同源。...

2017-12-05 17:52:47 388

原创 js学习笔记归档梳理(2)

这一次整理一下原型链的那些事儿

2017-03-20 22:08:27 330

原创 js学习笔记归档梳理(1)

js学习笔记归档梳理

2017-03-10 01:11:19 443

转载 jquery判断checked的三种方法:

jquery判断checked的三种方法

2017-02-25 16:28:00 510

原创 代码重构之我见

最近在看一些软件工程和构建方面的书籍。俗话说,书读百遍,其义自见,看得多了,自然也就有一些知识可以拿得出手分享一二了。由于我在写代码的过程中往往很追求代码的优雅和简洁,因此我着重阅读了代码重构方面的知识,现在对代码的重构也算略有体会了。接下来我将结合我所吸收到的知识与我自己的一些理解和观点来阐述一下代码重构的艺术。先来说说代码重构是什么吧。重构一般是指把代码优化,便于再修改和开发的一种过程。重构并不

2016-10-16 20:41:53 2401

原创 CodeIgniter最基础配置安装教程

作为PHP当前最流行最方便的MVC框架之一——CodeIgniter,相信很多有PHPer都有所耳闻。CodeIgniter 是一个为用 PHP 编写网络应用程序的人员提供的工具包。它的目标是实现让你比从零开始编写代码更快速地开发项目,为此,CI 提供了一套丰富的类库来满足通常的任务需求,并且提供了一个简单的接口和逻辑结构来调用这些库。

2016-09-24 10:01:42 882

原创 强烈推荐一本数据结构和算法入门类书籍

一直都很想强烈安利啊哈磊老师的一本书,书名叫做<啊哈!算法>(国际标准书号ISBN 978-7-115-35459-4)

2016-09-20 17:42:48 18871 2

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除