web前端
文章平均质量分 68
web前端笔记
海胆Sur
本着开放共享的态度
展开
-
网页内容高度不够时,让 footer 处于页面底部;高度超出时,位于内容最后的方法
【代码】网页内容高度不够时,让 footer 处于页面底部的方法;高度超出时,位于内容最后。原创 2023-12-10 18:20:28 · 513 阅读 · 0 评论 -
React 笔记 jsx
html 内置标签通过is属性 标记为 自定义组件通过定义 组件函数的参数来设定 props。原创 2023-12-04 14:42:28 · 1118 阅读 · 0 评论 -
TypeScript(ts) 语法笔记
ts 是 js 的超集保留字类型类型断言-指定值的类型类型关键字介绍任意类型any声明为 any 的变量可以赋予任意类型的值。数字类型number双精度 64 位浮点值。它可以用来表示整数和分数。字符串类型string同es6布尔类型boolean数组类型 / 声明变量为数组。元组[string, number, ···]表示已知元素数量和类型的数组,各元素的类型不必相同,对应位置的类型需要相同。枚举enum枚举类原创 2022-06-23 14:29:21 · 247 阅读 · 0 评论 -
less 笔记
/原创 2023-11-30 15:15:39 · 839 阅读 · 0 评论 -
浏览器 事件循环 从 宏队列和微队列 到 延时队列、交互队列、微队列 | js 执行机制 异步程序
同步程序执行完,再执行异步。会出现定时器不准的情况js 会阻塞渲染 是因为它们运行在同一个线程上JS 是单线程。因为js只能运行在浏览器的渲染主线程中,而渲染主线程只有一个,而渲染主线程承担着非常的多的事情 , 渲染页面 , 执行js啥啥的 都在里面执行浏览器的渲染进程 采用何种方式处理定时器任务、交互任务,任务执行顺序的依据 —— 事件循环。原创 2021-08-06 17:52:35 · 1212 阅读 · 1 评论 -
PostCSS 让js可以处理css
PostCSS 不是样式预处理器是 CSS 语法转换的工具,但不严格遵循css规范,只要符合css语法规则就可以被处理。这也让提前实现新提案成为可能。原创 2023-04-04 17:11:10 · 555 阅读 · 0 评论 -
Https 笔记
HTTP + TLSTLS 的前身是 SSL非对称加密的核心: 两个密钥(公私)https 需要第三方CA(证书授权中心)申请SSL证书以确定其真实性证书种包含了特定的公钥和私钥。原创 2023-03-11 14:53:39 · 460 阅读 · 0 评论 -
web存储 | Cookie、Web Storage API(localStorage、sessionStorage)、IndexedDB
localStorage 里面存储的数据没有过期时间设置,而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。打开多个相同的 URL 的 Tabs 页面,会创建各自的 sessionStorage。页面会话在浏览器打开期间一直保持,并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文。关闭对应浏览器标签或窗口,会清除对应的 sessionStorage。检查浏览器是否支持DOM存储。原创 2021-12-24 17:03:06 · 770 阅读 · 0 评论 -
HTTP Content-Type (MIME) el-upload文件、图片上传 | 文件改名 | 大文件 | 文件下载
MIME 为数据格式标签;最初 MIME 是用于电子邮件系统的,后来 HTTP 也采用了这一方案。在HTTP协议消息头中,使用来表示请求和响应中的媒体类型信息。原创 2023-03-09 10:45:44 · 1810 阅读 · 0 评论 -
el-upload 上传图片文件方法
格式需要在上传前进行校验 before-upload,accept 仅在文件选择时自动筛选,可被取消。覆盖action的默认请求行为是必要的 http-request,自定义上传方法。显示文件列表 file-list。自动上传 auto-upload。默认方法是单个文件提交的。原创 2023-03-08 16:24:41 · 488 阅读 · 0 评论 -
TCP 握手过程 三次 四次
SYN 同步ACK 确认FIN 结束核心机制是确定哪些请求或响应需要丢弃SYN、ACK、FIN 通过 1/0 设置开启/关闭开启SYN后,报文中会随机生成 Sequence序号 用于校验 (应用可能发起多个会话,可以区分)服务器的同步序号 通常通过一定运算得到,而不进行缓存。关闭时,甚至可以直接采用客户端的确认号ACK - 确认号 根据对方同步序号+1 得到。原创 2023-03-01 10:42:57 · 241 阅读 · 0 评论 -
Nginx 使用笔记
架构的核心思想——分层VPN 正向代理内存占用小,支持5万的高并发configuremakesbinconf。原创 2023-02-27 13:48:56 · 244 阅读 · 0 评论 -
dayjs 笔记
js 日期库 拥有极小的体积Dayjs对象是不可变的,所有的 API 操作都将返回一个新的 Dayjs 对象。在设计上 Day.js 的 getter 和 setter 使用了相同的 API,也就是说,不传参数调用方法即为 getter,调用并传入参数为 setter。原创 2022-11-18 17:04:02 · 758 阅读 · 0 评论 -
流媒体协议
HTML5 不直接支持 MPEG-DASH,但可通过 HTML5 Media Source Extensions(MSE)使用 MPEG-DASH (图片来源:https://blog.csdn.net/yue_huang/article/details/78466537。图片来源:https://www.wowza.com/blog/hls-streaming-protocol。是不支持直接播放 FLV 视频格式,需要借助 flv.js 这个开源库来实现播放 FLV 视频格式的功能。原创 2022-11-15 09:27:40 · 199 阅读 · 0 评论 -
fetch 标准
有这套标准后,意味着拥有处理任意文件的底层实现,拥有无限的扩展能力和处理能力。fetch 全线基于promise。Premise 本身链式调用的优势。可以配置缓存 即便说api形式的。ajax 需要手动维护回调函数。指定了资源请求的统一标准。Response 对象。可以以流的方式读取资源。Request 对象。原创 2022-11-10 22:59:50 · 108 阅读 · 0 评论 -
WebSocket 笔记
data类型:文本字符串(utf-8)、有类型的数组、Blob、typedArray。bufferedAmount 未发送至服务器的字节数 受send方法影响。readyState 当前链接状态。当从服务器接受到信息时的回调函数。要传给服务端的数据进入发送队列。protocol 下属协议。code 默认 1005。连接成功后的回调函数。连接关闭后的回调函数。连接失败后的回调函数。原创 2022-10-30 23:30:46 · 483 阅读 · 0 评论 -
js-xlsx js处理excel 通过sheetJSON生成Excel文件
cell 对象,指的就是 worksheet 中的单元格。workbook 对象,指的是整份 Excel 文档。Sheets 对象,指的是 Excel 文档中的表。SheetNames 工作表名。原创 2022-09-24 12:47:42 · 647 阅读 · 0 评论 -
数据大屏设计思路 6点
屏幕分辨率不高时,要考虑字体大小有辨识度。战略追踪:过去现在未来,目标实现情况。如果在多种屏幕上展示,要做适应优化。结果评估 :突出结果与目标的对比。如果是拼接屏幕,信息要避开黑线。考虑受众理解方式,阅读习惯;监控操作:带有一定的实时性。关注点提炼,浏览符合心流。较差的屏幕会有色差问题。挖掘分析:展示分析结果。原创 2022-09-20 09:18:48 · 313 阅读 · 0 评论 -
计算机网络结构 OSI网络参考模型 TCP/IP网络模型
参考应用层协议:HTTP、HTTPS、FTP、DNS 等服务端 端口映射传输层协议:TCP UDP网络层协议:IP数据链路层物理层(1) 浏览器获取输入的域名www.baidu.com(2) 浏览器向DNS请求解析www.baidu.com的IP地址(3) 域名系统DNS解析出百度服务器的IP地址(4) 浏览器与该服务器建立TCP连接(默认端口号80)(5) 浏览器发出HTTP请求,请求百度首页(6) 服务器通过HTTP响应把首页文件发送给浏览器(7) TCP连接释放(8)原创 2021-11-19 23:49:38 · 126 阅读 · 0 评论 -
Echarts 配置、用法及注意事项
如果一个 transform 被链式声明,它只能获取前一个 transform 的第一个输出作为输入(第一个 transform 除外),以及它只能把自己的第一个输出给到后一个 transform (最后一个 transform 除外)为该类型时类目数据可自动从 series.data 或 dataset.source 中取,或者可通过 xAxis.data 设置类目数据。同理,若取行作为维度时,第一列数据会作为图例名。内置有导出图片,数据视图,动态类型切换,数据区域缩放,重置五个工具。原创 2021-12-17 11:07:45 · 1555 阅读 · 0 评论 -
HTTP 笔记 发展历程 缓存
菜鸟教程参考笔记九种方法:OPTIONS:返回服务器针对特定资源所支持的HTTP请求方法。也可以利用向Web服务器发送’*'的请求来测试服务器的功能性。HEAD:向服务器索要与GET请求相一致的响应,只不过响应体将不会被返回。这一方法可以在不必传输整个响应内容的情况下,就可以获取包含在响应消息头中的元信息。GET:向特定的资源发出请求。特性偏向于查找POST:向指定资源提交数据进行处理请求(例如提交表单或者上传文件)。数据被包含在请求体中。POST请求可能会导致新的资源的创建和/或已有资源的修原创 2022-01-04 15:02:41 · 320 阅读 · 0 评论 -
前端:项目 文件 文件夹 命名规范
参考博客项目命名: 全部以小写字母命名,以中划线分割。如my-project。 目录命名: 全部以小驼峰命名法,除第一个单词之外,其他单词首字母大写。如myDir。组件文件命名: 遵循 Pascal 命名法(大驼峰),例如 AddressPicker.vue。JS/TS 文件: 以小写字母命名,多个单词以下划线连接,例如 util.js、util_helper.js。HTML/CSS文件命名: 确保文件命名总是以字母开头而不是数字,且字母一律小写,以下划线连接且不带其他标点符号。如m原创 2021-11-30 10:54:47 · 8775 阅读 · 3 评论 -
前端开发常用库
js方法库JQuery动画库CSS动画库Animate.css | 简单的元素进出动画Hover.css | 各种悬停动画magic.css | 各种原地秀的动画JS动画库animejs | 运动转换的动画wowjs | 轻量级滚轮事件动画 基于animate.cssscrollReveal.js | 根据页面滚动显示动画 可设置动画播放次数...原创 2021-11-19 23:52:30 · 403 阅读 · 0 评论 -
Angular标准 commit message 提交信息、commit 验证、standard-version 自动版本更替和 changelog 输出
辅助提交工具因为要使用 commitizen 工具来辅助提交信息填写npm install commitizen -g进而需要先安装 node 环境使用在项目目录下# 需要先 npm initcommitizen init cz-conventional-changelog --save --save-exact使用 git cz 进行提交会弹出规范进行一系列的输入具体规范标准Commit message 包括三个部分:Header,Body 和 Footer<type&g原创 2021-09-17 13:05:46 · 1479 阅读 · 0 评论 -
el-tree 在 el-dialog 显示时 重新加载 el-tree (el-tree采用懒加载)
原本的 el-tree 组件 在执行完 树节点 的懒加载后 就不会触发 load若想重新加载需要 拿到树的根节点 然后清空子树 重新调用 load 的请求函数请自行参考官方文档,只展示关键部分if (node.level === 0) { this.node_had = node // 保存根节点 this.resolve_had = resolve ...在需要重载的地方,添加如下代码if (this.node_had) { this.no原创 2021-09-07 11:56:21 · 3328 阅读 · 0 评论 -
Mock.js 笔记
A simulation data generator仿真数据生成器数据模板 'name|rule': value规则说明'name|min-max': value'name|count': value'name|min-max.dmin-dmax': value'name|min-max.dcount': value'name|count.dmin-dmax': valuedmin~dmax 小数保留位数'name|count.dcoun原创 2021-08-23 20:21:48 · 152 阅读 · 0 评论 -
Sass 笔记 主题管理
需要安装sass的预处理器将 .scss 转义成 .csssass xxxx.scss# 之间显示转译后的结果sass xxxx.scss xxx.css# 转译并写入指定文件中定义变量$variablename: value;/* $ 为必需 */其拥有块级作用域全局标记 !global选择器嵌套@import 非css的@import@import...原创 2021-08-13 17:45:15 · 126 阅读 · 0 评论 -
JQuery 笔记
1.x 支持 ie 6782.x 不支持 ie 6783.x 不支持 ie 678 且支持罪行浏览器jquery.js 文件会导出 JQuery 函数JQuery函数名 简写为本身返回JQuery对象注意:事件中的 this 指代 DOM 对象,若要事件函数中使用 JQuery 对象,可以用$(this)原创 2021-08-11 19:55:31 · 62 阅读 · 0 评论 -
常见的浏览器内核
Trident、Gecko、Blink、WebkitBlink:webkit的分支内核IE浏览器内核:Trident内核Chrome浏览器内核:webkit 2013年以后 采用BlinkOpera浏览器内核:最初是自己的Presto内核,(2016年奇虎360和昆仑万维收购)后来是Webkit,现在是Blink内核Firefox浏览器内核:Gecko内核360浏览器、猎豹浏览器内核:IE+Chrome双内核;搜狗、遨游、QQ浏览器内核:Trident(兼容模式)+Webkit(高原创 2021-06-20 23:08:44 · 479 阅读 · 0 评论 -
网页隐藏元素的方法
让元素变得透明不透明度设置为0opacity: 0;让元素缩小到0将元素缩小到0transform: scale(0);进行遮蔽的方法相对定位至底层 (需要有遮挡的层和父框)position: absolute;z-index: -999;父框遮蔽 隐藏元素//父框长宽0 width: 0;height: 0;overflow:hidden;6 visibility: hidden; visible不进行渲染HTML5 hidden属性CSS3 display:n原创 2021-06-03 16:11:05 · 265 阅读 · 0 评论 -
前端知识结构(个人理解) ECMA、TC39、Stage 4
HTML、CSS、JavaScript 是基石为了方便以及简化脚本的书写又产生了一些js库,如JQuery等;HTML和CSS的标准得到了不断的完善,增加了很多新特性,到现在HTML5和CSS3;因为前端项目内容的丰富,项目不断变得庞大,难以维护,迫切需要工程化的方式来进行开发管理于是就有了前端的框架,诸如Vue、React、Angular等既然提到了项目变大的问题,自然也就需要打包工具,如Webpack,来对项目进行压缩优化,方便部署Node.js则提供服务端js运行环境,让js可以脱离浏览器原创 2021-03-07 15:36:41 · 172 阅读 · 0 评论