随笔分类 - JavaScript
摘要：前言 echarts-for-react在对echarts进行轻量级封装的基础上，额外提供图表尺寸自适应容器尺寸的这小而实用的功能，而这功能的背后就是本文想介绍的size-sensor了。 源码介绍 size-sensor源码十分精简，主要是对原生APIResizeObserver方案和object
阅读全文
摘要：前言 在当前工业4.0和智能制造的产业升级浪潮当中，智慧大屏无疑是展示企业IT成果的最有效方式之一。然而其背后怎么能缺少ECharts的身影呢？对于React应用而言，直接使用ECharts并不是最高效且优雅的方式，而echarts-for-react则是针对React应用对ECharts进行轻量封
阅读全文
摘要：在解析v-if和v-for等指令时我们会看到通过evaluate执行指令值中的JavaScript表达式，而且能够读取当前作用域上的属性。而evaluate的实现如下： const evalCache: Record<string, Function> = Object.create(null) e
阅读全文
摘要：当我们通过effect将副函数向响应上下文注册后，副作用函数内访问响应式对象时即会自动收集依赖，并在相应的响应式属性发生变化后，自动触发副作用函数的执行。 // ./effect.ts export funciton effect<T = any>( fn: () => T, options?: R
阅读全文
摘要：本篇我们会继续探索reactive函数中对Map/WeakMap/Set/WeakSet对象的代理实现。 Map/WeakMap/Set/WeakSet的操作 由于WeakMap和WeakSet分别是Map和Set的不影响GC执行垃圾回收的版本，这里我们只研究Map和Set即可。 Set的属性和方法
阅读全文
摘要：在petite-vue中我们通过reactive构建上下文对象，并将根据状态渲染UI的逻辑作为入参传递给effect，然后神奇的事情发生了，当状态发生变化时将自动触发UI重新渲染。那么到底这是怎么做到的呢？ @vue/reactivity功能十分丰富，而petite-vue仅使用到reactive和
阅读全文
摘要：什么是<template>元素？ <template>是2013年定稿用于提供一种更统一、功能更强大的模板本存放方式。具体表现为 通过<template>元素属性content获取已实例化的HTML元素(不是字符串而已) <template id="tpl"> <div>a</div> <div>b
阅读全文
摘要：ref内部的工作原理十分简单，其实就是将指令ref、:ref或v-bind:ref标识的元素实例存储到当前作用域的$refs对象中，那么我们就可以通过this.$refs获取对应的元素实例。但由于作用域继承上有点小窍门，所以我们能从this.$refs获取的元素实例还是需要注意一下。下面让我为你一一
阅读全文
摘要：前言 双向绑定v-model不仅仅是对可编辑HTML元素(select, input, textarea和附带[contenteditable=true])同时附加v-bind和v-on，而且还能利用通过petite-vue附加给元素的_value、_trueValue和_falseValue属性提
阅读全文
摘要：在书写petite-vue和Vue最舒服的莫过于通过@click绑定事件，而且在移除元素时框架会帮我们自动解除绑定。省去了过去通过jQuery的累赘。而事件绑定在petite-vue中就是一个指令(directive)，和其他指令类似。 深入v-on的工作原理 walk方法在解析模板时会遍历元素的特
阅读全文
摘要：在《petite-vue源码剖析-v-if和v-for的工作原理》我们了解到v-for在静态视图中的工作原理，而这里我们将深入了解在更新渲染时v-for是如何运作的。 逐行解析 // 文件 ./src/directives/for.ts /* [\s\S]*表示识别空格字符和非空格字符若干个，默认为
阅读全文
摘要：关于指令(directive) 属性绑定、事件绑定和v-modal底层都是通过指令(directive)实现的，那么什么是指令呢？我们一起看看Directive的定义吧。 //文件 ./src/directives/index.ts export interface Directive<T = El
阅读全文
摘要：深入v-if的工作原理 <div v-scope="App"></div> <script type="module"> import { createApp } from 'https://unpkg.com/petite-vue?module' createApp({ App: { $templ
阅读全文
摘要：什么是petite-vue？ 根据官方解释，petite-vue是专门为非前后端分离的历史项目提供和Vue相近的响应式开发模式。 与完整的Vue相比最大的特点是，面对数据的变化petite-vue采取直接操作DOM的方式重新渲染。 具体的使用方式请参考GitHub，在这里我想展示两个示例: 示例1
阅读全文
摘要：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
阅读全文
摘要：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
阅读全文
摘要：As we tell, there're tons of posts talking about event loop, the basic of the basic knowledge of JavaScript running mechanism. Long long ago, event lo
阅读全文
摘要：As we know, localStorage and sessionStorage have came up for years. They're commonly used in front-end cache for both online and offline situations, l
阅读全文
摘要：The broadcast channel API allows basically communication between browsing contexts(that is, tabs, windows, frames or iframes) and workers on the same
阅读全文
摘要：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
阅读全文