引言 在上一篇文章中我们通过create-react-app脚手架快速搭建了一个简单的示例,并基于该示例讲解了在类组件中React.Component和React.PureComponent背后的实现原理.同时我们也了解到,通过使用Babel预置工具包@babel/preset-react可以将类组件中render方法的返回值和函数定义组件中的返回值转换成使用React.createElement方法包装而成的多层嵌套结构,并基于源码逐行分析了React.createElement方法背后的实现…

引言 如今,主流的前端框架React,Vue和Angular在前端领域已成三足鼎立之势,基于前端技术栈的发展现状,大大小小的公司或多或少也会使用其中某一项或者多项技术栈,那么掌握并熟练使用其中至少一种也成为了前端人员必不可少的技能饭碗.当然,框架的部分实现细节也常成为面试中的考察要点,因此,一方面为了应付面试官的连番追问,另一方面为了提升自己的技能水平,还是有必要对框架的底层实现原理有一定的涉猎. 当然对于主攻哪门技术栈没有严格的要求,挑选你自己喜欢的就好,在面试中面试官一般会先问你最熟悉的是哪…

前言 上一篇文章 Vue 源码解读(10)-- 编译器 之 生成渲染函数 最后讲到组件更新时,需要先执行编译器生成的渲染函数得到组件的 vnode. 渲染函数之所以能生成 vnode 是通过其中的 _c._l.._v._s 等方法实现的.比如: 普通的节点被编译成了可执行 _c 函数 v-for 节点被编译成了可执行的 _l 函数 ... 但是到目前为止我们都不清楚这些方法的原理,它们是如何生成 vnode 的?只知道它们是 Vue 实例方法,今天我们就从源码中找答案. 目标 在 Vue 编译器…

