- 博客(76)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 webpack：快速搭建环境
将你代码中的变量替换为其他值或表达式。例如，如果想在开发构建中进行日志记录，而不在生产构建中进行，就可以定义一个全局常量去判断是否记录日志。问题： cross-env 设置的只在nodejs环境生效，前端代码无法访问process.env.NODE_ENV。在使用webpack打包代码后，代码会被压缩和混淆，无法正确定位源代码的位置（行数和列数）需求：在前端项目写一个打印语句，开发模式下打印语句生效，生产模式下打印语句失效。接下来，我们在index.js文件中编辑或添加的信息会实时反映在网页中。
2025-12-02 22:54:36
912
原创 webpack：基本打包方法
等）和 asset 模块时，你可能想停止当前 asset 模块的处理，并再次启动处理，这可能会导致 asset 重复，你可以通过将 asset 模块的类型设置为。原因：打包之后index.less的内容覆盖了index.css的内容（即打包后，index.css文件中的内容被替换成了index.less文件的内容）将css代码单独提取成一个文件，因为css文件可以被浏览器缓存，让css文件和js文件同步下载到网页中，减少js体积。一般下载全局软件包，也可以分别在各自项目文件夹中下载不同版本的软件包。
2025-12-02 22:47:41
1106
原创 Node.js基础：模块化与包
文件夹尽量用英文名功能命令执行js文件初始化package.json下载本地软件包npm i 软件包名下载全局软件包npm i 软件包名 -g删除软件包（全局加上-g）npm uni 软件包名概念：每个文件都是独立模块，独立作用域，按需加载使用：采用特定的标准语法导入导出进行使用Commonjs标准: 一般用于Nodejs项目环境中导出：module.exports = {}导入：require(‘模块名或路径’)ECMAScript标准：一般用于前端工程化项目中。
2025-11-23 21:47:14
1029
原创 Node.js基础：文件与路径处理
Node.js是一个跨平台JavaScript运行环境，使开发者可以搭建服务器端的JavaScript应用程序。
2025-11-23 21:44:19
843
原创 jQuery基础与核心应用
模块内容要点概述jQuery 是对原生 JS 的简化与封装入口函数类似 window.onload，但触发更早对象DOM 与 jQuery 对象可互转选择器CSS语法 + 扩展过滤器排他思想当前元素激活，其余恢复遍历.each()灵活高效操作支持内容、样式、属性、节点操作事件.on().off()通用绑定方式动画.animate()与内置过渡效果实战链式调用简洁明了，逻辑流畅虽然 jQuery 在现代框架（Vue、React）中使用较少，但它的设计理念——
2025-10-29 19:49:13
669
原创 SVG简单的JS操作：DOM操作和事件绑定
对于常用的svg标签，基本的svg属性都会写死在html标签中，一般不会用css选择器进行操作，此时若想要设置或修改svg属性，就需要用到js来获取DOM节点并调用。对于属性值，如果时数字类型变量则需添加引号，纯使用已声明的变量进行算术运算则不用。来获取标签内的属性。获取到的数据一般为字符串形式，所以在获取数字类型的值时，需要提前加上。我们获取到了矩形的DOM节点和想要操作的属性值后，可以直接使用。注意一些属性名有连接符的，在调用时应该改成驼峰命名法。对于svg的一些简单页面交互，只需绑定相应事件即可。
2025-10-22 22:42:21
693
原创 SVG修饰属性
@jarringslee基本属性：stroke-dasharray 虚线笔画属性可以定义一个或多个数字 调整虚线属性，实现和虚线的间隔值。 默认px，实现和虚线间隔都是100 100px是实线长度，50px是实现间隔（虚线长度） 分别为实线和虚线交替的长度stroke-dasharray的应用 鼠标经过添加描边动画效果stroke-dashoffset 用于调整虚线模式的起始偏移量。增大该属性能让虚线模式向路径起点移动，视觉上像线条被擦除。stroke-dashoffset的应用 鼠标经过添加描边动画效果
2025-10-22 22:36:24
286
原创 web开发对于svg的简单应用
@jarringsleeSVG，可缩放矢量图，是解决网站图标问题的最佳方案，是基于XML语法的一种图像格式平常使用的图片或者图标一般是基于像素处理的，放大会失真，而SVG是对图片的一种形状描述，本质上是一种文本文件，体积较小，也不会失真。svg的表现属性（fill、font-size等）可以利用css选择器进行修改，但是几何属性（x、y、cx、cy、rotate等）不能通过css修改，只能写死在svg标签中或利用js获取DOM节点进行修改。我们不仅利用svg来绘制图标，还用它来创造出更复杂的装饰或图案。来自
2025-10-22 19:07:31
905
原创 SVG基础属性
SVG，可缩放矢量图，是解决网站图标问题的最佳方案，是基于XML语法的一种图像格式平常使用的图片或者图标一般是基于像素处理的，放大会失真，而SVG是对图片的一种形状描述，本质上是一种文本文件，体积较小，也不会失真。svg的表现属性（fill、font-size等）可以利用css选择器进行修改，但是集合属性（x、y、cx、cy、rotate等）不能通过css修改，只能写死在svg标签中或利用js获取DOM节点进行修改。属性说明是否必须常用取值示例xmlns。
2025-10-20 00:04:45
598
原创 TypeScript 泛型
难点如何理解说明泛型约束 extends通过“具备某属性”的思维理解限定类型范围多泛型参数理解参数间依赖关系常用于映射结构keyof 结合泛型对象取值场景必学强化类型安全泛型在类中的使用实际开发中常见比如封装工具类、缓存类工具类型原理理解泛型的真正力量从Partial<T>入手分析泛型的核心思想是抽象与复用。掌握它后， TypeScript 将不再只是“类型提示”，而是拥有强大的类型推导与安全保障能力。
2025-10-09 19:28:23
521
原创 TS 基础类型の基础知识点
基础类型”（Primitive Types）是 TypeScript 类型系统的原子单位，也是后续学习接口、泛型、高级类型的前提。TypeScript 不区分 int、float、double 等子类型，所有数值均归属同一 number 类型。上述名称同时作为类型注解关键字存在，可直接用于变量、常量、属性、函数参数及返回值的类型位置。与 JavaScript 一致，string 属于值类型，调用方法时由引擎执行临时装箱。通过联合类型，可在编译期对字符串、数字、布尔值等基础类型的取值范围执行白名单校验。
2025-09-20 02:05:59
451
原创 JavaScript 简单链表题目试析
插入排序在链表中的实现其实比在数组中更自然，因为链表本身的结构让节点插入变得很高效——只需要调整指针，而不需要像数组那样移动大量元素。我们依然是将链表分成已排序和未排序两部分。开始时已排序部分只有第一个节点，然后逐个处理未排序部分的节点，找到它们在已排序部分的正确位置并插入。为了处理可能在头部插入的情况，使用一个虚拟头节点可以大大简化代码逻辑。
2025-09-14 23:27:11
364
原创 浅谈原型。
构造函数是使用 new 关键字的函数，用来创建对象，所有函数都是 Function() 的实例构造函数本质上是普通函数，但当使用 new 调用时，会开启对象实例化流程（创建对象、绑定 this、执行代码、返回对象）。原型对象是用来存放实例对象的公有属性和公有方法的一个公共对象，所有原型对象都是 Object() 的实例构造函数有一个 .prototype 属性，指向原型对象。实例对象通过proto。
2025-09-10 19:23:57
1052
原创 作用域与作用域链
会产生新的函数作用域，由此可知作用域产生了父子嵌套的关系。JavaScript 中的作用域是程序被执行时的底层机制，了解这一机制有助于规范代码书写习惯，避免因作用域导致的语法错误。js中内存的分配和回收都是自动完成的，内存不使用的时候会被垃圾回收器自动回收，保证内存容量的最大利用。当一个函数可以“记住并访问它的词法作用域”时，即使这个函数在其词法作用域之外被调用，也构成闭包。文件 **的最外层就是所谓的全局作用域，在此声明的变量在函数内部也可以被访问。包裹的代码称为代码块，代码块内部声明的变量外部将。
2025-09-04 21:27:29
930
原创 JS对象进阶
的数据类型有 6 种，分别是字符串、数值、布尔、undefined、null 和 对象，常见的对象类型数据包括数组和普通对象。之所以具有对象特征的原因是字符串、数值、布尔类型数据是 JavaScript 底层使用 Object 构造函数“包装”来的，被称为包装类型。通过构造函数创建的对象称为实例对象，实例对象中的属性和方法称为实例属性、实例方法，统称为实例成员。甚至字符串、数值、布尔、数组、普通对象也都有专门的构造函数，用于创建对应类型的数据。生成数组’，专治伪数组、字符串、Set、Map 等一切可迭代。
2025-09-04 21:24:49
851
原创 JS函数进阶
js中，var变量在声明之前就允许被访问// 访问变量 strlog'world!;// 声明变量 strvar'hello ';</let注：关于变量提升的原理分析会涉及较为复杂的词法分析等知识，而开发中使用let可以轻松规避变量的提升。
2025-09-04 21:11:33
859
1
原创 JS本地存储
用法跟localStorage基本相同，同一窗口（页面下可共享），以键值对的方式存储并使用。删除数据（只删除名字） localStorage.removeItem('键')存储数据 localStorage.setItem('键', '值')获取数据 localStorage.getItem('键', '值')存储数据 localStorage.setItem('键', '值')当页面浏览器被关闭时，存储在 sessionStorage 的数据会被清除。
2025-09-04 20:49:45
845
原创 Window对象
为解决这个问题，利用多核 CPU 的计算能力，HTML5提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程。history (历史)是对象，主要管理历史记录， 该对象与浏览器地址栏的操作相对应，如前进、后退等。表单提交后，表单中（各个元素必须有name名）所填信息会在url中的问号后方显示。window对象的相关属性都属于window，但都可以省略window。和间歇函数一样，都是window中的函数，平时会省略window。作为window类型的对象，可以省略window。
2025-08-08 11:01:18
989
原创 DOM节点操作
*追加节点 ** 如果想在界面中看到，必须要插入到界面中去。**给元素内部添加/修改文本）等操作来修改节点及节点内容。创造出一个 新的网页元素，再把该元素放入指定的元素内部。DOM节点的增删改查主要是针对于元素节点。根据结点关系查找对象：父子节点/兄弟节点。属性值： 子元素.parentNode。返回最近一级的父节点，找不到返回null。在js原生DOM操作中，要删除一个元素。复制一个原有节点并放入指定元素内部。DOM树里每一个内容都被称为节点。利用DOM操作对象内容（如**
2025-08-08 10:58:44
453
原创 JS事件流
当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。，包括自身设置的宽高、padding、border，如果盒子是隐藏的，那么获取的结果将会是0。由于事件冒泡是默认存在的，子元素的事件可能会意外触发父元素的相同事件，导致不必要的影响。我们给多个元素注册事件（比如一堆小li），原来用的是for循环，现在可以用事件委托一步到位。获取元素自己定位父级元素的左、上的距离（会算上元素的外边距等），注意这个值。简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件。
2025-07-25 16:02:36
1029
原创 JS事件基础
/既实现了“只要有一个子项取消，全选取消”，也实现了“所有子项都手动勾选上后，全选会自动被勾上”。//如果有任意一个 checked == false，就设置 checkAll.checked = false。结合 DOM 使用事件时，需要为 DOM 对象添加事件监听，检测到事件发生（被触发）时，便立即调用一个函数。//既实现了“勾选全选 -> 勾选所有项”，也实现了“取消全选 -> 取消所有项”。////如果是，那就设置 checkAll.checked = true；以前的方法：采用赋值的形式。
2025-07-24 22:19:58
901
原创 基于本地数据存储的简单学生信息表
@jarringslee学生信息表的简单实现即对量化数据做出的增删改查和有效存储，利用js等前端开发语言，我们可以在浏览器中对少量数据进行持久化存储。其中js是实现数据交互与存储的核心，当然也要用到html和css对页面进行简单布局和美化。表单、表格的制作与交互用html制作表单，要注意类（class）和名（name）等属性的命名和使用，以确保正确地绑定后端事件。渲染数据将用户输入和浏览器存储的数据渲染到表格页面中是实现信息表的关键操作。整体逻辑不是很复杂，但是需要封装函数因为在删除数据、新增数据时都需要重
2025-07-24 14:55:10
940
原创 JavaScript基础语法和简单数据结构
@jarringsleejs是一种在客户端（浏览器）运行的编程语言，可实现人机交互的效果。js组成：js由两部分组成：js书写位置：**行内js：**略。**内部js：**直接写在html文件中（通常写在标签上面），用标签包裹住**外部js：**通过link链接js结束符：可以用分号结尾，也可以不写，统一格式即可。输入和输出语法：输出语法向body内输出内容：document是文档的意思，输出内容也可以用标签包裹。页面弹出警示框：控制台输出（用户无法看到，在控制到console中）：
2025-07-19 21:25:19
876
原创 DOM 文档对象模型
我们通过DOM和BOM用js来操作html。之前所学的alert和prompt属于BOM的操作。html标签、css选择器获取过来就被称为dom对象查找、获取DOM对象（常用 重点）通过CSS选择器获取DOM元素选择匹配的第一个元素 只选一个！返回这个css选择器搭配的第一个元素，即一个HTMLElement对象如果没有找到，返回null获取后直接修改css值：选择匹配的多个元素：返回所有符合条件的元素（哪怕只有一个）并集合成一个NodeList 对象集合（伪数组/类数组）。选择所有元素：获
2025-07-18 20:18:41
853
原创 JS 数据类型：概念、异同、常量转换原理
值直接为undefined。在不声明变量、不赋值的情况下默认值为undefined。一般不直接把某个变量赋值为undefined。
2025-07-18 09:09:06
754
原创 js对象简介、内置对象
@jarringslee对象（object）是js的一种引用数据类型，是一种无序的数据集合“ul”（类比于数组，有序的数据集合“ol”）。基本上等于结构体。对象的声明对象中的元素一般由属性和方法组成属性：对象的信息、特征。一般为名词性的键值对（），多个键值对之间用逗号分隔。属性就是依附在对象上的变量（门面是变量，对象内就是属性）。属性名可以用单、双引号包裹（一般情况下省略），除非遇到特殊符号如空格、中横线作为属性名时。方法：对象的功能、行为。 对象的增删改查查找、访问元素 或者 （中括号
2025-07-17 22:13:06
1171
原创 js函数简介、逻辑中断和布尔类型转换
利用导函数的地方是补零机制。其实也可以把整个判断秒数并补零的结构封装成一个函数将用户输入的秒数作为实参传入（注意改为数字类型），直接在函数中输出即可。显示转换：字符串中空字符串‘’、数字类型中0、undefined、false、NaN转换为布尔值都是false，其余为true。避免全局变量之间的污染，可以在自己的局部变量内使用全局变量用过的变量名。如果函数中参数运算时有undefined，那么结果将为NaN。具名函数就是普通的有名字的函数。如果前面有被判定为假的语句，则直接中断，不会再看后面。
2025-07-16 20:31:47
502
原创 js分支语句和循环语句
变量等值多选一，switch 比 if-else 更清爽；记得 break 防穿透，default 兜底别忘掉。固定的两层for循环。如果所有 case 都不匹配且没有 default，就什么都不做。break “炸” 整个循环，continue “跳过” 这一回。和C语言冒泡排序基本相同，在数组的声明上略微有些不同。——把同一个变量/表达式的不同取值，一一对照执行。只判断一次，条件为真就执行，为假直接跳过。明确循环次数用for，不明确用while。条件为真执行 A，否则执行 B。，不会自动类型转换。
2025-07-15 21:38:16
942
原创 js运算符
两者区别：在一行运算中，++i先给自身加完之后再参与运算，i++先参与运算之后在自加。前置和后置：++i和i++：一般情况下习惯使用后置i++，两者在单独使用时没有区别。比较结果为boolean类型的值（只有true或者false）对变量进行赋值的运算符，用于简化代码。左边是容器，右边是值。不做任何类型转换，只要类型不同就直接返回。赋值运算符 = += -=隐式转换下，常常会有。
2025-07-15 21:26:51
335
原创 JavaScript书写基础和基本数据类型
@jarringsleejs是一种在客户端（浏览器）运行的编程语言，可实现人机交互的效果。js组成：js由两部分组成：js书写位置：行内js内部js直接写在html文件中（通常写在标签上面），用标签包裹住外部js通过link链接js结束符：可以用分号结尾，也可以不写，统一格式即可。输入和输出语法：输出语法向body内输出内容：document是文档的意思，输出内容也可以用标签包裹。页面弹出警示框：控制台输出（用户无法看到，在控制到console中）：输入语法显示对话框和文字信息
2025-07-14 22:02:10
685
原创 移动应用开发实验室web组大一下期末考核题解
@jarringslee浮动是可以让块元素水平排列的属性，在网页开发中很常用，但是浮动最大特点就是浮动的元素会脱标（脱离标准流的控制），不再占用标准流的位置。如果下面有标准流元素就会重叠上来。而且，如果某个父级元素的子级元素是浮动元素，若父级元素高度为0（即产生塌陷问题），也会脱标，下面的元素会重叠上来，影响布局效果。所以在实际开发过程当中，我们一般都会清除浮动。下面是几种常见的清除浮动的方法：额外标签法在父元素内容的最后添加一个空的块级元素（如div或p），设置CSS属性： （专门用来清除浮动的属性，分别
2025-06-15 15:58:15
957
原创 CSS高级技巧及新增属性
解决方法：设置盒子margin值为负值（边框宽度为1px，那就设值为-1px），边框就会重合，看起来更美观。为减少 HTTP 请求（减少服务器接受和发送请求的次数），加快页面加载速度，在部分场景下优化图片切换效果，出现CSS精灵技术（也称CSS Sprites、CSS雪碧）同时，需要严格控制盒子高度。也称视距（模拟人眼到屏幕的距离），在二维平面产生近大远小的视觉立体效果，单位为像素，数值越大，成像越小。任意相邻两个边框给不一样的值，其余两个边框为0，只保留其中一个赋了值的边框的颜色，另外一个边框透明。
2025-06-08 17:37:41
1105
原创 Flex 布局基础
Flex 布局，即弹性盒子布局，是一种用于在页面上排列元素的一维布局模型。它允许子元素在主轴（row 或 column）上伸缩，以填充剩余空间或适应容器的大小变化，从而解决了传统布局中的一些常见问题，如元素对齐和空间分配等。以上代码实现了一个简单的两列布局页面，左侧为导航栏，右侧为内容区，通过 Flex 布局实现了灵活的空间分配和对齐。在 Flex 布局中，我们有两个关键的概念：Flex 容器和 Flex 项目。属性决定了 Flex 项目的排列顺序，其取值为一个整数，数值越小，项目越靠前。
2025-06-02 16:47:12
955
原创 盒子模型与页面布局基础
子元素若有间距：只需设置每个元素的右边距padding-right，然后用标签清楚最后一个子元素的右边距即可。指标签在页面中的默认排布规则，如，块元素独占一行，行内元素一行可以显示多个。（专门用来清除浮动的属性，分别是清除所有 / 左侧 / 右侧浮动的属性，直接用both就行）给行内元素添（如span）加内外边距margin和padding，只能改变元素水平位置，原理：浏览器自动识别当前窗口宽度，减去盒子宽度除以二并分配给左右外边距。**多值写法：**和padding相似，值用空格隔开。
2025-06-02 16:36:24
641
原创 CSS布局（上）：浮动基础
本文介绍了CSS浮动布局的基础知识，主要包括浮动原理、语法、常见属性和优缺点。浮动布局是一种传统技术，通过float属性控制元素左右浮动实现水平排列。文章分析了浮动脱离文档流和父元素塌陷问题，并提供了四种清除浮动的方法：额外标签法、单/双伪元素法和overflow属性。最后通过一个两列布局案例，展示了如何运用浮动创建侧边栏和主内容区，并解决相关的浮动问题。浮动布局虽然简单兼容性好，但相比现代布局技术不够灵活，适合传统多列布局需求。
2025-05-25 12:19:35
1053
原创 盒子模型、Flexbox 与 Grid 布局的综合运用
在前端开发中，CSS 布局是构建网页结构的核心技术之一。对于我们初学者来说，理解盒子模型、Flexbox 和 Grid 布局的原理与应用，是掌握静态页面设计的关键。
2025-05-21 19:16:11
869
原创 HTML基础
HTML（超文本标记语言）是用于创建网页的标准标记语言。本文介绍了HTML的基础知识，包括VS Code编辑器的快捷操作、HTML标签的使用、文件路径的查找方法以及列表的创建。
2025-05-18 16:57:13
921
空空如也
运行中文是乱码输入了f exec那一段却无法编译了
2024-10-09
TA创建的收藏夹 TA关注的收藏夹
TA关注的人