源码
星河阅卷
一条比较会蹦跶的咸鱼
展开
-
react-router-dom源码学习之实现一个自定义的路由组件
现代前端应用,几乎已经离不开前端路由这个概念了,只要稍微复杂一点的前端应用,都会选择引入前端路由的方式,使我们的不同的模块能够有机组合并通过浏览器的历史进行管理。今天,本人学习了一下react-router-dom的底层实现原理,尝试实现一个简易版的react-router(仅实现基于浏览器History的路由方式)// 路由容器组件import React, { Component } ...原创 2020-03-15 15:49:58 · 345 阅读 · 0 评论 -
Vue源码学习之优化器的原理与实现
本人上一篇博文里分析了一下Vue中的模板编译器的原理及其实现方式(如果感兴趣可以去看一下:Vue源码学习之模板编译器原理),如果把Vue看成一辆跑车,模板编译器可以看做是跑车的底盘,那么优化器便可以看做是一种更为轻便的合金材料,跑车没有这种材料,依旧能够正常行驶,但如果将跑车的底盘换成这种材料,便可以使得整个车身更加轻盈,跑得更快。优化器起到的便是通过将生成的抽象语法树中的一些静态节点(所谓静态...原创 2020-02-18 15:00:57 · 231 阅读 · 0 评论 -
Vue源码学习之模板编译器原理
在Vue中,从模板到页面更新的流程大概是这样的:模板编译器将用户提供的一个模板字符串(或dom节点id)解析生成抽象语法树,再经由优化器优化,标记所有的静态节点后,交由代码生成器生成渲染代码,再通过渲染函数构建器将渲染代码构建成一个渲染函数,调用这个渲染函数,我们就可以得到目标模板的虚拟dom,经过patching算法的对比后,得到最少更改的虚拟dom,再根据这个虚拟dom实现页面的更新。万...原创 2020-02-18 14:03:36 · 901 阅读 · 0 评论 -
手写通过promise/A+测试的KPromise类
KPromise实现Promise功能目录结构.├── ForPromises_A_PlusTest 用于测试KPromise是否符合"promise/A+"规范,采用commonjs的模块导出方式,代码实际上与src里并无区别│ ├── KPromise.js KPromise主文件入口│ ├── constants.js 状态常量的定义│ ...原创 2020-02-12 11:33:40 · 221 阅读 · 0 评论 -
Vue数据响应化原理之盘点看似路人皆知实则发人深省的优雅用法
目录通过索引添加/替换/删除数组元素使用拦截器与覆盖原型链方式更改目标数据原型不考虑顺序的遍历灵活使用全局或静态变量达到公共存储目的一个可全局修改局部使用的开关变量深度观测实现的优雅将自己主动加入到目标订阅列表中Vue如今可说是极大炙手可热的前端基础框架之一,其渐进式的设计让使用者无论是在现有的系统上集成开发还是使用Vue全家桶开发一个大型项目都非常便捷。...原创 2020-02-06 15:19:47 · 316 阅读 · 0 评论 -
Vue3(Vue-next)响应化实现剖析
最近,Vue3成为前端领域热门研究和讨论的框架,尽管它还没有发布正式版,但这没办法阻止万能的前端程序员研究其新的实现模式与实现原理。这里附送一个Vue3(即Vue-next传送门)vue-next。我们可以看出,从Vue3开始,Vue将原本使用Flow进行类型校验全面该为采用TypeScript(TS)作为其开发语言,这将使Vue3更加的严谨并可避免很多因为js弱语言所带来的一些不可预料的问题...原创 2020-01-17 11:24:37 · 1150 阅读 · 0 评论 -
手写简易版Vue源码之数据响应化的实现
当前,Vue和React已成为两大炙手可热的前端框架,这两个框架都算是业内一些最佳实践的集合体。其中,Vue最大的亮点和特色就是数据响应化,而React的特点则是单向数据流与jsx。笔者近期正在研究Vue源码,在此过程中尝试实现一个简易版的Vue,而实现Vue的第一步便是解决数据响应化的问题。以下便是对Vue响应化的简易版实现。数据响应的原理:1、依赖收集:data通过Observer...原创 2020-01-13 09:55:40 · 429 阅读 · 0 评论