franki Blog

make a small progress every day

探究Promise

要分析Promise之前，先来了解下Promise的应用场景。 先说结果：Promise非常适用于异步场景，或者其他需要状态保存的场景。 我们来看看MDN对于Promise的定义： Promise 对象用于表示一个异步操作的最终完成（或失败），及其结果值 看看具体使用： const promise1 = new Promise(function(resolve, rejec...

Posted by franki on March 8, 2020

virtual dom 简单实现

抽丝剥茧

从事前端开发工作以来，一直使用 React 作为首选框架，熟练使用没问题，然而却只限于用的地步，对于其核心精髓 virtual dom，也就是听过，知道一些概念性的理念，只限于此。早就有想法，进入其真实世界，抽丝剥茧，今天就好好尝试从零到一实现一个极简的 virtual dom。 先声明，这是一个极简的 virtual dom，可能与 react 使用的 virtual dom或者与 vu...

Posted by franki on February 21, 2020

细读你不知道的JavaScript中卷

发现未知

第一部分 类型和语法 第1章 类型 JavaScript 有七种内置类型 null undefined boolean number string object symbol (es6新增) 可以使用 typeof 运算符来查看值的类型，它返回的类型的字符串值。一般来说，它们的类型与它们的数值都是一一对应的。 需要注意的是： typeof null...

Posted by franki on February 2, 2020

细读你不知道的JavaScript上卷

发现未知

第一部分 作用域和闭包 第1章 作用域是什么 几乎所有编程语言最基本的功能，就是能够提供存储变量当中的值，并且可以对这个值进行访问或修改。但是有没有想过这些问题？这些变量存储在哪里？程序如何找到它们？ 这些问题需要一套设计良好的规则来存储变量，并且之后可以方便地找到这些变量。这套规则就叫做作用域。 接着，思考下在哪里制定作用域规则呢？ 答案揭晓前，先来了解下， 1.1 编译原理：...

Posted by franki on January 20, 2020

总结2019展望2020

总结2019 还没好好的感受，2019就这样溜走了！ 如果要用几个关键词总结2019，我首先会想到快速 茫然 挫败 成长 快速 快速 - 特指时间的‘快’，往昔从未觉得年龄的增长会带来如何的焦虑，如今正向自己一步步靠近，以前是一天一天度过，如今日子按月算，1月完了2月开始，3月完了4月开始，如此反复。终于到了2019的最后一个月才发现一年到头了，时间犹如白驹过隙，花有重开日...

Posted by franki on January 1, 2020

lodash之cloneDeep

好的实现总是让人向往 工作中经常使用lodash，一直有这样的感受‘怎么可以这么好用’，一个简单的调用就可以完成复杂的操作，令自己产生想要深入了解lodash，尤其是lodash深拷贝部分的知识。 下面是本人这几天整理的源码笔记，文笔有限，可能出现错字、语句不顺等状态，还请谅解。 cloneDeep 调用 首先，在lodash中要进行深拷贝是如何使用的？ // ./clon...

Posted by franki on December 20, 2019

探析axios源码实现

axios流程图 axios 项目目录概览 ├── /dist/ # 项目输出目录 ├── /lib/ # 项目源码目录 │ ├── /cancel/ # 定义取消功能 │ ├── /core/ # 一些核心功能 │ │ ├── Ax...

Posted by franki on November 26, 2019

从0到1实现一个简易版的redux

背景：工作中经常使用redux，但是一直有个想法，想摸透里面的来龙去脉，虽然知道里面运用了观察者模式，但是苦于没有看源码，一直不知道里面的代码组合，今天终于动手，到redux源码中去徜徉，揣摩优秀的设计，尝试学着造一个简易redux 一般情况下，我们可以通过发布订阅实现一个状态管理器 最简单的状态管理器 let state = { count: 1 }; let li...

Posted by franki on November 13, 2019

spa 路由简易原理

spa 路由简易原理及其实现 浏览器 history 和 hash hash 具体指的是浏览器url # 后面的内容，例如 https://www.google.com/#abc 的hash值为abc 浏览器会记录hash的变化，以至于前进后退可以使用 具体表现： 1 hash 变化可以随便改变更新url，不会引起服务器的更新，因为hash的变化并不会引起http之类的请求，所以h...

Posted by franki on October 31, 2019

彻底搞懂词法分析、语法分析、静态作用域、动态作用域

一 词法分析 词法分析到底是何物？ 相信大家在工作生活中或多或少都听说过，但是却少有人真正懂得词法分析到底有何功用，怎么用，这里面的到底有多少奥秘，值得我们每一个从事前端开发者都需要好好研究下。 首先我们来看看常见编程语言是如何运行的？ 编程语言分为编译型语言和解释性语言。 编译型语言（如java）的编译过程是： 词法分析 > 语法分析 > 语意检查 > ...

Posted by franki on September 20, 2019

FEATURED TAGS
前端开发 H5 JavaScript 设计模式 browser jQuery 源码分析 生活 leetcode Array Stack Queue Linked List 剑指offer Binary Search Tree Binary Tree Breadth-First Search Depth-First Search String Set Binary Search Sliding Window Backtracking Dynamic Programming Two Pointers Union Find Sort Bit Operation Recursion Map Graph Search Hash LinkedList 复盘 QuickSort Trie Design MinHeap Traverse Min Heap Node.js BackEnd SQL MySQL Design Patterns Network 计算机网络 Python SVG
ABOUT ME

学如逆水行舟，不进则退

FRIENDS