本文对Jfinal的启动源码做解释说明. PS:Jfinal启动容器可基于Tomcat/Jetty等web容器启动,本文基于Jetty的启动方式做启动源码的解读和分析,tomcat类似. 入口  JFinalConfig的继承类的Main方法为入口,实例代码继承类为:DemoConfig,Main方法如下: public static void main(String[] args) { /** * 特别注意:Eclipse 之下建议的启动方式 */ JFinal.start("WebRoot&…

最近把 vue-cli@2.x 和 create-react-app 的源码都看了一遍.由于现在官方推荐使用 vue-cli@3.0 ,改动比较大,所以就不写关于 vue-cli 的了(据说是因为 vue-cli@2.x 创建项目时操作有点太复杂了,于是犹雨溪大大就借鉴了 create-react-app 的思想,搞出了个零配置的 vue-cli@3.0 ,有兴趣的小伙伴可以去自己看一下哈).这篇随笔只讲解 create-react-app 的实现,但是,因为 create-react-app源…

本文对Jfinal的启动源码做解释说明. PS:Jfinal启动容器可基于Tomcat/Jetty等web容器启动,本文基于Jetty的启动方式做启动源码的解读和分析,tomcat类似. 入口  JFinalConfig的继承类的Main方法为入口,实例代码继承类为:DemoConfig,Main方法如下: public static void main(String[] args) { /** * 特别注意:Eclipse 之下建议的启动方式 */ JFinal.start("WebRoot&…

当学习成为了习惯,知识也就变成了常识. 感谢各位的 点赞.收藏和评论. 新视频和文章会第一时间在微信公众号发送,欢迎关注:李永宁lyn 文章已收录到 github 仓库 liyongning/blog,欢迎 Watch 和 Star. 简介 专栏的第一篇,主要介绍专栏的目的.规划.适用人群,以及准备工作和扫盲的基础知识. 前言 最近在准备一些 Vue 系列的文章和视频,之前 Vue 的源码也读过好几遍,但是一直没写相关的文章,所以最近就计划写一写. 目标 精通 Vue 技术栈的源码原理,这是这系…

当学习成为了习惯,知识也就变成了常识. 感谢各位的 点赞.收藏和评论. 新视频和文章会第一时间在微信公众号发送,欢迎关注:李永宁lyn 文章已收录到 github 仓库 liyongning/blog,欢迎 Watch 和 Star. 目标 深入理解 Vue 的初始化过程,再也不怕 面试官 的那道面试题:new Vue(options) 发生了什么? 找入口 想知道 new Vue(options) 都做了什么,就得先找到 Vue 的构造函数是在哪声明的,有两个办法: 从 rollup 配置文件…

前言 上一篇文章 Vue 源码解读(2)-- Vue 初始化过程 详细讲解了 Vue 的初始化过程,明白了 new Vue(options) 都做了什么,其中关于 数据响应式 的实现用一句话简单的带过,而这篇文章则会详细讲解 Vue 数据响应式的实现原理. 目标 深入理解 Vue 数据响应式原理. methods.computed 和 watch 有什么区别? 源码解读 经过上一篇文章的学习,相信关于 响应式原理 源码阅读的入口位置大家都已经知道了,就是初始化过程中处理数据响应式这一步,即调用…

前言 上一篇的 Vue 源码解读(3)-- 响应式原理 说到通过 Object.defineProperty 为对象的每个 key 设置 getter.setter,从而拦截对数据的访问和设置. 当对数据进行更新操作时,比如 obj.key = 'new val' 就会触发 setter 的拦截,从而检测新值和旧值是否相等,如果相等什么也不做,如果不相等,则更新值,然后由 dep 通知 watcher 进行更新.所以,异步更新 的入口点就是 setter 中最后调用的 dep.notify()…

前言 上一篇文章 Vue 源码解读(5)-- 全局 API 详细介绍了 Vue 的各个全局 API 的实现原理,本篇文章将会详细介绍各个实例方法的实现原理. 目标 深入理解以下实例方法的实现原理. vm.$set vm.$delete vm.$watch vm.$on vm.$emit vm.$off vm.$once vm._update vm.$forceUpdate vm.$destroy vm.$nextTick vm._render 源码解读 入口 /src/core/instance…

特殊说明 由于文章篇幅限制,所以将 Vue 源码解读(8)-- 编译器 之 解析 拆成了上下两篇,所以在阅读本篇文章时请同时打开 Vue 源码解读(8)-- 编译器 之 解析(下)一起阅读. 前言 Vue 源码解读(4)-- 异步更新 最后说到刷新 watcher 队列,执行每个 watcher.run 方法,由 watcher.run 调用 watcher.get,从而执行 watcher.getter 方法,进入实际的更新阶段.这个流程如果不熟悉,建议大家再去读一下这篇文章. 当更新一个渲染…

特殊说明 由于文章篇幅限制,所以将 Vue 源码解读(8)-- 编译器 之 解析 拆成了两篇文章,本篇是对 Vue 源码解读(8)-- 编译器 之 解析(上) 的一个补充,所以在阅读时请同时打开 Vue 源码解读(8)-- 编译器 之 解析(上) 一起阅读. processAttrs /src/compiler/parser/index.js /** * 处理元素上的所有属性: * v-bind 指令变成:el.attrs 或 el.dynamicAttrs = [{ name, value,…

前言 上一篇文章 Vue 源码解读(8)-- 编译器 之 解析 详细详解了编译器的第一部分,如何将 html 模版字符串编译成 AST.今天带来编译器的第二部分,优化 AST,也是大家常说的静态标记. 目标 深入理解编译器的静态标记过程 源码解读 入口 /src/compiler/index.js /** * 在这之前做的所有的事情,只有一个目的,就是为了构建平台特有的编译选项(options),比如 web 平台 * * 1.将 html 模版解析成 ast * 2.对 ast 树进行静态标记…

前言 这篇文章是 Vue 编译器的最后一部分,前两部分分别是:Vue 源码解读(8)-- 编译器 之 解析.Vue 源码解读(9)-- 编译器 之 优化. 从 HTML 模版字符串开始,解析所有标签以及标签上的各个属性,得到 AST 语法树,然后基于 AST 语法树进行静态标记,首先标记每个节点是否为静态静态,然后进一步标记出静态根节点.这样在后续的更新中就可以跳过这些静态根节点的更新,从而提高性能. 这最后一部分讲的是如何从 AST 生成渲染函数. 目标 深入理解渲染函数的生成过程,理解编译器…

前言 前面我们说到,当组件更新时,实例化渲染 watcher 时传递的 updateComponent 方法会被执行: const updateComponent = () => { // 执行 vm._render() 函数,得到 虚拟 VNode,并将 VNode 传递给 vm._update 方法,接下来就该到 patch 阶段了 vm._update(vm._render(), hydrating) } 首先会先执行 vm._render() 函数,得到组件的 VNode,并将 VNod…

目录 1. 3DTiles 数据集的类型 2. 创建瓦片树 2.1. 请求入口文件 2.2. 创建树结构 2.3. 瓦片缓存机制带来的能力 3. 瓦片树的遍历更新 3.1. 三个大步骤 3.2. 遍历器 3.3. 选择瓦片 3.4. 请求并解析瓦片内容 3.5. 更新瓦片并创建 DrawCommand 3.6. prePassesUpdate 也能创建 DrawCommand 3.7. 自定义着色器 3.8. 样式引擎 3.9. 其它 4. 本文总结 3DTiles 与 I3S 是竞争关系,可是…

第七篇 前言 本篇文章主要讲解下载操作的相关知识,SDWebImageDownloaderOperation的主要任务是把一张图片从服务器下载到内存中.下载数据并不难,如何对下载这一系列的任务进行设计,就很难了.接下来我们一步一步的分析作者在开发中的思路和使用到的技术细节. NSOperation NSOperation想必大家都知道,为了让程序执行的更快,我们用多线程异步的方式解决这个问题,GCD与NSOperation都能实现多线程,我们这里只介绍NSOperation.如果大家想了解更多N…

第一篇 前言 从今天开始,我将开启一段源码解读的旅途了.在这里先暂时不透露具体解读的源码到底是哪些?因为也可能随着解读的进行会更改计划.但能够肯定的是,这一系列之中肯定会有Swift版本的代码. 说说我的目的.想成为一名好的程序员,肯定绕不开模仿这条路.之所以做出这么一个决定,也是想提高自己写框架的能力,逻辑思维能力,扩展知识面.同时也能够给那些想了解这些框架的同学一些基本的解释.何乐而不为呢? 解读方法 对于框架的源码解读,我个人的习惯是先看头文件,先从头文件最简单的开始解读,也就是说首先看不…

第二篇 前言 本篇是和GIF相关的一个UIImage的分类.主要提供了三个方法: + (UIImage *)sd_animatedGIFNamed:(NSString *)name ----- 根据名称获取图片 + (UIImage *)sd_animatedGIFWithData:(NSData *)data ----- 根据NSData获取图片 - (UIImage *)sd_animatedImageByScalingAndCroppingToSize:(CGSize)size -----…

第三篇 前言 本篇主要解读SDWebImage的配置文件.正如compat的定义,该配置文件主要是兼容Apple的其他设备.也许我们真实的开发平台只有一个,但考虑各个平台的兼容性,对于框架有着很重要的意义.这篇文章的重点是抽取出对于iOS很重要的用法,能够在项目开发中提高效率. #import 导入这个头文件,我们就能访问系统提供的配置选项了,我们接下来会对该文件出现的配置属性做出解释. __OBJC_GC__ #ifdef __OBJC_GC__ #error SDWebImage does…

第四篇 前言 首先,我们要弄明白一个问题? 为什么要对UIImage进行解码呢?难道不能直接使用吗? 其实不解码也是可以使用的,假如说我们通过imageNamed:来加载image,系统默认会在主线程立即进行图片的解码工作.这一过程就是把image解码成可供控件直接使用的位图. 当在主线程调用了大量的imageNamed:方法后,就会产生卡顿了.为了解决这个问题我们有两种比较简单的处理方法: 我们不使用imageNamed:加载图片,使用其他的方法,比如imageWithContentsOfFi…

第五篇 前言 本篇主要讲解图片缓存类的知识,虽然只涉及了图片方面的缓存的设计,但思想同样适用于别的方面的设计.在架构上来说,缓存算是存储设计的一部分.我们把各种不同的存储内容按照功能进行切割后,图片缓存便是其中的一个. 我们在封装自己的图片缓存管理对象的时候,SDWebImageCache能够提供大约90%的代码给我们直接使用,基于这些代码,我们需要分析出作者的设计思想是什么?当需要缓存某个列表时,基于SDWebImageCache的设计思想,我们就能够设计出比较合理的缓存管理对象了. 所谓举一…

第六篇 前言 我们在SDWebImageCache(上)中了解了这个缓存类大概的功能是什么?那么接下来就要看看这些功能是如何实现的? 再次强调,不管是图片的缓存还是其他各种不同形式的缓存,在原理上都极其相似,我们通过SDWebImageCache,来看看作者是如何实现这个功能的. 在业务中,经常要缓存数据,通过本篇的学习,我们写出的缓存管理者这个管理者对象,就能够有所进步. NSCache 对于很多开发者来说,NSCache是一个陌生人,因为大家往往对NSMutableDictionary情有独…

承接上一篇AFNetworking 3.0 源码解读 总结(干货)(上) 21.网络服务类型NSURLRequestNetworkServiceType 示例代码: typedef NS_ENUM(NSUInteger, NSURLRequestNetworkServiceType) { NSURLNetworkServiceTypeDefault = 0, // Standard internet traffic NSURLNetworkServiceTypeVoIP = 1, // Voic…

养成记笔记的习惯,对于一个软件工程师来说,我觉得很重要.记得在知乎上看到过一个问题,说是人类最大的缺点是什么?我个人觉得记忆算是一个缺点.它就像时间一样,会自己消散. 前言 终于写完了 AFNetworking 的源码解读.这一过程耗时数天.当我回过头又重头到尾的读了一篇,又有所收获.不禁让我想起了当初上学时的种种情景.我们应该对知识进行反复的记忆和理解.下边是我总结的 AFNetworking 中能够学到的知识点. 1.枚举(enum) 使用原则:当满足一个有限的并具有统一主题的集合的时候,我…

AFNetworking的源码解读马上就结束了,这一篇应该算是倒数第二篇,下一篇会是对AFNetworking中的技术点进行总结. 前言 上一篇我们总结了 UIActivityIndicatorView UIRefreshControl UIImageView 这3个控件的分类.那么这一篇就总结下剩余的3个分类:UIButton UIProgressView UIWebView . UIButton+AFNetworking UIButton跟图片相关的属性大概有两个,Image和Backgro…

我们应该看到过很多类似这样的例子:某个控件拥有加载网络图片的能力.但这究竟是怎么做到的呢?看完这篇文章就明白了. 前言 这篇我们会介绍 AFNetworking 中的3个UIKit中的分类.UIActivityIndicatorView UIRefreshControl UIImageView.读完本篇就能够明白控件是如何显示网络图片的.那么如果你有兴趣,可以尝试让一个控件的layer也能够加载网络图片. 提供的功能 我们解读源码不仅仅是了解内部实现原理,还要让开发者明白在这些分类中我能够使用那…

让我们的APP像艺术品一样优雅,开发工程师更像是一名匠人,不仅需要精湛的技艺,而且要有一颗匠心. 前言 AFNetworkActivityIndicatorManager 是对状态栏中网络激活那个小控件的管理.在平时的开发中,我们很可能忽略了它的存在.然而,实现对它的管理,让我们的APP更符合人机交互,不也是件大快人心的事儿吗.看下边这张图片就明白了: AFNetworkActivityIndicatorManager 接口 // 这个宏的意思指下边的类不能被扩展 NS_EXTENSION_UN…

AFImageDownloader 这个类对写DownloadManager有很大的借鉴意义.在平时的开发中,当我们使用UIImageView加载一个网络上的图片时,其原理就是把图片下载下来,然后再赋值.这也是AFImageDownloader这个类的核心功能. 前言 AFImageDownloader 专门管理一组图片的下载任务.试想,如果有一个界面的功能是对图片进行处理,要求下载高清图片,那么这个AFImageDownloader就用上了. 1.AFImageDownloadPrioriti…