- 博客(73)
- 收藏
- 关注
RSS订阅原创 【CSS】一篇文章讲清楚screen、window和html元素的位置：top、left、width、height
document.body.offsetLeft - 元素相对于其 offsetParent 的左边界的距离（包括外边距，不包括内边距）document.body.offsetTop - 元素相对于其 offsetParent 的上边界的距离（包括外边距，不包括内边距）document.body.clientHeight - 返回元素的内部高度（内容区域的高度，不包括边框、内边距或外边距）document.body.offsetHeight - 元素的高度，包括内边距和边框，但不包括外边距、滚动条和边框。
2024-04-10 12:13:19
576
原创 【Web2D/3D】WebGL和ThreeJS自学资料推荐
随着Web引入OpenGL（WebGL），拓展了Web在可视化领域运用，尤其是促进3D领域的技术在Web前端的发展。而ThreeJS是基于WebGL做的上层封装，为开发者屏蔽空间几何的计算细节。当然为了学好WebGL/ThreeJS，计算机图形学以及空间几何还是需要恶补一下。本篇暂未开始写学习笔记，先为大家推荐一些入门资料。
2024-04-10 09:56:03
507
原创 【Vue】基本知识点汇总
透传 attribute”指的是传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。在SFC单文件组件中，import进来直接使用（隐式注册），否则需要在components选项中注册（显式注册）组件显式声明它接受的 props，Vue才能知道外部传入的哪些是 props，哪些是透传attribute。9.1 它的 .value 和父组件的 v-model 的值同步；局部注册的组件是在使用它的父组件中显示导入，只能该父组件使用。
2024-03-21 10:27:26
592
原创 【概念】零代码zero-code/低代码low-code开发平台
低代码开发平台（LCDP）本身也是一种软件，它为开发者提供了一个创建应用软件的开发环境。对于程序员而言，低代码开发平台的性质与IDEA、VS等代码IDE（集成开发环境）几乎一样，都是服务于开发者的生产力工具。但是，与传统代码IDE不同的是，低代码开发平台提供的是更高维和易用的可视化IDE。大多数情况下，开发者并不需要使用传统的手写代码方式进行编程，而是可以通过图形化拖拽、参数配置等更高效的方式完成开发工作。低代码平台会取代部分程序员重复工作，因此需要保持学习习惯，扩展自己知识能力，让自己立于不败之地。
2024-03-20 17:39:20
268
原创 【React】Diff算法
（节点的类型相同，则按原策略继续比较虚拟DOM，节点的类型不同，移除老节点，创建新节点）2.2 遇到key相同，type不同，不可复用，则将相应老Fiber节点标记删除，根据JSX生成新的Fiber节点。1.2 key相同，type不同，老Fiber标记删除，根据新的JSX生成新的Fiber，并标记插入；2.7 JSX对象没有遍历完，老Fiber遍历完了，根据剩下JSX中元素创建新Fiber，并标记插入。1.1 key相同，type相同，复用老Fiber，将老Fiber节点标记为更新；
2024-03-19 12:48:06
384
原创 【框架】跨端开发框架介绍（Windows/MacOS/Linux/Andriod/iOS/H5/小程序）
跨端框架适用场景说明移动端uniappAndriod、iOS、H5、小程序、快应用uniapp是一个使用Vue开发所有前端应用的框架，开发者编写一套代码，选择相应目标进行编译，编译后分别部署到网站、APP、小程序多个平台笔者：学会Vue和uniapp，覆盖了Andriod、iOS、H5、小程序、快应用，卷不卷。。。是一个使用React。
2024-03-16 23:01:50
946
2
原创 【构建工具】PostCSS快速配置
浏览器兼容性是前端开发常遇到的问题，现代前端构建工具已经可以帮我们处理很多兼容问题，比如：Babel语法转换和polyfill可以解决JavaScript层面的大部分兼容问题，而PostCSS的autoprefixer以及语法转换可以解决CSS层面的大部分兼容问题。
2024-03-15 21:46:33
411
原创 【框架设计】MVC和MVVM对比图
1. MVC（Model-View-Controller）2. MVP（Model-View-Presenter）3. MVVM（Model-View-ViewModel）
2024-03-08 17:17:22
370
原创 【构建工具】Babel7.x快速配置
Babel作用：将ES6+语法转成ES5语法，只转语法，不转API（即ECMAScript新的API）Promise是新API，会通过@babel/polyfill引用core-js中的API实现。
2024-03-08 10:51:26
797
原创 【浏览器】浏览器的发展史
2008年，Chrome第一个版本（谷歌聘请Mozilla开发人员），基于Webkit内核，并开源浏览器项目Chromium，后期开发出Blink内核。网景开始新增大量功能，电子邮件，新闻组组。1995.8.24，IE1.0发布，微软购买了Mosaic源码，推出第一款IE浏览器，以windows95插件形式出现,，大小1M。1998年，网景浏览器竞争失败，网景开放网景浏览器4.0源代码，成立组织Mozilla，搞出Gecko内核。1995，IE2.0发布，同时支持windows和Mac，跨平台浏览器。
2024-03-06 18:16:18
413
转载 【Web】几种布局方式
Web 自适应布局是指使用 HTML 和 CSS 创建的布局，能够根据浏览器窗口的大小自动适应不同的布局。特点说明：静态布局是指在制作网页时，页面元素的位置、大小固定不变的布局方式。4. 使用视口单位（vw 和 vh）：将元素的宽度和高度设置为基于视口的单位，从而适应不同的屏幕尺寸。2. 使用流动布局：让元素的宽度随着父容器的变化而变化，从而适应不同的屏幕尺寸。3. 使用百分比布局：将元素的宽度和高度设置为百分比，从而适应不同的屏幕尺寸。1. 使用媒体查询：通过检测屏幕的宽度和高度，来定制不同的样式。
2024-02-29 10:13:21
66
原创 【ECMAScript】专用工作者线程、共享工作者线程、服务工作者线程
共享工作者线程可以被多个不同的上下文使用，包括不同的页面。任何与创建共享工作者线程的脚本同源的脚本，都可以向共享工作者线程发送 消息或从中接收消息。它的主要用途是拦截、重定向和修改页面发出的请求，充当网络请求的仲裁者的角色。专用工作者线程，顾名思义，只能被创建它的页面使用。注：以上，如有不合理之处，还请帮忙指出，大家一起交流学习~2. 专用工作者线程（Web Worker）3. 共享工作者线程。4. 服务工作者线程。
2024-02-29 09:40:04
375
原创 【ECMAScript】File、Blob、URL、FileReader、Base64、ArrayBuffer、DataView、TypedArray的关系
ArrayBuffer通过new Blob([buffer], )转成BlobBlob通过FileReader的readAsArrayBuffer转成ArrayBufferBlob通过window.URL.createObjectURL()得到Object URL地址Blob通过FileReader的readAsDataURL得到dataURL Base64地址Blob适合作为一个整体文件用于传输ArrayBuffer适合对二进制数据进行操作。
2024-02-22 10:20:01
943
原创 【Electron】Electron是什么
web前端开发，可以通过Electron和React Native开始往移动端和PC桌面端拓展，能够胜任web、mobile、desktop等端的用户界面开发。
2024-01-22 22:05:02
668
转载 【Web】安全问题的学习总结
XSS（跨站脚本攻击，Cross Site Scripting），是一种利用网页应用程序的安全漏洞的攻击方式，攻击者通过在网页中注入恶意脚本代码，使其在用户的浏览器中执行。这些恶意脚本可以用来窃取用户的敏感信息、篡改网页内容或进行其他未经授权的操作。通过虚假输入表单盗取用户个人信息通过脚本窃取用户Cookie，用户在不知情的情况下帮助攻击者发送恶意请求显示伪造的文章或图片。
2024-01-18 17:01:20
69
原创 【协议】HTTP、HTTPS和HTTP2.0学习总结
记得大学学网络课程的时候，学的都是OSI/RM七层协议，应用层 -> 表示层 -> 会话层 -> 传输层->网络层->数据链路层->物理层，当时学的时候，感觉太抽象了，学得个一知半解。大脑在接收新东西时，需要有个具体实物或模型对应，将知识具像化，再高深的知识都容易理解。 言归正传，本文主要是总结一下HTTP通信过程，以及HTTPS是在HTTP基础上干了什么，而HTTP2.0又是对HTTP1.1做了啥大刀阔斧的改进。在讲这些之前，先讲讲TCP/IP四层协议。虽然OSI/RM七层协议是理论标准
2024-01-16 11:44:38
1255
原创 【CSS】讲一讲BFC、IFC、GFC、FFC
FC（Formatting Contexts），是CSS2.1的一个概念，是页面中的一块渲染区域，具有一套渲染规则，决定FC中子元素如何定位，以及和其他元素的关系和相互作用。在说FC之前说一下文档流。
2024-01-08 15:13:44
2397
原创 【ECMAScript】浅拷贝、深拷贝、浅比较、深比较的汇总
日常开发中或阅读框架源码过程中，经常遇到浅拷贝、深拷贝、浅比较、深比较，本篇做一次汇总，对于数据类型在下一篇补上。
2024-01-07 21:50:28
408
原创 【React】react-router-dom中的HashRouter和BrowserRouter实现原理
在之前整理BOM的五个对象location.hash发生改变后，会触发hashchange事件，且history栈中会增加一条记录，但页面不会重新加载——实现HashRouter的关键URL)执行后，history栈中会增加一条记录，但页面不会重新加载，回退（history.back()或history.go(-1)）会触发popstate事件，location.pathname发生改变——实现BrowserRouter的关键本篇通过举例方式详细描述实现的过程。
2024-01-05 11:52:22
1695
原创 【Redux】自己动手实现redux-thunk
在原始的redux里面，action必须是plain object，且必须是同步。而我们经常使用到定时器，网络请求等异步操作，而redux-thunk就是为了解决异步动作的问题而出现的。
2024-01-04 23:03:53
550
原创 【Redux】自己动手实现redux和react-redux
react-redux是redux在React的一次成功应用，第2小节redux实现比较简单，主要是对第1小节的理解，理解第1小节后，理解第3小节就容易多了。看最新react官方文档，已将PureComponent和Componet列为过时的API，估计后续不推荐再使用class组件，因此react-redux实现方式可能会发生变更，或新出现一种redux和函数组件结合的方式，或基于useContext、useReducer、createContext形成一种新的实现方式。
2024-01-04 18:14:44
1383
原创 【ECMAScript】WebSocket模拟HTTP功能的实践：Promise+WebSocket+EventEmitter+Queue
本篇将结合Promise、WebSocket、EventEmitter和Queue，做一次实践：用WebSocket来模拟HTTP的功能。先不用关心它的用处，就当一次对知识点的整合吧。
2024-01-03 22:21:07
834
原创 【React】class组件生命周期函数的梳理和总结（第一篇）
本篇梳理和总结一下React的生命周期函数，方便使用class组件的同学查阅，先上生命周期图谱。
2024-01-03 17:39:16
1216
原创 【CSS】布局方式梳理和总结
网页布局是CSS的重点功能，布局的传统方案是基于盒子模型，依靠display属性、position属性和float属性，它对一些特殊布局很麻烦。CSS3推出的Flex布局和网格布局，让开发者更容易定制自己想要的布局。本篇梳理和总结一些布局方式。
2023-12-27 23:53:36
1268
原创 【网络协议】WebSocket知识点梳理和总结
HTML5提出了全双工通讯协议WebSocket，让客户端和服务端交换数据更加便利。本篇梳理和总结一下WebSocket的方法和属性，并给一个示例代码。
2023-12-27 16:37:16
1381
原创 【Web2D/3D】Canvas（第三篇）
是HTML5新增元素，它是一个画板，开发人员基于它的2D上下文或webgl上下文，使用JS脚本绘制简单的动画、可交互画面，甚至进行视频渲染。本篇介绍基于canvas的2D上下文绘制2D画面的一些方法和属性。
2023-12-27 14:24:21
1247
原创 【Web2D/3D】SVG（第二篇）
SVG（Scalable Vector Graphics，可绽放矢量图形）是一种使用XML描述2D图形的语言，由于SVG是基于XML（HTML也是基于XML的），因为SVG DOM中每个元素都是可以操作的，包含修改元素属性、添加事件处理器。本篇梳理和总结SVG绘制图形的DOM元素。
2023-12-27 11:22:04
1157
原创 【Web2D/3D】CSS3的2D/3D转换transform、过渡transistion、关键帧动画animation（第一篇）
本篇开始介绍Web2D和3D相关基础知识，会从CSS3的2D/3D转换、过渡、动画，讲到Canvas 2D图形绘制，再到SVG，最后到WebGL。
2023-12-26 21:05:53
1318
原创 【浏览器】Web存储梳理和总结
Web存储主要包含cookie、sessionStorage、localStorage和indexedDB（WebSQL已被废弃），本篇就这4种存储的知识点进行梳理和总结。随差浏览器的发展，Web可以做的事情也会越来越多，Web3D、GIS以及其他PC端应用都有可能搬到Web上，它们均会涉及大量处理的处理和存储，Web存储为Web客户端在处理大量数据方面也变得很便利。注：以上，如有不合理之处，还请帮忙指出，大家一起交流学习~
2023-12-26 17:38:44
1006
原创 【HTML】基础知识梳理和总结
HTML（Hyper Text Markup Language，超文本标记语言）是一种用于创建网页的标记语言，通过使用HTML标签决定如何展现HTML页面的内容。
2023-12-26 10:49:02
867
原创 【CSS】基础知识梳理和总结
CSS（Cascading Style Sheets，层叠样式表），用来为HTML文档添加样式的计算机语言。通过标签加载外部样式表（External Style Sheet），即将外部样式表的URL作为的href属性节点的值通过标签加载内部样式表（Internal Style Sheet），即将样式表文本作为的文本节点通过元素的style属性加载内联样式（Inline Style），即将样式作为style属性节点的值。
2023-12-25 22:17:53
951
原创 【浏览器】同源策略和跨域
在说跨域之前，先说说同源策略，什么是同源策略呢？同源策略是浏览器的一种安全机制，减少跨站点脚本攻击（XSS，Cross Site Scripting）、跨站点请求伪造（CSRF，Cross Site Request Forgery）攻击等，因为非同源的请求会被浏览器拦截掉。同源就是协议、域名（主域名和子域名）、端口三者均相同，有其中一个不同就是非同源，即跨域。遵循同源策略1. Web存储：Cookie、SesstionStorage、LocalStorage、IndexedDB。
2023-12-25 13:10:22
420
原创 【浏览器】缓存机制
浏览器缓存分为强制缓存和协商缓存，过程如下：Step 1：浏览器发送请求前，根据请求头Cache-Control和Expires判断是否命中强缓存，如果命中强缓存，直接从缓存获取资源，且不会发送请求。Step 2：如果未命中强缓存，浏览器会向服务器发送请求，服务器根据请求头的If-None-Match和If-Modified-Since判断是否命中协商缓存，如果命中，直接从缓存获取资源。Step 3：如果未命中协商缓存，则从服务获取资源。本篇浏览器缓存机制做一下梳理和总结。
2023-12-24 21:13:57
355
原创 【ECMAScript】事件的学习总结
DOM2 Events规范规定事件流分3个阶段：事件捕获->目标元素接收事件->事件冒泡，事件捕获为拦截事件提供可能。事件是用户或浏览器执行的动作，如：单击、加载、鼠标悬停，为响应事件调用的函数被称为事件处理程序（或事件监听器），事件处理程序名字以‘on’开头，onclick、onload等。mouseout：用户把鼠标光标从一个元素移到另一个元素上时触发（移到的元素可以是原始元素的外部元素，也可以是原始元素的子元素，不能通过键盘触发）——事件主要目标是失去光标的元素。以这种方式指定事件处理程序，会。
2023-12-24 17:48:41
828
原创 【浏览器】简单总结一下浏览器工作原理
本篇就从HTML、CSS、JavaScript获取、解析，到最终呈现在屏幕上的浏览器运行过程，简单总结一下。
2023-12-22 22:35:16
883
空空如也
信号是怎么被接收的？
2023-11-21
信号传输过程中，有线传输和无线传输，相同点和不同点有主要哪些
2023-11-21
TA创建的收藏夹 TA关注的收藏夹
TA关注的人