- 博客(71)
- 收藏
- 关注
RSS订阅原创 Node.js 20 已发布，来看看 Node.js 20 的新功能吧
Node.js 20 已发布！快来看看 Node.js 20 的新功能吧
2023-04-20 19:19:36
1213
2
原创 带你看看 TypeScript 5.0 的新特性
TypeScript 5.0 已经于 2023 年 3 月 16 日发布了，带来了许多新功能，同时也在性能方面进行了优化，下面让我们来一起看看新版 TypeScript 中比较有重要的变化吧。
2023-03-20 20:24:30
1973
原创 【年更分享】带你看看前端生态圈的技术趋势 state-of-css 2022 & state-of-js 2022详细解读
前端生态圈最大的年度调查 state-of-js 和 state-of-css 调查结果发布了，快来看看今年前端领域的新变化吧。
2023-01-18 10:39:32
581
原创 【带你看看开源圈的新趋势】GITHUB OCTOVERSE 2022 详细解读
GITHUB OCTOVERSE 是由世界上最大的代码托管平台 GITHUB 发起的开源趋势调查，旨在探索开源的新趋势，以及对于开发者和软件公司的影响。通过分析 GITHUB OCTOVERSE 2022 的调查报告，我们能够发掘出开源圈的一些趋势。本篇文章会为大家详细解读 GITHUB OCTOVERSE 2022 调查报告的结果，也会包含笔者对于报告结果的一些理解。
2022-11-14 17:17:22
1250
原创 【架构整洁之道系列】（二）编程范式与设计原则
最近一直在读《Clean Architecture》这本书，书中对与软件设计与架构的阐述是非常深刻的。因此开了一篇专栏，来记录《Clean Architecture》书中一些优秀的架构设计理念，以及我对这些内容的思考。一、编程范式1-1、结构化编程结构化编程是一种编程范式，它采用子程序、块结构、条件分支以及循环等结构，来取代传统的 goto 语句，从而优化计算机程序的可读性和开发时间，避免写出面条式代码。具体来说，结构化编程是以一些简单、有层次的程序流程架构所组成，可分为“顺序”、“条件分支”.
2022-05-24 12:18:36
197
原创 从零开始实现一个简单的低代码编辑器
通过本篇文章，你能够学会如何基于 React 技术栈搭建一个最简单的低代码编辑器，以及部分重点功能的实现方式。
2022-05-24 12:04:44
1888
1
原创 【架构整洁之道系列】（一）设计与架构
最近一直在读《Clean Architecture》这本书，书中对与软件设计与架构的阐述是非常深刻的。因此开了一篇专栏，来记录《Clean Architecture》书中一些优秀的架构设计理念，以及我对这些内容的思考。一、设计与架构是什么?设计（Design）与架构（Architecture）这两个概念让大多数人十分迷惑——什么是设计？什么是架构？二者究竟有什么区别？实际上，两者说的是相同的东西，“架构”这个词往往使用于“高层级”的讨论中，这类讨论一般都把“底层”的实现细节排除在外。而“设计”一.
2022-04-21 18:36:46
2380
原创 【带你看看JS生态圈的技术趋势】state-of-js 2021 详细解读
【带你看看JS生态圈的技术趋势】state-of-js 2021 详细解读
2022-02-16 15:49:05
913
原创 【带你看看CSS生态圈的技术趋势】state-of-css 2021 详细解读
带你看看CSS生态圈的技术趋势 —— state-of-css 2021 详细解读
2022-01-06 14:41:55
636
原创 万字好文，手把手教你做一个「vue3+express+typescript」的全栈模板项目
本篇文章记录了做「vue3+express+typescript」全栈模板项目的全过程。按照这篇文章一步一步操作，你就能够搭建出一个属于自己的全栈模板项目，非常适合各位前端同学食用。
2021-12-23 17:46:24
1497
原创 写代码也能防沉迷？「反内卷 & 防沉迷插件 wlb-webpack-plugin 开发纪录」
一、这个插件是干什么的？wlb-webpack-plugin 插件会在非工作日及下班时间自动将「反内卷和代码防沉迷逻辑」注入到 webpack 打包产物中，是追求 work-life-balance 的前端工程师们的最佳选择。（手动滑稽）项目地址（欢迎各位star）：https://github.com/shadowings-zy/wlb-webpack-plugin防沉迷前：防沉迷后：并且使用webpack打包时会有如下提示：二、这个插件是怎么做的？要实现 wlb-webpack-pl
2021-09-30 16:15:50
714
1
原创 校招前端面试常见问题【6】——NodeJS
校招前端面试常见问题【6】——NodeJSNodeJSQ：NodeJS的IO模型特点是什么？Q：V8引擎垃圾回收机制是什么样的？Q：实现一个EventEmitter？NodeJS相关框架Q：请简述一下Koa的洋葱模型？
2021-08-28 17:53:48
201
原创 校招前端面试常见问题【5】——前端框架及常用工具
校招前端面试常见问题【5】——前端框架及常用工具ReactQ：请简述一下虚拟DOM的概念？Q：请简述一下React的生命周期？Q：请简述一下React Fiber的概念？Q：React setState的时机？VueQ：什么是mvvm模式？Q：请简述一下v-model双向数据绑定的原理？Q：请简述一下Vue的生命周期？Q：请简述一下Vue router的原理？打包工具Q：介绍一下webpack？Q：除了webpack之外你还用过什么打包工具，他们和webpack相
2021-08-28 17:53:13
303
1
原创 校招前端面试常见问题【4】——网络及浏览器
校招前端面试常见问题【4】——网络及浏览器1、网络相关Q：请简述一下HTTP协议，以及HTTP1.0/1.1/2.0/3.0的区别？Q：请简述一下HTTPS协议？Q：请简述一下HTTP协议中的缓存策略？2、浏览器相关Q：请列举一下你知道的浏览器内核的种类？Q：请简述一下浏览器内核的工作原理？Q：请简述一下浏览器的渲染流程？Q：请简述一下浏览器从输入请求到呈现页面的全过程？Q：localstorage、sessionstorage的区别，以及使用场景是什么？...
2021-08-28 17:51:40
223
原创 校招前端面试常见问题【3】——CSS
校招前端面试CSS常见问题1、盒模型Q：请简述一下CSS盒模型？Q：inline、block、inline-block元素的区别？2、选择器Q：请列举出你用过的CSS选择器？Q： CSS选择器的权重是什么样的？3、常见规则Q：position的值有哪几种，布局方式是什么样的？Q： 简单描述下flex布局？Q： transition/animation的用法是？4、常见概念Q：BFC和IFC是什么？Q：如何清除浮动？Q：如何做响应式布局？Q：请简述移动端布局方
2021-08-28 17:50:57
165
1
原创 前端开发校招面试问题整理【2】——HTML
前端开发校招面试问题整理【2】——HTML1、HTML元素（element）简单介绍下你用过哪些HTML元素？语义化元素是指？HTML5新增了哪些元素？2、HTML事件描述一下HTML的事件机制？事件捕获/事件冒泡指的是？如何阻止事件冒泡？...
2021-08-26 23:41:55
113
原创 前端开发校招面试问题整理【1】——JavaScript
前端开发校招面试问题整理【1】——JavaScript1、JavaScript基础介绍js的基本数据类型？基本类型（值类型）：String，Number，Boolean，Null，Undefined，Symbol，BigInt。数字类型包含整数与浮点数，整数精度为2^53，浮点数值最高精度为17 位小数。另外注意的是，NAN属于数字类型，代表非数字，即1/0=NAN，NAN/1=NAN。Infinity代表超过了范围的数，有正负号。undefined：表示变量已声明，但不含有值。null
2021-08-25 21:34:17
420
2
原创 简单聊聊“客户端渲染”、“服务端渲染”和“同构渲染”
一、客户端渲染（CSR）1-1、渲染步骤客户端渲染主要有以下三个步骤：1、浏览器发起http请求。2、服务端响应http请求，返回html文件内容。3、浏览器加载html文件中的资源文件（js、css、图片、音频、视频等）。4、浏览器渲染并显示页面内容。1-2、优劣势优势：1、实现简单（相比于SSR）。劣势：1、由于需要加载js文件以及后台接口数据，所以首屏加载时间会比较长，用户体验不好。2、由于不能直接在首屏时渲染出页面内容，所以网站SEO不好做。二、服务端渲染（SSR）服务端
2021-08-20 18:36:22
418
原创 从零开始手写一个「开箱即用的大文件分片上传库」
一、写在前面相信各位小伙伴在实际做业务的时候都遇到过「大文件上传」的场景。在这种场景下，我们不能直接将大文件直接丢给服务器进行处理，这会对服务器的性能产生巨大的影响，并且上传速度也过于缓慢。因此我们会采用「大文件分片上传」的技术方案，尽可能快地上传文件，并对服务器的性能产生尽可能小的影响。刚好最近趁着业余时间，详细了解了下「大文件分片上传」的技术细节，发现已有的一些分片上传库的使用体验都不太好，因此在这里从零开始手写一个大文件分片上传库，一是加深理解，二是方便大家后续直接使用。二、大文件分片上传技术方
2021-07-14 14:37:06
141
原创 JSBridge原理解析
一、什么是JSBridge？JSBridge是一种webview侧和native侧进行通信的手段，webview可以通过jsb调用native的能力，native也可以通过jsb在webview上执行一些逻辑。二、JSB的实现方式常用的实现JSBridge方式有两种：（1）拦截URL请求（2）MessageHandler我们以比较火的WebviewJavascriptBridge为例（源码地址：https://github.com/marcuswestin/WebViewJavascriptB
2021-05-30 22:59:45
851
原创 Nodejs也能Serverless？从0开始用Nodejs打造一个FaaS服务
本篇文章并不是教你怎么用阿里云、谷歌云等等云框架的FaaS服务，而是教你如何从0开始打造一个自己的FaaS服务。受限于人力及成本原因，现在的FaaS服务基本上可以说是“大厂玩物”，而网上鲜有相关代码的实现，因此我才打算写一篇文章，和大家分享如何从0开始打造一个Nodejs的FaaS服务。本篇文章中的项目tiny-node-faas已经上线并开源至GitHub，欢迎各位使用。访问链接：http://www.shadowingszy.top/tiny-node-faas/index.html源码地址：h
2021-02-18 00:05:24
3804
13
原创 使用async_hooks实现Nodejs应用全链路埋点
一、背景随着Nodejs应用的不断迭代，我相信不少开发者都会遇到这样的问题——平台功能越来越多，相关逻辑也越来越复杂，导致请求链路变得越来越长，耗时也越来越久。因此，为了优化服务响应速度，首先我们要知道我们服务的链路埋点信息。这篇文章会简单介绍如何「使用async_hooks实现Nodejs应用全链路埋点」。二、实现过程2-1、async_hooks官方API可以看这里：https://nodejs.org/api/async_hooks.html首先来简单介绍下async_hooks：asy
2021-02-04 20:11:59
741
原创 带你看看JS的新趋势「State of JS 2020」中文解读
「State of JS 2020」数据来源：https://2020.stateofjs.com/zh-Hans/technologies/一、技术趋势一些新兴的JavaScript库在开发者间有很高的满意度，但使用率偏低——这可能会让开发者难以选择合适的技术。下面这些数据可以帮我们选择合适的技术。1-1、时间变化趋势第一张图代表着这些库随时间变化的趋势。它有四个象限，纵向由下至上代表着使用率由低到高；横向由左至右代表着使用体验由坏到好。也就是说，这张图中每条线越往右上走（线条颜色是红色），代表着
2021-01-14 11:43:45
891
1
原创 互联网黑话生成器（一款能熟练应用“赋能、抓手、闭环、沉淀、打通”等词汇的文章生成器）
效果图在线地址点击这里：http://www.shadowingszy.top/text-generator/index.html源代码html部分：<!DOCTYPE html><html><head> <title>互联网黑话生成器|一款能熟练应用“赋能、抓手、闭环、沉淀、打通”等词汇的文章生成器</title> <link rel="stylesheet" href="https://cdn.jsdel
2020-12-19 15:58:46
76359
7
原创 浅谈浏览器中的进程和线程
浏览器的多进程架构大部分浏览器都是多进程的，以chrome浏览器为例，当用户打开chrome浏览器浏览网页时，会启动多个进程用于呈现页面。一般来说，在打开浏览器时，chrome浏览器会启动以下四个进程：1、浏览器进程浏览器最核心的进程，负责管理各个标签页的创建和销毁、页面显示和功能（前进，后退等）、网络资源的管理，下载等。2、插件进程负责每个第三方插件的使用，每个第三方插件使用时候都会创建一个对应的进程。3、GPU进程负责3D绘制和硬件加速。4、渲染进程渲染进程就是我们常说的浏览器内核，我
2020-10-17 15:56:54
672
1
原创 React中css-in-js最佳实践
一、传统class的痛点随着React、Vue等支持组件化的MVVM前端框架越来越流行，在js中直接编写css的技术方案也越来越被大家所接受。为什么前端开发者们更青睐于这些css-in-js的方案呢？我觉得关键原因有以下几点：1、css在设计之初对“组件化”的考虑是不完全的，css直接作用于全局，无法直接作用于某个组件内部的样式。2、在我们的前端组件中有很多“组件样式随着数据变化”的场景，但传统css应对这种场景很无力。3、虽然我们可以通过一些规范来规避问题，但是真正用起来太繁琐了，也不利于跨团队
2020-09-03 19:59:21
3061
原创 手写一个Promise
一、Promise简介1-1、简介Promise 对象是一个代理对象（代理一个值），被代理的值在Promise对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法（handlers）。 这让异步方法可以像同步方法那样返回值，但并不是立即返回最终执行结果，而是一个能代表未来出现的结果的promise对象。1-2、Promise状态一个 Promise有以下几种状态:pending: 初始状态，既不是成功，也不是失败状态。fulfilled: 意味着操作成功完成。reje
2020-08-19 22:46:12
189
原创 一文带你了解使用Nodejs开发RPC服务
一、RPC协议在使用Nodejs开发RPC服务之前，首先先要了解一下什么是RPC协议。RPC（Remote Procedure Call，远程过程调用）是一种通过网络从远程计算机请求服务的协议，通俗来讲，一次RPC调用就是，客户端A把需要请求的服务名，以及服务对应的参数通过网络传到服务端，由服务端执行服务后，将结果通过网络返回给客户端的过程。如下图所示（图片源自网络），一个完整的RPC架构里面包含了四个核心的组件，分别是Client ,Server,Client Stub以及Server Stub。
2020-07-29 15:43:57
2439
原创 聊聊Vue.js 3.0 Beta —— B站直播全程记录
在4月21的B站直播中，Vue.js的作者Evan面对中国的开发者重新讲述了一遍在“State of Vue 的线上活动”中的有关Vue 3.0的内容，这里简单记录下相关内容，供大家参考。Vue3目前状态vue3目前已进入beta ready阶段，这意味着，所有计划的RFC都已经开发完毕，现在正在专注于稳定性以及各种配套库（vuex，devTool等）的整合。亮点vue3的亮点有：...
2020-04-22 12:32:46
599
原创 routing-controllers工作原理解析
routing-controllers简介routing-controllers是一个基于express/koa的Node.js框架，它提供了非常多的装饰器，可以使开发者以一种“依赖注入”的方式编写controllers。routing-controllers源码地址：点击此处routing-controllers工作原理1、一些铺垫首先，我们这里以routing-controllers...
2020-04-04 19:25:16
3464
原创 广告系统架构浅谈
写在前面最近即将入职字节跳动的广告系统部门，因此花了一些时间了解了一下现代广告系统的一般架构，在这里分享给大家。广告系统一般架构整体上来看，广告系统由三个主体部分构成：1、在线的高并发投放引擎(Ad server)。2、离线的分布式数据处理平台(Grid)。3、用于在线实时反馈的流式处理平台(Stream computing)。这三部分各司其职，配合完成整个计算广告的数据挖掘和在线...
2020-04-02 13:02:15
4095
原创 routing-controllers-cli - 快速生成routing-controllers项目的脚手架工具
routing-controllers是什么？routing-controllers是一个基于express/koa的Node.js框架，它可以使开发者以一种“依赖注入”的方式编写controllers。举个例子第一步，创建UserController.ts文件，内容如下：import {Controller, Param, Body, Get, Post, Put, Delete} fr...
2020-03-31 21:10:32
594
原创 前端监控框架 shadow-tracker
写在前面shadow-tracker官网地址：点击这里shadow-tracker代码仓库：点击这里1、介绍shadow-tracker 是一款轻量级的前端无感知监控插件，它提供的功能有：序号功能对应日志类型1收集用户与网页交互时的点击、键盘输入事件事件日志（Event Log）2收集所有 JS 的错误信息错误日志（Error Log）3收集所...
2020-03-16 18:08:11
1358
原创 正确使用git参与多人合作项目
写在前面最近一直在GitHub上参与一个名为wuhan2020的开源项目，其中各个contributor是通过git flow实现多人协作开发项目的。所以在这里记录一下如何正确使用git参与多人合作项目。Git 操作1、Fork 仓库访问你要参与贡献的仓库A，并 Fork 到自己的账号下。2、 clone 仓库回到自己的 GitHub 主页，并找到刚刚 Fork 过来的A仓库，进入仓...
2020-02-07 12:05:16
2347
原创 山东大学软件开发解决方案复习提纲
写在前面：期末又到了，这是一份新鲜的软件开发解决方案复习提纲，所有问题均来自于老师最后一节课划重点时使用的ppt，请大家放心使用~另外，由于这门课程教的知识与企业中真正用的东西严重脱节，所以针对部分内容我添加了一些自己的理解。如果你只想拿个高分，那么就请忽略掉我自己添加的内容。但是如果你真正进入企业进行软件开发时，千万不要照本宣科地按照这门课（或者说这份提纲）的内容去做！这门提纲仅适用于考试...
2019-12-20 22:35:06
2444
2
原创 jQuery中$的实现原理
jQuery的“$”实际上是一个函数。var $ = fucntion jQuery(){ return new jQuery.fn.init(selector);};jQuery.prototype = { init: function(){}, // ...jQuery的其他API};jQuery.fn = jQuery.prototype;jQue...
2019-12-20 22:01:30
2518
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人