自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(19)
  • 收藏
  • 关注

原创 Web前端—属性描述符

当读取属性a的值的时候会运行get函数,设置属性a的值的时候会 运行set函数。因此,如果属性不能重写,后续修改最好能进行报错,告诉用户哪句话出现了问题。当然,这里面也会出现问题需要考虑,具体出现的问题具体分析。观察这个对象,我们如何来描述属性。:这里需要注意一个问题—观察这个对象中的内容。

2024-04-09 17:41:00 705

原创 Web前端—(原生JS)购物车效果

分析整个页面需要用到的数据,创建UIData类,并进行测试(大家可以自行在控制台进行测试)在这里,为了获取我们到底是点击了哪个,可以添加一个自定义属性来获取index。为了避免改变原始数据。我们创建一个单件商品的数据的类(class)到这里,就实现了购物车的全部效果,我会上传我的资源,大家自行下载。在分析完数据逻辑之后,我们来分析界面之间的逻辑关系。到这里为止界面上的逻辑已经全部完成,开始添加事件。中的数据:商品数组goods。在下面数据的基础上,编写。先准备好原始数据和素材。

2024-04-04 01:25:27 435

原创 Web前端—(原生JS)歌词滚动效果

一个简单的实现音乐播放歌词滚动的效果,原生JS实现。

2024-03-29 17:32:52 700 1

原创 Web前端—CSS属性计算过程

一个 HTML 元素要在浏览器中渲染出来,必须具备所有的 CSS 属性值,但是绝大部分我们是不会去设置的,用户代理样式表里面也不会去设置,也无法从继承拿到,因此最终都是用默认值。当不同的 CSS 样式来源拥有相同的声明时,此时就会根据样式表来源的重要性来确定应用哪一条样式规则。样式声明既是同源,权重也相同的情况下,就会进入第三个步骤,比较样式声明的次序。如果是在在同一个源中有样式声明冲突,此时就会进行样式声明的优先级比较。如果源的重要性是相同的,此时会以选择器的权重来比较重要性。

2024-03-25 18:12:00 873

原创 Web前端—浏览器渲染原理

当浏览器的网络线程收到 HTML 文档后,会产生一个渲染任务,并将其传递给渲染主线程的消息队列。在事件循环机制的作用下,渲染主线程取出消息队列中的渲染任务,开启渲染流程。整个渲染流程分为多个阶段,分别是: HTML 解析、样式计算、布局、分层、绘制、分块、光栅化、画每个阶段都有明确的输入输出,上一个阶段的输出会成为下一个阶段的输入。这样,整个渲染流程就形成了一套组织严密的生产流水线。

2024-03-24 13:13:34 1745 1

原创 Web前端—事件循环

根据 W3C 官方解释,每个任务有不同的类型,同类型的任务必须在同一个队列,不同的任务可以属于不同的队列。不同任务队列有不同的优先级,在一次事件循环中,由浏览器自行决定取哪一个队列的任务。所有浏览器采用异步的方式来避免。具体做法是当某些任务发生时,比如计时器、网络、事件监听,主线程将任务交给其他线程去处理,自身立即结束任务的执行,转而执行后续代码。在 Chrome 的源码中,它开启一个不会结束的for循环,每次循环从消息队列中取出一个任务执行,而其他线程只需要在合适的时候将任务加入到队列末尾即可。

2024-03-23 17:17:42 1011

原创 H5大前端(Web前端)学习笔记(五)- Vue

VUEVue开发前的准备模板语法文本原始HTML属性Attribute使用JavaScript表达式列表渲染事件处理表单输入绑定修饰符组件基础单文件组件加载组件组件的组织Props组件交互Prop类型自定义事件组件交互Vue引入第三方Axios网络请求安装引入Axios网络请求封装网络请求跨域解决方案Vue引入路由配置在Vue中引入路由路由传递参数嵌套路由配置Vue状态管理(Vuex)引入Vuex的步骤Vue状态管理核心(Vuex)Getter

2024-03-21 17:00:32 1028

原创 H5大前端(Web前端)学习笔记(四)-ES6新特性

ES6新特性命令行工具CMD命令行PowerShellBabel转码器Let命令Const命令对象的解构赋值(变量的结构赋值)字符串扩展字符串Unicode表示法字符串遍历接口模板字符串字符串新增方法includes(), startsWith(), endsWith()repeat()padstart(),padEnd()trimStart(), trimEnd()at()数组扩展:扩展运算符数组扩展:新增方法对象的扩展属性的简洁表示法属性名表达式对象的扩展运

2024-03-16 17:20:41 981

原创 H5大前端(Web前端)学习笔记(三)-JavaScript部分(二)

JavaScript对象Math对象Date对象DOM节点节点树Node.nodeType属性document对象获取元素创建元素Element对象属性获取元素位置CSS操作HTML元素的style属性元素节点的style属性cssText属性事件处理程序事件类型鼠标事件Event事件对象键盘事件表单事件事件代理(事件委托)定时器setTimeoutsetInterval防抖(debounce)节流(throttle)

2024-03-11 19:08:21 1048

原创 H5大前端(Web前端)学习笔记(三)-JavaScript部分(一)

JavaScript是一种轻量级的脚本语言。所谓“脚本语言”,指的是它不具备开发操作系统的能力,而是只用来编写控制其他大型应用程序的“脚本”。JavaScript是一种嵌入式(embedded)语言,它本身提供的核心语法不算很多。JavaScript和ECMAScript的关系ECMAScrip和JavaScript的关系是,前者是后者的规格,后者是前者的一种实现。在日常场合,这两个词是可以互换的。

