class Compiler{ constructor(el,vm){ // 判断el属性 是不是 一个元素, 如果不是就获取 this.el = this.isElementNode(el)?el:document.querySelector(el); // console.log(this.el); this.vm = vm; // 把当前节点放到内存中 let fragment = this.node2fragment(this.el); // console.log(fragment,"…

剖析手写Vue,你也可以手写一个MVVM框架# 邮箱:563995050@qq.com github: https://github.com/xiaoqiuxiong 作者:肖秋雄(eddy) 温馨提示:感谢阅读,笔者创作辛苦,如需转载请自觉注明出处哦 Vue MVVM响应式原理剖释### Vue是采用数据劫持配合发布者和订阅者模式,通过Object.definerProperty()来劫持各个属性的setter和setter,在数据变动时,发布消息给依赖收集器Dep,去通知观察者Watcher…

前言 前面我们用 12 篇文章详细讲解了 Vue2 的框架源码.接下来我们就开始手写 Vue 系列,写一个自己的 Vue 框架,用最简单的代码实现 Vue 的核心功能,进一步理解 Vue 核心原理. 为什么要手写框架 有人会有疑问:我已经详细阅读过框架源码了,甚至不止两三遍,这难道还不够吗?我自认为对框架的源码已经很熟悉了,我觉得没必要再手写. 有没有必要手写框架 这个事情,和 有没有必要阅读框架源码 的答案一样.看你的出发点是什么. 读源码 如果你是抱以学习的态度,那不用说,阅读框架源码肯定是…

前言 上一篇文章 手写 Vue 系列 之 Vue1.x 带大家从零开始实现了 Vue1 的核心原理,包括如下功能: 数据响应式拦截 普通对象 数组 数据响应式更新 依赖收集 Dep Watcher 编译器 文本节点 v-on:click v-bind v-model 在最后也详细讲解了 Vue1 的诞生以及存在的问题:Vue1.x 在中小型系统中性能会很好,定向更新 DOM 节点,但是大型系统由于 Watcher 太多,导致资源占用过多,性能下降.于是 Vue2 中通过引入 VNode 和 Di…

本文节选自<Spring 5核心原理> 阅读本文之前,请先阅读以下内容: 30个类手写Spring核心原理之自定义ORM(上)(6) 30个类手写Spring核心原理之自定义ORM(下)(7) 4 动态数据源切换的底层原理 这里简单介绍一下AbstractRoutingDataSource的基本原理.实现数据源切换的功能就是自定义一个类扩展AbstractRoutingDataSource抽象类,其实相当于数据源的路由中介,可以实现在项目运行时根据相应key值切换到对应的DataSource上…

手写webpack核心原理 目录 手写webpack核心原理 一.核心打包原理 1.1 打包的主要流程如下 1.2 具体细节 二.基本准备工作 三.获取模块内容 四.分析模块 五.收集依赖 六.ES6转成ES5(AST) 七.递归获取所有依赖 八.处理两个关键字 一.核心打包原理 1.1 打包的主要流程如下 需要读到入口文件里面的内容. 分析入口文件,递归的去读取模块所依赖的文件内容,生成AST语法树. 根据AST语法树,生成浏览器能够运行的代码 1.2 具体细节 获取主模块内容 分析模块 安装…

@ 目录 一.前言 二.介绍 2.1 创建action 2.2 reducer 2.3 触发action 三. 认识与手写createAction() 3.1 用法 3.2 原理实现 四.认识handleActions 五.认识与手写实现handleAction 5.1 用法 5.2 原理实现 六.handleActions原理实现 最后 参考文章 一.前言 为什么介绍redux-actions呢? 第一次见到主要是接手公司原有的项目,发现有之前的大佬在处理redux的时候引入了它. 发现也确实…

本文节选自<Spring 5核心原理> 前面我们已经完成了Spring IoC.DI.MVC三大核心模块的功能,并保证了功能可用.接下来要完成Spring的另一个核心模块-AOP,这也是最难的部分. 1 基础配置 首先,在application.properties中增加如下自定义配置,作为Spring AOP的基础配置: #多切面配置可以在key前面加前缀 #例如 aspect.logAspect. #切面表达式# pointCut=public .* com.tom.spring.demo…

1.背景 前段时间在看gorm,发现gorm是复用database/sql的连接池. 于是翻了下database/sql的数据库连接池的代码实现,看完代码,好像也不是很复杂,但是总觉得理解不够深刻,于是萌生了自己想写个连接池的想法.(最后也验证了,看源码的理解确实不够深刻,一看就会,一做就跪) 2.连接池的实现原理 什么是连接池 顾名思义是一个池子 池子里面存放有限数量即时可用的连接,减少创建连接和关闭连接的时间 连接是有存活时间的 具体到数据库连接池,我根据自己的理解画了一张获取连接的流程图…

本文节选自<Spring 5核心原理> 1 IDEA集成Lombok插件 1.1 安装插件 IntelliJ IDEA是一款非常优秀的集成开发工具,功能强大,而且插件众多.Lombok是开源的代码生成库,是一款非常实用的小工具,我们在编辑实体类时可以通过Lombok注解减少getter.setter等方法的编写,在更改实体类时只需要修改属性即可,减少了很多重复代码的编写工作. 首先需要安装IntelliJ IDEA中的Lombok插件,打开IntelliJ IDEA后单击菜单栏中的File→S…