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

偏前端工程师的驿站

专栏作者
274
文章
338640
阅读量
58
订阅数
React魔法堂:size-sensor源码略读
echarts-for-react在对echarts进行轻量级封装的基础上,额外提供图表尺寸自适应容器尺寸的这小而实用的功能,而这功能的背后就是本文想介绍的size-sensor了。
^_^肥仔John
2022-10-31
4780
React魔法堂:echarts-for-react源码略读
在当前工业4.0和智能制造的产业升级浪潮当中,智慧大屏无疑是展示企业IT成果的最有效方式之一。然而其背后怎么能缺少ECharts的身影呢?对于React应用而言,直接使用ECharts并不是最高效且优雅的方式,而echarts-for-react则是针对React应用对ECharts进行轻量封装和增强的工具库。
^_^肥仔John
2022-10-28
7550
petite-vue源码剖析-沙箱模型
在解析v-if和v-for等指令时我们会看到通过evaluate执行指令值中的JavaScript表达式,而且能够读取当前作用域上的属性。而evaluate的实现如下:
^_^肥仔John
2022-05-09
3380
petite-vue源码剖析-逐行解读@vue-reactivity之effect
当我们通过effect将副函数向响应上下文注册后,副作用函数内访问响应式对象时即会自动收集依赖,并在相应的响应式属性发生变化后,自动触发副作用函数的执行。
^_^肥仔John
2022-05-09
6560
petite-vue源码剖析-逐行解读@vue-reactivity之Map和Set的reactive
本篇我们会继续探索reactive函数中对Map/WeakMap/Set/WeakSet对象的代理实现。
^_^肥仔John
2022-05-09
1.1K0
petite-vue源码剖析-逐行解读@vue/reactivity之reactive
在petite-vue中我们通过reactive构建上下文对象,并将根据状态渲染UI的逻辑作为入参传递给effect,然后神奇的事情发生了,当状态发生变化时将自动触发UI重新渲染。那么到底这是怎么做到的呢? @vue/reactivity功能十分丰富,而petite-vue仅使用到reactive和effect两个最基本的API,作为入门本文将仅仅对这两个API进行源码解读。
^_^肥仔John
2022-05-09
5680
petite-vue源码剖析-优化手段template详解
<template>是2013年定稿用于提供一种更统一、功能更强大的模板本存放方式。具体表现为
^_^肥仔John
2022-05-09
2280
petite-vue源码剖析-ref的工作原理
ref内部的工作原理十分简单,其实就是将指令ref、:ref或v-bind:ref标识的元素实例存储到当前作用域的refs对象中,那么我们就可以通过this.refs获取对应的元素实例。但由于作用域继承上有点小窍门,所以我们能从this.
^_^肥仔John
2022-05-09
3260
前言
双向绑定v-model不仅仅是对可编辑HTML元素(select, input, textarea和附带[contenteditable=true])同时附加v-bind和v-on,而且还能利用通过petite-vue附加给元素的_value、_trueValue和_falseValue属性提供存储非字符串值的能力。
^_^肥仔John
2022-05-09
7560
petite-vue源码剖析-事件绑定`v-on`的工作原理
在书写petite-vue和Vue最舒服的莫过于通过@click绑定事件,而且在移除元素时框架会帮我们自动解除绑定。省去了过去通过jQuery的累赘。而事件绑定在petite-vue中就是一个指令(directive),和其他指令类似。
^_^肥仔John
2022-05-09
3910
petite-vue-源码剖析-v-for重新渲染工作原理
在《petite-vue源码剖析-v-if和v-for的工作原理》我们了解到v-for在静态视图中的工作原理,而这里我们将深入了解在更新渲染时v-for是如何运作的。
^_^肥仔John
2022-05-09
5240
petite-vue源码剖析-属性绑定`v-bind`的工作原理
属性绑定、事件绑定和v-modal底层都是通过指令(directive)实现的,那么什么是指令呢?我们一起看看Directive的定义吧。
^_^肥仔John
2022-05-09
4100
petite-vue源码剖析-v-if和v-for的工作原理
我们看到在v-if和v-for的解析过程中都会生成块对象,而且是v-if的每个分支都对应一个块对象,而v-for则是每个子元素都对应一个块对象。其实块对象不单单是管控DOM操作的单元,而且它是用于表示树结构不稳定的部分。如节点的增加和删除,将导致树结构的不稳定,把这些不稳定的部分打包成独立的块对象,并封装各自构建和删除时执行资源回收等操作,这样不仅提高代码的可读性也提高程序的运行效率。
^_^肥仔John
2022-05-09
5190
petite-vue源码剖析-从静态视图开始
静态视图是指首次渲染后,不会因UI状态变化引发重新渲染。其中视图不包含任何UI状态,和根据UI状态首次渲染后状态不再更新两种情况,本篇将针对前者进行讲解。
^_^肥仔John
2022-05-09
3670
petite-vue源码剖析-为什么要读源码?
根据官方解释,petite-vue是专门为非前后端分离的历史项目提供和Vue相近的响应式开发模式。 与完整的Vue相比最大的特点是,面对数据的变化petite-vue采取直接操作DOM的方式重新渲染。
^_^肥仔John
2022-05-09
4190
Another Intro for Cookies
Cookies are strings of data that are stored directly in the browser. They are a part of HTTP protocol, defined by RFC 6265 specification.
^_^肥仔John
2021-12-14
9020
TypeScript Crash Course: Property Access Modifiers
There is no other great moment to head into the world of TypeScript instead of right now. Angular is in TypeScript, React is in TypeScript, and even Vue3 is in TypeScript. That means it's a skill we must equip with rather than wait and see.
^_^肥仔John
2021-12-01
2460
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
5070
Source Code Reading for Vue 3: How does `hasChanged` work?
Hey, guys! The next generation of Vue has released already. There are not only the brand new composition API, much more powerful and flexible reactivity system, first-class render function, but also the natural performance with building off the modern browsers.
^_^肥仔John
2021-11-11
3710
Yet Another Intro to Event Loop
As we tell, there're tons of posts talking about event loop, the basic of the basic knowledge of JavaScript running mechanism.
^_^肥仔John
2021-10-28
2940
点击加载更多
社区活动
Python精品学习库
代码在线跑,知识轻松学
热点技术征文第五期
新风口Sora来袭,普通人该如何把握机会?
博客搬家 | 分享价值百万资源包
自行/邀约他人一键搬运博客,速成社区影响力并领取好礼
技术创作特训营·精选知识专栏
往期视频·干货材料·成员作品·最新动态
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档