随笔分类 - JavaScript

摘要:在解析v-if和v-for等指令时我们会看到通过evaluate执行指令值中的JavaScript表达式,而且能够读取当前作用域上的属性。而evaluate的实现如下: const evalCache: Record<string, Function> = Object.create(null) e 阅读全文
posted @ 2022-04-20 15:04 ^_^肥仔John 阅读(147) 评论(0) 推荐(1) 编辑
摘要:当我们通过effect将副函数向响应上下文注册后,副作用函数内访问响应式对象时即会自动收集依赖,并在相应的响应式属性发生变化后,自动触发副作用函数的执行。 // ./effect.ts export funciton effect<T = any>( fn: () => T, options?: R 阅读全文
posted @ 2022-04-19 09:41 ^_^肥仔John 阅读(133) 评论(0) 推荐(0) 编辑
摘要:本篇我们会继续探索reactive函数中对Map/WeakMap/Set/WeakSet对象的代理实现。 Map/WeakMap/Set/WeakSet的操作 由于WeakMap和WeakSet分别是Map和Set的不影响GC执行垃圾回收的版本,这里我们只研究Map和Set即可。 Set的属性和方法 阅读全文
posted @ 2022-04-15 09:58 ^_^肥仔John 阅读(163) 评论(0) 推荐(0) 编辑
摘要:在petite-vue中我们通过reactive构建上下文对象,并将根据状态渲染UI的逻辑作为入参传递给effect,然后神奇的事情发生了,当状态发生变化时将自动触发UI重新渲染。那么到底这是怎么做到的呢? @vue/reactivity功能十分丰富,而petite-vue仅使用到reactive和 阅读全文
posted @ 2022-03-22 08:11 ^_^肥仔John 阅读(170) 评论(0) 推荐(1) 编辑
摘要:什么是<template>元素? <template>是2013年定稿用于提供一种更统一、功能更强大的模板本存放方式。具体表现为 通过<template>元素属性content获取已实例化的HTML元素(不是字符串而已) <template id="tpl"> <div>a</div> <div>b 阅读全文
posted @ 2022-03-16 06:30 ^_^肥仔John 阅读(217) 评论(0) 推荐(0) 编辑
摘要:ref内部的工作原理十分简单,其实就是将指令ref、:ref或v-bind:ref标识的元素实例存储到当前作用域的$refs对象中,那么我们就可以通过this.$refs获取对应的元素实例。但由于作用域继承上有点小窍门,所以我们能从this.$refs获取的元素实例还是需要注意一下。下面让我为你一一 阅读全文
posted @ 2022-03-15 08:04 ^_^肥仔John 阅读(167) 评论(0) 推荐(1) 编辑
摘要:前言 双向绑定v-model不仅仅是对可编辑HTML元素(select, input, textarea和附带[contenteditable=true])同时附加v-bind和v-on,而且还能利用通过petite-vue附加给元素的_value、_trueValue和_falseValue属性提 阅读全文
posted @ 2022-03-14 15:03 ^_^肥仔John 阅读(313) 评论(0) 推荐(0) 编辑
摘要:在书写petite-vue和Vue最舒服的莫过于通过@click绑定事件,而且在移除元素时框架会帮我们自动解除绑定。省去了过去通过jQuery的累赘。而事件绑定在petite-vue中就是一个指令(directive),和其他指令类似。 深入v-on的工作原理 walk方法在解析模板时会遍历元素的特 阅读全文
posted @ 2022-03-11 09:54 ^_^肥仔John 阅读(75) 评论(0) 推荐(0) 编辑
摘要:在《petite-vue源码剖析-v-if和v-for的工作原理》我们了解到v-for在静态视图中的工作原理,而这里我们将深入了解在更新渲染时v-for是如何运作的。 逐行解析 // 文件 ./src/directives/for.ts /* [\s\S]*表示识别空格字符和非空格字符若干个,默认为 阅读全文
posted @ 2022-03-10 16:03 ^_^肥仔John 阅读(295) 评论(0) 推荐(1) 编辑
摘要:关于指令(directive) 属性绑定、事件绑定和v-modal底层都是通过指令(directive)实现的,那么什么是指令呢?我们一起看看Directive的定义吧。 //文件 ./src/directives/index.ts export interface Directive<T = El 阅读全文
posted @ 2022-03-08 17:32 ^_^肥仔John 阅读(241) 评论(0) 推荐(0) 编辑
摘要:深入v-if的工作原理 <div v-scope="App"></div> <script type="module"> import { createApp } from 'https://unpkg.com/petite-vue?module' createApp({ App: { $templ 阅读全文
posted @ 2022-03-07 14:22 ^_^肥仔John 阅读(305) 评论(0) 推荐(0) 编辑
摘要:什么是petite-vue? 根据官方解释,petite-vue是专门为非前后端分离的历史项目提供和Vue相近的响应式开发模式。 与完整的Vue相比最大的特点是,面对数据的变化petite-vue采取直接操作DOM的方式重新渲染。 具体的使用方式请参考GitHub,在这里我想展示两个示例: 示例1 阅读全文
posted @ 2022-03-03 14:34 ^_^肥仔John 阅读(361) 评论(0) 推荐(0) 编辑
摘要: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 阅读全文
posted @ 2021-12-14 07:00 ^_^肥仔John 阅读(23) 评论(0) 推荐(0) 编辑
摘要: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 阅读全文
posted @ 2021-11-09 23:29 ^_^肥仔John 阅读(32) 评论(0) 推荐(0) 编辑
摘要: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 阅读全文
posted @ 2021-10-26 19:02 ^_^肥仔John 阅读(16) 评论(0) 推荐(0) 编辑
摘要: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 阅读全文
posted @ 2021-09-28 23:13 ^_^肥仔John 阅读(32) 评论(0) 推荐(0) 编辑
摘要:The broadcast channel API allows basically communication between browsing contexts(that is, tabs, windows, frames or iframes) and workers on the same 阅读全文
posted @ 2021-09-26 23:43 ^_^肥仔John 阅读(40) 评论(0) 推荐(0) 编辑
摘要: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 阅读全文
posted @ 2021-08-29 14:29 ^_^肥仔John 阅读(36) 评论(0) 推荐(0) 编辑
摘要:前言 JavaScript从使用开初就一直基于事件循环的单线程运行模型,即使是成功进军后端开发的Nodejs也没有改变这一模型。那么对于计算密集型的应用,我们必须创建新进程来执行运算,然后执行进程间通信实现传参和获取运算结果。否则会造成UI界面卡顿,甚至导致浏览器无响应。 从功能实现来看,我们可以通 阅读全文
posted @ 2020-12-16 13:00 ^_^肥仔John 阅读(1252) 评论(2) 推荐(0) 编辑
摘要:前言 之前系统接入大数据PV统计平台,最近因PV统计平台侧服务器资源紧张,要求各接入方必须缓存API调用验证用的Token,从而减少无效请求和服务端缓存中间件的存储压力。 虽然系统部分业务模块都有缓存数据的需求,但由于没有提供统一的前端缓存模块,这导致各业务模块都自行实现一套刚好能用的缓存机制,甚至 阅读全文
posted @ 2020-12-11 16:05 ^_^肥仔John 阅读(412) 评论(1) 推荐(0) 编辑