一些学习日记

原创已于 2025-10-11 18:22:21 修改 · 385 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#学习

于 2025-09-30 16:53:11 首次发布

一、响应式布局

核心概念

1、定义：页面自动适配不同尺寸设备的布局方式

2、方案：媒体查询、弹性布局、视口单位、rem布局

关键技术

1、移动端：viewport 、1px

2、CSS预处理器

3、Bootstrap栅格系统原理

性能优化

1、图片适配：srcset、懒加载

2、代码优化：CSS压缩、JS按需加载

框架响应式

1、Vue2:Object.defineProperty Vue3/React：Proxy

2、组件响应：v-if v-show

二、ES6 Proxy Reflect

概念0：元编程特性（meta programming），对象操作的高级控制，标准化方法。

概念1：通过Proxy创建代理对象，在代理对象中使用Reflect对JS原始（get/set/has/apply）操作的拦截。

Proxy ：代理模式，使用代理对象进行对象拦截并操作

Reflect：规范/标准操控对象，拦截并操作

必须结合使用？

receiver （proxy实例 or 继承proxy的那个对象）

触发代理对象拦截操作时，正确this指向

https://blog.youkuaiyun.com/qq_45828551/article/details/126251545

三、MVC MVVM

单双数据流

MVC：用户操作Controller更新Model，再通知View更新

MVVM：View与ViewModel自动同步。Model变化ViewModel自动更新；用户操作ViewModel修改Model。Model<=>ViewModel<=>View

四、Nginx正向反向代理

正：客户端做，应用：突破网络限制，翻墙，VPN；浏览器设置

反：服务器做，应用：负载均衡、安全防护、缓存加速；Nginx proxy_pass

五、函数式编程、命令式编程

Functional Programming，FP：计算视为数学函数的组合，关注“做什么”，递归，延迟计算直到需要结果；

命令式编程：关注“如何做”

//命令式-关注步骤
let sum=0
for(let i=0;i<10;i++){
    sum+=i
}
//函数式-关注转换-做什么
const sum=[...Array(10).keys()].reduce((acc,x)=>acc+x,0)

六、正则匹配RegExp

**定义：**文本处理，匹配、查找、替换字符的特定模式。

元字符： . ^ $ [] \d \w \s

量词： * + ? {m,n}

匹配模式：.*? i g m

分组捕获：() \1

方法：String：search match replace;RegExp：test exec

示例：

function getType(value) {
  return Object.prototype.toString.call(value)
    .match(/\s+(\w+)/)[1]  // 提取[object Type]中的Type
    .toLowerCase();        // 统一转为小写
}

// 测试用例
console.log(getType(''));        // "string"
console.log(getType(2));         // "number"
console.log(getType([]));        // "array"
console.log(getType(null));      // "null"
console.log(getType(new Date()));// "date"
console.log(getType(/regex/));   // "regexp"

//HTML标签内容提取
'<div>content</div>'.match(/<[^>]+>([^<]+)</)[1]
// 检测字符串中连续重复的单词
const regex = /(\b\w+\b)\s+\1/g;
const text = "hello hello world this is a test test";
const matches = text.match(regex);

console.log("重复的单词对:", matches); // 输出: ["hello hello", "test test"]


function deduplicateText(text) {
    // 匹配连续重复的单词（不区分大小写）
    const wordRegex = /(\b\w+\b)(?:\s+\1)+/gi;
    // 匹配连续重复的字符
    const charRegex = /(.)\1+/g;
    
    // 先处理单词重复，再处理字符重复
    return text
        .replace(wordRegex, '$1')  // 保留第一个单词
        .replace(charRegex, '$1'); // 保留第一个字符
}

// 测试用例
const testText = "hello hello world this is is a test testtt";
console.log(deduplicateText(testText)); 
// 输出: "hello world this is a test"

/ 正斜杠：网络路径、Unix Linux文件路径、除法、正则分隔符

\ 反斜杠：Windows文件路径、转义字符\n 换行

TS核心

一、基础概念

1、超集；编译阶段静态类型检查，tsc编译器编译为JS运行；提示+补全；特性：泛型接口

2、any unknown void never；关闭~断言~无值~不存在

二、类型系统

1、interface type

同：对象/函数，泛型

不同：扩展extends &；同名合并；范围对象/函数所有

2、泛型 Generic

类型参数化；安全/复用

三、高级特性

1、类型断言

编译告知类型；as

2、类型守护

运行检查；typeof instanceof in

四、实践应用

//联合类型| 交叉类型& 类型别名type 接口interface 泛型T 类型断言as<>
<script lang='ts'>
import {defineComponent,PropType} from 'vue'
interface Column<T>{
    key:keyof T;
    title:string;
}
interface MetaColumn<T>{
    width:number
}
type NewColumn=Column&MetaColumn
export enum OrderStatus{
    Pending='PENDING',
    Shipped='SHIPPED',
}
export default defineComponent({
    props:{
    	columns:{
        	type:Array as PropType<NewColumn<any>[]>
    	},
        orderType:{
            type:OrderStatus.Pending
        },
        msg:{
            type:[String,Number] as PropType<string|number>,
        },
        type:{
            type:String as PropType<'success'|'error'>,
        }
	}
})
</script>

Git核心

GiHub 开源社区生态 GItLab私有化部署企业

一、基本工作流

git clone

git checkout -b feature/xxx

git add .

git commit -m ‘feat:xxx’

git push/pull [-u origin <分支名>] 首次/后续关联远程分支

PR/MR

