- 博客(130)
- 收藏
- 关注
转载 使用 HTML + JavaScript 实现高亮划线笔记工具(附完整代码)
在日常的学习和工作中,我们经常需要处理大量的文本信息。为了更好地理解和记忆这些信息,标记重点、添加注释以及复制内容是必不可少的操作。本文将介绍一个基于 HTML、CSS和 JavaScript 实现的高亮划线笔记工具,它能够帮助用户高效地进行文本阅读与标注。
2025-06-12 14:35:40
28
3
转载 学习 Vue2 的发布说明生成器:自动化生成优雅的 Release Notes
在软件发布流程中,Release Notes(发布说明)是连接开发团队和用户的重要桥梁。Vue2 通过一个精巧的脚本自动生成发布说明,今天我们就来解析这个神秘的工具!Vue2 的发布说明生成器展示了如何优雅地解决一个常见问题:将技术细节转化为用户友好的发布说明。约定优于配置:采用标准化的 Conventional Commits自动化优先:减少人工操作成本灵活输入:支持多种版本号传递方式可扩展架构:通过配置适应不同需求。
2025-06-12 14:32:05
27
3
转载 Vue前端开发实战:从入门到工程化
Vue.js自2014年发布以来,凭借“渐进式框架”的设计哲学,从一个轻量级视图库成长为覆盖全场景的前端解决方案。无论是个人开发者快速搭建原型,还是企业级团队开发复杂系统,Vue都能提供灵活的技术路径。核心概念解析(结合原理图解,避免死记硬背)完整代码示例(可直接复制运行的实战代码)避坑指南(总结开发中常见的10+类问题及解决方案)工程实践(从单文件组件到企业级架构的设计思路)无论你是希望提升技能的前端开发者,还是需要构建完整项目的团队技术负责人,本书都能为你提供可落地的经验参考。
2025-06-12 14:24:17
60
3
转载 React 开发者必知:JSX 转换机制与内部实现
在 React 项目中,我们会使用 JSX 语法。简单来说,JSX 可以让你在 JavaScript 代码中编写类似 HTML(实际上是 XML)结构的代码,其本质是简化组件和元素结构的声明方式。
2025-06-12 14:07:01
28
3
转载 微前端大炮打蚊子?看看如何轻量化跨平台开发(附源码)
你是否遇到过一下几种情况某些和项目契合度不高的页面,因为业务需要,也被放到项目中去开发,造成体积臃肿跨团队协作开发的时候,对方要塞几个页面到你的项目里高复用页面,很多项目都有类似的几个页面,但是要维护好几份代码大炮打蚊子,接入微前端,其实只有简单的几个页面目前我使用的是Vue3框架,目前跨Vue2,和Vue3都是可以实现的。对于React的用户,可能方式需要再调整一下,但是整体思路应该都是相通的。
2025-06-12 14:04:13
22
3
转载 基于 VuePress 2.x 与 ElementPlus 的组件库文档搭建实践
计划使用结合实现一个封装组件库的文档说明网站。本文将详细介绍如何搭建环境、配置项目以及解决过程中遇到的问题。在.vuepress目录下创建components文件夹,然后在其中创建Test.vue<template><h1>在 Markdown 中引入自定义组件</h1><el-button type="success">这是一个 ElementPlus 按钮</el-button></div>setup() {// 组件逻辑return {}})</script>
2025-06-12 12:26:21
47
3
转载 前端算法
substr(), substring() 这两个方法的功能都是截取一个字符串的片段,并返回截取的字符串。而它们的参数一,都是一样的功能,截取的起始位置。.includes(), startsWith(), endsWith()includes、startsWith、endsWith,es6 的新增方法,includes 用来检测目标字符串对象是否包含某个字符,返回一个布尔值,startsWith 用来检测当前字符是否是目标字符串的起始部分,相对的 endwith 是用来检测是否是目标字符串的结尾部分。
2025-06-12 12:07:54
19
3
转载 JavaScript 数据类型详解:从基础到深入
实践建议说明使用const和let替代var更安全的作用域控制不要手动将变量设为undefined推荐使用null表示空值使用===和!==进行比较避免隐式类型转换带来的问题对象和数组使用深拷贝避免副作用如使用使用 Linter 工具检测潜在类型错误如 ESLint、TypeScript使用 TypeScript 提高类型安全性在大型项目中推荐使用静态类型系统六、附录:常用类型判断方法汇总类型推荐判断方式undefinednullx === nullbooleannumber。
2025-06-12 11:59:11
39
3
转载 今天我又被JavaScript的this绑架了![特殊字符]
写法是否是 IIFE是否具名是否可修改b = 20输出严格模式输出})()✅ 是✅ 具名❌ 不可修改(严格模式)函数自身报错:TypeError: Assignment to constant variable❌ 否✅ 具名✅ 可修改(函数名不遮蔽)报错:b is not a function❌ 否✅ 具名❌ 不可修改函数自身报错:TypeError: Assignment to constant variable❌ 否❌ 不具名✅ 可修改2020❌ 否✅ 具名。
2025-06-12 11:48:50
18
3
转载 【JS】export default [特殊字符] export
语法都正确,但导出方式不同,导入方式也不同,尤其在React和懒加载中区别很大。
2025-06-11 14:19:54
31
3
转载 队列:先进先出的线性数据结构及其应用
队列是一种简单而强大的数据结构,它的"先进先出"特性使其在许多算法和实际应用中发挥重要作用。从简单的任务调度到复杂的滑动窗口问题,队列都能提供高效的解决方案。理解队列的工作原理和应用场景,是成为一名优秀程序员的重要一步。在实际编程中,灵活运用队列及其变体(如双端队列等),能够帮助我们设计出更高效、更优雅的算法和系统。
2025-06-11 14:16:46
23
3
转载 Vue 与 React 初体验:从刀耕火种到现代前端开发的奇妙之旅
前端最开始的时候,大家都戏称自己为"切图崽"——整天与HTML、CSS和一点点JavaScript打交道,用最原始的方式拼凑页面。那时候,大家都是手动操作DOM节点,用和来动态更新界面,就像用石器时代的工具建造摩天大楼。随着Web应用变得越来越复杂,这种"刀耕火种"的开发方式已经无法满足需求。这时候,Vue和React等现代前端框架应运而生,它们让我们能够聚焦于业务逻辑,而不是纠结于底层的DOM操作。在这篇文章中,我将分享我从原生JS到Vue和React的转变历程,以及React响应式编程的初体验。
2025-06-11 14:13:18
24
3
转载 前端模块化的过去和未来
/ 依赖多个模块// 使用jQuery和Underscore的模块实现return {// 模块导出的功能});核心特点与浏览器适配性异步加载:通过XHR或动态脚本注入实现非阻塞模块加载,不影响页面渲染依赖前置声明:在工厂函数前明确列出所有依赖,便于静态分析和优化命名模块:可选的模块命名支持,简化了非按需加载场景插件生态:丰富的插件系统支持文本模板、CSS和国际化资源加载。
2025-06-11 14:10:23
22
3
转载 React 避坑指南:如何正确获取自定义组件的 DOM 引用?
在使用 React 自定义组件时,你是否遇到过这样的报错?当你试图通过ref直接访问自定义组件的 DOM 节点时,这个错误就会不期而至。今天我们就来彻底解决这个高频问题!// 自定义组件return (<input/>// 父组件return (<MyInput/>
2025-06-11 14:04:16
23
3
转载 React——高阶组件
如果将 ref 添加到 HOC 的返回组件中,则 ref 引用指向。当在 React Developer Tools 中检查由 HOC 创建的组件时,它们默认显示为类似。(如主题、语言包)的值作为props注入,避免组件直接依赖Context API。:封装数据获取的通用模式(加载/错误/数据状态),简化组件中的数据请求逻辑。(值收集、验证、提交),简化表单组件的复杂度。在 HOC 内部,为它返回的包装组件设置一个。返回的组件与前一个渲染中的组件相同(当组件被HOC包装时,原始组件的。
2025-06-11 12:23:56
92
3
转载 WebGL入门教程:实现场景中相机的视角与位置移动
/ 初始位置// 朝向// 上方向// 左右旋转// 上下旋转WebGL中没有“相机对象”,但我们通过构造 view 矩阵来模拟相机视角;使用实现视角观察;使用 glMatrix 库进行矩阵运算;鼠标 + 键盘组合控制相机视角与移动。添加透视投影矩阵(限制相机移动范围引入第三人称/第一人称切换封装相机类 CameraController。
2025-06-11 12:15:46
39
3
转载 如何在本地测试自己开发的 npm 包
本地测试 npm 包是前端组件库开发的必备技能。掌握 npm pack、npm link、workspace 等多种方式,可以大大提升开发效率和包的质量。遇到问题时,优先排查 package.json 配置、产物文件、类型声明路径和依赖版本。
2025-06-11 12:09:06
115
3
转载 JavaScript 变量详解
实践建议说明不要使用保留字作为变量名否则会导致语法错误或兼容性问题避免覆盖内置变量如undefinedNaNeval等使用const和let替代var更安全的作用域控制使用严格模式可以防止一些不安全的操作使用 Linter 工具检查命名如 ESLint 可自动检测非法命名。
2025-06-11 12:01:43
25
3
转载 队列:先进先出的线性数据结构及其应用
队列是一种简单而强大的数据结构,它的"先进先出"特性使其在许多算法和实际应用中发挥重要作用。从简单的任务调度到复杂的滑动窗口问题,队列都能提供高效的解决方案。理解队列的工作原理和应用场景,是成为一名优秀程序员的重要一步。在实际编程中,灵活运用队列及其变体(如双端队列等),能够帮助我们设计出更高效、更优雅的算法和系统。作者:Sun_light链接:https://juejin.cn/post/7514244463243411507来源:稀土掘金著作权归作者所有。
2025-06-11 11:51:05
34
3
转载 JS基础 - instanceof 理解及手写
可以认为 instanceof 运算符的工作原理,实际上是调用右侧操作数的 Symbol.hasInstance 函数,并将左侧操作数作为参数传入,返回函数的返回值。而默认的 Symbol.hasInstance 函数是存放在 Function.prototype 中的。其主要逻辑是检测右侧构造函数的原型对象,是否存在于左侧对象的原型链上,如果存在返回 true,反之返回 false。
2025-06-10 14:26:16
145
3
转载 TypeScript 中 typeof 的全面解析:从基础用法到高级技巧
在 TypeScript 这门为 JavaScript 添砖加瓦的编程语言中,typeof是一个至关重要的类型操作符。它如同一位精准的 “类型侦探”,能够在编译阶段捕获变量的类型信息,为代码的类型安全保驾护航。无论是基础的数据类型判断,还是在复杂的类型推导场景中,typeof都扮演着不可或缺的角色。接下来,我们将从多个维度深入剖析typeof的各种用法、应用场景以及进阶技巧,帮助你全面掌握这一强大的类型工具。
2025-06-10 14:23:58
53
3
转载 [特殊字符] Vue Router 4 插件集合 | 用最小成本扩展路由能力的神器
通过插件化设计,以最小成本扩展了 Vue Router 的能力,解决了实际开发中的高频痛点。无论是需要精细控制导航动画,还是实现跨页面状态管理,它都能显著提升开发效率和用户体验。
2025-06-10 14:19:44
20
3
转载 CSS 动态视口单位 dvh 和 dvw
是移动端布局的重要工具,通过动态适配可视区域解决了传统单位的布局缺陷。在现代开发中,建议优先使用动态单位,并搭配传统单位作为兼容方案,以确保不同设备上的用户体验一致性。(Dynamic Viewport Width)是 CSS 中用于优化移动端布局的。(Dynamic Viewport Height)和。,旨在解决传统视口单位(
2025-06-10 14:16:51
150
3
转载 前端三国志:React、Vue 与 Svelte 之战
目标建议使用框架企业级、大型项目React(兵马众多)快速开发、中后台系统Vue(节奏平衡)极简、个人项目、性能党Svelte(快如东风)🐉 最后,借诸葛亮一句话作结:“三国者,非一人之功,非一日之利,观其势而用其道,则无败之理。——前端三国,选你所善,择你所爱,善用皆英雄也。
2025-06-10 14:14:29
32
3
转载 Rust - Send & Sync
表示类型可以安全地跨线程传递所有权就像玩具带有"可邮寄"标签,可以安全寄给朋友表示类型的不可变引用可以安全地在多个线程中使用就像玩具带有"可共享"标签,多个朋友可以同时看(但不能同时修改)*lock += 1;// 自动实现 Send + Syncunsafe impl Send for SafeCounter {} // 安全:因为内部类型都是线程安全的unsafe impl Sync for SafeCounter {} // 安全:因为内部锁保证安全模式2:线程隔离数据。
2025-06-10 14:12:06
24
3
转载 React组件化实战:从零打造智能TodoList清单
在传统Web开发中,我们常常需要直接操作DOM元素来更新界面,就像用铅笔在纸上反复涂改——效率低且容易出错。React提出的组件化开发,如同将网页拆解为可复用的"积木块",每个积木(组件)都包含完整的HTML、CSS和JS逻辑。接下来让我们用react组件化思想搭建一个Todolist任务清单。组件分层 : TodoList 管理全局状态, TodoForm 处理输入, Todos 专注展示响应式数据 : useState 驱动视图自动更新,状态变更效率提升63%
2025-06-10 14:06:40
22
3
转载 [特殊字符]Stylelint:让你的 CSS 代码优雅如诗
Stylelint 不仅仅是一个代码检查工具,它是你通往优雅 CSS 代码的桥梁。🔍自动错误检测:避免低级错误📏风格统一:提升团队协作效率🚀最佳实践:学习现代 CSS 开发模式🔧自动修复:节省宝贵的开发时间你将发现,编写 CSS 不再是痛苦的任务,而是一种艺术创作。优秀的开发者不是不犯错误,而是能够建立系统来预防错误。Stylelint 就是这样一个系统。现在就开始你的 Stylelint 之旅吧!让每一行 CSS 代码都成为艺术品。
2025-06-10 12:27:31
57
3
转载 我为什么觉得 React 正在逐渐失去吸引力?
你写 Web 页面用 React,做桌面用 Electron + React,写原生应用用 React Native,做三维交互用 React Three Fiber,写状态管理要用 Redux,动画用 Framer Motion,连数据流都讲 “One-Way Binding”。它有一种宗教般的统治力,仿佛不写 React,你就不是“现代前端”。但最近一两年,,尤其是对新项目、新手、甚至资深开发者而言,React 已经不再是“无脑首选”。我不是说 React 要凉了,但它的“统治时代”确实过去了。
2025-06-10 12:05:57
19
3
转载 JavaScript对象那些坑:初学者必踩的“陷阱”与进阶秘籍
JavaScript 对象的世界远比你想象的复杂。只有理解了原始类型与对象的本质区别,才能写出更健壮、更高效的代码。希望这篇文章能帮你避开初学者常见的坑,轻松迈向进阶之路!
2025-06-10 11:58:03
11
3
转载 HarmonyOS Next类的继承机制:单继承模型下的代码复用与扩展
子类可覆盖父类的open实例函数,需使用overridepublic open func area(): Float64 { 0.0 } // 父类默认实现public override func area(): Float64 { // 覆盖父类方法子类可重定义父类静态函数,使用redefpublic redef static func version(): String { "2.0" } // 重定义静态函数println("连接设备:\(deviceName)")
2025-06-09 14:38:12
12
3
转载 vueRouter
如果你想在 Vue 3 项目中引入vue-router来实现页面路由导航,并结合我们之前的全局主题切换功能,下面是如何做的。我们会一步一步地将vue-router集成到现有项目中,并确保主题切换功能依然能正常工作。
2025-06-09 14:33:49
20
3
转载 TypeScript学习指北
在TS中,接口是一个很重要的概念,它可以将一组类型组合在一起,按照你预期的方式组织变量结构。在上面这个表达式中,你引入了foo变量,如果你用类型的方式使用它,那么foo文件就不会包含在编辑之后的代码中,如果你以变量的方式使用它,那么就会包含在编译之后的JS文件中。最简单的就是在根目录下面的空的JSON文件,这样会指定所有的.ts文件为编译的文件,同时会包含几个默认的编译选项。选项,可以将TS生成不同的JS代码,但是由于AMD和SystemJS, ESM的各种兼容性问题,我们推荐使用。
2025-06-09 14:31:09
21
3
转载 闲谈 React 渲染机制
根据自变量(state) 的变化计算出 UI 的变化根据 UI 的变化执行具体的宿主环境的 API对应公式const state = reconcile(update) // 通过 reconciler 计算出最新的状态const UI = commit(state) // 根据上一步计算出来的state 渲染出UI对应到 react 里就两个阶段Render阶段:调合虚拟 DOM ,计算出最终要渲染出来的虚拟 DOMCommit阶段:根据上一步计算出来的虚拟 DOM, 渲染具体的 UI。
2025-06-09 14:19:59
10
3
转载 深入 Vue3 的类型传递机制与 React 的区别
在现代前端开发中,Vue 3 和 React 作为两大主流框架,都采用了函数式编程的思想。理解它们在响应式数据处理和参数传递机制上的差异,对于深入掌握这两个框架至关重要。本文将详细分析 Vue 3 的各种 ref 方法、参数传递机制,并与 React 进行对比。允许创建自定义的响应式引用,可以显式控制依赖追踪和更新触发。return {get() {track()},trigger()}, delay)})完全自定义响应式行为可控制何时追踪依赖和触发更新适用于特殊需求场景。
2025-06-09 14:10:48
45
3
转载 由Tony Stark 带你入门 JavaScript(新手向)
在 Tony Stark 的实验室里,J.A.R.V.I.S. 通过 JavaScript 对象组织数据,用函数完成复杂的逻辑运算,用模板字符串优雅地拼接对话。这些概念不仅是代码的组成部分,也是构建智能系统的基石——就像钢铁侠的战甲一样,每一行代码都是精密的零件,组合起来才有强大的威力。学习 JavaScript 的数据类型、对象、函数和模板字符串,就像解锁了战甲的第一层功能。
2025-06-09 12:27:36
16
3
转载 CSS中的继承问题
理解CSS属性继承机制对于编写高效、可维护的样式表至关重要。通过合理利用可继承属性,我们可以减少代码重复,提高开发效率。同时,也要注意继承过程中的特殊情况,避免出现意外的样式效果。
2025-06-09 12:20:32
37
3
转载 专题一、HTML5基础教程-Meta标签网页元数据:网页的隐形指挥官
合理使用meta标签可使移动端跳出率降低35%,SEO流量提升50%(2025 Web Almanac):中文/Emoji显示乱码,表单提交失效。:页面缩放异常,按钮点击错位。:XSS攻击导致用户数据泄露。等,但现代开发中较少使用。
2025-06-09 12:18:56
19
3
转载 从“切图崽“到前端工程师:React 到底是个啥?
嘿,朋友!如果你正看着这篇文章,那你很可能已经掌握了HTML、CSS 和JavaScript 这"前端三剑客"。你能把设计师给的图,像素级地还原成一个漂亮的网页。江湖人称——"切图崽"。这很酷,但你可能也经历过这样的痛苦:用jQuery 或者原生JS 去操作DOM(就是你写的那些HTML 标签),项目稍微一复杂,代码就变成了"面条"。// 想改个名字?先找到它...document.getElementById('user-name').innerText = '新的名字';// 想更新个列表?
2025-06-09 12:12:17
15
3
转载 为什么我们用了 Vite 还是构建慢?——真正的优化在这几步
凭借其基于原生 ESM 的开发体验和极速冷启动,被誉为“现代前端构建的终极解决方案”。vite build答案是:Vite 本身没错,但你可能忽略了并不只是工具,而是你整个工程的结构与使用方式。
2025-06-09 12:08:17
108
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人