- 博客(74)
- 收藏
- 关注
原创 React 基础篇(二)
React的style样式、注释、className类名、props、条件渲染、循环渲染、插槽、state、setState、事件的参数与this的指向、受控组件、状态提升等基础知识
2023-07-26 21:35:50
1393
原创 React 基础篇(一)
是一个声明式,高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面,这些代码片段被称作“组件”。
2023-07-26 21:14:21
793
原创 面试题 - 前端性能优化篇
减少 http请求减少HTTP请求的方案主要有: 合并 JavaScript 和 CSS 文件、 合并图片 CSS Sprites、图像映射( Image Map)和使用 Data URI 来编码图片, 图片较多的页面也可以使用 lazyLoad 等技术进行优化。减少对 DOM 的操作修改和访问 DOM 元素会造成页面的 Repaint (重绘) 和 Reflow (重排) , 循环对 DOM 操作更是不推荐的行为。
2023-03-07 19:15:24
564
1
原创 前端高频面试题—JavaScript篇(四)
本文主要讲述的前端高频面试题知识有:1. 原型 / 构造函数 2. 原型链3. 说一下Promise4. 事件轮询机制5. 设计模式6. 继承
2023-02-15 19:27:53
570
原创 前端高频面试题—JavaScript篇(三)
本文主要讲述的前端高频面试题知识有:1. 闭包2. 垃圾回收机制3. 防抖和节流4. 函数柯理化5. 浅拷贝和深拷贝的区别6. 讲讲事件冒泡和事件捕获以及事件代理
2023-02-12 21:29:01
1832
原创 前端高频面试题-HTML和CSS篇(二)
本文主要讲述的前端高频面试题知识有:1. 元素水平垂直居中的方法有哪些?如果元素不定宽高呢?2. 怎么触发BFC,BFC有什么应用场景?3. flexbox(弹性盒布局模型)是什么,适用什么场景?4. rem em px vw vh 百分比区别
2023-02-12 21:02:56
3084
原创 前端高频面试题-HTML和CSS篇(一)
本文主要讲述的前端高频面试题知识有:>1. 如何清除浮动>2. 如果要做优化,CSS提高性能的方法有哪些?>3. css中,有哪些方式可以隐藏页面元素?区别?>4. link 与 @import 的区别>5. 重绘与回流(重排)
2023-02-12 17:07:09
3307
原创 前端高频面试题—JavaScript篇(二)
最近自己在复习完JavaScript后总结了一些前端高频面试题知识,本文主要讲述的五题有:1. let const var的区别2. 讲讲this3. 讲讲Map和Set数据结构4. new的过程发生了什么5. localStorage sessionStorage cookies 有什么区别
2023-02-11 21:58:42
2047
原创 前端高频面试题—JavaScript篇(一)
最近自己在复习完JavaScript后总结了一些前端高频面试题知识,本文主要讲述的五题有:1. 讲讲JS的数据类型2. 检测数据类型3. 作用域4. 作用域链5. 预解析。
2023-02-11 21:40:12
1211
原创 【ES6】掌握Promise和利用Promise封装ajax
方法接受一个数组作为参数,数组的每个成员都是一个 Promise 对象,并返回一个新的 Promise 对象。:将多个 Promise 实例,包装成一个新的 Promise 实例,接受一个数组作为参数,只要其中有一个实例率先改变状态,则整个的状态就跟着改变。利用Promise类创建promise实例对象,类的参数是回调函数,回调函数又有两个参数(一般约定为resolve(成功)和reject(失败))就是:不管是成功还是失败,都会触发,并会把结果用数组的形式返回,数组里面放着每一个promise的结果。
2023-02-11 18:08:53
1155
原创 【nodejs】nodejs入门核心知识(命令行使用、内置模块、node 模块化开发)
node是基于 ChromeV8解析引擎的javascript 运行环境命令行一般指命令提示符,是在操作系统中,提示进行命令输入的一种工作提示符;原来称之为“DOS”的操作方式。在不同的操作系统环境下,命令提示符各不相同;在windows环境下,命令行程序为“cmd.exe”,是一个32位的命令行程序。本文主要讲述:命令行窗口的常用指令、node 模块化开发、nodejs内置模块(fs、path、url、http)等
2023-02-10 22:03:00
1530
原创 【JavaScript】理解面向对象以及构造函数的推导
面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候一个一个依次调用就可以了。是一种思考问题的基础方法。简单理解:面向过程就是任何事情都亲力亲为,很机械,像个步兵。面向对象是把构成问题事务分解成各个对象,建立对象的目的不是为了完成一个步骤,而是为了描叙某个事物在整个解决问题的步骤中的行为。简单理解:面向对象就像战场上的指挥官,指挥战斗而不必知道具体执行的过程。构造函数其实就是一个函数,只不过使用的时候需要和new 关键字连用,首字母大写。
2023-02-08 23:18:36
485
原创 【HTTP】传输协议及TCP 三次握手和四次挥手详解
协议建立过程:1.建立连接 2.发送请求 3.接收响应 4.断开连接 TCP是全双工信道,何为全双工就是客户端与服务端建立两条通道,通道1:客户端的输出连接服务端的输入;通道2:客户端的输入连接服务端的输出。两个通道可以同时工作:客户端向服务端发送信号的同时服务端也可以向客户端发送信号。报文:由浏览器组装,只需要提供对应的信息就可以。服务端:好的,你关闭吧,我这边也关闭这个通道。客户端:好的你关闭吧,我也把这个通道关闭。
2023-02-07 13:00:19
1320
原创 Ajax概念、状态码、请求四部曲和请求方式
这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。javascript是单线程的,只有一个主线程,一次只能执行一个任务,同步和异步指的就是在线程上面执行代码的顺序。上述的案例中需启动这个分享的本地服务器,才能得到相应的结果。也就是浏览器解析响应完成,可以使用responseText(可以在客户端使用了)是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。: 搜索引擎的支持度不够,因为数据都不在页面上,搜索引擎搜索不到。准确的说:定时器异步指的是定时器里面的回调函数。
2023-02-06 19:05:09
935
原创 【JavaScript】设计模式(单例、策略、发布-订阅)
发布-订阅模式其实是一种对象间一对多的依赖关系,当一个对象的状态发送改变时,所有依赖于它的对象都将得到状态改变的通知。订阅者(Subscriber)把自己想订阅的事件注册(Subscribe)到调度中心(Event Channel),当发布者(Publisher)发布该事件(Publish Event)到调度中心,也就是该事件触发时,由调度中心统一调度(Fire Event)订阅者注册到调度中心的处理代码。
2023-02-03 13:59:15
741
原创 【JavaScript】数据劫持(代理)详解
所谓数据代理(也叫数据劫持),指的是在访问或者修改对象的某个属性时,通过一段代码拦截这个行为,进行额外的操作或者修改返回结果。对象用于创建一个对象的代理,从而实现基本操作的拦截和自定义(如属性查找、赋值、枚举、函数调用等)。当访问或者修改对象的某个属性的时候,通过 getter setter 拦截这个行为,进行额外的操作。包装的目标对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)。当然今天主要讲述的JS和ES中的数据劫持,vue中的小编后续会安排上。value:设置属性名对应的属性值。
2023-02-01 22:12:42
1674
2
原创 【JavaScript】防抖、节流和函数柯理化
函数柯理化:作用:把一次传递两个参数,变成两次每次传递一个参数目的:利用闭包,把第一次传递的参数保存下来(延长变量的生命周期)函数防抖:通过setTimeout的方式,在一定的时间间隔内,将多次触发变成一次触发。(通俗的说是在最后一次点击间隔规定时间之后才能再次成功触发,否则触发不成功)节流指的是减少一段时间内的触发频率。只有在上一次成功触发间隔规定时间之后,才能再次触发。节流与防抖的区别是:防抖只在最后一次成功点击之后间隔规定时间之后才能再次成功触发,如果在时间间隔之内就被点击,需要重新间隔时间间隔才能点
2023-02-01 22:06:25
4276
2
原创 【JavaScript】理解深浅拷贝、闭包与垃圾回收机制
当变量进入环境,要么计数要么给个标记, 如果计数为0, 或者标记为离开环境,垃圾回收机制进行回收,如果无法回收,形成内存溢出。当函数返回一个复杂数据类型,并且函数外部有变量接收这个复杂数据类型时,函数执行完毕后函数的执行空间不会销毁。深拷贝:不管多少层数据结构,都百分百复制一份,变成两个一模一样但是毫不相干的数据结构。目的:在函数外部操作函数里面的私有变量(起到保护全局变量的作用)浅拷贝:原先是什么数据结构,创建一个一模一样的数据结构。:函数执行完毕后,返回的是一个对象的地址。原始数据结构中的key。
2023-02-01 20:46:19
709
原创 【JavaScript】继承方式详解
希望Son调用的时候,既使用Father里面的内容,同时希望Father里面的内容改成自己的,也就是说,希望使用的时候,this指向自己的this。:把父类构造函数当做普通函数用,并利用call()、apply()、bind()()修改this的指向。子类的原型(Son.prototype)指向了父类的实例(new Father()也就是f)继承:一个构造函数中的实例使用另一个构造函数上的属性和方法。在继承中,父类中的部分方法和属性不希望子类继承。缺点:只能继承父类的属性,不能继承原型的方法。
2023-01-31 21:18:35
572
原创 【JavaScript】原型与原型链以及判断数据类型方式
将公共的方法提取出来,都写在原型上(只用书写和创建一次)在内置构造函数的原型上扩展一个新方法,所有的数组都可以使用这个方法每一个函数:天生自带一个属性 prototype(每一个对象:天生自带一个属性__proto__(指向所属构造函数的原型)__proto__原型是什么?一个对象,我们也称为 prototype 为原型对象。原型的作用是什么?共享方法。为什么要使用原型对象因为构造函数方法虽然很好用,但是存在浪费内存的问题。
2023-01-30 22:45:54
809
原创 【JavaScript】DOM 获取元素偏移量、元素尺寸以及可视窗口尺寸
返回的是元素 (内容+padding) 与 border 左上角的间距(也就是自身元素的边框厚度)当可视窗口没有滚动条时,BOM和DOM 获取元素的可视窗口尺寸相同。:当前元素(外边框)距离其父级参照物的(内边框)偏移距离。尺寸: 指的是该元素在页面中的占地面积。返回该元素偏移量参考的元素。:浏览器可视窗口的尺寸,当可视窗口存在滚动条时,距离参照物顶部的偏移量。距离参照物左边的偏移量。:文档可视窗口的尺寸,
2023-01-30 22:27:06
1471
原创 【JavaScript】正则表达式详解
正则表达式是由一个字符序列形成的搜索模式。当你在文本中搜索数据时,你可以用搜索模式来描述你要查询的内容。正则表达式可以是一个简单的字符,或一个更复杂的模式。正则表达式可用于所有文本搜索和文本替换的操作。正则的两大特性懒惰每次捕获的时候都会从字符串[0]开始检索解决:给正则添加标识符g贪婪每次在捕获内容的时候,尽可能多的去捕获内容解决:使用非贪婪限定符(在原来的限定符后面加一个?
2023-01-23 18:47:07
2691
原创 【ES6】新特性详解篇(二)
本文承接着上一篇ES6新增特性的续写。主要讲述上篇剩余的ES6新增加的特性(模块化开发、新的数据类型(Symbol、BigInt)、新的数据结构(Set、Map)、class类、迭代器和生成器)
2023-01-23 18:41:50
590
原创 【ES6】新特性详解篇(一)
ES6是对于ES2015+的俗称,也可以说是通常叫法。ES 全称是ECAMScript,它是JavaScript基础构建的一种语言,JavaScript正是建立在ECAMScript语言的基础规范中建立使用的,那么,ECAMScript的使用,对于JavaScript至关重要!本文主要讲解一部分ES6的新特性的使用。
2023-01-20 19:24:01
1544
原创 【JavaScript】实现简易购物车
本文主要分享一个简易的使用JavaScript编写的购物车。功能实现了:全选、清空购物车、删除单条商品、数据渲染、总价格计算、删除选中物品、添加和减少商品数量并且实现了操作数据后在浏览器本地永久存储。
2023-01-19 14:15:16
7769
3
原创 【JavaScript】常见的事件(鼠标、键盘、表单等)
/ 获取 移动的时候 光标距离窗口左上角的位置 - 初始的时候 光标距离元素左上角的位置。// 如果代码进入这里,表示开关关闭,也就是鼠标抬起,不能拖拽。// 记录刚开始的时候鼠标距离元素左上角的位置。// 设置 div 的top left。事件按下的内容必须和出现的内容一致。✍评论:您的建议是我改进的良药!// 如果开关关闭 不能拖拽。// 默认元素不可以拖拽。// 1. 鼠标按下。// 2. 鼠标抬起。// 3. 鼠标移动。
2023-01-19 13:37:18
1825
原创 【JavaScript】事件相关知识详解
事件指的是用户和浏览器之间的交互行为。比如:点击按钮、关闭窗口、鼠标移动等。我们可以为事件来绑定回调函数来响应事件。绑定事件的方式:可以在标签的事件属性中设置相应的JS代码。可以通过为对象的指定事件属性设置回调函数的形式来处理事件。执行事件的步骤:二. 事件绑定(1) DOM 0级 事件语法:事件源.on事件类型 = 事件处理函数特点:同一个事件源的同一个事件类型只能绑定一个事件处理函数(2) DOM 2级 事件语法:事件源.addEventListener(‘事件类型’, 事件处理函
2023-01-19 13:32:32
1791
原创 【markdown】语法 添加`emoji`表情
本文主要讲解怎么在markdown语法中添加emoji表情并且展示了一些常见的emoji表情及对应的语法格式。
2023-01-18 21:37:25
1196
原创 【JavaScript】获取和操作 DOM 节点
只是创建不会显示到页面上,要显示到页面上得使用下面的插入节点。// 父节点.replaceChild(换上节点, 换下节点):把子节点插入到父节点中,并且放到指定一个节点的前面。:把子节点插入到父节点中,并且是在最后面的位置插入。:若删除的节点中有子节点会一并删除。// li渲染后清空文本域中的内容。// 在创建的li标签中添加按钮。// 判断文本域的内容是否为空。:将子节点从父节点中删除。:在父节点中,使用换上节点。// 给创建的按钮添加类名。// 给创建的按钮添加文本。:创建好的元素节点。
2023-01-04 22:54:41
1088
1
原创 【JavaScript】DOM 操作元素样式和元素类名
1. 获取元素的样式语法:元素.style.样式名返回值:对应元素样式的属性值注意:当样式名中带有连字符,必须使用数组关联语法或驼峰命名语法:元素.style.样式名 = 值注意:只能给行内样式设置样式语法:返回值:对应元素样式的属性值也可以操作行内元素:注:不能设置非行内元素的样式。1. 获取元素的类名语法:**返回值:**返回该元素的完整类名2. 设置元素的类名语法:注意:这样写会将原来的类名完全替换3. 追加元素的类名语法:注:此方法不会覆盖元素原来的类名,而是在其后面追
2023-01-03 22:46:31
1035
原创 【JavaScript】数组 重要方法详解篇(四)
如果书写了init,循环执行了length次;如果没有书写init,循环执行length-1次,从索引值为1项开始循环。,如果书写了init,prev第一次就是init的值;如果没有书写init,prev第一次就是数组索引为0项对应的值;找到相应的数据,则返回该数据对应的索引值。如果没有找到,则返回undefined。如果在数组中找到该数据,则返回true;如果找到满足条件的,则返回该值。:查找数组满足条件的第一项的索引。如果没有找到,则返回false。如果没有找到,则返回-1。
2023-01-02 22:03:50
498
原创 【JavaScript】多维数组及数组扁平化
一维数组:数组中只有数据的时候就是一维数组;多维数组:字面理解就是数组中嵌套了数组;数组扁平化通俗来讲就是将多维数组转化为一维数组,本文主要讲解数组扁平化的方法。
2023-01-02 22:02:26
943
原创 【JavaScript】本地存储(localStorage、sessionStorage、cookie)
如果勾选记住用户名,下次用户名打开浏览器,就在文本框里面自动显示上次登录的用户名。注意:不管我们设置的时候什么时间,都按照世界标准时间计算。cookie 存储的数据会跟随页面请求自动携带。cookie 默认是会话级,可以手动设置过期时间。内有这个key,则获得该key对应的value。:将获取到的cookie的值转换为对象形式。storage 存储的数据不会跟随页面携带。只能存储字符串,并且有自己的固定格式。默认是会话级别,可以手动设置过期时间。要先拿到当前的时间,向前调整8小时,
2023-01-02 15:33:06
850
原创 【JavaScript】BOM 概念及相关操作
BOM(Browser Object Model)是浏览器对象模型,用于访问浏览器的功能,这些功能与任何网页内容无关。域名:电脑的唯一标识是ip地址,由于ip地址不方便记忆的,所以产生了域名(用户或者公司都可以通过第三方机构购买注册)。端口:服务器就是一台昂贵的电脑,电脑只有一个ip地址,如果想存放多套程序,需要分配不同的端口找不同的程序。:如果只是单单书写以上代码,滚动的效果会是默认的瞬间移动到对应的位置。:如果浏览器只打开了这一个标签页,则点击关闭时,会将浏览器一并关掉。
2023-01-02 13:17:19
670
原创 【JavaScript】 Date 日期对象概述及相关方法
Date 日期对象是一个构造函数,必须使用new来调用创建对象。获取1970年01月01日00时00分00秒至现在的总毫秒数。使用Date 如果没有参数,返回当前系统的当前时间。从 格林威治时间 到现在的毫秒数。
2023-01-01 22:13:58
819
原创 【JavaScript】DOM 的概念、获取DOM元素和操作元素属性
DOM(Document Object Model)文档对象模型,是W3C组织推荐的处理可扩展标记语言的标准编程接口,通过DOM可以来任意来修改网页中各个内容。
2023-01-01 20:48:49
566
原创 【JavaScript】定时器详解
虽然关闭定时器的方式有两种,且没什么太大的区别,但是还是建议对应着使用。(如:setInterval ==> clearInterval(定时器)):每隔一段时间执行一次。:隔一段时间之后执行。
2022-12-29 22:26:39
2650
原创 【JavaScript】查询字符串(URL参数)、json 格式字符串的相关处理
*查询字符串(URL参数)**是指在URL的末尾加上用于向服务器发送信息的字符串(变量)。”放在URL的末尾,然后再加上“参数=值”,想加上多个参数的话,使用“&”。以这个形式,可以将想要发送给服务器的数据添加到URL中。
2022-12-29 20:15:23
571
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人