- 博客(65)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 vue状态管理--Pinia 和 Vuex的区别
Pinia使用 defineStore 函数来定义一个 store，其中 state 是一个返回对象的函数，Pinia 会自动将这个对象通过 Vue3 的 reactive 函数转换为响应式对象。这里 state 返回的 { count: 0 } 对象会被 reactive 处理成响应式对象，对 count 属性的修改会自动触发响应式更新。Vuex在 Vuex 中，state 是一个普通的对象，在创建 Vuex store 实例时进行定义。
2025-04-11 14:28:27
410
原创 Vue--状态管理pinia
getters 会自动追踪其依赖的 state 属性，当依赖的 state 属性发生变化时，getters 会重新计算并更新相关的组件。当使用 defineStore 定义一个 Store 时，Pinia 会利用 Vue 3 的 reactive 函数将 state 函数返回的对象转换为响应式对象。当调用 increment 方法时，this.count 的值会增加，由于 state 是响应式的，任何依赖于 count 的组件或 getters 都会自动更新。
2025-04-08 19:42:57
977
原创 TypeScript--基础讲解
在 TypeScript 里，你可以为变量、函数参数和返回值等指定类型。常见的基本类型有 number、string、boolean、null、undefined 等。TypeScript 支持类的概念，并且可以使用访问修饰符（如 public、private、protected）。类型断言能够告诉编译器 “相信我，我知道自己在做什么”，它允许你手动指定一个值的类型。元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。在 TypeScript 中，你可以为函数的参数和返回值指定类型。
2025-04-02 10:00:00
371
原创 前端工程化--Rollup的使用
集成 Babel，将 ES6+ 代码转换为向后兼容的 JavaScript 代码。将 CommonJS 模块转换为 ES6 模块，以便 Rollup 可以处理。打包完成后，会在dist目录下生成bundle.js文件。用于解析node_modules中的第三方模块。用于压缩和混淆打包后的代码。
2025-04-01 10:00:00
1806
原创 vue--Tree-shaking技术
由于 ES6 模块的导入和导出是静态的，打包工具（如 Webpack、Rollup）在编译时就可以确定哪些模块被使用，哪些未被使用，然后将未使用的模块从最终的打包文件中移除。这里的Vue是一个全局对象，包含了 Vue 的所有功能，即使我们只使用了其中一部分，打包工具也无法将未使用的部分移除。综上所述，Vue 3.x 通过组合式 API 和按需引入的设计，极大地提升了对 Tree-shaking 的支持，使得开发者能够更方便地减少打包文件的体积，优化应用性能。Vue 3.x 的全局 API 也支持按需引入。
2025-03-31 09:45:00
723
原创 前端工程化--gulp的使用
gulp介绍gulp 是一个基于 Nodejs 的自动化构建工具，中文主页: http://www.gulpjs.com.cn/能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的合并、压缩、检查、监听文件变化、浏览器自动刷新、测试等任务使用步骤：安装 nodejs全局安装 gulpnpm install gulp -g4. 局部安装gulp ```shell npm install gulp --save
2025-03-27 10:13:50
779
1
原创 前端安全加密方式
HTTPS 是基础，必须强制启用。对称加密（AES）+ 动态密钥管理。前端哈希 + 后端加盐哈希双重防护。非对称加密安全传输对称密钥。防 XSS、防 CSRF、密钥安全是核心。前端加密需结合场景选择算法（如 AES 加密、RSA 密钥交换、SHA 哈希），并通过 HTTPS 和安全实践（如防 XSS、CSRF）构建防护体系。同时，避免过度依赖前端加密，关键数据需后端二次验证。
2025-03-25 16:07:19
1781
原创 iOS--iframe滚动穿透问题
在移动端的项目中，需要实现有效阅读标记的需求，此功能在实现iframe 嵌入PDF预览时，需要在下滑到底部时显示标记按钮，但是在iOS中，因为滚动穿透的问题，在PDF区域触底后无法触发外层的滚动事件，后经过查询得知，这是因为 iOS 的滚动机制和 iframe 的滚动容器特性导致的。
2025-03-25 10:00:00
252
原创 axios--源码解析
成功的回调函数, 传递的默认是config(也必须是)成功的回调函数, 传递的默认是response。失败的回调函数, 传递的默认是error。失败的回调函数, 传递的默认是error。可以对请求进行检查或配置进行特定处理。在真正发送请求前执行的回调函数。在请求得到响应后执行的回调函数。可以对响应数据进行特定处理。
2025-03-24 14:22:37
1113
原创 ES6--新特性
ECMAScript 61.第1章：ECMASript 相关介绍1.1.什么是ECMAECMA（European Computer Manufacturers Association）中文名为欧洲计算机制造商协会，这个组织的目标是评估、开发和认可电信和计算机标准。1994年后该组织改名为Ecma国际。1.2.什么是ECMAScriptECMAScript 是由Ecma国际通过ECMA-262标准化的脚本程序设计语言。1.3.什么是ECMA-262Ecma国际制定了许多标准，而ECMA-262只
2025-03-23 10:00:00
812
1
原创 vue+Electron开发桌面应用
使用 Vue CLI 创建一个新的 Vue 项目。打包完成后，可以在 dist_electron 目录下找到生成的安装包。
2025-03-21 10:00:00
397
原创 安全加密--AES算法
1997 年，美国国家标准与技术研究院（NIST）发起征集高级加密标准的活动，旨在寻找一个替代 DES（Data Encryption Standard）的加密算法。经过多轮筛选和评估，比利时密码学家 Joan Daemen 和 Vincent Rijmen 设计的 Rijndael 算法在 2001 年被选定为 AES。使用相同的密钥进行加密和解密操作。这意味着在数据传输前，通信双方需要安全地共享这个密钥。
2025-03-19 14:00:00
796
原创 react--虚拟dom原理
虚拟 DOM 本质上是一个 JavaScript 对象，它以树状结构来描述真实 DOM 的层次结构和属性信息。例如，对于一个简单的 HTML 元素 < div id=“example”>Hello, World!props: {},
2025-03-19 10:00:00
1297
原创 axios--入门讲解
axios从入门到源码分析第1章：HTTP相关1.1.MDN文档https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Overview1.2.HTTP请求交互的基本过程前台应用从浏览器端向服务器发送HTTP请求(请求报文)后台服务器接收到请求后, 调度服务器应用处理请求, 向浏览器端返回HTTP响应(响应报文)浏览器端接收到响应, 解析显示响应体/保存数据并调用监视回调1.3.HTTP请求报文请求行:method urlGET /p
2025-03-17 14:00:00
979
原创 react--响应式原理
React 组件通过state（状态）来管理数据，UI 是状态的纯函数。当状态变化时，React 会自动重新渲染组件并更新 DOM。数据从父组件通过props传递给子组件，子组件只能通过回调函数向父组件反馈。这种单向流动保证了数据变化的可预测性。React 通过生命周期方法（类组件）或 Hooks（函数组件）处理副作用，确保状态变化后的副作用逻辑正确执行。调用，减少不必要的渲染。React 会批量处理多个。
2025-03-17 09:45:00
722
原创 版本管理工具--git
Git 介绍Git 是一款开源免费的分布式的版本控制系统。是 Linux 之父 Linus Torvalds （林纳斯·托瓦兹）为了方便管理 Linux 内核代码而开发的。作用版本控制系统在项目开发中作用重大，能记录文件的历史状态，主要的功能有以下几点代码备份版本回退协作开发权限控制下载安装下载地址 https://git-scm.com/安装方式与 QQ 安装相同，一路下一步，中间可以设置软件的安装路径Linux 常用命令Linux 是一套开源免费的操作系统。与系统的交互通常用
2025-03-14 10:00:00
916
1
原创 express中操作cookie和session
express中操作cookie和session一、操作cookie：1. 设置cookie(给客户端“种”cookie)： 直接使用res.cookie('key','value',{maxAge:??*??*??})即可。 2. 获取cookie(要第三方中间件): * 安装：npm i cookie-parser * 引入：const cookieParser = require('cookie-parser') * 使用：app.use
2025-03-13 13:30:00
2121
原创 Vue.js--keep-alive用法
这里使用了 v-slot 来获取 router-view 渲染的组件，然后用 keep-alive 进行包裹，实现路由组件的缓存。例如，我们有组件newsList和newsInfo，imageList和imageInfo，但是我们只想缓存newsList和imageList这2个列表组件的数据。是Vue的内置组件，包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。这里需要说明的是，本示例是使用了vue-router的，所以这里的keep-alive中放了1个router-view。
2025-03-13 09:45:00
548
原创 游戏开发--碰撞检测算法
Matter.js 是一个用于创建基于物理的 JavaScript 游戏的引擎，可用于实现复杂的碰撞检测和物理效果。Phaser 是一个功能强大的 HTML5 游戏框架，提供了丰富的游戏开发功能，包括碰撞检测。
2025-03-12 10:00:00
608
原创 数据库--MongoDB
第1章：数据库1.1数据库是什么数据库（DataBase）是按照数据结构来组织、存储和管理数据的仓库。1.2为什么要使用数据库我们的程序都是在内存中运行的，一旦程序运行结束或者计算机断电，程序运行中的数据都会丢失。所以我们就需要将一些程序运行的数据持久化到硬盘之中，以确保数据的安全性。而数据库就是数据持久化的最佳选择。说白了，数据库就是存储数据的仓库。1.3数据库的分类1.3.1 关系型数据库（RDBS）代表有：MySQL、Oracle、DB2、SQL Server…特点：关系紧密，都是表
2025-03-11 13:15:00
715
1
原创 react--生命周期执行顺序
对于函数组件，React 提供了 Hooks，如 useState, useEffect, useContext 等，这些 Hooks 可以让你在不编写 class 的情况下使用 state 和其他 React 特性。例如，useEffect 可以看作是 componentDidMount, componentDidUpdate, 和 componentWillUnmount 的组合。React 18 中，彻底移除了所有不推荐使用的生命周期方法，并鼓励使用函数组件和 Hook，如。React 17 中，
2025-03-10 10:00:00
1736
原创 react--快速入门
在上面示例中，style={{}} 并不是一个特殊的语法，而是 style={ } JSX 大括号内的一个普通 {} 对象。如果想在一个条件或循环中使用 useState，需要提取一个新的组件并在组件内部使用它。React 没有特殊的语法来编写条件语句，因此使用的是普通的 JavaScript 代码。父组件将一个函数作为 prop 传递给子组件，子组件在需要的时候调用这个函数并传递数据。父组件可以将自身的数据作为属性传递给子组件，子组件接收并使用这些数据。要做到这一点，需要在组件中添加 state。
2025-03-06 09:45:00
951
原创 可视化开发--three.js
three.js 提供了多种材质，如基础材质（MeshBasicMaterial）、标准材质（MeshStandardMaterial）等。光照可以增强场景的真实感，three.js 提供了多种类型的光照，如环境光（AmbientLight）、点光源（PointLight）、平行光（DirectionalLight）等。three.js 支持加载多种外部 3D 模型格式，如 .obj、.glTF 等。场景是所有 3D 对象的容器，就像一个舞台，所有的物体、灯光、相机等元素都需要添加到场景中才能被渲染出来。
2025-03-05 09:45:00
400
原创 Node.js--Express框架
在上述代码中，我们首先引入了 Express 模块，然后创建了一个 Express 应用实例。接着，我们定义了一个根路由 ‘/’，当用户访问该路由时，服务器会返回 ‘Hello, Express!最后，我们使用 app.listen() 方法启动服务器，并监听指定的端口。在项目根目录下创建一个名为 public 的文件夹，并在其中放置一些静态文件，如 index.html。中间件是 Express 应用的核心概念之一，它可以在请求处理过程中执行各种任务，如日志记录、身份验证、错误处理等。
2025-03-04 10:04:48
761
原创 webpack配置教程
webpack快速入门教程1、webpack 介绍什么是webpackhttps://www.webpackjs.com/Webpack是一个模块打包器(bundler)。在Webpack看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理它将根据模块的依赖关系进行静态分析，生成对应的静态资源五个核心概念Entry：入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。Output：output
2025-03-03 13:15:00
1209
原创 Vue3--响应式系统增强
Vue 3 的响应式系统增强基于 Proxy 实现，相比 Vue 2 有诸多显著优势，主要体现在性能提升、功能增强、代码维护性提高等方面，以下是具体介绍：
2025-03-02 10:00:00
409
原创 Node.js--koa框架
上述代码首先引入了 Koa 模块，然后创建了一个 Koa 应用实例。接着，通过app.use方法定义了一个中间件，当有请求到达时，这个中间件会将响应体设置为Hello, Koa!最后，应用监听在 3000 端口上，当服务器启动成功后，会在控制台打印出相应的提示信息。
2025-02-28 14:00:00
638
原创 Weex中使用vue.js
即便如此，Vuex 和 vue-router 都是独立的库，都有自己的概念和使用场景，仍然可以在 Weex 里使用 Vuex 和 vue-router。由于运行时构建版本比完整版本的构建版本轻约 30%（Vue 官方估算），为了更好的性能和更小的代码体积，Weex 集成的是运行时版本的 Vue。具体来讲，每个页面的 Vue 变量都是不同的实例，即使是写在 Vue 上的“全局”配置（Vue.config.xxx）也只会影响 Weex 上的单个页面。但是源代码仍然是一样的，唯一的区别是编译的方法。
2025-02-27 10:00:00
1717
原创 跨平台开发--Weex
Weex 允许开发者使用 JavaScript、HTML 和 CSS 等前端技术来构建跨平台的原生移动应用，它将前端开发的便利性与原生应用的性能优势相结合。Weex 最初由阿里巴巴团队开发，旨在解决移动应用开发中多平台适配的问题，提高开发效率，降低开发成本。
2025-02-26 13:50:21
1028
原创 H5--开发适配
grid-container 设置为 display: grid 开启网格布局，grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) 表示列的宽度会根据容器宽度自动调整，最小为 200px，最大会平均分配剩余空间。flex-wrap: wrap 允许元素在空间不足时换行，justify-content: space-around 让元素在容器中均匀分布。上述代码中，当屏幕宽度大于 1200px 时，加载 large-image.jpg；
2025-02-21 18:20:58
670
原创 H5—Uni-app的使用
important 来解决；不同平台对样式的支持存在差异，某些样式在特定平台可能不生效，需要使用条件编译进行适配。可以进行代码压缩，使用 HBuilderX 自带的代码压缩功能或第三方工具对代码进行压缩；去除无用的资源和组件，清理项目中未使用的图片、字体等资源；采用分包加载策略，将不常用的页面和资源进行分包处理，减少主包体积；对图片等资源进行优化，选择合适的图片格式并进行压缩。可以采取以下措施：减少首屏加载的资源，将非必要的资源进行懒加载；在 Uni-app 开发中，遇到样式不生效的问题，可能有哪些原因？
2025-02-17 15:43:02
1187
原创 前端工程化--自动化构建
Vite 在开发环境下基于原生 ES 模块提供了快速的冷启动和即时热更新能力，它利用浏览器对 ES 模块的支持，跳过了传统打包工具在开发时的复杂打包过程。在生产环境中，Vite 可以使用 Rollup 进行高效的打包，输出优化后的静态资源。Vite 以其快速的开发体验和高效的构建能力，成为了现代前端项目的首选构建工具之一，尤其适合快速迭代的项目和对开发效率要求较高的团队。通过以上步骤，你可以使用 Webpack 来构建和管理前端项目，实现资源的打包、优化和开发环境的搭建。
2025-02-14 13:15:00
622
原创 vue.js之diff算法
Diff 算法是一种用于比较两个树结构差异的算法。在 Vue.js 里，它用于比较新旧虚拟 DOM 树的差异，从而找出哪些节点需要更新，避免直接操作真实 DOM 带来的性能开销，因为直接操作真实 DOM 的代价相对较高。
2025-02-13 10:00:00
1033
原创 vue.js之虚拟 DOM
虚拟 DOM 是一种轻量级的 JavaScript 对象，它是真实 DOM 的抽象表示。简单来说，虚拟 DOM 就是用 JavaScript 对象来模拟真实的 DOM 树结构，每个虚拟 DOM 节点对应一个真实的 DOM 节点。
2025-02-12 16:20:22
1061
javascript学习第二天（运算符的使用）.md
2020-06-16
JavaScript学习第一天.md
2020-06-16
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人