- 博客(131)
- 收藏
- 关注
原创 2. 装饰器
2015备注:虽然中可以直接使用类装饰器,但为了确保其他装饰器可用,现阶段使用时,仍建议使用配置来开启装饰器支持,而且不排除在来的版本中,官方会装饰器的相关语法!
2025-09-22 15:15:47
1186
原创 1. Typescript 快速入门
今非昔比的 JavaScript(了解)JavaScript 中的困扰😞 1. 不清楚的数据类型😞 2. 有漏洞的逻辑😞 3. 访问不存在的属性😞 4. 低级的拼写错误静态类型检查浏览器不能直接运行 TypeScript 代码,需要编译为 JavaScript 再交由浏览器解析器执行。要把 .ts 文件编译为 .js 文件,需要配置 TypeScript 的编译环境,步骤如下:第⼀步:创建⼀个 demo.ts 文件,例如:第二步:全局安装 TypeScript第三步:使用命令编译 .ts
2025-07-24 13:45:26
2278
2
原创 2. Webpack 高级配置
提升开发体验使用Source Map让开发或上线时代码报错能有更加准确的错误提示。提升 webpack 提升打包构建速度使用让开发时只重新编译打包更新变化了的代码,不变的代码使用缓存,从而使更新速度更快。使用OneOf让资源文件一旦被某个 loader 处理了,就不会继续遍历了,打包速度更快。使用排除或只检测某些文件,处理的文件更少,速度更快。使用Cache对 eslint 和 babel 处理的结果进行缓存,让第二次打包速度更快。使用Thead。
2025-07-24 09:09:24
1269
原创 1. webpack5 基础入门
开发模式:仅能编译 JS 中的ES Module语法生产模式:能编译 JS 中的ES Module语法,还能压缩 JS 代码开发模式顾名思义就是我们开发代码时使用的模式。编译代码,使浏览器能识别运行开发时我们有样式资源、字体图标、图片资源、html 资源等,webpack 默认都不能处理这些资源,所以我们要加载配置来编译这些资源代码质量检查,树立代码规范提前检查代码的一些隐患,让代码运行时能更加健壮。提前检查代码规范和格式,统一团队编码风格,让代码更优雅美观。
2025-07-21 11:17:40
800
原创 第 28 章 最佳实践
通常,说代码“可维护”就意味着它具备如下特点。❑ 容易理解:无须求助原始开发者,任何人一看代码就知道它是干什么的,以及它是怎么实现的。❑ 符合常识:代码中的一切都显得顺理成章,无论操作有多么复杂。❑ 容易适配:即使数据发生变化也不用完全重写。❑ 容易扩展:代码架构经过认真设计,支持未来扩展核心功能。❑ 容易调试:出问题时,代码可以给出明确的信息,通过它能直接定位问题。
2025-07-16 09:35:34
909
原创 2. 说说 HTTP 常见的状态码有哪些,适用场景?
HTTP 状态码(英语:HTTP Status Code),用以表示网页服务器超文本传输协议响应状态的 3 位数字代码它由 RFC 2616 规范定义的,并得到RFC 2518RFC 2817RFC 2295RFC 2774与RFC 4918等规范扩展简单来讲,http状态码的作用是服务器告诉客户端当前请求响应的状态,通过状态码就能判断和分析服务器的运行状态。
2025-07-10 14:39:03
379
原创 3. 7 种常见的前端攻击
HTTPS 是一种安全协议,可以对传输数据进行加密,防止攻击者窃取或篡改。CSRF 攻击通常利用用户的信任来实施,因为用户在自己的浏览器中看到的是来自可信网站的请求,而没有意识到该请求实际上是被攻击者伪造的。点击劫持 (Clickjacking) 是一种欺骗攻击,攻击者在可信赖的页面上使用透明或半透明的覆盖层来欺骗用户点击他们所看到的以外的内容,例如按钮或链接。大家都知道,保证网站的安全是十分重要的,一旦网站被攻陷,就有可能造成用户的经济损失,隐私泄露,网站功能被破坏,或者是传播恶意病毒等重大危害。
2025-07-10 14:38:09
889
原创 5. 跨域
fill:#333;color:#333;color:#333;fill:none;能不能支持不支持能更改服务器吗浏览器支持CORS吗代理CORSJSONPCORS 支持所有类型的 HTTP 请求,是跨域 HTTP 请求的根本解决方案JSONP 只支持 GET 请求,JSONP 的优势在于支持老式浏览器,以及可以向不支持 CORS 的网站请求数据。不管是 Node 中间件代理还是 nginx 反向代理,主要是通过同源策略对服务器不加限制。
2025-07-10 14:30:06
455
原创 9. 元素拖拽
整个拖放过程中,存在两个关键元素:拖拽元素、放置元素 拖拽元素:被拖拽的元素放置元素:在 HTML 中,文本、图片和链接是默认可以拖放的元素。其他元素都是默认不可拖动的,如果需要让其他非默认可拖动的 HTML 元素变得可拖动,比如、等,你需要明确地为这些元素设置 属性。这样,这些元素就能够接受拖放操作了。所有 HTML 元素在默认情况下都不接受拖拽元素的放置,除非通过特定的事件处理来允许。要使一个 HTML 元素能够接受被拖动的元素,需要对这个元素进行一些特定的设置和事件绑定:DataTransfer 对
2025-06-25 09:52:33
474
原创 10. JSON 转换中的精度问题
因为 JavaScript 语言问题,数字大于 16 位后,会丢失 16 位以后的数字:比如声明。将 json 字符串转为 Object 时,如果其中有大数字的值,也会发生精度丢失问题。打印 n 之后会显示 1234567890123456800;
2025-06-25 09:43:58
262
原创 9. CSS 引入方式
样式表优点缺点使用情况控制范围行内样式表(行内式)书写方便,权重高结构样式混写较少控制一个标签内部样式表(嵌入式)部分结构和样式分离没有彻底分离较多控制一个页面外部样式表(外链式)完全实现结构和样式相分离需要引入最多控制多个页面。
2025-06-20 09:08:17
843
原创 5. 定位 position
我们通过上面的学习,知道position属性有五个可选值但static是默认值,即不开启定位,所以我们只需要对比 4 种定位方式即可定位方式是否不设置偏移量,元素不会发生改变是否脱离文档流是否改变元素性质是否提升元素层级参考系relative(相对定位)√××√参照于元素在文档流中的位置absolute(绝对定位)×√√√参照于其包含块fixed(固定定位)×√√√参照于浏览器的视口sticky(粘滞定位)×√√√参照于浏览器的视口。
2025-06-18 10:12:56
737
原创 3. 前端该如何选择图片的格式?
图片的类型目前就分为两种:位图矢量图所谓位图就是用像素点拼起来的图,也叫点阵图,平时我们用到的 png、jpg 等图片就是位图。矢量图,也叫做向量图。矢量图并不记录画面上每一点的信息,而是记录了元素形状及颜色的算法,当你打开一幅矢量图的时候,软件对图形对应的函数进行运算,将运算结果图形的形状和颜色显示给你看。无论显示画面是大还是小,画面上的对象对应的算法是不变的,所以,即使对画面进行倍数相当大的缩放,它也不会像位图那样失真。
2025-06-17 10:23:03
604
原创 3. pm2
pm2 是一个进程管理工具,可以用它来管理你的 node 进程,并查看 node 进程的状态,当然也支持性能监控,进程守护,负载均衡等功能。
2025-06-17 09:41:49
211
原创 1. 说一下 http 和 https
http:超文本传输协议,是互联网上应用最为广泛的一种网络协议,是一个客户端和服务器端请求和应答的标准(TCP),用于从 WWW 服务器传输超文本到本地浏览器的传输协议,它可以使浏览器更加高效,使网络传输减少。https:是以安全为目标的 http 通道,简单讲是 http 的安全版,即 http 下加入 ssl 层,https 的安全基础是 SSL,因此加密的详细内容就需要 ssl。ssl 依靠证书来验证服务器的身份,并为浏览器和服务器之间的通信加密(在传输层)。
2025-06-17 09:32:15
387
原创 8. 原型与原型链
一、引用类型皆为对象原型和原型链都是来源于对象而服务于对象的概念,所以我们要先明确一点:JavaScript 中一切引用类型都是对象,对象就是属性的集合。Array 类型、Function 类型、Object 类型、Date 类型、RegExp 类型等都是引用类型。也就是说数组是对象、函数是对象、正则是对象、对象还是对象。二、原型和原型链是什么上面我们说到对象就是属性(property)的集合,有人可能要问不是还有方法吗?其实方法也是一种属性,因为它也是键值对的表现形式。可以看到 上确实多了一个
2025-04-21 11:12:20
723
原创 3. form-Validity 验证函数
DOM 接口 ValidityState 代表一个元素可有的有效性状态(validity states),其与约束验证(constraint validation)相关。这些状态一起解释了当元素值无效时,它的值为什么不能通过验证。
2025-02-14 14:20:46
751
原创 3. 手写 promise
表示一个异步操作的最终结果,与之进行交互的方式主要是then方法,该方法注册了两个回调函数,用于接收promise的终值或本promise不能完成的原因。本规范详细列出了then方法的完成过程,所有遵循 Promises/A+ 规范实现的promise均可以本标准作为参照基础来实施 then 方法。因而本规范是十分稳定的。尽管 Promise/A+ 组织有时可能会修订本规范,但主要是为了处理一些特殊的边界情况,且这些改动都是微小且向下兼容的。
2025-02-12 16:42:11
603
原创 6. JavaScrip 数组 API
entries()方法返回一个新的数组迭代器对象,该对象包含数组中每个索引的键/值对。时间复杂度为 O(1)。当在稀疏数组上使用时,entries()方法迭代空槽,就像它们的值为undefined一样。
2025-02-12 10:42:40
846
原创 4. CSS 选择器
基础选择器作用特点使用情况用法标签选择器可以选出所有相同的标签,比如:p不能差异化选择较多类选择器可以选出 1 个或者 多个 标签可以根据需求选择非常多id 选择器一次只能选择 1 个标签ID 属性只能在每个 HTML 文档中出现一次,也只能调用一次一般和 js 搭配通配符选择器选择所有的标签选择的太多,有部分不需要特殊情况使用每个基础选择器都有使用场景,都需要掌握如果是修改样式,类选择器是使用最多的选择器作用特征使用情况隔开符号及用法后代选择器。
2025-02-11 16:58:22
854
原创 3. CSS中@scope
CSS 中的@scope 是一个相对较新的特性,它允许开发者在 CSS 中创建区块级作用域,为样式规则提供更为严格的控制范围。为前端开发者提供了一种新的方式来创建区块级作用域,从而更精确地控制样式规则的应用范围。随着这一特性的普及和浏览器支持的增加,它有望成为前端开发中的一个有力工具。/* @scope规则 */总的来说,CSS 中的。
2025-02-11 16:56:09
488
原创 2. CSS 中的单位
vmin表示相对于视口宽度和高度中较小者的百分比。vmax表示相对于视口宽度和高度中较大者的百分比。例如,如果视口的宽度为 1000px,高度为 800px,那么 1vmax 就等于 10px(即 1000px 的 0.1),1vmin 就等于 8px(即 800px 的 0.1)。使用 vmin 和 vmax 单位可以根据视口的宽度和高度来设置元素的大小,实现响应式布局。
2025-01-21 15:37:04
453
原创 1. 小众但非常实用的 CSS 属性
是一个非标准的 CSS 属性,主要用于在 WebKit 浏览器(如 Chrome 和 Safari)中创建元素的倒影效果。这个属性能够增强网页的视觉效果,使元素呈现出更加立体和生动的感觉。 的基本语法结构为:元素背面是否可见 是一个 CSS 属性,用于控制元素的背面是否可见。它主要用于在进行 3D 转换时控制元素的背面可见性当我们对一个元素应用 3D 转换(例如旋转或倾斜)时,默认情况下,元素的背面是不可见的,即不会显示在屏幕上。这是因为浏览器默认会进行背面剪裁(backface culling),以
2025-01-21 15:36:30
1149
原创 1. npm 常用命令详解
npm(Node Package Manager)是 Node.js 的包管理工具,用于安装和管理 Node.js 应用中的依赖库。下面是 npm 的一些常用命令及其详细解释和示例代码。
2025-01-09 16:18:49
765
原创 LeetCode 热题 100
a^a=0,a^0=a,所以异或所有数字,最后剩下的就是只出现一次的数字。最大,也就是先选取左右两侧最边上的两条线,从外向里找起。因此我们可以使用双指针指向左右两侧,每次向里移动。然后思考应该怎么找到让其水量最大的两条线~水量最大也就是面积最大,我们可以先让。较小的指针,试图找到一个更大的面积。首先来看下水量怎么计算~
2025-01-09 10:37:53
277
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人
RSS订阅