适配器模式 适配器模式定义适配器模式的作用是解决两个软件实体间的接口不兼容的问题,使用适配器模式之后,原本由于接口不兼容而不能工作的两个软件实体便可以一起工作适配器的别名是包装器(wrapper),在程序开发中有很多这样的场景,当试图嗲用模块或者对象的某个接口时,却发现这个接口的格式并不符合当前的需求,这时候有两种解决办法,第一种是修改原来的接口实现,但如果原来的模块很复杂,或者拿到的模块是一段别人编写的经过 2023-11-24 Web -- Knowledge is infinite > 编程思想 > 设计模式 #设计模式
CSS 基础 CSS 基础基本概念:要理解几个重要的概念文档流 Normal Flow块( block )、内联( inline )、内联块 ( inline-block) 文档流文档流指的是流动方向:从左到右和从上到下inline 元素从左到右排列知道排满换行,宽高直接设置是无效的block 元素从上到下,块各占一行,所有块元素都可以设置宽度和高度以及内外边距inline-block 也是从左到右,同时具有 2023-11-24 Web -- Knowledge is infinite > 前端 > CSS > CSS基础 #CSS基础
CSS 语法 CSS 语法标准的制定者:W3C:搜索CSS spec 可以找到 CSS 最新标准 语法:123456789选择器 { 属性名:属性值; /*注释*/}div { width: 300px; height: 300px; background: rgba(210, 18, 0, .5);} ** 注意避错:**所有符号都是英文符号、区分大小写任何地 2023-11-24 Web -- Knowledge is infinite > 前端 > CSS > CSS基础 #CSS基础
CSS 布局(简要) CSS 布局(简要)布局分类:三类固定宽度布局,一般宽度为960 / 1000 / 1024px不固定宽度布局,主要靠文档流的原理来布局响应式布局,意思就是PC上固定宽度,手机上不固定宽度也就是一种混合布局 布局的两种思路:从大到小先定下大局然后完善每个部分的小布局 从小到大先完成小布局然后组成大布局 两种均可 确认项目是PC端还是手机端:确认后进行布局选择PC则使用 Fl 2023-11-24 Web -- Knowledge is infinite > 前端 > CSS > CSS 布局 #CSS 布局
flex 布局 flex 布局容器 container内容 items 属性:flex-direction 主轴对齐方式flex-direction是设置主轴的方向即项目的排列方向,分为X轴和Y轴,行或列默认值是X轴 从左到右的主轴和侧轴是会变化的,就看flex-direction设置谁为主轴,剩下的就是侧周。而我们的子元素是跟着主轴来排列的row 默认值从左到右row-reverse 从右到左column 从上 2023-11-24 Web -- Knowledge is infinite > 前端 > CSS > CSS 布局 #CSS 布局
float 布局 float 布局步骤:子元素上加 float:left / right和 width在父元素上加 .clearfix任何元素都可以浮动,不管原先是什么模式的元素,添加浮动之后具有行内块元素相似的特性如果行内元素有了浮动,则不需要转换块级\行内块元素就可以直接给高度和宽度 123456789101112span,div { float: left; width: 200px; 2023-11-24 Web -- Knowledge is infinite > 前端 > CSS > CSS 布局 #CSS 布局
rem布局 rem布局rem 是一个单位rem (root em) 是一个相对单位,类似于 em,em 是父元素字体大小rem 的基准则是相对于 html 元素的字体大小 1html{font-size:10px} rem 的优点就是可以通过修改 html 里面的文字大小来改变页面中元素的大小,可以整体的进行控制 less 2023-11-24 Web -- Knowledge is infinite > 前端 > CSS > CSS 布局 #CSS 布局
JSON 语言 JSON 语言**JSON 不是编程语言而是一门标记语言 **用来展示数据的 语法查看官网 JSON 语法图,看完就会 支持的数据类型string—— 只支持双引号,不支持单引号和无引号number—— 支持科学计数法bool ——true 和 falsenull ——没有 undefinedobjectarray注意与JS的七种数据类型区别不支持函数,不支持变量,(也就不支持引用) window 2023-11-24 Web -- Knowledge is infinite > JSON #JSON
包体积分析 包体积分析通过 可视化 的方式,直观的体现项目中各种包打包之后的体积大小,方便做优化 实现步骤 安装包 source-map-explorer 1pnpm i source-map-explorer 打包项目时需要开启 build-source-map 123456789101112//vite.config.js{ build:{ sourcemap 2023-11-24 Web -- Knowledge is infinite > 前端 > 构建相关 #构建相关
浏览器进程与线程 浏览器进程与线程浏览器进程有哪些浏览器进程(主进程)负责控制浏览器除标签页外的界面,包括地址栏、书签、前进后退按钮等,以及负责与其他进程的协调工作,子进程的管理,创建和销毁等操作,同时提供存储功能 渲染进程负责控制显示 tab 标签页内的所有内容,核心任务是将 HTML、CSS、JS 转为用户可以与之交互的网页,排版引擎 Blink 和 JS 引擎 V8 都是运行在该进程中,默认情况下 Chrom 2023-11-24 Web -- Knowledge is infinite > 前端 > Web #Web