CJJJX's BLOG

git命令大全创建仓库命令 命令 说明 git init 初始化仓库，在当前目录新建一个Git代码库，基本上是创建一个具有objects，refs/head，refs/tags和模板文件的.git目录。 git clone[url] 拷贝一份远程仓库，也就是下载一个项目和它的整个代码历史。 配置 命令 说明 git config --list 显示当前的Git配置 git config -e [–global] 编辑Git配置文件。 git config [–global] user.name “[name]” git config [–global] user.email “[email address]” 设置提交代码时的用户信息 增加 / 删除文件 命令 说明 git add [file1] [file2] ... 添加指定文件到暂存区 git add [dir] 添加指定目录到暂存区，包括子目录 git add . 添加当前目录的所有文件到暂存区 git add -p 添加每个变化前，都会要求确认 对于同一 ...

iso/osi参考模型有七层，tcp/ip模型有四层，结构图如下 OSI参考模型1.物理层:负责传输比特流 使用的协议有:RS-232、V.35、Ethernet、Wi-Fi等, RS-232 是一种串行通信协议用于在计算机和外部设备之间传输数据. V.35是一种高速串行接口协议，用于连接计算机和网络设备。 Ethernet 是一种局域网协议，用于在计算机之间传输数据。 Wi-Fi 是一种无线局域网协议，用于在无线网络中传输数据 2.数据链路层:负责将比特流转换为帧 使用的协议有: PPP、HDLC、Ethernet、Wi-Fi等， PPP 是一种点对点协议用于在两个计算机之间建立连接。 HDLC 是-种高级数据链路控制协议，用于在计算机和网络设备之间传输数据。 Ethernet 和 Wi-Fi 也可以用于数据链路层通信 3.网络层:负责将顿转换为数据包， 使用的协议有: IP、ICMP、ARP、RIP、OSPF等 IP 是一种互联网协议，用于在不同的计算机之间传输数据。 ICMP 是一种互联网控制消息协议，用于在网络中传输控制信息。 ARP 是一种地址解析协议， ...

在 TypeScript 中，type 和 interface 这两个概念比较容易混淆，它们都可以用来表示 接口，但是在实际使用上会存在一些差异。 一、基本概念1、type（类型别名） 用来给一个类型起新名字，使用 type 创建类型别名。类型别名不仅可以用来表示基本类型，还可以用来表示对象类型、联合类型、元组和交集。 1234567891011121314type userName = string; // 基本类型type userMsg = string | number; // 联合类型// 对象类型type Person = { name: userName; age: number;};// 使用Person类型let user: Person = { name: "leo", age: 18}; 2、interface（接口）接口是命名数据结构（例如对象）的另一种方式；与 type 不同，interface 仅限于描述对象类型。接口的声明语法也不同于类型别名的声明语法。如将上面 ...

防抖（Debounce）和节流（Throttle）是前端开发中最常用的优化处理方式，本文介绍防抖和节流的区别，应用场景，手撕代码，介绍相关可以直接在项目中使用的库。 区别简单的定义区分： 防抖是一段时间内，多次执行变为只执行最后一次。 节流是一段时间内，多次执行变为只执行第一次。 详细的定义区分： 防抖（debounce）是指在一段时间内多次触发相同事件时，只执行最后一次触发的事件。 这意味着，在一系列触发事件中，如果在指定的时间间隔内，发生了新的触发事件，那么前面的触发事件将被忽略，只有最后一次触发事件会被执行。 节流（throttle）是指在一段时间内多次触发相同事件时，只执行一次事件。 这意味着，无论触发事件发生多少次，在指定的时间间隔内只会执行第一次事件。 应用场景真实的项目中，在不同的场景下灵活切换使用防抖或节流，才会更加减少不必要的资源消耗，更加提高前端应用的性能和响应性。 防抖（Debounce）的应用场景： 搜索框输入：当用户在搜索框中输入内容时，可以使用防抖来延迟触发搜索请求。只有在用户停止输入一段时间后才会发送请求，避免频繁的请求发送。 窗口调整：当 ...

方法一：双层循环，外层循环元素，内层循环时比较值 如果有相同的值则跳过，不相同则push进数组 方法二：利用splice直接在原数组进行操作双层循环，外层循环元素，内层循环时比较值 值相同时，则删去这个值 注意点:删除元素之后，需要将数组的长度也减1. 优点：简单易懂 缺点：占用内存高，速度慢 方法三：利用对象的属性不能相同的特点进行去重 方法四：数组递归去重运用递归的思想 先排序，然后从最后开始比较，遇到相同，则删除 方法五：利用indexOf以及forEach 方法六：利用ES6的setSet数据结构，它类似于数组，其成员的值都是唯一的。 利用Array.from将Set结构转换成数组 拓展运算符(…)内部使用for…of循环

