hero image

总想写点什么

你自己愿意躺下,没有任何人能够扶你起来——列夫·托尔斯泰

数据可视化
中国地图数据可视化,3级下钻
小程序工程化
webpack打包原生微信小程序
CSDN博客
我的CSDN博客
akutil
akutil
js常用功能封装
阅读源码

阅读源码

  • why
  • what
  • how

阅读源码是一种高效的学习方式,通过阅读优秀的源码,能提高自己的编程水平。

why必要性

阅读源码等于学习他人的经验。编程需要非常多的动手实践,我们往往简单学习了一门编程语言,就能入门,就能写出 “Hello World!”,而且迫不及待地写下一个demo,“Todo List”。就好像我们学汉字一样,很容易就学会了常用汉语300词,但是我们能写出《唐诗宋词300首》吗?答案是否定的。为了提供文学水平,大量阅读经典文学作品就很有必要。同理,为了提供编程水平,大量阅读优秀的源码也是非常有必要的。


Mr.Hotsuitor大约 2 分钟source codesource codejavascript
javascript

javascript

基础知识

JavaScript获取DOM元素位置和尺寸大小

基础概念

为了方便理解,我们需要了解几个基础概念,每个HTML元素都有下列属性

元素内尺寸 元素外尺寸 滚动尺寸
offsetWidth clientWidth scrollWidth
offsetHeight clientHeight scrollHeight
offsetLeft clientLeft scrollLeft
offsetTop clientTop scrollTop

Mr.Hotsuitor大约 3 分钟javascriptjavascript
vue简单实现理解原理

vue简单实现理解原理

核心原理理解 一步步读懂vue源码

阅读源码心得

  • 读源码,先从整体入手,不必一开始拘泥于细节。
  • 整体阅读下来,了解主要流程,每一模块是干什么的即可,需要的时候再回台看实现
  • 读细节的时候,写代码注释,思考每个代码块的功能,理解作者为什么这样写,哪些是可以借鉴的

Mr.Hotsuitor小于 1 分钟vuevuejavascript
二叉树

二叉树

第一层是1个根节点,最多有2个字节点,分别是左子节点和右子节点,也可以没有字节点的树,第i层最多有 个节点。


Mr.Hotsuitor大约 1 分钟算法算法algo二叉树
递归

递归,就是函数调用自身。 条件:

  • 递归终止条件。防止无限递归下去,导致内存溢出,程序出错。
  • 递归条件。让函数继续递归的条件。

尾递归

尾递归,即在函数尾位置调用自身(或是一个尾调用本身的其他函数等等)。尾递归也是递归的一种特殊情形。

尾递归在普通尾调用的基础上,多了2个特征:

  • 在尾部调用的是函数自身
  • 可通过优化,使得计算仅占常量空间

实现阶乘,普通递归形式:

function factorial(n) {
  if (n === 1) return 1;
  return n * factorial(n - 1);
}

factorial(5) // 120

Mr.Hotsuitor小于 1 分钟javascript递归
XMLHttpRequest 发送请求

XMLHttpRequest 是一个内建的浏览器对象,它允许使用 JavaScript 发送 HTTP 请求。

虽然它的名字里面有 “XML” 一词,但它可以操作任何数据,而不仅仅是 XML 格式。我们可以用它来上传/下载文件,跟踪进度等。

现如今,我们有一个更为现代的方法叫做 fetch,它的出现使得 XMLHttpRequest 在某种程度上被弃用。

在现代 Web 开发中,出于以下三种原因,我们还在使用 XMLHttpRequest:

历史原因:我们需要支持现有的使用了 XMLHttpRequest 的脚本。 我们需要兼容旧浏览器,并且不想用 polyfill(例如为了使脚本更小)。 我们需要做一些 fetch 目前无法做到的事情,例如跟踪上传进度。


Mr.Hotsuitor小于 1 分钟javascriptXMLHttpRequestajax
实现一个bind函数

实现 bind 函数可以分解为三步:

  • 修改 this 指向
  • 动态传递参数
// 方式一:只在bind中传递函数参数
fn.bind(obj,1,2)()

// 方式二:在bind中传递函数参数,也在返回函数中传递参数
fn.bind(obj,1)(2)

Mr.Hotsuitor小于 1 分钟javascriptbind
父子组件传值

父子组件传值

vue3文档

父组件

<template>
  <child :title="title"></child>
</template>
<script setup lang="ts">
import {ref} from 'vue'
const title = ref('父传标题')

</script>

Mr.Hotsuitor小于 1 分钟
事件循环机制

Event Loop(事件循环)

它是一个在 js 引擎等待任务执行任务进入休眠状态等待更多任务这几个状态之间转换的无限循环

js是单线程执行

执行过程:

  1. 预编译阶段;
  2. 执行阶段(自上而下,顺序执行)

预编译阶段: 进行变量和函数的声明相关操作

执行阶段:

  1. 自上而下,顺序执行
  2. 遇到宏任务,加入宏任务队列,
  3. 继续往下执行,遇到微任务,加入微任务队列,
  4. 当前 js stack 顺序执行完,等待微观任务执行,
  5. 执行 microtasks 队列的头任务,按顺序出队列继续执行,
  6. 如果执行完当前微任务,遇到新的 microtasks,继续加入 microtasks queue,等待微任务队列执行完毕。
  7. 开始执行宏任务队列,如果遇到 microtasks,跳到步骤1,重复循环。
  8. 所有宏任务队列执行完毕,进入 js引擎 等待任务状态。

Mr.Hotsuitor大约 1 分钟javascriptEventLoop事件循环
2
3
4
5
...
10