二、常见问题

1、Git合并冲突

<<<<<<< HEAD （当前分支修改）>>>>>>> branch-name (其他分支修改)

2、rebase merge

变基个人分支整理

3、回退

git reset /revert

4、忽略

.gitignore git rm --cached 删掉已跟踪文件后才能忽略

5、分支策略

Git Flow Github Flow

6、历史记录

git log

7、撤销未提交的更改

git checkout – []

8、同步远程分支到本地

git checkout -b <local-branch> origin/<remore-branch>

or

git fetch origin

git pull origin <remote-branch>

9、stash

git stach save/git stash pop

10、合并多个提交

git rebase -i HEAD~3

11、commit 信息错误

git commit --amend

Vue3

一、核心机制与响应式原理

1、响应式原理
Proxy+Reflect Object.defineProperty
2、ref reactive
基本 const num=ref(0) //num.value++
对象 const obj=reactive({a:1}) //obj.a=2
3、toRef toRefs
const {a,b}=toRefs(state)//保持响应式
const a=toRef(state,'a')
4、v-model
v-model:title="tit"
props:['title'],
emits:['update:title']
this.$emit('update:title',t)
5、shallowReactive shallowRef
浅响应式

二、组合式API

1、区别
	类型 功能
2、setup()
	初始化
    beforeCreate created
3、逻辑复用
	组合函数 自定义Hook
    function useCounter(){
        const count=ref(0)
        const increment=()=>count.value++
        return {count,increment}
    }

三、生命周期与异步处理

1、周期
beforeUnmount unmounted
onMounted(()=>{})
2、watch watchEffect
watch:显示指定依赖
watchEffect:自动收集，立即执行，副作用
watch(count,(n,o)=>{})
watchEffect(()=>console.log(count.value))//自动跟踪

四、特性与优化

1、Teleport
子组件渲染到DOM指定位置
<Teleport to="body">
    xxx
</Teleport>
2、Suspense
异步组件加载
<Suspense>
    <template #default>
        <AsyncComponent />
    </template>
	<template #fallback>222</template>
</Suspense>
3、优化
源码（ts/删/ESM）、性能、API、reponono
编译优化：静态提升、与字符串化、内联事件处理函数、patchFlag、blocktree
渲染优化：diff算法
响应式：Proxy
API：ComponentAPI

五、通信与状态

1、父子
:msg="msg" @update="handleUpdate"
props:['msg'],emits:['update']
this.$emit('update',this.msg)
2、祖先
provide inject

六、技巧与陷阱

1、路由懒加载
component:()=>import('./Home.vue')
2、v-if v-for
计算属性
3、TS类型错误
String as PropType<string>

Jest Vitest

^.+\.(js|ts)$ xxx.js文件

安装配置测试用例编写
test('xxx',()=>[
	const wrapper=mount()
	expect()
])
良好的测试覆盖率：边界条件、逻辑、空判断、提前返回

vite webpack

一、Vite原理

1、HMR

WebSocket ==> 仅重新编译修改的文件，ESM动态替换模块

2、秒启动

依赖于构建：esbuild node_modules ESM node_modules/.vite

按需编译：避免全量打包

二、Webpack原理

1、流程

初始化-编译-构建-输出

三、对比

开发：ESM，无需打包，按需加载；打包所有模块

生产：Rollup打包，输出优化后静态资源；依赖图生成bundle

生态：轻量；复杂项目

CSS预处理器

编程特性：变量、函数、混合；可维护性、开发效率

Less：轻量，小项目；Sass：全面，复杂项目

主题切换、响应式布局

CSS模块化方案：Tailwind CSS 原子类

大屏响应式布局

1、分辨率差异大；2、超宽屏；3、元素比例保持；4、动态数据适配

全屏图表自适应 vw vh+ECharts resize()

多模块弹性布局 Grid 媒体查询

超宽屏横向滚动 overflow-x auto flexbox

动态数据更新 JS resize+防抖

1、1920*1080为设计基准，相对单位 vw vh 向上适配

2、Echarts D3.js 响应式API

3、超宽屏幕：调整列数、横向滚动

CI/CD

持续集成（Continuous Integration）[kənˈtɪnjuəs ˌɪntɪˈɡreɪʃn]
持续交付（Continuous Delivery）[kənˈtɪnjuəs dɪˈlɪvəri]
和持续部署（Continuous Deployment）[kənˈtɪnjuəs dɪˈplɔɪmənt]

Node.js

概念：基于ChromeV8引擎的JS运行环境。JS是语言，Node.js是运行环境；Node.js扩展了JS能力，使其能脱离浏览器运行在服务器端。

核心能力：文件系统、网络请求、数据库、子进程等系统级操作

应用：API服务 Express.js Nuxt.js、CLI Webpack、编辑器 VSCode

文件系统：fs 、网络：http、模块化：CMJ CommonJS ESM
module.exports={}
require()
模块加载顺序：内置模块、文件模块、第三方模块

Uniapp

基于Vue.js的跨平台开发框架，支持编译到iOS Android Web 小程序等多端

多端适配：跨端组件、弹性布局、单位适配、条件编译

flex 750rpx #ifdef #endif

Tips

1、设备像素比 devicePixelRatio dpr

const dpr = window.devicePixelRatio || 1;  
canvas.width = canvas.clientWidth * dpr;*//实际像素数量（影响清晰度）

2、透明度

ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
//半透明实现拖尾效果  0-完全透明 1-完整颜色
ctx.fillRect(0, 0, canvas.width, canvas.height);