SSR（传统服务端渲染）如：爱彼迎 传统的服务端渲染有：asp、jsp、ejs等，服务端语言往往通过这些模板引擎将数据和 DOM在服务端渲染完成，返回一个完整的静态 HTML页面给客户端，由客户端直接显示。 原理 客户端发送 HTTP请求 服务端响应 HTTP请求，返回拼接好的 HTML字符串给客户端 客户端渲染 HTML 缺点 前后端不分离，不好维护 用户体验不佳，需要重新加载页面 服务端压力大 CSR（客户端渲染）如：飞书 在现代化的前端项目中，客户端渲染的代表性技术栈是 Vue、React、Angular，我们常常使用它们来构建客户端单页或者多页应用程序。以 SPA构建程序为例，在浏览器端首先渲染的是一套空的 HTML，通过 JS直接进行页面的渲染和路由跳转等操作，所有的数据通过 Ajax请求从服务器获取后，在进行客户端的拼装和展示。 原理 客户端发起 HTTP请求 服务端响应 HTTP请求，返回一个空的 HTML文件 客户端初始化时加载必须的 JS文件，请求接口 将生成的 DOM插入到 HTML中 缺点 首屏加载慢 不利于SEO，需要等待所有的JS文件完成加载解析 同构 ...

获取JavaScript数组原型上所有方法，可以在控制台输入console.log(Object.getOwnPropertyNames(Array.prototype)) pushpush方法接收任意数量的参数，会将它们添加到数组末尾，返回数组的最新长度。 12let arr = ['cat']arr.push('monkey', 'pig') unshiftunshift()在数组开头添加任意多个值，然后返回新的数组长度。 12let arr = ['cat']arr.unshift('monkey', 'pig') splice可以传入三个参数，分别是开始位置、要删除的元素数量、可选的需要插入的元素，该方法返回要删除的元素的数组，如果删除数量为 0 即返回空数组。 新增 在下标1的地方后面添加一个元素 12let arr = ['monkey', 'pig', 'cat']arr.splice( ...

在前端开发中，构建一个优秀的页面需要耗费大量的时间和精力。为了让开发者能够更加高效地构建页面，我们可以利用人工智能技术来生成页面代码。在学校开设的互联网程序设计课程中，老师布置了使用ChatGPT来生成一个简单的前端页面的作业，在此分享一些相关的代码和技巧。 一、ChatGPT是什么？ChatGPT是一种基于人工智能的自然语言生成模型，它可以生成高质量的文本内容。ChatGPT基于GPT-3算法，并通过大量的文本语料库训练得出。使用ChatGPT生成文本内容非常方便，您只需要输入一些关键词或者主题，就能够快速生成相关的文本内容。 二、使用ChatGPT生成前端页面2.1 生成HTML文件在此我们要生成一个电商的首页，可以通过ChatGPT的问答，让其直接帮助我们生成页面。下面给大家举个示例： 以下是ChatGPT生成的HTML代码 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263<!DOCTYP ...

JavaScript中的thisthis是JavaScript中一个特殊关键字，用于指代当前执行上下文中的对象。它的难以理解之处就是值不是固定的，是再函数被调用时根据调用场景动态确定的，主要根据函数的调用方式来决定this指向的对象。this 的值在函数被调用时动态确定，以下是几种常见的情况： 全局上下文中：当在全局作用域中调用函数时，this 指向全局对象。在浏览器环境中，这个全局对象是 window 对象。 1console.log(this); // 在浏览器中，输出为 Window 对象 函数作为对象的方法：当函数作为对象的方法被调用时，this 指向调用该方法的对象。 123456const obj = { property: 'value', printProperty: function() { console.log(this.property); }};obj.printProperty(); // 输出 'value' 构造函数中：在使用 new 关键字创建实例时，构造 ...

** Vite和webpack的区别**Vite和webpack是两个常用的前端构建工具，它们在功能和使用方式上有一些区别。接下来我将详细介绍Vite和webpack的区别 构建方式Vite使用了一种新的构建方式，称为「原生ESM」构建。它利用浏览器原生支持ES模块的能力，通过将每个模块作为一个单独的文件进行构建，而不是像webpack那样将所有模块打包成一个文件。这种方式可以提供更快的冷启动和热更新速度。 webpack则是使用传统的「Bundler」构建方式，它将所有模块打包成一个或多个bundle文件，并使用代码分割和懒加载等技术来优化加载性能。 开发服务器Vite使用了一个基于ES模块的开发服务器，它利用浏览器原生支持ES模块的特性，可以在开发过程中实现快速的冷启动和热更新。Vite在启动开发服务器时，会根据需要动态地生成和提供每个模块的依赖关系，而不是像webpack那样提前构建好整个应用的依赖关系。 webpack也提供了一个开发服务器，但它是基于传统的构建方式，需要提前将所有模块打包成bundle文件，然后在浏览器中通过HTTP请求获取这些文件。 构建速度由于Vite利用 ...