
前端学习笔记
文章平均质量分 59
前端学习笔记
学不会只能哭
要毕业了,希望大佬们捞一下www,写的文章就是用来做笔记的,比较随意。有内推的大佬可以帮帮我吗?我的邮箱是tony54856476@163.com
展开
-
css水平垂直居中方法
子元素定宽高和不定宽高两种形式。原创 2023-03-06 02:10:14 · 256 阅读 · 0 评论 -
伪类,伪元素
CSS 中的伪类和伪元素是额外的选择器,用于选择页面中的元素的特殊状态或者生成额外的内容。伪类和伪元素可以结合使用,为页面元素提供更多的样式控制选择器,使得样式更加灵活和强大。原创 2023-03-06 02:11:20 · 253 阅读 · 0 评论 -
js中基本数据类型null和undefind区别
需要注意的是,在比较变量是否为undefined时,最好使用typeof运算符,因为在某些情况下,变量可能会被覆盖为undefined值。表示一个未定义的值,用于表示一个变量没有被初始化,或者一个属性不存在于对象中。需要注意的是,在JavaScript中,typeof null返回"object",这是一个历史遗留问题。是可以互换使用的,但是需要注意它们的区别,以免造成代码错误。都表示“没有值”,但它们的语义和用法有些不同。在代码中,当需要表示变量没有值时,应该优先使用。在 JavaScript 中,原创 2023-03-06 01:30:05 · 341 阅读 · 0 评论 -
手写call,apply,bind[手写代码]
在JavaScript中,callapply和bind都是用来改变函数执行上下文的方法,它们都能够显式地指定函数运行时的this值。原创 2023-03-06 01:30:04 · 175 阅读 · 0 评论 -
script中的defer和async
告诉浏览器异步加载该脚本,不阻塞页面的加载。这意味着,浏览器可以在加载页面的同时加载该脚本,不需要等待页面完全加载完成。这种情况下,脚本的执行顺序不能保证,因为它们是在不同的线程中加载的。:告诉浏览器在页面完全加载完成之后再加载该脚本。这意味着,当页面完成渲染时,脚本才会被加载。它保证脚本会在 DOM 加载完成之后执行,不会影响页面的其他部分。总的来说,在确保不阻塞页面加载的前提下,如果希望保证脚本的执行顺序,可以使用。是两种不同的方式,用来告诉浏览器如何加载脚本。如果不关心脚本的执行顺序,可以使用。原创 2023-03-06 01:19:31 · 167 阅读 · 0 评论 -
js 防抖和节流[手写代码]
防抖和节流是前端开发中常用的优化方法,用于控制函数的执行频率。原创 2023-03-06 01:18:59 · 159 阅读 · 0 评论 -
js compose函数组合[手写代码]
compose函数是一种函数组合的方法,允许把多个函数组合在一起,并从右到左依次执行。这种方法的好处是可以从右到左组合函数,使代码更加简洁,并且可以使多个函数共享一个参数。原创 2023-03-06 01:18:11 · 143 阅读 · 0 评论 -
v-show/v-if 使用场景和区别
v-if由false变为true的时候,会触发被卸载组件的beforeCreate、create、beforeMount、mounted钩子,由true变为false的时候会触发组件的beforeDestory、destoryed方法;v-if的切换开销大,如果初始条件是false,则不用初次渲染,不频繁切换甚至不会切换时,推荐使用v-if。v-show的切换开销小,但是会有初次渲染的开销,适用于频繁切换的场景。):v-show用在template上无效的,v-if有效。能够提高应用的性能。原创 2023-03-05 21:36:55 · 408 阅读 · 0 评论 -
v-for/v-if使用时的注意点
例如,如果您在循环中使用v-if来控制显示某些元素,则每次渲染时都会重新计算该条件。与此相反,如果您使用计算属性进行过滤,则只有当数据改变时才会重新计算。当在循环中出现条件时,使用计算属性进行一次过滤是一种有效的方法来缓解问题。这是因为计算属性是在数据改变时自动更新的,而不是在每次渲染时都重新计算。因为v-for的优先级比v-if高,如果放在一起用,也是先执行循环渲染一遍,之后在去v-if判断。这样的写法会导致每个 li 元素都需要进行判断和循环,可能会增加处理量,降低性能。这样就存在性能问题。原创 2023-03-05 21:24:04 · 317 阅读 · 0 评论 -
对VUE的理解
但在编写的时候,还是会分开写(页面片段),然后在交互的时候由路由程序动态载入,单页面的页面跳转,仅刷新局部资源。调试方便,在出现问题的时候,可以用排除法直接移除组件,或者根据报错的组件快速定位问题,每个组件之间低耦合,职责单一,所以逻辑排查会比分析整个系统要简单。降低整个系统的耦合度,在保持接口不变的情况下,我们可以替换不同的组件快速完成需求,例如输入框,可以替换为日历、时间、范围等组件作具体的实现。提高可维护性,由于每个组件的职责单一,并且组件在系统中是被复用的,所以对代码进行优化可获得系统的整体升级。原创 2023-03-05 21:20:11 · 269 阅读 · 0 评论 -
浏览器的渲染过程
对于每个可见的节点,找到CSSOM树中对应的规则,并应用它们。根据每个可见节点以及其对应的样式,组合生成渲染树。从DOM树的根节点开始遍历每个可见节点。原创 2023-03-05 21:14:36 · 69 阅读 · 0 评论 -
语义化标签与seo
CSS3 中的盒模型有以下两种:标准盒模型、IE(替代)盒模型。CSS 盒模型是指在网页布局中,每个 HTML 元素都被表示为一个矩形的盒子。这个盒子包含了元素的内容、内边距、边框和外边距。paddingbordermarginCSS 盒模型允许开发者更好地控制网页布局,使元素在页面上具有更加准确的位置和尺寸。原创 2023-03-05 21:15:24 · 203 阅读 · 0 评论 -
css盒模型
CSS3 中的盒模型有以下两种:标准盒模型、IE(替代)盒模型。CSS 盒模型是指在网页布局中,每个 HTML 元素都被表示为一个矩形的盒子。这个盒子包含了元素的内容、内边距、边框和外边距。paddingbordermarginCSS 盒模型允许开发者更好地控制网页布局,使元素在页面上具有更加准确的位置和尺寸。原创 2023-03-05 21:09:16 · 78 阅读 · 0 评论 -
js 防抖和节流[手写代码]
防抖和节流是前端开发中常用的优化方法,用于控制函数的执行频率。原创 2023-03-01 13:08:27 · 713 阅读 · 0 评论 -
js compose函数组合[手写代码]
compose函数是一种函数组合的方法,允许把多个函数组合在一起,并从右到左依次执行。这种方法的好处是可以从右到左组合函数,使代码更加简洁,并且可以使多个函数共享一个参数。原创 2023-03-01 13:05:07 · 520 阅读 · 0 评论 -
jsArray 方法辨析[手写代码]
该方法接受一个回调函数作为参数,这个回调函数会在遍历过程中执行,并且它接收三个参数:当前元素,当前索引和原数组。方法也是遍历数组的每一个元素,对每个元素执行指定的操作,并将操作后的结果存储在一个新数组中。该方法接受一个回调函数作为参数,这个回调函数会在遍历过程中执行,并且它接收三个参数:当前元素,当前索引和原数组。JavaScript中的reduce()是一种数组方法,它允许对数组的每个元素执行一个指定的函数,并将结果缩减为单个值。上面的代码将原数组中的每个元素乘以2,并将结果存储在一个新数组中。原创 2023-03-01 13:04:12 · 478 阅读 · 0 评论 -
js拷贝(浅拷贝,深拷贝)
我们将异步函数声明为 async 函数,这样就可以在该函数内使用 await 关键字。在上面的代码中,我们使用了 fetch 函数发送了一个请求,并使用 await 表达式等待请求完成。然后,我们使用了 response.json() 方法将请求的结果转换为 JSON 格式,并使用 await 表达式等待转换完成。在 JavaScript 引擎内部,Async/Await 实际上是通过生成 Generator 函数并使用该函数来处理异步操作的。异步函数是通过在函数前面添加 async 关键字来声明的。原创 2023-02-28 14:48:08 · 1254 阅读 · 0 评论 -
java异步方法 Async/Await
我们将异步函数声明为 async 函数,这样就可以在该函数内使用 await 关键字。在上面的代码中,我们使用了 fetch 函数发送了一个请求,并使用 await 表达式等待请求完成。然后,我们使用了 response.json() 方法将请求的结果转换为 JSON 格式,并使用 await 表达式等待转换完成。在 JavaScript 引擎内部,Async/Await 实际上是通过生成 Generator 函数并使用该函数来处理异步操作的。异步函数是通过在函数前面添加 async 关键字来声明的。原创 2023-02-27 02:23:14 · 2340 阅读 · 1 评论 -
JavaScript 判断变量的类型的方法
方法是一个很强大的方法,它可以识别出所有的数据类型,并且返回类型的字符串标识,如 “[object Number]”、“[object String]”、“[object Array]” 等。运算符是一个比较特殊的方法,它可以判断一个变量是否是某个构造函数的实例,因此能够很好地识别出数组、日期、正则表达式等类型。在实际开发中,我们可以根据需要选择不同的方法来判断变量的类型,如果需要识别所有的数据类型,则可以使用。以上是 JavaScript 中判断变量类型的几种方法,使用不同的场景需要使用不同的方法。原创 2023-02-27 01:57:31 · 1341 阅读 · 0 评论 -
Vuex属性与使用方法
在这个示例中,我们创建了一个名为message的状态属性,并定义了一个名为setMessage的mutation来更新该属性的值。在发送组件中,我们将message的值绑定到一个文本输入框,并创建一个名为setMessage的方法,该方法将使用dispatch方法触发Vuex action来更新状态值。它通过一个单一的状态树(store)管理整个应用程序的状态,使得状态的管理变得更加简单和一致。在接收组件中,我们使用计算属性来获取Vuex中的值,以便我们可以在模板中显示它。原创 2023-02-27 01:46:59 · 618 阅读 · 0 评论 -
Margin折叠与BFC
具体来说,如果兄弟元素A的margin-bottom与兄弟元素B的margin-top相遇,则它们的margin值将合并为一个较大的margin值。例如,如果兄弟元素A的margin-bottom为30px,而兄弟元素B的margin-top为20px,则合并后的margin值将为30px。 BFC(Block Formatting Context)是 CSS 中的一种渲染模式,它是一个独立的渲染区域,具有一定的隔离性,可以让处于 BFC 内部的元素避免影响到外部元素的布局和样式。原创 2023-02-27 01:18:52 · 726 阅读 · 0 评论 -
前端需要理解的跨域问题
JSONP的实现原理是利用script标签的跨域能力,在服务端将数据包装成一个函数的调用,然后通过script标签的src属性发送到客户端,客户端接收到响应后会自动执行该函数。需要注意的是,JSONP只能进行GET请求,并且存在安全隐患,因为服务端返回的数据会直接执行在前端页面中,如果返回的数据被篡改,可能会导致安全问题。WebSocket是一种全双工通信协议,它建立在TCP协议之上,通过一个HTTP请求进行握手,建立连接后,服务器端和客户端可以在任何时候相互发送数据,从而实现跨域通信。原创 2023-02-26 01:10:29 · 689 阅读 · 0 评论 -
Vue组件间通信
Props和Events(主要用于父子组件间通讯),$emit 和 $on,$refs,Vuex方式,Bus(事件总线)方式,Provide 和 Inject原创 2023-02-25 19:24:27 · 896 阅读 · 0 评论 -
[精讲]promise对象常用方法,与手写模拟
这意味着,当一个宏任务中包含了多个微任务时,这些微任务会在该宏任务执行完成后被依次执行,而不是在该宏任务中立即执行。在 constructor 构造函数中,定义了 Promise 的三种状态:PENDING(进行中)、FULFILLED(已成功)、REJECTED(已失败),以及 Promise 对象的属性,包括状态、成功结果、失败原因、保存成功回调函数的数组和保存失败回调函数的数组。当一个宏任务执行完成后,才会去检查是否存在微任务,如果存在,则会依次执行微任务队列中的任务,直到微任务队列为空。原创 2023-02-25 04:40:21 · 1201 阅读 · 0 评论 -
Vue数据响应式原理:Observe、Dep、Watcher
Vue数据响应式是指当Vue实例的数据发生变化时,页面中相应的内容也会随之更新。Vue中数据响应式的实现依赖于Observe、Dep和Watcher这三个核心概念。其中,Observe负责将普通对象转换成响应式对象,Dep管理Watcher并通知更新,Watcher用于监听数据变化并触发相应的回调函数。Observe通过使用Object.defineProperty()方法,将对象的属性转换成getter和setter,从而实现数据的响应式。Dep中存放着所有观察该响应式对象的Watcher,当数据发生变化原创 2023-02-25 03:08:51 · 3130 阅读 · 0 评论 -
[精讲]JavaScript中的闭包:优点、原理和应用(柯里化,Vue数据响应式原理:Observe、Dep、Watcher三剑客)[手写代码]
闭包简介闭包形成的原理闭包解决的问题闭包带来的问题闭包的应用场景包括:变量背包,函数记忆柯里化构造函数中定义特权方法Vue中数据响应式Observe原理原创 2023-02-25 02:10:30 · 1570 阅读 · 0 评论 -
[精讲]cookie sessionStorage localStorage 区别
这是一篇介绍在浏览器端存储数据的方式的文章,主要讲解了 cookie、sessionStorage 和 localStorage 之间的区别,包括存储大小、生命周期、存储方式和同源原则等。此外,还给出了这些存储方式在实际应用中的使用场景和示例,如用户身份验证、购物车功能、记录用户偏好、保存表单数据、记录用户登录状态、缓存静态资源等。对于开发人员来说,理解和掌握这些存储方式的差异和使用场景,有助于提高应用程序的性能和用户体验。l原创 2023-02-24 23:38:47 · 1344 阅读 · 0 评论 -
js中proexy代理
使用 Proxy 可以拦截对象上的操作,例如读取属性、写入属性、函数调用等,从而允许我们修改对象的默认行为。方法中,我们首先使用参数列表生成一个缓存键,并检查是否存在缓存结果。为了实现这个功能,我们使用了一个 Map 对象来存储缓存结果。下面是一个简单的示例,使用 Proxy 来实现一个简单的缓存功能。方法中,我们同样打印了一条日志,并将属性的值赋值给原始对象。时,它会直接返回缓存结果,避免了重复执行长时间运行的代码。方法中,我们打印了一条日志,并返回原始对象的属性值。在上面的代码中,我们使用了。原创 2023-02-24 22:17:10 · 1448 阅读 · 0 评论 -
js算法常用数据结构
在JavaScript中,字符串是不可变的,即不能改变字符串中的字符。Map 对象在 ES6 中被引入,使用起来非常方便,相比于 JavaScript 中的 Object ,它的功能更为强大。如果你需要使用键值对存储数据,并且需要根据键快速查找对应的值,那么 Map 对象是非常好的选择。需要注意的是,JavaScript 中的数组是动态的,即数组的长度可以随时改变。Map 中的键是有序的,而添加到对象中的键则不是。对象的键必须是字符串或符号,而 Map 键可以是任何值,包括基本类型、对象或函数。原创 2023-02-24 22:10:55 · 1406 阅读 · 0 评论 -
HTML焦点问题
题目:以下哪些HTML元素可以获得焦点?A:我可以B:我可以C: 我可以 D:原创 2023-02-23 23:16:57 · 2310 阅读 · 0 评论 -
js中this指向问题
在 JavaScript 中,this关键字代表当前函数执行时的上下文对象,也就是当前代码执行的环境。this的指向是动态的,即它的值取决于函数的调用方式和上下文。它在标准函数和箭头函数中有着不同的行为。以下是几种情况下this。原创 2023-02-23 14:19:50 · 1887 阅读 · 0 评论 -
局域网,广域网,城域网
广域网的覆盖面积较大,需要经过多个地域或政治边界的管辖,因此需要使用统一的协议,以保证各地的设备能够互相通信。与局域网相比,城域网的覆盖范围更大,连接的终端数量也更多,因此需要更高的传输速率和更强的数据处理能力。以太网(Ethernet)是一种局域网(LAN)技术,是目前应用最广泛的局域网技术之一,它使用电缆或光纤连接网络设备,并使用一组标准来定义网络的物理和数据链路层。是指覆盖广泛的地理区域内,通过不同的传输介质,使用统一的通信协议和管理方式,将相互独立的局域网或计算机连接起来形成的网络。原创 2023-02-22 18:33:42 · 4051 阅读 · 0 评论 -
HTML标签焦点问题
题目:以下哪些HTML元素可以获得焦点?A:我可以B:我可以C: 我可以 D:原创 2023-02-22 01:05:55 · 3438 阅读 · 0 评论 -
js中history对象
在上面的代码中,调用pushState方法设置了一个状态对象,其中包含了一个名为page的属性,值为"index",将URL地址改变为/index.html。随后监听了popstate事件,当调用back方法回到上一个历史记录时,popstate事件会被触发,可以在事件处理函数中获取到当前历史记录的状态对象,通过JSON.stringify方法将其序列化为字符串输出到控制台中。在上面的示例中,当用户在浏览器中点击后退按钮时,popstate事件将被触发,并且状态对象将被输出到控制台。原创 2023-02-21 13:48:52 · 6603 阅读 · 0 评论 -
快速以太网
题目:以下关于快速以太网的描述中错误的是( ) A:快速以太网传输速率是 100Mbps B:快速以太网保留着 10M 以太网的最小帧长度,而不需要限制最大帧长度 C:100BASE-T 标准定义的 MII 将 MAC 子层与物理层分隔开 D:快速以太网允许在一个局域网中支持 10Mbps 与 100Mbps 速率的网卡共存原创 2023-02-21 13:27:38 · 4054 阅读 · 0 评论 -
vue路由与动态路由
Vue是一个流行的JavaScript框架,提供了一种称为Vue Router的插件,用于管理单页面应用程序的路由。Vue Router还提供了动态路由的概念,允许开发人员根据不同的参数生成不同的页面。动态路由允许开发人员根据不同的参数生成不同的页面,这对于需要显示动态数据的应用程序非常有用。在上述代码中,我们首先在模板中创建了一个包含链接的列表,用于导航到不同的页面。在这个例子中,我们使用了动态路由的方式来创建页面之间的导航,以及通过。属性使用了动态路由的方式,指向了不同页面的路由名称。原创 2023-02-21 03:08:02 · 3422 阅读 · 0 评论 -
有关计算机网络子网划分问题的解析
题目:192.168.1.0/24 使用掩码 255.255.255.240 划分子网,其可用子网数为( ),每个子网内可用主机地址数为( )使用掩码 255.255.255.240 将 IP 地址 192.168.1.0/24 划分为多个子网,需要将 24 位主机位中的 4 位借出,得到子网掩码为 255.255.255.240,也就是 /28。由于每个子网占用一个地址,所以不算网络地址和广播地址,每个子网可用主机地址数为 14。原创 2023-02-21 13:09:13 · 5860 阅读 · 1 评论 -
Symbol方法简略解析,与Symbol.for(‘xxx‘)
可以看到,symbol1和symbol2的值是相等的,这是因为它们使用了相同的键。Symbol.for方法不会像Symbol函数一样创建一个新的Symbol值,而是检查是否已经存在给定键的Symbol值,如果存在则返回该值,如果不存在则创建并返回一个新的Symbol值。在JavaScript中,有一些预定义的Symbol常量,例如Symbol.iterator、Symbol.match和Symbol.replace等,它们定义了在ECMAScript规范中用于特定用途的Symbol值。原创 2023-02-21 13:01:24 · 2797 阅读 · 0 评论 -
iframe问题
这种机制通常是在服务器端实现的,可以让动态语言的程序员方便地重用代码和模块,但它并不具有隔离性,包含的代码和资源与它们所属的 HTML 文件共享同一个渲染上下文。如果 iframe 中的内容没有完全加载完成,或者 iframe 中的资源(例如 JavaScript、CSS、图片等)正在下载或执行,那么 iframe 可能会阻塞页面的加载。相对于一般的 DOM 元素,使用 iframe 创建的元素的渲染速度可能会更慢,因为它需要创建和加载一个新的文档,并在浏览器中进行独立的渲染和布局。原创 2023-02-20 21:58:00 · 1835 阅读 · 0 评论 -
html中插入svg
html中插入svg的不同方法原创 2023-02-20 23:44:57 · 7206 阅读 · 0 评论