2024-03-06 18:53:15 998

原创 前端八股文(六)—— 浏览器部分

浏览器部分1、什么是 XSS 攻击?(1)概念(2)攻击类型2、如何防御 XSS 攻击?3、什么是 CSRF 攻击?(1)概念(2)攻击类型4、如何防御 CSRF 攻击?5、有哪些可能引起前端安全的问题?6、网络劫持有哪几种,如何防范?7、浏览器渲染进程的线程有哪些8、僵尸进程和孤儿进程是什么?9、如何实现浏览器内多个标签页之间的通信?10、对浏览器的缓存机制的理解11、协商缓存和强缓存的区别(1)强缓存(2)协商缓存12、点击刷新按钮或者按 F5、按 Ctrl+F5 (

2024-01-22 21:18:59 896

原创 前端八股文(五)—— 计算机网络部分

计算机网络部分1、GET 和 POST 的请求的区别2、POST 和 PUT 请求的区别3、常见的 HTTP 请求头和响应头4、常见的 HTTP 请求方法5、HTTP 1.1 和 HTTP 2.0 的区别6、HTTP 和 HTTPS 协议的区别7、HTTP2 的头部压缩算法是怎样的?8、说一下 HTTP 3.09、什么是 HTTPS 协议?10、HTTPS 通信(握手)过程11、DNS 完整的查询过程12、OSI 七层模型13、TCP 的三次握手和四次挥手① 三次握手② 四次挥

2024-01-21 21:54:15 1004

原创 前端八股文(四)—— 前端工程化部分

前端工程化部分1、webpack 与 grunt、gulp 的不同?2、webpack、rollup、parcel 优劣?3、有哪些常见的 Loader?4、有哪些常见的Plugin?5、bundle,chunk,module 是什么?6、Loader 和 Plugin 的不同?7、webpack 热更新的实现原理?8、Babel 的原理是什么?9、git 和 svn 的区别10、经常使用的 git 命令?11、git pull 和 git fetch 的区别12、git rebas

2024-01-20 21:18:55 1030

原创 前端八股文(三)—— 性能优化部分

懒加载也叫做延迟加载、按需加载,指的是在长网页中延迟加载图片数据,是一种较好的网页性能优化的方式。在比较长的网页或应用中,如果图片很多,所有的图片都被加载出来,而用户只能看到可视窗口的那一部分图片数据,这样就浪费了性能。函数节流是指规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只有一次能生效。对于如何优化动画,我们知道,一般情况下,动画需要频繁的操作DOM,就就会导致页面的性能问题,我们可以将动画的。,之后一次性的将所有的子孙节点插入文档中。

2024-01-18 19:28:55 1836

原创 前端八股文(二)—— JavaScript部分

在 JavaScript 中,基本类型是没有属性和方法的,但是为了便于操作基本类型的值,在调用基本类型的属性或方法时 JavaScript 会在后台隐式地将基本类型的值转换为对象,如:在 访 问时 , JavaScript 将'abc'在 后 台 转 换,然后再访问其length属性。JavaScript 也可以使用 Object 函数显式地将基本类型转换为包装类型:也可以使用valueOf方法将包装类型倒转成基本类型:

2024-01-14 15:24:22 872

原创 前端八股文(一)—— HTML、CSS部分

DOCTYPE 是 HTML5 中一种标准通用标记语言的文档类型声明,它的目的是告诉浏览器(解析器)应该以什么样(html 或 xhtml)的文档类型定义来解析文档,不同的渲染模式会影响浏览器对 CSS 代码甚至JavaScript 脚本的解析。它必须声明在 HTML文档的第一行。语义化的优点如下:对机器友好,带有语义的文字表现力丰富,更适合搜索引擎的爬虫爬取有效信息,有利于 SEO。除此之外,语义类还支持读屏软件,根据文章可以自动生成目录;对开发者友好,使用语义类标签增强了可读性,结构更加清晰,开发者

2024-01-09 22:49:45 1022

原创 H5大前端(Web前端)学习笔记(二)-CSS部分

CSS概念CSS(Cascading Style Sheets)层叠样式表,又叫级联样式表,简称样式表。CSS文件后缀名为.css。CSS用于HTML文档中元素样式的定义使用CSS的目的就是让网页具有美观一致的页面语法CSS规则由两个主要的部分构成:选择器,以及一条或多条声明(样式)选择器通常是您需要改变样式的HTML元素每条声明由一个属性和一个值组成属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

2024-01-02 23:07:36 1916

原创 Web前端开发—JavaScript学习笔记

DOM定义了表示和修改文档所需的方法。DOM对象即为宿主对象,由浏览器厂商定义,用来操作html和xml功能的一类对象的集合。也有人称DOM是对HTML以及XML的标准编程接口。

2023-12-28 23:42:17 1016

原创 H5大前端(Web前端)学习笔记(一)-HTML部分

HTML5是用来描述网页的一种语言,被称为超文本标记语言。用HTML5编写的文件,后缀以.html结尾。HTML是一种标记语言,标记语言是一套标记标签。

2023-12-27 02:11:38 818

Web前端-(原生JS)购物车效果

一个简单的购物车效果,原生JS实现,点击加号或减号可以将商品添加到购物车中,会显示选中数量,商品总价等信息,点击添加时,还会有跳跃效果。

2024-04-04

歌词滚动效果(原生JS)

一个简单的播放音乐的歌词滚动效果(原生JS实现)

2024-03-29

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除