博客园 - ^_^肥仔Johnuuid:24b78886-0ed1-41c2-8670-e3f31dcf42c4;id=1505492022-10-21T09:36:46Z^_^肥仔Johnhttps://www.cnblogs.com/fsjohnhuang/feed.cnblogs.comhttps://www.cnblogs.com/fsjohnhuang/p/16814327.htmlReact魔法堂:size-sensor源码略读 - ^_^肥仔John前言 echarts-for-react在对echarts进行轻量级封装的基础上,额外提供图表尺寸自适应容器尺寸的这小而实用的功能,而这功能的背后就是本文想介绍的size-sensor了。 源码介绍 size-sensor源码十分精简,主要是对原生APIResizeObserver方案和object2022-10-21T09:37:00Z2022-10-21T09:37:00Z^_^肥仔Johnhttps://www.cnblogs.com/fsjohnhuang/【摘要】前言 echarts-for-react在对echarts进行轻量级封装的基础上,额外提供图表尺寸自适应容器尺寸的这小而实用的功能,而这功能的背后就是本文想介绍的size-sensor了。 源码介绍 size-sensor源码十分精简,主要是对原生APIResizeObserver方案和object <a href="https://www.cnblogs.com/fsjohnhuang/p/16814327.html" target="_blank">阅读全文</a>https://www.cnblogs.com/fsjohnhuang/p/16792575.htmlReact魔法堂:echarts-for-react源码略读 - ^_^肥仔John前言 在当前工业4.0和智能制造的产业升级浪潮当中,智慧大屏无疑是展示企业IT成果的最有效方式之一。然而其背后怎么能缺少ECharts的身影呢?对于React应用而言,直接使用ECharts并不是最高效且优雅的方式,而echarts-for-react则是针对React应用对ECharts进行轻量封2022-10-14T10:39:00Z2022-10-14T10:39:00Z^_^肥仔Johnhttps://www.cnblogs.com/fsjohnhuang/【摘要】前言 在当前工业4.0和智能制造的产业升级浪潮当中,智慧大屏无疑是展示企业IT成果的最有效方式之一。然而其背后怎么能缺少ECharts的身影呢?对于React应用而言,直接使用ECharts并不是最高效且优雅的方式,而echarts-for-react则是针对React应用对ECharts进行轻量封 <a href="https://www.cnblogs.com/fsjohnhuang/p/16792575.html" target="_blank">阅读全文</a>https://www.cnblogs.com/fsjohnhuang/p/16196845.html个人技术系列文章导航 - ^_^肥仔John《Petite-Vue源码剖析》 结合示例从在线渲染、响应式系统和沙箱模型分别对源码逐行解读,其中还对响应式系统中利用JS引擎的SMI优化依赖清理算法作详细分析。绝对是入门Vue3源码前绝佳的踏脚石喜欢的话记得转发、赞赏哦!2022-04-26T13:54:00Z2022-04-26T13:54:00Z^_^肥仔Johnhttps://www.cnblogs.com/fsjohnhuang/【摘要】《Petite-Vue源码剖析》 结合示例从在线渲染、响应式系统和沙箱模型分别对源码逐行解读,其中还对响应式系统中利用JS引擎的SMI优化依赖清理算法作详细分析。绝对是入门Vue3源码前绝佳的踏脚石喜欢的话记得转发、赞赏哦! <a href="https://www.cnblogs.com/fsjohnhuang/p/16196845.html" target="_blank">阅读全文</a>https://www.cnblogs.com/fsjohnhuang/p/16169903.htmlpetite-vue源码剖析-沙箱模型 - ^_^肥仔John在解析v-if和v-for等指令时我们会看到通过evaluate执行指令值中的JavaScript表达式,而且能够读取当前作用域上的属性。而evaluate的实现如下: const evalCache: Record<string, Function> = Object.create(null) e2022-04-20T07:04:00Z2022-04-20T07:04:00Z^_^肥仔Johnhttps://www.cnblogs.com/fsjohnhuang/【摘要】在解析v-if和v-for等指令时我们会看到通过evaluate执行指令值中的JavaScript表达式,而且能够读取当前作用域上的属性。而evaluate的实现如下: const evalCache: Record<string, Function> = Object.create(null) e <a href="https://www.cnblogs.com/fsjohnhuang/p/16169903.html" target="_blank">阅读全文</a>https://www.cnblogs.com/fsjohnhuang/p/16163888.htmlpetite-vue源码剖析-逐行解读@vue-reactivity之effect - ^_^肥仔John当我们通过effect将副函数向响应上下文注册后,副作用函数内访问响应式对象时即会自动收集依赖,并在相应的响应式属性发生变化后,自动触发副作用函数的执行。 // ./effect.ts export funciton effect<T = any>( fn: () => T, options?: R2022-04-19T01:41:00Z2022-04-19T01:41:00Z^_^肥仔Johnhttps://www.cnblogs.com/fsjohnhuang/【摘要】当我们通过effect将副函数向响应上下文注册后,副作用函数内访问响应式对象时即会自动收集依赖,并在相应的响应式属性发生变化后,自动触发副作用函数的执行。 // ./effect.ts export funciton effect<T = any>( fn: () => T, options?: R <a href="https://www.cnblogs.com/fsjohnhuang/p/16163888.html" target="_blank">阅读全文</a>https://www.cnblogs.com/fsjohnhuang/p/16147725.htmlpetite-vue源码剖析-逐行解读@vue-reactivity之Map和Set的reactive - ^_^肥仔John本篇我们会继续探索reactive函数中对Map/WeakMap/Set/WeakSet对象的代理实现。 Map/WeakMap/Set/WeakSet的操作 由于WeakMap和WeakSet分别是Map和Set的不影响GC执行垃圾回收的版本,这里我们只研究Map和Set即可。 Set的属性和方法2022-04-15T01:58:00Z2022-04-15T01:58:00Z^_^肥仔Johnhttps://www.cnblogs.com/fsjohnhuang/【摘要】本篇我们会继续探索reactive函数中对Map/WeakMap/Set/WeakSet对象的代理实现。 Map/WeakMap/Set/WeakSet的操作 由于WeakMap和WeakSet分别是Map和Set的不影响GC执行垃圾回收的版本,这里我们只研究Map和Set即可。 Set的属性和方法 <a href="https://www.cnblogs.com/fsjohnhuang/p/16147725.html" target="_blank">阅读全文</a>https://www.cnblogs.com/fsjohnhuang/p/16037690.htmlpetite-vue源码剖析-逐行解读@vue/reactivity之reactive - ^_^肥仔John在petite-vue中我们通过reactive构建上下文对象,并将根据状态渲染UI的逻辑作为入参传递给effect,然后神奇的事情发生了,当状态发生变化时将自动触发UI重新渲染。那么到底这是怎么做到的呢? @vue/reactivity功能十分丰富,而petite-vue仅使用到reactive和2022-03-22T00:11:00Z2022-03-22T00:11:00Z^_^肥仔Johnhttps://www.cnblogs.com/fsjohnhuang/【摘要】在petite-vue中我们通过reactive构建上下文对象,并将根据状态渲染UI的逻辑作为入参传递给effect,然后神奇的事情发生了,当状态发生变化时将自动触发UI重新渲染。那么到底这是怎么做到的呢? @vue/reactivity功能十分丰富,而petite-vue仅使用到reactive和 <a href="https://www.cnblogs.com/fsjohnhuang/p/16037690.html" target="_blank">阅读全文</a>https://www.cnblogs.com/fsjohnhuang/p/16011271.htmlpetite-vue源码剖析-优化手段template详解 - ^_^肥仔John什么是<template>元素? <template>是2013年定稿用于提供一种更统一、功能更强大的模板本存放方式。具体表现为 通过<template>元素属性content获取已实例化的HTML元素(不是字符串而已) <template id="tpl"> <div>a</div> <div>b2022-03-15T22:30:00Z2022-03-15T22:30:00Z^_^肥仔Johnhttps://www.cnblogs.com/fsjohnhuang/【摘要】什么是<template>元素? <template>是2013年定稿用于提供一种更统一、功能更强大的模板本存放方式。具体表现为 通过<template>元素属性content获取已实例化的HTML元素(不是字符串而已) <template id="tpl"> <div>a</div> <div>b <a href="https://www.cnblogs.com/fsjohnhuang/p/16011271.html" target="_blank">阅读全文</a>https://www.cnblogs.com/fsjohnhuang/p/16006899.htmlpetite-vue源码剖析-ref的工作原理 - ^_^肥仔Johnref内部的工作原理十分简单,其实就是将指令ref、:ref或v-bind:ref标识的元素实例存储到当前作用域的$refs对象中,那么我们就可以通过this.$refs获取对应的元素实例。但由于作用域继承上有点小窍门,所以我们能从this.$refs获取的元素实例还是需要注意一下。下面让我为你一一2022-03-15T00:04:00Z2022-03-15T00:04:00Z^_^肥仔Johnhttps://www.cnblogs.com/fsjohnhuang/【摘要】ref内部的工作原理十分简单,其实就是将指令ref、:ref或v-bind:ref标识的元素实例存储到当前作用域的$refs对象中,那么我们就可以通过this.$refs获取对应的元素实例。但由于作用域继承上有点小窍门,所以我们能从this.$refs获取的元素实例还是需要注意一下。下面让我为你一一 <a href="https://www.cnblogs.com/fsjohnhuang/p/16006899.html" target="_blank">阅读全文</a>https://www.cnblogs.com/fsjohnhuang/p/16004134.htmlpetite-vue源码剖析-双向绑定`v-model`的工作原理 - ^_^肥仔John前言 双向绑定v-model不仅仅是对可编辑HTML元素(select, input, textarea和附带[contenteditable=true])同时附加v-bind和v-on,而且还能利用通过petite-vue附加给元素的_value、_trueValue和_falseValue属性提2022-03-14T07:03:00Z2022-03-14T07:03:00Z^_^肥仔Johnhttps://www.cnblogs.com/fsjohnhuang/【摘要】前言 双向绑定v-model不仅仅是对可编辑HTML元素(select, input, textarea和附带[contenteditable=true])同时附加v-bind和v-on,而且还能利用通过petite-vue附加给元素的_value、_trueValue和_falseValue属性提 <a href="https://www.cnblogs.com/fsjohnhuang/p/16004134.html" target="_blank">阅读全文</a>https://www.cnblogs.com/fsjohnhuang/p/15992391.htmlpetite-vue源码剖析-事件绑定`v-on`的工作原理 - ^_^肥仔John在书写petite-vue和Vue最舒服的莫过于通过@click绑定事件,而且在移除元素时框架会帮我们自动解除绑定。省去了过去通过jQuery的累赘。而事件绑定在petite-vue中就是一个指令(directive),和其他指令类似。 深入v-on的工作原理 walk方法在解析模板时会遍历元素的特2022-03-11T01:54:00Z2022-03-11T01:54:00Z^_^肥仔Johnhttps://www.cnblogs.com/fsjohnhuang/【摘要】在书写petite-vue和Vue最舒服的莫过于通过@click绑定事件,而且在移除元素时框架会帮我们自动解除绑定。省去了过去通过jQuery的累赘。而事件绑定在petite-vue中就是一个指令(directive),和其他指令类似。 深入v-on的工作原理 walk方法在解析模板时会遍历元素的特 <a href="https://www.cnblogs.com/fsjohnhuang/p/15992391.html" target="_blank">阅读全文</a>https://www.cnblogs.com/fsjohnhuang/p/15989941.htmlpetite-vue-源码剖析-v-for重新渲染工作原理 - ^_^肥仔John在《petite-vue源码剖析-v-if和v-for的工作原理》我们了解到v-for在静态视图中的工作原理,而这里我们将深入了解在更新渲染时v-for是如何运作的。 逐行解析 // 文件 ./src/directives/for.ts /* [\s\S]*表示识别空格字符和非空格字符若干个,默认为2022-03-10T08:03:00Z2022-03-10T08:03:00Z^_^肥仔Johnhttps://www.cnblogs.com/fsjohnhuang/【摘要】在《petite-vue源码剖析-v-if和v-for的工作原理》我们了解到v-for在静态视图中的工作原理,而这里我们将深入了解在更新渲染时v-for是如何运作的。 逐行解析 // 文件 ./src/directives/for.ts /* [\s\S]*表示识别空格字符和非空格字符若干个,默认为 <a href="https://www.cnblogs.com/fsjohnhuang/p/15989941.html" target="_blank">阅读全文</a>https://www.cnblogs.com/fsjohnhuang/p/15981570.htmlpetite-vue源码剖析-属性绑定`v-bind`的工作原理 - ^_^肥仔John关于指令(directive) 属性绑定、事件绑定和v-modal底层都是通过指令(directive)实现的,那么什么是指令呢?我们一起看看Directive的定义吧。 //文件 ./src/directives/index.ts export interface Directive<T = El2022-03-08T09:32:00Z2022-03-08T09:32:00Z^_^肥仔Johnhttps://www.cnblogs.com/fsjohnhuang/【摘要】关于指令(directive) 属性绑定、事件绑定和v-modal底层都是通过指令(directive)实现的,那么什么是指令呢?我们一起看看Directive的定义吧。 //文件 ./src/directives/index.ts export interface Directive<T = El <a href="https://www.cnblogs.com/fsjohnhuang/p/15981570.html" target="_blank">阅读全文</a>https://www.cnblogs.com/fsjohnhuang/p/15975744.htmlpetite-vue源码剖析-v-if和v-for的工作原理 - ^_^肥仔John深入v-if的工作原理 <div v-scope="App"></div> <script type="module"> import { createApp } from 'https://unpkg.com/petite-vue?module' createApp({ App: { $templ2022-03-07T06:22:00Z2022-03-07T06:22:00Z^_^肥仔Johnhttps://www.cnblogs.com/fsjohnhuang/【摘要】深入v-if的工作原理 <div v-scope="App"></div> <script type="module"> import { createApp } from 'https://unpkg.com/petite-vue?module' createApp({ App: { $templ <a href="https://www.cnblogs.com/fsjohnhuang/p/15975744.html" target="_blank">阅读全文</a>https://www.cnblogs.com/fsjohnhuang/p/15964344.htmlpetite-vue源码剖析-从静态视图开始 - ^_^肥仔John代码库结构介绍 examples 各种使用示例 scripts 打包发布脚本 tests 测试用例 src directives v-if等内置指令的实现 app.ts createApp函数 block.ts 块对象 context.ts 上下文对象 eval.ts 提供v-if="count 12022-03-04T06:53:00Z2022-03-04T06:53:00Z^_^肥仔Johnhttps://www.cnblogs.com/fsjohnhuang/【摘要】代码库结构介绍 examples 各种使用示例 scripts 打包发布脚本 tests 测试用例 src directives v-if等内置指令的实现 app.ts createApp函数 block.ts 块对象 context.ts 上下文对象 eval.ts 提供v-if="count 1 <a href="https://www.cnblogs.com/fsjohnhuang/p/15964344.html" target="_blank">阅读全文</a>https://www.cnblogs.com/fsjohnhuang/p/15959708.htmlpetite-vue源码剖析-为什么要读源码? - ^_^肥仔John什么是petite-vue? 根据官方解释,petite-vue是专门为非前后端分离的历史项目提供和Vue相近的响应式开发模式。 与完整的Vue相比最大的特点是,面对数据的变化petite-vue采取直接操作DOM的方式重新渲染。 具体的使用方式请参考GitHub,在这里我想展示两个示例: 示例1 2022-03-03T06:34:00Z2022-03-03T06:34:00Z^_^肥仔Johnhttps://www.cnblogs.com/fsjohnhuang/【摘要】什么是petite-vue? 根据官方解释,petite-vue是专门为非前后端分离的历史项目提供和Vue相近的响应式开发模式。 与完整的Vue相比最大的特点是,面对数据的变化petite-vue采取直接操作DOM的方式重新渲染。 具体的使用方式请参考GitHub,在这里我想展示两个示例: 示例1 <a href="https://www.cnblogs.com/fsjohnhuang/p/15959708.html" target="_blank">阅读全文</a>https://www.cnblogs.com/fsjohnhuang/p/15686127.htmlAnother Intro for Cookies - ^_^肥仔JohnCookies are strings of data that are stored directly in the browser. They are a part of HTTP protocol, defined by RFC 6265 specification. Cookies are 2021-12-13T23:00:00Z2021-12-13T23:00:00Z^_^肥仔Johnhttps://www.cnblogs.com/fsjohnhuang/【摘要】Cookies are strings of data that are stored directly in the browser. They are a part of HTTP protocol, defined by RFC 6265 specification. Cookies are <a href="https://www.cnblogs.com/fsjohnhuang/p/15686127.html" target="_blank">阅读全文</a>https://www.cnblogs.com/fsjohnhuang/p/15613245.htmlYet Another Intro for Symbol - ^_^肥仔JohnFirst 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 w2021-11-27T13:56:00Z2021-11-27T13:56:00Z^_^肥仔Johnhttps://www.cnblogs.com/fsjohnhuang/【摘要】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 w <a href="https://www.cnblogs.com/fsjohnhuang/p/15613245.html" target="_blank">阅读全文</a>https://www.cnblogs.com/fsjohnhuang/p/15613248.htmlTypeScript Crash Course: Property Access Modifiers - ^_^肥仔JohnThere 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 V2021-11-27T13:56:00Z2021-11-27T13:56:00Z^_^肥仔Johnhttps://www.cnblogs.com/fsjohnhuang/【摘要】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 V <a href="https://www.cnblogs.com/fsjohnhuang/p/15613248.html" target="_blank">阅读全文</a>https://www.cnblogs.com/fsjohnhuang/p/15531508.htmlSource Code Reading for Vue 3: How does `hasChanged` work? - ^_^肥仔JohnHey, guys! The next generation of Vue has released already. There are not only the brand new composition API, much more powerful and flexible reactivi2021-11-09T15:29:00Z2021-11-09T15:29:00Z^_^肥仔Johnhttps://www.cnblogs.com/fsjohnhuang/【摘要】Hey, guys! The next generation of Vue has released already. There are not only the brand new composition API, much more powerful and flexible reactivi <a href="https://www.cnblogs.com/fsjohnhuang/p/15531508.html" target="_blank">阅读全文</a>