- 博客(153)
- 收藏
- 关注
RSS订阅
原创 JavaScript基础知识（二）
面向对象是一种编程思想，这种编程思想可以当做一个学科来研究。除了 JavaScript，例如 C++、Java、Python、PHP 等等编程语言都可以使用这种面向对象的编程思想来开发应用程序。DOM：是一套标准编程接口。我们通过 DOM 这套接口来操作HTML元素。
2023-10-23 20:25:11
531
原创 JavaScript基础知识（一）
函数是一个可执行的语句块（通过function关键字声明）。声明的时候不执行语句块，调用函数时执行。优点：声明之后可以反复调用，提高代码的复用能力。//声明函数 function fun() {//语句... } //调用函数 fun();六种数据类型中的一种，对象可以重新设置属性。属性的无序集合。// 创建一个对象 let cat = {name : "miaomiao" , //注意是逗号 age : 2 , };
2023-08-07 17:48:47
960
原创 移动端适配
移动端font-size的适配有的时候，我们在使用font-size和rem来给移动端做适配会遇到这样一个问题，年轻人把字体调小，老年人把字体调大，这样会让我们原本的适配失效，造成页面字体样式错位的问题，下面的方法会根据html的font-size与1px的倍率会页面重新进行适配。代码如下：(function (win, doc) { function createScaleElement() { let scaleDom = document.createElement('div')
2020-07-16 11:51:54
398
原创 Git教程
本文介绍了Git的安装方法（Windows/macOS），核心操作包括初始化仓库、添加文件、提交版本及查看历史。重点讲解了三种回滚场景：工作区、暂存区和已提交的修改，对比git reset与git revert的区别。同时介绍了.gitignore文件的使用，以及分支与合并的基础概念，帮助初学者快速掌握Git的基本使用。
2026-10-20 16:34:20
247
原创 Token 到底是什么？
摘要（≤150字）： 本文深入解析了大模型中的核心概念——Token。Token是文本被切分后的最小单位，由Tokenizer通过BPE算法将高频共现的字词合并而成，实现“文字压缩”。每个Token对应一个唯一ID，用于模型处理。尽管40万Token看似等同于40万字，实际可容纳60-80万汉字或30万英文单词，因Token能高效压缩语义单元。理解Token有助于掌握模型上下文窗口与推理效率的本质。
2026-09-23 18:54:08
167
原创 如何用 AI 写代码
本文分享了高效使用AI编写代码的工作流：从环境搭建、产品设计、技术设计到实现与人工验证。通过明确需求、制定规范文档（如AGENTS.md）、生成产品与技术方案，并借助AI插件实现自测，最终结合人工验证修复缺陷，确保代码质量。该流程帮助开发者避免AI生成代码的盲目性，提升开发效率与可靠性。
2026-09-20 18:11:55
220
原创 【第九章-React Router 6】
本文介绍了 React Router 6 的核心特性与使用方法，对比 v5 版本，重点讲解了 BrowserRouter、Routes 和 element 替代 component 等变化。通过一级路由配置、重定向（<Navigate>）、动态跳转及 NavLink 高亮功能，展示了 v6 的现代化语法与函数式组件推荐。强调了 useNavigate、useParams 等新 Hook 的应用，帮助开发者快速上手新版路由系统。
2026-09-11 19:37:31
107
原创 【第八章-react扩展】
setState对象式/函数式，lazyLoad路由懒加载。生成摘要，简洁。</think>本文介绍了React扩展中的setState两种写法：对象式（语法糖）和函数式（依赖原状态），并强调异步更新及回调中读取最新状态。同时说明了路由组件的懒加载（lazyLoad），通过lazy与Suspense实现按需加载，减小首屏体积，提升性能。
2026-09-03 11:31:06
236
原创 【第七章-redux】
Redux是一个专为状态管理设计的JavaScript库，主要用于React等前端框架中集中管理共享状态。其核心概念包括Action（描述状态变化）、Reducer（纯函数处理状态变更）和Store（连接状态与操作的中央仓库）。Redux适用于多组件状态共享或通信场景，但建议谨慎使用。 工作流程：组件通过dispatch发送Action，Store调用Reducer生成新状态，触发订阅者更新。核心API包括createStore创建Store、combineReducers合并多个Reducer、apply
2026-07-20 18:31:02
240
原创 【第六章-React Ul组件库】
本文介绍了两种流行的开源React UI组件库：Material-UI和Ant Design，重点讲解了Ant Design的基本使用、按需引入样式和自定义主题配置。主要内容包括：1）Ant Design的安装和基本组件引入方式；2）通过react-app-rewired和babel-plugin-import实现样式按需加载，减少打包体积；3）使用less-loader进行主题定制，修改默认主题颜色。文章提供了详细的配置步骤和代码示例，帮助开发者高效使用Ant Design组件库并优化项目性能。
2026-06-24 11:43:03
280
原创 【第五章-react 路由】
本文主要介绍了React Router的基本概念、使用方法和相关技术细节，内容涵盖单页应用(SPA)原理、路由分类、React Router的核心功能以及实际应用场景。 核心内容摘要： SPA与路由基础 SPA是单页面应用，通过前端路由实现局部更新，数据通过AJAX异步获取。 路由分为前端路由和后端路由，前端路由通过组件映射URL路径。 React Router使用 安装react-router-dom（v5版本），通过BrowserRouter或HashRouter管理路由。
2026-06-18 15:32:07
288
原创 【第四章-react ajax】
React本身不包含ajax请求功能，需要集成第三方库如axios。axios是一个轻量级、基于Promise的HTTP客户端，适用于浏览器和Node.js环境。在React项目中，可以通过npm安装axios并发送GET/POST请求。当请求不同端口的服务器时，会遇到跨域问题，可通过配置代理解决。React脚手架支持两种代理配置方式：1）在package.json中简单配置单个代理；2）通过setupProxy.js文件配置多个代理规则，实现灵活转发请求。代理配置需注意请求前缀处理和host字段控制，确保
2026-05-09 19:01:45
531
原创 【第三章-react 应用(基于 react 脚手架)】
1.脚手架: 用来帮助程序员快速创建一个基于 xxx 库的模板项目；2. 提供了一个用于创建 项目的脚手架库： ；3.项目的整体技术架构为：；4.使用脚手架开发的项目的特点：模块化，组件化，工程化。创建项目成功：页面效果：favicon.icon ------ 网站页签图标（偏爱图标）index.html --------主页面logo192.png ------- logo 图logo512.png ------- logo 图manifest.json ----- 应用加壳的配置文件
2026-04-22 17:01:45
489
原创 【第二章-React面向组件编程（二】
本文摘要： 文章主要介绍了React组件的生命周期概念及其应用。通过一个实现文字透明度渐变动画的案例，详细演示了组件从创建、挂载到卸载的完整生命周期流程。重点讲解了关键生命周期方法的使用： componentDidMount() - 组件挂载后执行初始化操作（设置定时器） componentWillUnmount() - 组件卸载前进行清理（清除定时器） render() - 渲染组件UI 案例完整展示了如何利用生命周期方法实现组件功能，同时避免内存泄漏等问题。最后还提及了旧版React的生命周期流程图。
2026-03-13 18:46:33
494
原创 css实现元素和文字从右向左排列
本文介绍了两种CSS实现从右向左排列的方法：1）使用display:flex和dir="rtl"属性实现元素从右向左排列，Vue项目中可通过:dir动态绑定；2）通过direction:rtl和unicode-bidi:bidi-override样式实现文本从右向左显示。两种方法均附有代码示例和效果图展示。
2026-03-09 11:19:17
132
原创 【第二章-React面向组件编程（一）】
我们先声明一个函数，然后在函数中返回html标签。return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2></script>我们来看下效果：很明显浏览器报错了，react 提示我们需要以组件的形式引入demo函数。我们把demo然后再在浏览器中运行试一下：这次的结果依然是报错，react 提示我们要引入已注册的组件，所以我们需要把函数名demo改成大写的Demo，告诉浏览器这是我们注册过的组件，而不是html中自带的标签。
2026-02-11 18:46:18
1047
原创 【第一章-React入门】
React用于构建用户界面。它采用组件化模式和虚拟DOM技术，提高开发效率并优化性能。学习React前需掌握JavaScript基础知识，如ES6语法、class等。React通过JSX语法简化虚拟DOM创建，JSX最终会转换为JavaScript对象。相比原生JS操作DOM，React的虚拟DOM更轻量，能减少重绘重排。入门案例展示了如何用JSX创建虚拟DOM并渲染到页面。React适合解决原生JS操作DOM繁琐、复用率低等问题，是现代化前端开发的重要工具。
2025-12-01 11:06:28
886
原创 git详细使用教程
本文介绍了Git的基础和高级使用方法，包括项目初始化、文件状态管理、提交记录查看、版本回滚等基础操作，以及代码暂存(stash)、分支管理(创建/切换/合并/删除)等高级功能。重点讲解了紧急修复bug的标准流程：1)提交当前开发内容；2)切换到主分支；3)创建bug分支修复；4)合并修复内容后删除bug分支。通过status的不同颜色(红/绿/白)可直观判断文件状态，使用stash相关命令能有效管理未提交代码。
2025-11-05 11:55:25
723
原创 PC端使用rem适配
摘要： 本文介绍了在PC端使用rem进行适配的方法，以解决设计稿元素过大导致小屏幕显示异常的问题。核心步骤包括：添加viewport meta标签限制缩放，并引入rem.js动态计算根字体大小（基于1920px设计稿按比例缩放）。但该方法存在局限性，浏览器窗口缩放或调试时可能导致样式错乱，因此常规PC项目仍推荐采用百分比布局结合媒体查询的适配方案。
2025-09-10 18:26:56
309
原创 使用el-form完成表单验证
本文介绍了如何使用Element UI的el-form组件进行表单验证。主要内容包括：1) el-form的基本结构，包含父元素el-form和子元素el-form-item；2) 表单验证的实现方法，通过设置rules规则对象和prop属性；3) 提交按钮的全局验证，使用validate()方法；4) 常用正则表达式总结，如手机号、身份证号等验证规则。该方案适用于vue+element-ui技术栈，能有效实现表单数据的规范验证。
2025-09-03 16:34:20
624
原创 前端实现上传和下载
本文介绍了在Vue+ElementUI项目中实现文件上传和下载功能的方法。上传功能通过el-upload组件获取文件，使用FormData对象转换格式后提交，注意设置contentType为multipart/form-data。下载功能通过创建a标签，设置href为后台返回的URL并模拟点击实现。两种功能的实现都较为简单，关键在于理解表单数据格式转换和下载链接处理。文章提供了完整的代码示例和关键配置说明，帮助开发者快速实现文件传输功能。
2025-08-22 19:43:51
391
原创 在组件中使用el-dialog时，遮罩层覆盖了弹窗
Vue中el-dialog被遮罩层覆盖的解决方案 问题描述：在封装的Vue组件中使用Element UI的el-dialog时，弹窗被遮罩层覆盖且交互失效。 原因分析：这是由于遮罩层默认插入到body元素，而弹窗可能插入到层级更深的父元素中，导致z-index冲突。 解决方案：为el-dialog添加modal-append-to-body="false"属性，将遮罩层插入到弹窗的父元素内，避免覆盖问题。
2025-08-22 19:00:23
426
原创 vue中监听页面滚动位置
本文介绍了在Vue中监听页面滚动位置的方法。通过e.target.scrollTop获取页面滚动高度，当超过700像素时显示侧边栏导航。在mounted生命周期添加scroll事件监听，beforeDestroy时移除监听，以避免内存泄漏。核心代码包括滚动判断和事件管理两部分，实现页面滚动到指定位置展示侧边栏的功能。
2025-08-22 18:48:30
376
原创 vuex如何在js文件中使用
摘要 本文介绍了如何在.js文件中使用Vuex。通过导出Vuex store模块，在.js文件中直接导入并调用mutations方法，实现状态管理。代码示例展示了从vuex-store.js导出store，并在util.js中调用updateIsLogin mutation的过程。文章强调Vuex不仅限于.vue文件，也可灵活应用于.js文件，扩展了Vuex的使用场景。 关键词：Vuex、状态管理、mutations、JavaScript模块
2025-08-22 17:46:31
473
原创 在图片没有加载完成时设置默认图片
文章摘要：前端开发中，图片未加载时显示空白会影响用户体验。本文介绍两种设置默认图片的方法：1）使用img标签的placeholder属性直接指定默认图；2）通过onerror事件处理加载失败情况，动态替换为默认图。前者简洁但依赖浏览器支持，后者兼容性更好且支持复杂逻辑处理。根据实际需求选择适合的方案可有效改善页面加载体验。（149字）
2025-08-22 17:37:59
604
原创 最近开发PC端关于静态页面的一些心得与感悟
PC端官网项目在笔记本上出现样式问题，主要原因是：1）布局采用固定px导致响应式失效，建议改用百分比和flex布局；2）背景图设置不当导致留白或显示不全，应调整background-position和background-size；3）1X图片在高分屏模糊，需替换为压缩后的2X图；4）外部字体未完整引入导致字重不一致，需分别引入不同字重的字体文件。项目开发周期紧张导致加班严重，建议开发者合理规划需求，优先保证身心健康。
2025-08-22 11:16:38
237
原创 vue中实现锚点定位
本文介绍了在Vue项目中实现锚点定位的解决方案。传统使用id和a标签的href方法会与路由的hash值冲突。推荐使用scrollIntoView()方法，它通过获取DOM元素并调用该方法实现平滑滚动定位，具有不改变URL、可设置缓冲效果等优点。该方法解决了Vue中锚点定位的常见问题，是更优的实现方案。
2025-08-11 11:08:50
395
转载 es6的Set 和 Map 数据结构
ES6的Set和Map是两种新的数据结构。Set类似于数组，但成员值唯一，可用来数组去重，提供add/delete/has/clear等操作方法，支持遍历和集合运算（并集、交集、差集）。Map是键值对集合，键可以是任意类型，提供set/get/has/delete等方法，支持遍历操作。两者都可通过扩展运算符转换为数组，在数据存储和操作上提供了更灵活的选择。
2025-08-04 11:56:35
251
转载 es6的Symbol
本文介绍了ES6引入的Symbol数据类型，它是一种表示唯一值的原始类型，用于解决对象属性名冲突问题。Symbol通过Symbol()函数生成，每个值都是独一无二的。它可以接受字符串参数作为描述，但不能与其他类型运算。Symbol值可用作对象属性名，但需用方括号而非点运算符访问。文章还讲解了如何通过description属性获取Symbol描述、使用Symbol消除魔术字符串，以及遍历Symbol属性的方法Object.getOwnPropertySymbols()。
2025-07-30 11:02:22
69
转载 es6对象的新增方法
ES6新增了Object.is()和Object.assign()方法。Object.is()解决了===运算符中NaN不等于自身和+0等于-0的问题，实现了"同值相等"比较。Object.assign()用于对象合并，将源对象可枚举属性复制到目标对象，特点是浅拷贝、同名属性替换、支持Symbol属性。主要用途包括为对象添加属性和方法、克隆对象等，但需要注意它对非对象参数的处理方式及浅拷贝带来的引用问题。这些方法为JavaScript对象操作提供了更强大的功能支持。
2025-07-28 18:07:25
189
转载 es6对象的扩展
ES6对象扩展主要包括：1）属性简洁表示法，允许直接写入变量和函数作为对象的属性和方法；2）属性名表达式，支持用表达式定义属性名；3）方法的name属性，可返回函数名或Symbol描述；4）属性的可枚举性控制，新增Object.assign()会忽略不可枚举属性。这些特性简化了对象操作，增强了代码可读性，其中属性简写和方法简写在模块输出和函数返回值中尤为实用。注意属性名表达式与简洁表示法不能混用，且对象作为属性名会自动转为字符串"[object Object]"。
2025-07-23 18:39:34
214
转载 es6数组的扩展
ES6扩展运算符（...）可以将数组展开为参数序列，主要用于函数调用，能够替代apply方法。它支持复制数组、合并数组（浅拷贝）、与解构赋值结合、转换字符串为数组等功能。扩展运算符要求对象必须实现Iterator接口，适用于数组、NodeList、Map、Set等可迭代对象，但不适用于普通类数组对象（需用Array.from转换）。使用需注意扩展运算符在函数调用时的特殊语法要求。
2025-07-18 17:39:32
165
转载 es6函数的扩展
尾调用（Tail Call）是函数式编程的一个重要概念，本身非常简单，一句话就能说清楚，就是指某个函数的最后一步是调用另一个函数。上面代码中，函数f的最后一步是调用函数g，这就叫尾调用。以下三种情况，都不属于尾调用// 情况一return y;// 情况二// 情况三g(x);上面代码中，情况一是调用函数g之后，还有赋值操作，所以不属于尾调用，即使语义完全一样。情况二也属于调用后还有操作，即使写在一行内。情况三等同于下面的代码。g(x);尾调用不一定出现在函数尾部，只要是最后一步。
2025-07-11 12:02:34
120
转载 es6新增运算符总结
ES6运算符扩展摘要 ES6新增了多项运算符扩展：1）指数运算符**用于幂运算，具有右结合性；2）链判断运算符?.简化深层属性访问，避免繁琐的空值检查；3）Null判断运算符??提供更严格的默认值设置，仅对null/undefined生效；4）逻辑赋值运算符||=、&&=、??=结合逻辑运算与赋值操作。这些新特性显著提升了代码简洁性和安全性，特别是?.和??配合使用能有效处理嵌套对象和默认值场景，而逻辑赋值运算符则简化了条件赋值写法。使用时需注意运算符优先级和特殊边界情况。
2025-07-02 18:25:46
199
转载 es6字符串、数值新增方法总结
ES6字符串与数值新增方法摘要 字符串新增方法： 判断方法：includes()、startsWith()、endsWith()用于检查字符串包含关系 重复方法：repeat()可重复字符串指定次数 填充方法：padStart()和padEnd()用于补全字符串长度 去空格方法：trimStart()和trimEnd()分别去除首尾空格 替换方法：replaceAll()可全局替换字符串 字符获取：at()支持正负索引获取指定位置字符 数值扩展： 数值分隔符：允许使用下划线(_)分隔数字，提高可读性，如1_
2025-07-02 18:11:37
148
原创 Vue中引入外部字体并使用
1.下载需要引入的字体包；2.创建一个新的资源目录 font 文件夹，将需要的字体放在该目录下并创建一个font.css；3.在 font.css 文件中引入想要的字体；4.在项目中全局引入写好的 font.css 文件；5.那么现在就可以在 vue 组件中随意使用引入的字体样式啦！
2025-06-25 15:35:15
1554
原创 用css实现文字字体颜色渐变
摘要： CSS3的background-clip属性配合渐变背景可实现文字颜色渐变效果。通过设置background-image为线性渐变（如从绿到白），并应用background-clip: text与-webkit-text-fill-color: transparent，使文字呈现从左到右的颜色过渡。代码简洁，兼容性需前缀支持，效果直观。
2025-06-25 11:43:21
732
原创 vant Dialog组件调用的坑
在做移动端项目时，需要完成一个带有倒计时按钮的弹窗，这就需要在弹窗内嵌入组件或其他自定义内容，可以使用组件调用的方式。Dialog 是一个函数，不是组件，因此不支持局部注册，正确的注册方法是 Vue.use(Dialog)，即使用全局引入的方式。
2025-04-23 18:53:10
541
转载 CSS 使用calc()获取当前可视屏幕高度
我们可以获得当前屏幕的视窗宽度，所以在css中，通过计算这个高度即可使得div的高度自动撑开到屏幕高度，而计算这个高度可以使用css3的。需要注意的是，该方法适用于网页高度等于当前屏幕视窗高度，按实际需求可能还是需要JS的。相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。先了解一下CSS3的相对长度单位。
2025-03-13 11:11:34
634
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人