- 博客(31)
- 收藏
- 关注
原创 call、apply、bind的区别和实现
这三个方法都是用来改变函数中this指向的。其中call和apply作用完全一样applycallbindcallbind。
2024-04-19 11:37:34
244
1
原创 vue3响应式原理 - 设计一个完善的响应式系统(1)
响应式数据简单来说是指一个当一个数据发生变化时页面也会随即更新变化后的数据,当从页面更改数据时同样的数据也能更新。如上述代码所示,我们希望达到的目标是当obj.text值发生变化时,effect函数会重新执行。所以核心就是拦截一个对象的读取和设置操作。在vue2中,只能通过ES2015之前的函数实现。在vue3中采用ES2015+的代理对象Proxy来实现。本文主要讨论Vue3响应式系统,因此我们采用Proxy来实现响应式系统。
2024-04-16 10:31:41
148
原创 vue3封装Hooks实现更好的逻辑复用
在构建前端应用中,经常会需要复用公共任务的逻辑。例如在一个管理后台中会存在很多的表格,其中的增删查改的内容就是可复用的部分,我们在写页面的过程中如果不封装的话会发现我们经常复制/粘贴。在Vue3的Composition API中引入了Hooks的概念,为我们提供了更灵活和可组合的代码组织方式。其中的一个重要概念就是Hooks。Hooks是一种函数,以use开头,用于封装一些可复用的逻辑。
2024-04-08 11:11:49
1840
原创 【js手撕经典】防抖节流
防抖是指,短时间频繁触发fn,只执行最后一次,可以有效提高性能,减少服务器压力原理:函数在n秒后再执行,如果n秒内被触发,重新计时,保证最后一次触发事件n秒后才执行。
2023-12-18 13:06:17
46
1
原创 [js手撕经典]手撕instanceof
当我们使用 obj instanceof Constructor 进行判断时,JavaScript 引擎会从 obj 的原型链上查找 Constructor.prototype 是否存在。instanceof原理:通过判断对象的原型是否等于构造函数的原型来进行类型判断。来确定对象是否属于某个类或构造函数。
2023-12-15 21:12:50
36
原创 JavaScript-变量、作用域和内存问题
本文是JavaScript高级程序设计中关于变量、作用域和内存问题一章讲解内容的读书笔记,以及代码参考。
2023-12-15 16:14:34
39
原创 小厂面试总结(面试问题篇)
上一篇笔记记录了笔试内容,本篇笔记来记录一下面了两个小厂的面试问题总结吧。希望下一次面试可以成功避开这些坑,回答的更好一些。两个面试感觉都是一上来就开始撕项目经历,根据项目来深入的问一些问题。
2023-12-13 20:32:29
83
1
原创 前端工程化 -- webpack
webpack是一个用于JavaScript应用程序的静态打包工具当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个 依赖图,将项目所需的每一个模块组合成一个或多个bundles(均为静态资源)用于展示内容。静态模块:指开发阶段,可以被webpack直接引用的资源(可以直接被获取打包进bundle.js的资源)当webpack处理应用程序时,它会在内部构建一个依赖图,此依赖图对应映射到项目所需的每个模块(不再局限js文件),并生成一个或多个bundle。
2023-12-10 21:27:22
73
1
原创 ES6实训报告
以往在JavaScript中,定义变量通常使用的var关键词,由于JavaScript的,导致var变量无论在何处声明,都会被提升到当前作用域的顶部。以上的代码在函数体中使用var声明了变量num和notNum,由于,变量提升到当前作用域的顶部,控制台报错变量未定义。由此可见,当传入参数为false时,num变量未被复制,因此控制台输出undefined与此同时,var关键字声明的变量可以上述代码如果运行,将会卡死。因为在两层for循环中,我们使用了同一变量i进行赋值,代码在执行过程中,第二层的for。
2023-07-13 20:52:21
99
1
原创 vuex使用
state属性是vuex中用于存放组件之间共享的数据。通常将一些组件之间共享的状态主要存放在state属性中。vuex使用单一状态树,用一个对象就包含了全部的应用层级状态。这意味着每个应用仅仅包含一个store实例。单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。
2023-07-11 20:57:47
67
原创 Vue组件间通信方式
子组件 --> 父组件A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(事件的回调在A中)。或示例代码:父组件App.vuereturn {console . log('这里是App收到的:' + name , params);子组件School.vue。
2023-07-10 20:24:40
173
1
原创 vue实训练习报告
组件自定义事件是一种组件间通信的方式,用于子组件 ==>父组件使用场景:当子组件想传数据给父组件时,在父组件中给子组件绑定自定义事件,事件的回调在父组件中。示例代码:App.vue-- 通过父组件给子组件绑定一个自定义事件实现:子给父传递数据(第一种写法,使用@或v-on) -->data() {return {msg:'你好啊!',},methods: {console.log('App收到了学生名:',name,params)
2023-07-09 22:25:15
822
2
原创 linux命令手册
:列出文件和目录:显示当前目录的绝对路径:改变当前工作目录:创建新目录:删除目录:复制文件和目录:移动文件和目录(重命名):删除文件和目录:显示文件内容:分屏显示文件:分屏显示文件:显示头几行:查看文件尾部:搜索文件内容:文件查找:显示进程状态:实时显示系统进程状态:文件内容统计:查看手册命令:清屏当在Linux系统中使用命令行时,通配符是一个非常有用的工具,它允许用户通过模式匹配来匹配多个文件或目录,下面是常用的通配符及用法::匹配任意数量的字符(包括零个字符),例如:这个命令会列出当前目录下所有扩展名
2023-04-19 22:24:52
713
原创 蓝桥云课ES6
本节我们来挑战一道大厂面试真题 —— 生成数组。伪数组,也叫类数组,英文名称 Array-like,顾名思义,就是像数组但不是数组,有以下特征:具有 length 属性。可通过索引访问伪数组里的元素。不能调用数组上的方法。本节我们来挑战一道大厂面试真题 —— 实现数组去重。本节我们来挑战一道大厂面试真题 —— 实现模板字符串解析。本节我们来挑战一道大厂面试真题 —— 实现 async 函数。我们经常会看到各种颜色的灯光,本题我们将实现一个颜色会变化的灯的效果。
2023-03-04 16:47:35
272
原创 蓝桥杯js复习
JavaScript是一种基于对象和时间驱动的简单描述性语言。从服务器端被下载到客户端,由浏览器执行。特点:一般用来编写客户端的脚本。主要是用来在 HTML 页面中添加交互行为。是一种解释性语言,边解释边执行。
2023-02-25 12:39:13
260
原创 HTML+CSS蓝桥杯复习
form 标签有两个重要的属性,action 和 method 属性,其中 action 的属性值是表单提交的地址,method 的属性值是提交的方法。其中,一般的标签元素不加任何定位属性时,默认都属于静态定位,静态定位在页面的最底层属于标准流(普通流),在页面中没有特殊的操作方式和显示效果,在本章节中会重点给同学们讲解其他三种定位方式。如果指定侧轴大小的属性值为 auto,则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照 min/max-width/height 属性的限制。
2023-02-24 13:58:40
1970
原创 js Web APIs
js Web APIsDOM获取元素获取页面元素的方法:1、根据ID获取 2、根据标签名获取 3、通过HTML5新增的方法获取 4、特殊元素获取根据ID获取使用getElementByld()方法可以获取带有ID的元素对象,返回值为一个元素对象document.getElementById('id名');使用getElementsByTagName获取某些元素,返回的是获取过来的元素对象的集合// 返回的是 获取过来元素对象
2022-04-24 10:29:23
681
1
原创 JavaScript
JavaScript一、初识jsJavaScript输入输出语句方法说明归属alert(msg)浏览器弹出警示框浏览器console.log(msg)浏览器控制台打印输出信息浏览器prompt(info)浏览器弹出输入框,用户可以输入浏览器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta htt
2022-04-24 10:28:09
414
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人