一.前言 本文基于 https://pomb.us/build-your-own-react/ 实现简单版 React. 本文学习思路来自 卡颂-b站-React源码,你在第几层. 模拟的版本为 React 16.8. 将实现以下功能: createElement(虚拟 DOM): render: 可中断渲染: Fibers: Render and Commit Phases : 协调(Diff 算法): 函数组件: hooks: 下面上正餐,请继续阅读. 二.准备 1. React Demo…
少废话,show my code call 原理都在注释里了 // 不覆盖原生call方法,起个别名叫myCall,接收this上下文context和参数params Function.prototype.myCall = function (context, ...params) { // context必须是个对象并且不能为null,默认为window const _this = typeof context === "object" ? context || window : w…
.caret, .dropup > .btn > .caret { border-top-color: #000 !important; } .label { border: 1px solid #000; } .table { border-collapse: collapse !important; } .table td, .table th { background-color: #fff !important; } .table-bordered th, .table-bordere…
前言 防抖函数和节流函数,无论是写业务的时候还是面试的时候,想必大家已经听过很多次了吧.但是大家在用到的时候,有了解过他们之间的区别嘛,他们是如何实现的呢?还是说只是简单的调用下像lodash和underscore这种第三方库提供给我们的节流和防抖函数呢? 本文接下来将会带你们了解下这两者的区别,以及我们该如何手写实现这两个函数. 防抖函数和节流函数的区别 防抖函数:是指触发了一个事件,在规定的时间内,如果没有第二次事件被触发,那么他就会执行.换句话讲,就是说,如果不断有事件被触发,那么规定的执…
简介 学习之前 需要先对Promise有个基本了解哦,这里都默认大家都是比较熟悉Promise的 本次将带小伙伴们实现Promise的基本功能 Promise的基本骨架 Promise的then Promise.then的多次调用 then链式调用 catch的实现 finally的实现 01-搭建基本骨架 const PROMISE_STATUS_PENDING = "PROMISE_STATUS_PENDING"; const PROMISE_STATUS_FULFILLED =…
点击查看代码 package com.grady.diytomcat; import com.grady.diytomcat.handler.RequestHandler; import org.dom4j.Document; import org.dom4j.DocumentException; import org.dom4j.Element; import org.dom4j.io.SAXReader; import java.io.File; import java.io.IOExcep…
第一步:promise的声明 class Promise{ // 构造器 constructor(executor){ // 成功 let resolve = () => { }; // 失败 let reject = () => { }; // 立即执行 executor(resolve, reject); } } 第二步:三个基本状态(pending.fulfilled.rejected) class Promise{ constructor(executor){ // 初始化state为…
核心代码如下: public class DiyTomcat1 { public void run() throws IOException { ServerSocket serverSocket = new ServerSocket(8080); System.out.println("======服务启动成功========"); while (!serverSocket.isClosed()) { Socket socket = serverSocket.accept(); In…
本文开始我会围绕webpack和babel写一系列的工程化文章,这两个工具我虽然天天用,但是对他们的原理理解的其实不是很深入,写这些文章的过程其实也是我深入学习的过程.由于webpack和babel的体系太大,知识点众多,不可能一篇文章囊括所有知识点,目前我的计划是从简单入手,先实现一个最简单的可以运行的webpack,然后再看看plugin, loader和tree shaking等功能.目前我计划会有这些文章: 手写最简webpack,也就是本文 webpack的plugin实现原理 web…
HashMap简介 HashMap是Java中一中非常常用的数据结构,也基本是面试中的"必考题".它实现了基于"K-V"形式的键值对的高效存取.JDK1.7之前,HashMap是基于数组+链表实现的,1.8以后,HashMap的底层实现中加入了红黑树用于提升查找效率. HashMap根据存入的键值对中的key计算对应的index,也就是它在数组中的存储位置.当发生哈希冲突时,即不同的key计算出了相同的index,HashMap就会在对应位置生成链表.当链表的长度超…
人工智能是当下很热门的话题,手写识别是一个典型的应用.为了进一步了解这个领域,我阅读了大量的论文,并借助opencv完成了对28x28的数字图片(预处理后的二值图像)的识别任务. 预处理一张图片: 首先采用opencv读取图片的构造函数读取灰度的图片,再采用大津法求出图片的二值化的阈值,并且将图片二值化. int otsu(const IplImage* src_image) { double sum = 0.0; double w0 = 0.0; double w1 = 0.0; double…
手写简易SpringMVC 手写系列框架代码基于普通Maven构建,因此在手写SpringMVC的过程中,需要手动的集成Tomcat容器 必备知识: Servlet相关理解和使用,Maven,Java 反射,Java自定义注解 配置Web类型结构 结构如图所示: 注意 要设置 webapp为web moudle -> IDEA 有蓝色小圈圈为准,resource 配置为资源文件 配置Web.xml,配置Artifacts,配置文件 <?xml version="1.0" e…
简单介绍一下new new再熟悉不过了,new后面跟着构造函数,可以创建对象,这个对象的原型指向构造函数的原型对象,说起来可能有点绕,直接看代码吧 function Person(name, age){ this.name = name; this.age = age; } let person1 = new Person("张三", 22); console.log(person1.__proto__ === Person.prototype); // true console.lo…
手写 Promise 实现 Promise的基本使用 Promise定义及用法详情文档:Promise MAD文档 function testPromise(param) { return new Promise((resolve, reject) => { setTimeout(() => { params ? resolve('resolve:' + param) : reject('reject:' + param) }, 1000) }) } 我们能够通过 .then 方法来获取执行成…
目录 Spring系列之IOC的原理及手动实现 Spring系列之DI的原理及手动实现 Spring系列之AOP的原理及手动实现 Spring系列之手写注解与配置文件的解析 引言 在前面的几个章节中我们已经简单的完成了一个简易版的spring,已经包括容器,依赖注入,AOP和配置文件解析等功能.这一节我们来实现一个自己的springMvc. 关于MVC/SpringMVC springMvc是一个基于mvc模式的web框架,SpringMVC框架是一种提供了MVC(模型 - 视图 - 控制器)架…
一.为什么要提供配置的方法 经过前面的手写Spring IOC.手写Spring DI.手写Spring AOP,我们知道要创建一个bean对象,需要用户先定义好bean,然后注册到bean工厂才能创建一个bean对象.代码如下: static PreBuildBeanFactory bf = new PreBuildBeanFactory(); GenericBeanDefinition bd = new GenericBeanDefinition(); bd.setBeanClass(ABe…
前言 前面我们用 12 篇文章详细讲解了 Vue2 的框架源码.接下来我们就开始手写 Vue 系列,写一个自己的 Vue 框架,用最简单的代码实现 Vue 的核心功能,进一步理解 Vue 核心原理. 为什么要手写框架 有人会有疑问:我已经详细阅读过框架源码了,甚至不止两三遍,这难道还不够吗?我自认为对框架的源码已经很熟悉了,我觉得没必要再手写. 有没有必要手写框架 这个事情,和 有没有必要阅读框架源码 的答案一样.看你的出发点是什么. 读源码 如果你是抱以学习的态度,那不用说,阅读框架源码肯定是…
这是sproto系列文章的第三篇,可以参考前面的<为sproto添加python绑定>.<为python-sproto添加map支持>. sproto是云风设计的序列化协议,用于高效的打包解包游戏协议数据.有点类似Google推出的protobuf,但是比protobuf要快.结构上有点类似cap'n Proto,但是没有打算直接使用其作为内存组织结构,因此少了数据对齐的部分.目前使用场景主要是在游戏客户端和服务器端的RPC协议上. sproto比较有趣的一点,是可以自描述,用sp…
tensorflow笔记(四)之MNIST手写识别系列一 版权声明:本文为博主原创文章,转载请指明转载地址 http://www.cnblogs.com/fydeblog/p/7436310.html 前言 这篇博客将利用神经网络去训练MNIST数据集,通过学习到的模型去分类手写数字. 我会将本篇博客的jupyter notebook放在最后,方便你下载在线调试!推荐结合官方的tensorflow教程来看这个notebook! 1. MNIST数据集的导入 这里介绍一下MNIST,MNIST是在…
tensorflow笔记(五)之MNIST手写识别系列二 版权声明:本文为博主原创文章,转载请指明转载地址 http://www.cnblogs.com/fydeblog/p/7455233.html 前言 这篇博客将用tensorflow实现CNN卷积神经网络去训练MNIST数据集,并测试一下MNIST的测试集,算出精确度. 由于这一篇博客需要要有一定的基础,基础部分请看前面的tensorflow笔记,起码MNIST手写识别系列一和CNN初探要看一下,对于已经讲过的东西,不会再仔细复述,可能会…
上周在搜索关于深度学习分布式运行方式的资料时,无意间搜到了paddlepaddle,发现这个框架的分布式训练方案做的还挺不错的,想跟大家分享一下.不过呢,这块内容太复杂了,所以就简单的介绍一下paddlepaddle的第一个"hello word"程序----mnist手写数字识别.下一次再介绍用PaddlePaddle做分布式训练的方案.其实之前也写过一篇用CNN识别手写数字集的文章,是用keras实现的,这次用了paddlepaddle后,正好可以简单对比一下两个框架的优劣.  …
缘起 标题有点夸张,并不是完全放弃antd-table,毕竟在react的生态圈里,对国人来说,比较好用的PC端组件库,也就antd了.即便经历了2018年圣诞彩蛋事件,antd的使用者也不仅不减,反而有所上升. 客观地说,antd是开源的,UI设计得比较美观(甩出其他组件库一条街),而且是蚂蚁金服的体验技术部(一堆p7,p8,p9,基本都是大牛级的)在持续地开发维护,质量可以信任. 不过,antd虽好,但一些组件在某一些场景下,是很不适用的.例如,以表格形式无限滚动地展示大量数据(1w+)时,…
目录 Spring系列之IOC的原理及手动实现 Spring系列之DI的原理及手动实现 Spring系列之AOP的原理及手动实现 引入 在前面我们已经完成了IOC,DI,AOP的实现,基本的功能都已经完成了,我们的手写框架也能勉强使用起来.为了让我们的框架能够使用起来比较简单,这一节我们来实现注解和xml的配置. tips 本章的xml和注解的功能都是为实现bean的创建,其他如aop等功能可仿造实现. 为什么要加注解和xml配置 如果有同学测试过我们写好的框架,可能会感受到使用起来非常麻烦,在…
实现 new 方法 /* * 1.创建一个空对象 * 2.链接到原型 * 3.绑定this值 * 4.返回新对象 */ // 第一种实现 function createNew() { let obj = {} // 1.创建一个空对象 let constructor = [].shift.call(arguments) // let [constructor,...args] = [...arguments] obj.__proto__ = constructor.prototype // 2.…
目录 一.实现原理 二.代码实战 三.测试 最近线上排查问题时候,发现请求太多导致日志错综复杂,没办法把用户在一次或多次请求的日志关联在一起,所以就利用SpringBoot+Logback手写了一个简单的链路追踪,下面详细介绍下. 一.实现原理 Spring Boot默认使用LogBack日志系统,并且已经引入了相关的jar包,所以我们无需任何配置便可以使用LogBack打印日志. MDC(Mapped Diagnostic Context,映射调试上下文)是log4j和logback提供的一种…
TLDR: 我正在传播2个数据集: Kannada-MNIST数据集:28x28灰度图像:60k 训练集 | 10k测试集 Dig-MNIST:28x28灰度图像:10240(1024x10)(见下图) 虽然这些数字符号是坎纳达(Kannada)语言,但是Kannada-MNIST数据集是为了替代MNIST数据集. 此外,我正在分发一个用同一种语言(主要是该语言的非本地用户)编写的10k个手写数字的额外数据集Dig-MNIST,可以用作额外的测试集. 资源列表: GitHub?: https:/…
欢迎大家关注我们的网站和系列教程:http://panchuang.net/ ,学习更多的机器学习.深度学习的知识! 目录: 导读 MNIST数据集 数据处理 单层隐藏层神经网络的实现 多层隐藏层神经网络的实现 导读 就像我们在学习一门编程语言时总喜欢把"Hello World!"作为入门的示例代码一样,MNIST手写数字识别问题就像是深度学习的"Hello World!".通过这个例子,我们将了解如何将数据转化为神经网络所需要的数据格式,以及如何使用TensorF…
目录 数据挖掘入门系列教程(八)之使用神经网络(基于pybrain)识别数字手写集MNIST 下载数据集 加载数据集 构建神经网络 反向传播(BP)算法 进行预测 F1验证 总结 参考 数据挖掘入门系列教程(八)之使用神经网络(基于pybrain)识别数字手写集MNIST 在本章节中,并不会对神经网络进行介绍,因此如果不了解神经网络的话,强烈推荐先去看<西瓜书>,或者看一下我的上一篇博客:数据挖掘入门系列教程(七点五)之神经网络介绍 本来是打算按照<Python数据挖掘入门与实践>…
前言 接下来就要正式进入手写 Vue2 系列了.这里不会从零开始,会基于 lyn-vue 直接进行升级,所以如果你没有阅读过 手写 Vue 系列 之 Vue1.x,请先从这篇文章开始,按照顺序进行学习. 都知道,Vue1 存在的问题就是在大型应用中 Watcher 太多,如果不清楚其原理请查看 手写 Vue 系列 之 Vue1.x. 所以在 Vue2 中通过引入了 VNode 和 diff 算法来解决该问题.通过降低 Watcher 的粒度,一个组件对应一个 Watcher(渲染 Watcher…
前言 上一篇文章 手写 Vue2 系列 之 编译器 中完成了从模版字符串到 render 函数的工作.当我们得到 render 函数之后,接下来就该进入到真正的挂载阶段了: 挂载 -> 实例化渲染 Watcher -> 执行 updateComponent 方法 -> 执行 render 函数生成 VNode -> 执行 patch 进行首次渲染 -> 递归遍历 VNode 创建各个节点并处理节点上的普通属性和指令 -> 如果节点是自定义组件则创建组件实例 ->…