- 博客(205)
- 收藏
- 关注
RSS订阅
原创 响应式布局的5种实现方案
1、子元素的 top 和 bottom 如果设置百分比，则相对于直接非 static 定位（默认定位）的父元素的高度，同样，子元素的 left 和 right 如果设置百分比，则相对于直接非 static 定位（默认定位的）父元素的宽度。比如，当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。如果移动端有 5 个不同的视口宽尺寸 750 ，640，480，375，320，则在不同尺寸下，对应的 1vw 的 px 值如下表。
2023-12-01 12:01:33
463
原创 几种前端数据存储方式（记录）
1. cookiecookie生成cookie是存在客户端，session存在服务器端。在cookie当用户第一次访问网页时，服务器会给客户端返回一个cookie，在cookie中保存着服务器端session文件的位置信息，用户第一次访问服务器，服务器就会为它创建一个session文件，并将session的标识保存在cookie中发给它。在这之后，通过为每个请求添加 Cookie HTTP 头将信息发送回服务器。cookie访问和设置在 JavaScript 中可以通过 document.cookie
2021-07-22 15:05:18
3916
1
原创 .vue文件中定义变量和在引用的.ts文件中定义变量的区别
局部作用域在.vue文件的或<script>标签中定义的变量，它们的作用域仅限于当前组件。响应式系统使用时，可以直接使用 Composition API，定义的变量默认是响应式的，可以利用 Vue 的响应式系统。模板访问在.vue文件中定义的变量可以直接在模板中使用，无需额外的export。编译时处理变量和逻辑都在编译时被处理，可以利用 Vue 的优化，如树摇（tree-shaking）。单文件组件.vue文件是单文件组件（SFC）的一部分，方便管理和维护。模块作用域在.ts。
2024-11-05 08:39:09
304
原创 什么是single-spa
与传统 SPA 应用程序的主要区别在于，它们必须能够与其他应用程序共存，而且它们没有各自的 HTML 页面。Single-spa 是一个用于构建微前端应用的 JavaScript 框架，它允许将多个单页面应用（SPA）聚合为一个整体应用。主应用在管理子应用时，通过子应用暴露的生命周期函数来实现子应用的启动和卸载。是单 spa 生命周期钩子，它们分别在应用启动、挂载和卸载时被调用。是一个返回 Promise 的函数，用于加载应用代码。是一个帮助函数，用于处理 Vue 应用的生命周期。是一个微前端应用的名称，
2024-11-04 09:22:22
723
原创 新兴的前端框架-Svelte
Svelte的核心理念是将复杂性从运行时转移到编译时。这意味着在开发阶段，Svelte会分析组件的声明，并将其转换为最小化的、优化过的JavaScript，这些JavaScript在用户浏览器中运行时具有极高的效率。：Svelte显示了很好的运行时性能。JavaScript数据趋势也显示，这个框架特别适合中小型项目。：Svelte的语法简单明了，可读性强。而且，Svelte应用程序不需要太多的模板。：Svelte架构主要包括Svelte编译器，它负责将.svelte文件转换为.js文件，创建DOM和。
2024-11-01 11:28:06
754
原创 什么是灰度发布
灰度发布要有安全隔离，完善的监控，并且有友好的目标客户群用户数据反馈。在得到用户允许的前提下，收集用户的使用新版本应用的情况，如客户端性能、客户端稳定性、使用次数、使用频率等。：数据库和中间件需要保持兼容。：处理流量+数据的灰度，其不只包含全链路流量的灰度，还包括中间件（如消息、缓存）和数据库等，也能对流量标识进行处理。：保证新旧版本的兼容性，因为除了应用间调用，还有数据、消息等，在这个场景下并没有进行灰度区分。：在灰度发布过程中，需要对新版本软件的性能和用户体验进行监控和分析，以便及时发现和解决问题。
2024-11-01 10:00:45
794
原创 vue3 之 内置组件Teleport详解
Vue 3 引入了 Teleport 组件，它允许开发者将组件内容“传送”到 DOM 中的任意位置，不受常规组件渲染树的限制。Teleport 是 Vue 3 的内置组件，用于将组件的模板内容渲染到页面的指定位置，即使这个位置在组件的挂载点之外。这在处理模态框、弹出框或全局头部等布局和嵌套问题时非常有用。
2024-10-30 09:52:25
986
原创 前端项目package.json文件对象属性介绍
定义了一系列的脚本命令，可以通过 npm 运行，例如 start、build、test 等。- 指示项目是否有副作用，用于优化构建工具的树摇（Tree Shaking）。- 项目的主入口文件，通常是项目的主 JavaScript 文件。- 项目运行所需的依赖库，这些依赖会在安装项目时自动安装。- 仅在开发过程中需要的依赖，如构建工具、测试框架等。- 可选依赖，这些依赖不是必须的，但可以提供额外的功能。- 项目的代码仓库地址，可以是 git 仓库。- 项目的主页或文档页面的 URL。
2024-09-23 18:02:12
400
原创 HTTP 之 响应头信息（二十三）
应答头 说明 Allow 服务器支持哪些请求方法（如GET、POST等）。 Content-Encoding 文档的编码（Encode）方法。只有在解码之后才可以得到Content-Type头指定的内容类型。利用gzip压缩文档能够显著地减少HTML文档的下载时间。Java的GZIPOutputStream可以很方便地进行gzip压缩，但只有Unix上的Netscape和Windows上的IE 4、IE 5才支持它。因此，Servlet应该通过查看Accept-Encoding头（
2024-09-09 08:54:06
490
1
原创 HTTP 之 消息结构（二十二）
HTTP（超文本传输协议）是一种用于传输超媒体文档的协议，它定义了客户端和服务器之间请求和响应的消息结构。HTTP消息由一系列标准头部字段、一个空行和可选的消息体组成。
2024-09-04 09:47:10
517
原创 HTTP 之 Web Sockets处理恶意的Payload的策略（十一）
处理恶意的 Payload 主要涉及到输入验证、清理和在某些情况下对数据进行适当的转义。
2024-08-30 09:10:50
637
原创 HTTP 之 Web Sockets 安全策略（十）
使用 Sec-WebSocket-Protocol 指定子协议，确保客户端和服务器使用相同的通信协议。使用内容安全策略（Content Security Policy）限制可以执行的脚本，减少 XSS 攻击的风险。限制每个客户端可以建立的 WebSocket 连接数量，以防止资源耗尽攻击。对客户端的消息发送频率进行限制，防止服务器被恶意客户端的高频率请求所淹没。使用专用的代理服务器来管理 WebSocket 连接，提供额外的安全层。确保只有经过身份验证和授权的用户才能建立 WebSocket 连接。
2024-08-30 09:06:32
771
原创 HTTP 之 HTTP头部优化策略（九）
ETag和Last-Modified头部用于验证缓存，如果资源未改变，服务器可以返回304 Not Modified状态码，告知浏览器使用本地缓存的副本。使用Link头部的rel="dns-prefetch"属性提前解析第三方域名的DNS，减少第三方脚本或资源加载的延迟。使用Link头部的rel="preload"属性预加载关键资源，如首屏渲染所需的字体或脚本。使用Accept-Ranges头部支持资源的按范围请求，允许浏览器请求资源的一部分。使用Cache-Control头部来告诉浏览器如何缓存响应。
2024-08-29 08:54:05
869
原创 HTTP 之 使用 HTTPS （八）
根据服务器软件（如 Apache、Nginx 等），配置服务器以监听 HTTPS 端口（443）并使用 SSL 证书。确保网站上的所有资源链接（如图片、CSS、JavaScript 文件等）都使用 HTTPS URL。从证书颁发机构（CA）购买 SSL 证书，或使用 Let’s Encrypt 等免费服务获取。使用在线工具（如 SSL Labs’ SSL Test）来评估你的 SSL 配置。证书通常有两个文件：一个是证书文件（.crt），另一个是私钥文件（.key）。
2024-08-23 09:35:20
416
原创 HTTP 之 HTTP内容编码（七）
在浏览器环境中，通常不需要手动解压缩，因为浏览器会自动处理 Content-Encoding 头部并返回解压缩后的数据。HTTP内容编码（Content-Encoding）是HTTP头部的一部分，用于定义传输数据的压缩格式。服务器需要配置支持的内容编码类型，并根据请求头部中的 Accept-Encoding 字段来决定使用哪种编码。另一种压缩算法，通常提供比 gzip 更好的压缩效果，但需要更多的CPU资源。Brotli是Google开发的一种新的压缩算法，旨在提供更高的压缩效率。
2024-08-22 08:49:36
356
原创 HTTP 之 HTTP/1.0、HTTP/1.1和HTTP2的缓存策略（六）
提供了更多的指令，如 no-cache、no-store、max-age、public、private 等，以更精确地控制缓存行为。：客户端使用这些头部发起条件请求，如果资源未被修改，则服务器返回 304 Not Modified 状态码，告诉客户端使用本地缓存。：记录资源最后被修改的时间。：引入了更复杂的缓存控制机制，如 Cache-Control、ETag 和条件请求，更适合动态和静态内容。：HTTP/2 引入了 HPACK 压缩算法，对请求和响应的头部信息进行压缩，进一步减少了传输数据量。
2024-08-21 09:06:52
502
原创 HTTP 之 HTTP/1.1 连接特性（五）
由于队头阻塞和TCP连接的独立性，HTTP/1.1 可能需要同时打开多个TCP连接来下载多个资源，这在高延迟环境下影响性能。HTTP/1.1 引入了持久连接，允许多个请求和响应在同一个TCP连接上复用，减少了连接建立和关闭的开销。在管道化技术中，如果一个响应被阻塞，所有排队在其后的请求都将等待，这限制了并行处理的能力。允许在单个TCP连接上并行交错发送多个请求和响应，解决了队头阻塞问题。每个请求/响应通常使用一个独立的TCP连接，或通过持久连接复用。由于头部压缩，减少了不必要的网络流量，加快了传输速度。
2024-08-20 09:07:36
588
原创 HTTP 之 五类状态码（四）
506 Variant Also Negotiates：透明代理尝试满足一个透明或不透明的代理的要求，但未能做到。205 Reset Content：服务器成功处理请求，但没有返回内容，并要求客户端重置其文档视图。101 Switching Protocols：服务器根据客户端的请求切换到不同的协议。303 See Other：请求的资源存在另一个URI下，应使用GET方法获取。502 Bad Gateway：服务器作为网关或代理，从上游服务器收到无效响应。
2024-08-16 09:02:19
1149
原创 HTTP 之 请求方法（三）
OPTIONS 请求通常用于跨域资源共享（CORS）的预检请求。GET 请求应该只用于获取数据，而不会导致服务器上的状态变化。POST 请求通常用于表单提交或上传文件，数据在请求体中。如果资源不存在，则可能会创建新资源。PUT 请求是幂等的。不常用于前端开发中，主要用于通过代理服务器建立安全连接。通常不会在前端代码中看到 CONNECT 方法的使用。HEAD 请求与 GET 类似，但不包括响应体。PATCH 请求允许只发送需要更新的部分数据。DELETE 请求通常用于删除资源。
2024-08-15 09:05:16
396
原创 HTTP 之 头部信息（二）
HTTP头部是HTTP请求和响应的重要组成部分，它们提供了关于传输的数据的附加信息。HTTP头部由一系列的键值对组成，每个键值对占据一行，键和值由冒号和空格分隔。
2024-08-13 09:02:38
796
原创 HTTP 之 基本概念（一）
如果你之前访问过一个网页，浏览器可能会缓存该页面的一些资源，当你再次访问时，浏览器可以直接使用缓存的资源，而不需要重新从服务器加载。打开一个网页，页面中的图片、CSS文件和JavaScript文件都可以通过同一个TCP连接加载，而不是每个资源都建立一个新的连接。当你访问 https://www.example.com 时，浏览器和服务器之间的通信是加密的，保护了你的数据安全。当你访问一个网页时，浏览器会发送一个GET请求。HTTP提供了缓存机制，允许客户端存储之前请求的响应，减少重复请求相同资源的次数。
2024-08-13 08:47:23
785
原创 不常用的Css3属性
则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中,两个 div 现在是一样大小的!CSS3 box-sizing 属性在一个元素的 width 和 height 中包含 padding(内边距) 和 border(边框)。outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。background-Origin属性指定了背景图像的位置区域。
2024-07-26 09:29:39
280
原创 前端常用的几种设计模式
观察者模式定义了对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都会得到通知。装饰器模式允许用户在不改变对象自身的基础上，向一个对象添加新的功能。策略模式定义了一系列算法，并将每一个算法封装起来，使它们可以互换。模块模式用于封装代码，创建私有变量和方法，同时提供公共接口。单例模式确保一个类只有一个实例，并提供一个全局访问点。工厂模式用于创建对象，将对象创建的逻辑封装起来。
2024-07-24 09:05:13
512
原创 软件设计模式六大原则
LSP 是继承复用的基石，只有当派生类可以替换掉基类，且软件单位的功能不受到影响时，基类才能真正被复用，而派生类也能够在基类的基础上增加新的行为。里氏代换原则是对开闭原则的补充。实现开闭原则的关键步骤就是抽象化，而基类与子类的继承关系就是抽象化的具体实现，所以里氏代换原则是对实现抽象化的具体步骤的规范。在程序需要进行拓展的时候，不能去修改原有的代码，实现一个热插拔的效果。这个原则的意思是：使用多个隔离的接口，比使用单个接口要好。这个原则是开闭原则的基础，具体内容：针对接口编程，依赖于抽象而不依赖于具体。
2024-07-23 09:03:19
326
原创 为什么vue3项目中推荐使用const，而不是let语法
const 声明的变量是只读的，这意味着它们的值不能被重新赋值。这有助于防止在组件的整个生命周期内不小心修改状态，从而使得状态管理更加安全。：使用 const 声明的对象或数组是单例的，这意味着它们在声明时只被初始化一次，之后不会被重新创建。这有助于确保组件状态的一致性，特别是在使用响应式系统时。：Vue 3 使用了 Composition API，其中的 reactive、ref 和 reactiveRef 等函数创建了响应式变量。
2024-07-22 09:07:34
826
原创 ES6 字符串的新增方法（二十）
特性：用另一个字符串填充当前字符串（如果需要的话），以便产生所需长度的新字符串。特性：用另一个字符串填充当前字符串（如果需要的话），以便产生所需长度的新字符串。特性：返回一个码点值的字符串，该码点值位于给定位置的 Unicode 字符。特性：返回一个新字符串，它是原字符串重复指定次数的结果。特性：判断字符串是否以指定的子字符串开始。特性：判断字符串是否以指定的子字符串结束。特性：提供一个模板字符串的原始字符串形式。特性：判断字符串是否包含指定的子字符串。用法：检查字符串的开始部分。用法：左填充字符串。
2024-07-19 09:22:07
702
原创 ES6 正则的扩展（十九）
特性：String.prototype.match(), String.prototype.replace(), String.prototype.search(), 和 String.prototype.split() 现在可以接受正则表达式字面量。特性：当设置了 s 修饰符（dotAll）时，点字符（.）可以匹配包括换行符在内的任何字符。特性：正则表达式对象现在有一个 flags 属性，返回正则表达式的修饰符。特性：y 修饰符使正则表达式在搜索时“粘”在每个匹配的开始位置。用法：简化正则表达式的书写。
2024-07-19 09:09:48
470
原创 ES6 数值的扩展（十八）
但是由于这两个二进制数的最低位都是 1，所以这个结果肯定是不正确的，因为根据二进制乘法，计算结果的二进制最低位应该也是 1。这个错误就是因为它们的乘积超过了 2 的 53 次方，JavaScript 无法保存额外的精度，就把低位的值都变成了 0。将非数值的值转为数值，再进行判断，而这两个新方法只对数值有效， Number.isFinite() 对于非数值一律返回 false ,Number.isNaN() 只有对于NaN才返回true ，非 NaN 一律返回 false。我们知道浮点数计算是不精确的。
2024-07-18 09:53:01
1559
原创 ES6 数组的扩展（十六）
返回数组中满足提供的测试函数的第一个元素的值，否则返回 undefined。：创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。：返回数组中满足提供的测试函数的第一个元素的索引，否则返回 -1。：用一个固定值填充数组中从起始索引到终止索引（不包括）的所有元素。：从类数组对象或可迭代对象中创建一个新的数组实例。：找出数组中满足条件的第一个元素的索引。：将数组的一部分复制到数组的另一个位置。：将数组中一段区域的元素替换为特定值。：找出数组中满足条件的第一个元素。：创建一个包含多个参数的数组。
2024-07-16 09:20:11
361
原创 ES6 对象的扩展（十五）
特性：在对象字面量中，可以直接使用方法定义，而不需要使用 function 关键字。用法：简化对象中方法的书写。');// 输出：Hello!
2024-07-16 08:52:12
362
原创 ES6 对象的新增方法（十四）
判断对象是否被冻结，即不能添加新属性、删除现有属性或改变现有属性的可枚举性、可配置性、可写性。：设置对象的原型（内部[[Prototype]]属性）。：将一个或多个源对象的所有可枚举属性复制到目标对象。：返回一个给定对象自身可枚举属性的键值对数组。：返回一个包含对象所有可枚举属性名称的数组。：返回一个包含对象所有可枚举属性值的数组。：返回一个对象的所有自身属性的描述符。：获取对象属性的详细描述。：阻止添加新属性到对象。：用于对象属性的合并。：获取对象的所有键。：获取对象的所有值。：获取对象的键值对。
2024-07-15 17:48:30
734
原创 ES6 Symbol （十三）
内置Symbol：使用 ES6 内置的 Symbol，如 Symbol.iterator 来实现自定义迭代器。创建Symbol：使用 Symbol() 创建一个新的 Symbol 值。作为属性键：使用 Symbol 作为对象属性的键，确保属性的唯一性。
2024-07-15 17:32:38
505
原创 ES6 Module 的语法（十二）
ES2020引入了动态导入，使用 import() 函数可以在运行时按需加载模块。可以使用 * as 语法导入一个模块的所有导出，并将其绑定到一个对象上。每个模块只能有一个默认导出，用 export default 来实现。一些模块在导入时会执行一些代码，这些模块被称为具有副作用的模块。你可以使用 export 关键字导出多个变量、函数或类。使用 import 关键字可以导入其他模块的命名导出。可以在导出和导入时使用 as 关键字进行重命名。导入默认导出时，不需要使用大括号。
2024-07-12 17:15:19
423
原创 ES6 Class(类) 总结（九）
ES6 中的 class 是一种面向对象编程的语法糖，提供了一种简洁的方式来定义对象的结构和行为。JavaScript 语言中，生成实例对象的传统方法是通过构造函数。下面是一个例子。基本上，ES6 的 class 可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
2024-07-11 17:12:13
744
原创 ES6 async 函数详解 （十）
async 函数是什么？一句话，它就是 Generator 函数的语法糖。async 函数就是将 Generator 函数的星号（ * ）替换成 async ，将 yield 替换成 await ，仅此而已。Generator 函数的执行必须靠执行器，所以才有了 co 模块，而 async 函数自带执行器。也就是说， async 函数的执行，与普通函数一模一样，只要一行。
2024-07-11 10:57:44
403
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人