首页
学习
活动
专区
工具
TVP
发布

偏前端工程师的驿站

专栏成员
274
文章
360477
阅读量
59
订阅数
petite-vue源码剖析-沙箱模型
在解析v-if和v-for等指令时我们会看到通过evaluate执行指令值中的JavaScript表达式,而且能够读取当前作用域上的属性。而evaluate的实现如下:
^_^肥仔John
2022-05-09
3820
petite-vue源码剖析-逐行解读@vue-reactivity之Map和Set的reactive
本篇我们会继续探索reactive函数中对Map/WeakMap/Set/WeakSet对象的代理实现。
^_^肥仔John
2022-05-09
1.2K0
petite-vue源码剖析-从静态视图开始
静态视图是指首次渲染后,不会因UI状态变化引发重新渲染。其中视图不包含任何UI状态,和根据UI状态首次渲染后状态不再更新两种情况,本篇将针对前者进行讲解。
^_^肥仔John
2022-05-09
4080
Yet Another Intro for Symbol
First of all, symbol is a built-in primitive type. And it's guaranteed to be unique. Symbols are often used to add unique property keys to an object won't collide with keys that any other code might add to the object. And the properties under the Symbol key are hidden from any mechanisms other code will typically use to access the object(like for...in, for...of, Object.keys, Object.getOwnPropertyNames and JSON.stringify etc.), but can be accessed by Object.getOwnPropertySymbols and Reflect.ownKeys (which will return both string and symbol keys).
^_^肥仔John
2021-12-01
5380
Going Bundleless: ES Modules
It's really a long period I have been out of touch to front-end trending, until I try to add petite-vue into our team's codebase recently. Fortunately, while our age-old project is built by JSP and LayUI which is an old fashion back-end friendly UI library, there is no need to support IE any more. During exploring the petite-vue codebase, I discovered the brand new build tooling Vite, which is a leaner and faster building solution for large front-end project base on ES module.
^_^肥仔John
2021-09-06
4810
前端魔法堂:可能是你见过最详细的WebWorker实用指南
JavaScript从使用开初就一直基于事件循环的单线程运行模型,即使是成功进军后端开发的Nodejs也没有改变这一模型。那么对于计算密集型的应用,我们必须创建新进程来执行运算,然后执行进程间通信实现传参和获取运算结果。否则会造成UI界面卡顿,甚至导致浏览器无响应。 从功能实现来看,我们可以通过新增iframe加载同域页面来创建JSVM进程执行运算从而避免造成界面卡顿的问题。但存在如下问题:
^_^肥仔John
2020-12-18
1.8K0
前端魔法堂:手写缓存模块
之前系统接入大数据PV统计平台,最近因PV统计平台侧服务器资源紧张,要求各接入方必须缓存API调用验证用的Token,从而减少无效请求和服务端缓存中间件的存储压力。 虽然系统部分业务模块都有缓存数据的需求,但由于没有提供统一的前端缓存模块,这导致各业务模块都自行实现一套刚好能用的缓存机制,甚至还会导致内存泄漏。 以兄弟部门这张整改工单作为契机,是时候开发一个系统级的前端缓存模块,逐步偿还技术负债了。
^_^肥仔John
2020-12-14
5480
SpringBoot魔法堂:说说带智能提示的spring-boot-starter
前几个月和隔壁组的老王闲聊,他说项目的供应商离职率居高不下,最近还有开发刚接手ESB订阅发布接口才两周就提出离职,而他能做的就只有苦笑和默默地接过这个烂摊子了。 而然幸福的家庭总是相似的,而不幸的我却因业务变革走上了和老王一样的道路。单单是接口的开发居然能迫使一位开发毅然决然地离职,我既不相信是人性的扭曲,更不信是道德的沦丧。 抛开这个富有色彩的故事而言,我发现原来的项目存在如下问题:
^_^肥仔John
2020-11-13
4960
TypeScript魔法堂:函数类型声明其实很复杂
江湖有传“动态类型一时爽,代码重构火葬场”,由于动态类型语言在开发时不受数据类型的约束,因此非常适合在项目原型阶段和初期进行快速迭代开发使用,这意味着项目未来将通过重写而非重构的方式进入成熟阶段。而在企业级应用开发中,每个系统特性其实都是需求分析人员与用户进行多次调研后明确下来的,后期需要重写的可能性微乎其微,更多的是修修改改,在单元测试不足常态化的环境下静态类型的优势就尤为突出。而TypeScript的类型系统和编译时类型检查机制则非常适合用于构建企业级或不以重写实现迭代升级的应用系通。 本系列将重点分享TypeScript类型声明相关实践
^_^肥仔John
2020-11-04
1.3K0
TypeScript魔法堂:枚举的超实用手册
也许前端的同学会问JavaScript从诞生至今都没有枚举类型,我们不是都活得挺好的吗?为什么TypeScript需要引入枚举类型呢? 也许被迫写前端的后端同学会问,TypeScript的枚举类型是和Java/.NET的一样吗? 下面我们来一起探讨和尝试解答吧!
^_^肥仔John
2020-10-30
1.2K0
前端魔法堂——异常不仅仅是try/catch
前言  编程时我们往往拿到的是业务流程正确的业务说明文档或规范,但实际开发中却布满荆棘和例外情况,而这些例外中包含业务用例的例外,也包含技术上的例外。对于业务用例的例外我们别无它法,必须要求实施人员与用户共同提供合理的解决方案;而技术上的例外,则必须由我们码农们手刃之,而这也是我想记录的内容。  我打算分成《前端魔法堂——异常不仅仅是try/catch》和《前端魔法堂——调用栈,异常实例中的宝藏》两篇分别叙述内置/自定义异常类,捕获运行时异常/语法异常/网络请求异常/PromiseRejection事件,
^_^肥仔John
2018-07-11
1.1K0
(cljs/run-at (JSVM. :all) "一起实现柯里化")
前言  习惯了Ramda.js就会潜意识地认为函数均已柯里化,然后就可以随心所欲的用函数生成函数,或者使用compose组合多个函数来生成一个新函数。如下 const f = a => b => a + b const g = c => d => c - d const compose = f => g => x => f(g(x)) const add1 = f(1) add1(2) // 返回3 const addThenMinus = compose(g(2), f(1)) addThenMinu
^_^肥仔John
2018-01-18
6690
前端魔法堂——异常不仅仅是try/catch
前言  编程时我们往往拿到的是业务流程正确的业务说明文档或规范,但实际开发中却布满荆棘和例外情况,而这些例外中包含业务用例的例外,也包含技术上的例外。对于业务用例的例外我们别无它法,必须要求实施人员与用户共同提供合理的解决方案;而技术上的例外,则必须由我们码农们手刃之,而这也是我想记录的内容。  我打算分成《前端魔法堂——异常不仅仅是try/catch》和《前端魔法堂——调用栈,异常实例中的宝藏》两篇分别叙述内置/自定义异常类,捕获运行时异常/语法异常/网络请求异常/PromiseRejection事件,
^_^肥仔John
2018-01-18
1.5K0
JS魔法堂:再识Number type
Brief                                   本来只打算理解JS中0.1 + 0.2 == 0.30000000000000004的原因,但发现自己对计算机的数字表示和运算十分陌生,于是只好恶补一下。以下是恶补后的成果: 基础野:细说原码、反码和补码 基础野:细说无符号整数 基础野:细说有符号整数 基础野:细说浮点数   理解JS Number type背后的IEEE 754 64位双精度数值编码后,0.1 + 0.2 == 0.30000000000000004就
^_^肥仔John
2018-01-18
2.1K0
JS魔法堂:不完全国际化&本地化手册 之 拓展篇
前言  最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求——国际化&本地化。熟悉的是之前的项目也玩过,陌生的是之前的实现仅仅停留在"有"的阶段而已。趁着这个机会好好学习整理一下,为后面的技术选型做准备。  本篇作为系列的最后一篇,打算和大家一起看看HTTP的Content Negotiation机制和更多关于本地化的应用方向。 Content Negotiation(内容协同)  记得第一次接触国际化和本地化时是指服务端根据请求头字段Accept-Language获取languag
^_^肥仔John
2018-01-18
5030
(cljs/run-at (JSVM. :browser) "命名空间就这么简单")
前言  一个cljs文件定义一个命名空间,通过命名空间可以有效组织代码,这是构建大型系统必备的基础设施。本篇我们就深入理解cljs中的命名空间吧! 好习惯从"头"开始 每个cljs文件首行非注释的内容必定如下 (ns my-project.core) 而当前的cljs文件路径为${project_dir}/src/my_project/core.cljs,很明显命名空间与源码文件路径是一一对应的,对应规则是-对应_,.对应/咯~ 引入其他命名空间  要使用其他命名空间下的成员,那么必须先将其引入到当前命名空
^_^肥仔John
2018-01-18
8150
CSS魔法堂:hasLayout原来是这样!
前言 过去一直听说旧版本IE下很多诡异bug均由一个神秘角色引起的,那就是hasLayout。趁着最近突然发神经打算好好学习CSS,顺便解答多年来的疑惑。 hasLayout到底是何方神圣? hasLayout可以简单看作是IE5.5/6/7中的BFC(Block Formatting Context)。也就是一个元素要么自己对自身内容进行组织和尺寸计算(即可通过width/height来设置自身的宽高),要么由其containing block来组织和尺寸计算。而IFC(即没有拥有布局)而言,则是元素无法
^_^肥仔John
2018-01-18
6750
JS魔法堂:判断节点位置关系
一、前言                             在polyfill querySelectorAll 和写弹出窗时都需要判断两个节点间的位置关系,通过jQuery我们可以轻松搞定,但原生JS呢?下面我将整理各种判断方法,以供日后查阅。 二、祖孙关系                         html <div id="ancestor"> <div id="parent"> <div id="son">son</div> </div> </div> <
^_^肥仔John
2018-01-18
5.3K0
JS魔法堂:再识Bitwise Operation & Bitwise Shift
Brief                                 linkFly的《JavaScript-如果...没有方法》中提及如何手写Math.round方法,各种奇技淫招看着十分过瘾,最让我惊叹的是 ~~(x + 0.5 + (x >> 30)) ,完全通过加法和位运算搞定整数的四舍五入。在好奇心的驱使下重温了一下位运算,并对上述公式加以封装得到适合小数的四舍五入方法 function round(v/*alue*/, p/*recision*/){ p = Math.pow(10,
^_^肥仔John
2018-01-18
1.5K0
Design Pattern: Observer Pattern
1. Brief                               一直对Observer Pattern和Pub/Sub Pattern有所混淆,下面打算通过这两篇Blog来梳理这两种模式。若有纰漏请大家指正。 2. Use Case                             首先我们来面对一个老到跌渣的故事,并以从未听说过Observer Pattern为前提。   假设要设计一个新闻订阅系统,新闻分为商业、体育和八卦3种,而查收终端有PC、移动终端等,后续还不断增加新闻种类和查
^_^肥仔John
2018-01-18
8050
点击加载更多
社区活动
【纪录片】中国数据库前世今生
穿越半个世纪,探寻中国数据库50年的发展历程
Python精品学习库
代码在线跑,知识轻松学
博客搬家 | 分享价值百万资源包
自行/邀约他人一键搬运博客,速成社区影响力并领取好礼
技术创作特训营·精选知识专栏
往期视频·千货材料·成员作品 最新动态
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档