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.

There are two different categories of HTTP caching. One is so-called Strong/Force Cache, whilst the other is called as Negotiation Cache.

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

Mybatis-Plus introduces many powerful annotations for us to indicate the mapping between entity properties and table fields. It's a great coding experience working with those annotations and IService relevant helper class. However, it's actually not true in Mybatis-Plus 2.x. Why? @TableField in 3...

Java虽然五脏俱全但总有软肋，譬如获取CPU等硬件信息，当然我们可以通过JNI调用C/C++来获取，但对于对C/C++和Windows API不熟的码农是一系列复杂的学习和踩坑过程。那能不能通过简单一些、学习成本低一些的方式呢？答案是肯定的，在功能实现放在首位的情况下，借他山之石是最简洁有力的做法。

RFC3986定义URI的路径(Path)中可包含name-value片段，扩充了以往仅能通过查询字符串(Query String)设置可选参数的囧境。 假如现在需要设计一个用于“搜索某部门某些员工可选信息中的部分信息”的API，我们分别使用查询字符串和路径name-value方式来设计对比，看看具体效果：

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

后端开发的同学想必每天都在重复经历着修改代码、执行代码编译，等待……重启Tomcat服务，等待……最后测试发现还是有bug，然后上述流程再来一遍（我听不见）:(能不能像前端开发的同学那样，修改代码保存文件后自动编译、重新加载应用呢？Spring Boot给了我们一个大大的Yes！本文我们就一起来探索Spring Boot的热部署功能提...