- 博客(71)
- 收藏
- 关注
原创 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关注的人