echarts-for-react在对echarts进行轻量级封装的基础上，额外提供图表尺寸自适应容器尺寸的这小而实用的功能，而这功能的背后就是本文想介绍的size-sensor了。

在当前工业4.0和智能制造的产业升级浪潮当中，智慧大屏无疑是展示企业IT成果的最有效方式之一。然而其背后怎么能缺少ECharts的身影呢？对于React应用而言，直接使用ECharts并不是最高效且优雅的方式，而echarts-for-react则是针对React应用对ECharts进行轻量封装和增强的工具库。

在解析v-if和v-for等指令时我们会看到通过evaluate执行指令值中的JavaScript表达式，而且能够读取当前作用域上的属性。而evaluate的实现如下：

当我们通过effect将副函数向响应上下文注册后，副作用函数内访问响应式对象时即会自动收集依赖，并在相应的响应式属性发生变化后，自动触发副作用函数的执行。

本篇我们会继续探索reactive函数中对Map/WeakMap/Set/WeakSet对象的代理实现。Map/WeakMap/Set/WeakSet的操作由于WeakMap和WeakSet分别是Map和Set的不影响GC执行垃圾回收的版本，这里我们只研究Map和Set即可。Set的属性和方法size: number 为访问器属性(accessor property)，返回Set对象中的值的个数add(value: any): Se...

在petite-vue中我们通过reactive构建上下文对象，并将根据状态渲染UI的逻辑作为入参传递给effect，然后神奇的事情发生了，当状态发生变化时将自动触发UI重新渲染。那么到底这是怎么做到的呢？@vue/reactivity功能十分丰富，而petite-vue仅使用到reactive和effect两个最基本的API，作为入门本文将仅仅对这两个API进行源码...

什么是<template>元素？<template>是2013年定稿用于提供一种更统一、功能更强大的模板本存放方式。具体表现为通过<template>元素属性content获取已实例化的HTML元素(不是字符串而已) {代码...} <template>以及其子节点均不可视<template>下的img元素的src属性即使有值也不会发出资源请求&...

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)，和其他指令类似。

指令(directive)其实就是一个接受参数类型为DirectiveContext并且返回cleanup函数或啥都不返回的函数。那么DirectiveContext有是如何的呢？

在《petite-vue源码剖析-v-if和v-for的工作原理》我们了解到v-for在静态视图中的工作原理，而这里我们将深入了解在更新渲染时v-for是如何运作的。

调用mount为<div v-scope="App"></div>构建根块对象rootBlock，并将其作为模板执行解析处理；

代码库结构介绍examples 各种使用示例scripts 打包发布脚本tests 测试用例srcdirectives v-if等内置指令的实现app.ts createApp函数block.ts 块对象context.ts 上下文对象eval.ts 提供v-if="count === 1"等表达式运算功能scheduler.ts 调度器utils.ts 工具函数walk.ts 模板解析若想构建自己的版本只需在控制台...

根据官方解释，petite-vue是专门为非前后端分离的历史项目提供和Vue相近的响应式开发模式。 与完整的Vue相比最大的特点是，面对数据的变化petite-vue采取直接操作DOM的方式重新渲染。

Cookies are strings of data that are stored directly in the browser. They are a part of HTTP protocol, defined by RFC 6265 specification.

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 co...

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.

Cauz only Object, Array, Map, Set, WeakMap and WeakSet can be acted for in Vue 3 reactivity system. And to value of the type of Object called by Object.isFrozen returns true or with __v_skip unenumerable property of which value is true will can not proxied as well. VNode is one of the folks has a...

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.

As we tell, there're tons of posts talking about event loop, the basic of the basic knowledge of JavaScript running mechanism.

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, like, storing JWT.I suppose you have been way familar with them already, so here's just a quick note for myself. If it's also your jam, stay tuned!

The broadcast channel API allows basically communication between browsing contexts(that is, tabs, windows, frames or iframes) and workers on the same origin.You don't have to maintain the reference to the frames or workers you wish to communicate with, just constructing your own BroadcastChannel ...

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...

JavaScript从使用开初就一直基于事件循环的单线程运行模型，即使是成功进军后端开发的Nodejs也没有改变这一模型。那么对于计算密集型的应用，我们必须创建新进程来执行运算，然后执行进程间通信实现传参和获取运算结果。否则会造成UI界面卡顿，甚至导致浏览器无响应。从功能实现来看，我们可以通过新增iframe加载同域页...

之前系统接入大数据PV统计平台，最近因PV统计平台侧服务器资源紧张，要求各接入方必须缓存API调用验证用的Token，从而减少无效请求和服务端缓存中间件的存储压力。虽然系统部分业务模块都有缓存数据的需求，但由于没有提供统一的前端缓存模块，这导致各业务模块都自行实现一套刚好能用的缓存机制，甚至还会导致内存泄漏...

江湖有传“动态类型一时爽，代码重构火葬场”，由于动态类型语言在开发时不受数据类型的约束，因此非常适合在项目原型阶段和初期进行快速迭代开发使用，这意味着项目未来将通过重写而非重构的方式进入成熟阶段。而在企业级应用开发中，每个系统特性其实都是需求分析人员与用户进行多次调研后明确下来的，后期需要重写的可...

也许前端的同学会问JavaScript从诞生至今都没有枚举类型，我们不是都活得挺好的吗？为什么TypeScript需要引入枚举类型呢？也许被迫写前端的后端同学会问，TypeScript的枚举类型是和Java/.NET的一样吗？下面我们来一起探讨和尝试解答吧！

前言  最近在用Polymer封装纯数字的输入框，开发过程中发现不是坑，也有不少值得研究的地方。本系列打算分4篇来叙述这段可歌可泣的踩坑经历： [《动手写个数字输入框1：input[type=number]的遗憾》]([链接] 《动手写个数字输入框2：起手式——拦截非法字符》 《动手写个数字输入框3：痛点——输入法是个魔鬼》 《动手写个数...

前言  最近在用Polymer封装纯数字的输入框，开发过程中发现不是坑，也有不少值得研究的地方。本系列打算分4篇来叙述这段可歌可泣的踩坑经历： 《动手写个数字输入框1：input[type=number]的遗憾》 《动手写个数字输入框2：起手式——拦截非法字符》 《动手写个数字输入框3：痛点——输入法是个魔鬼》 《动手写个数字输入框4...