#ustom 代码而不是插件/库 – 简单性展示

这是三篇文章中的第三篇,我将在其中展示如何快速轻松地实现常见的 web 功能,而无需依赖繁重的库或复杂的框架。这次,我为剪辑内容制作了“阅读更多”按钮 – 实现了最大程度的自动化。

#ustom 代码而不是插件/库 - 简单性展示

随意使用代码

代码很简单,只是普通的 JavaScript——没有库,没有魔法。它超轻且易于集成。它使用 IntersectionObserver,因此它甚至不会在元素可见之前运行,从而节省性能开销(尽管您可能希望针对较小的网页删除此优化)。

https://gist.github.com/TomJPro/39e96d2cd6cbfcf908ad99273b2211a5

发现一个全新的简单世界

我认为存在用于此目的的库,因为问题看起来很复杂。但当我尝试自己编写它时,我的头脑陷入了这样一个想法:它需要一个复杂的解决方案——我的想法欺骗了我!现在我确信这些库的存在是因为其他开发人员也过度思考了这个问题,或者试图用一个巨大的解决方案来解决每一种可能的情况。在我们计算毫秒的世界里,这永远不可能真正起作用。

当我编写第一段简单的代码来完成这项工作时,与 100kb 的库相比,它只有 20 行,而且针对每个项目进行自定义甚至更容易。老实说,感觉就像发现了一个新世界。

想看看我是如何构建它的吗?

我很享受直播。下次来跟我聊聊吧!

观看直播

最后的想法

在看到在短短几分钟内(包括 JS、HTML 和 CSS)编码的三个常见功能(如轮播、带有“阅读更多”的行剪辑和类似脚本)后,我希望您清楚地知道,您经常不这样做不需要繁重的库。有时,简单的旧式 JavaScript 和少量 CSS 就可以实现流畅、高性能的结果。

以上就是#ustom 代码而不是插件/库 – 简单性展示的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1499312.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月19日 21:41:41
下一篇 2025年12月19日 21:41:50

相关推荐

  • 使用 Vite 进行静态 React 应用部署

    使用 vite 构建的 react 应用程序以其速度和效率而闻名。将这些应用程序部署为静态网站可确保快速的性能和可扩展性。在本博客中,我们将引导您使用 vite 部署静态 react 应用,使用现代平台来简化流程。 vite是什么? vite是下一代前端工具框架,通过即时服务器启动和闪电般的热模块交…

    2025年12月19日
    000
  • 人工智能驱动的代码生成:彻底改变开发

    人工智能 (AI) 正在改变开发人员编写、调试和维护代码的方式。人工智能工具现在为开发人员提供智能代码建议、自动化测试和无缝集成,使软件开发比以往更快、更高效。在这篇博文中,我们将探讨人工智能代码、其功能、优势、挑战以及可用的最佳工具。 什么是AI代码? 人工智能代码是指由人工智能系统生成、优化或增…

    2025年12月19日
    000
  • 文本压缩和代码分割和现代图像格式 – 性能优化

    我尝试了以下方法来优化我的业余项目性能: 文本压缩代码分割现代图像格式. 分析器 我构建的应用程序使用了 vite 和 pnpm。现代 web 构建工具在构建过程中默认自动优化 web 性能。所以我们可以 pnpm run build 然后 pnpm dlxserve dist。然后使用 chrom…

    2025年12月19日
    000
  • MeetRoomly 是一款使用 Nextjs Prisma、Tailwind CSS 和 Clerk 轻松管理和预订会议室的应用程序

    见面会 使用 next.js 15、tailwind css、prisma 和 clerk 构建的 meetroomly 应用程序。功能包括用户注册、登录、添加房间、查看房间评论和预订。在开发过程中接受贡献。 入门 克隆存储库:git clone https://github.com/saidmou…

    2025年12月19日
    000
  • 4年前端开发必备技术

    前端开发市场发展迅速,带来了新的工具和实践,改变了创建 Web 应用程序的体验。对于开发人员来说,无论是初学者、全职人员,还是想要了解自己要寻找什么的招聘人员,了解当今不可或缺的技术至关重要。让我们探讨一下 2024 年市场真正发生变化的因素。 1. 现代 JavaScript:坚实的基础 无论你使…

    2025年12月19日
    000
  • React 初学者指南:了解组件

    介绍 嘿,这里是一位开发人员。因为 react 看起来很难而犹豫是否要开始?别担心,我已经帮你解决了。 react 是一个 javascript 库,它使构建用户界面 (ui) 变得更加容易,特别是当您的网站有大量动态内容时。它很强大,但就像任何新技术一样,一开始它可能会令人生畏。事情是这样的:一旦…

    2025年12月19日
    000
  • AI 星座:Nextjs 和 Gemini 的体验

    大家好! 我担任后端开发人员已有几年了,我一直在寻找新技术。最近,我对人工智能和占星学的结合产生了兴趣,并决定使用 Gemini API 创建一个星座预测生成器。 项目: 在这个项目中,我使用 Next.js 作为前端,这是学习新框架的绝佳机会。在后端,我使用 Next.js 和 GEMINI AP…

    2025年12月19日
    000
  • 关心的动画 html css

    ` hj @property –angle { 语法:“”; 初始值:0deg; 继承: false;} @property –x { 语法:“”; 初始值:35%; 继承: false;} @property –shine { 语法:“”; 初始值:透明; 继承…

    2025年12月19日 好文分享
    000
  • js插件如何写

    JS 插件是扩展 JavaScript 功能的组件,编写步骤如下:确定需求创建插件定义插件 API实现插件逻辑测试插件分发插件 JS 插件编写指南 什么是 JS 插件? JS 插件是指扩展现有 JavaScript 库或框架功能的附加组件。它们允许开发者轻松添加新功能,而无需修改核心代码。 编写 J…

    2025年12月19日
    000
  • 如何编写js

    如何编写 JavaScript?使用类似 C 语言的语法。数据类型包括字符串、数字、布尔值、数组和对象。使用 let 或 const 声明变量和常量。使用 if-else、switch-case 条件语句。使用 for、while、do-while 循环语句。组织代码并重复使用逻辑,定义函数。使用 …

    2025年12月19日
    000
  • 如何查看js文件

    可以通过以下几种方法查看 JavaScript 文件:使用浏览器开发者工具(Chrome、Firefox、Edge)查看源代码使用专用编辑器通过网络请求使用代码搜索引擎 如何查看 JavaScript 文件 了解 JavaScript 代码对于理解网页功能和解决问题至关重要。下面介绍几种查看 Jav…

    2025年12月19日
    000
  • 如何将交互式图表和图形添加到 Tailwind CSS 管理模板

    管理仪表板模板对于有效管理和可视化数据至关重要。 tailwind css 以其实用性优先的方法而闻名,它简化了设计令人惊叹的管理仪表板的过程。向这些仪表板添加交互式图表和图形可以将原始数据转换为富有洞察力的可视化效果,从而增强整体用户体验。本博客将指导您完成将交互式图表集成到基于 tailwind…

    2025年12月19日 好文分享
    000
  • Npm 检查并更新/删除包(如果需要)

    对于在我们的项目中处理保持最新依赖项的一种方法是 npm outdated 命令,它将显示已安装软件包的列表及其当前版本和最新可用版本。 为了更新 package.json 中列出的依赖项,可以使用 npm update 命令。 在这篇文章中,我希望您介绍更强大的工具,称为 npm-check-ex…

    2025年12月19日
    000
  • 了解 JavaScript 中的原型继承和 ESlasses

    javascript 具有与大多数传统 oop 语言不同的继承机制。原型是主要焦点,而 es6 类提供了更现代的方法。让我们看看 es6 类如何提高可读性和实用性以及原型继承如何运作。 1. 原型:继承的基础 javascript 中的每个对象都有一个到另一个对象的内部链接,称为其原型。这个原型对象…

    2025年12月19日
    000
  • Angular 的新功能:信号

    嘿,angular 爱好者!今天,我很高兴与您分享 angular 中最新、最酷的功能之一:信号。如果您像我一样,总是在寻找使代码更高效、更易于管理的方法,那么您一定会喜欢这个。 什么是信号?简单来说,信号是 angular 应用程序中处理数据更改的一种新方法。传统上,我们使用服务、rxjs 或状态…

    2025年12月19日
    000
  • Astro中的神秘显示:揭开开发环境的秘密

    静态站点生成器之旅 多年来,我一直致力于 wordpress 项目,但最近我转向了 astro。借助人工智能的定制帮助,我以为我可以创建自己的主题,但那是天真的。 tailwindcss 对我来说是新的 – 我以前甚至没有使用过 bootstrap 或 material design。我…

    2025年12月19日
    000
  • Radix UI 用自定义调色板替换 Radix Color

    在我正在开发的新 next.js 项目中,我选择 tailwind css 和 radix ui 进行样式设置。 radix ui 提供了一个自定义调色板工具,允许开发人员定义自己的强调色和灰色。然而,我搜索了整个文档,并没有找到实现自定义颜色的有效方法。 我开始谷歌搜索,为了救援,我找到了一个博客…

    2025年12月19日
    000
  • TIL 如何使用 JS 查看 GitLab 上的整个提交列

    这是很久以前的事了,但我将其添加到这里作为自我注释。 每当你在 gitlab 上打开 ci/cd > pipelines 时,你可能经常会看到这样的东西: 您可以通过在浏览器上打开开发控制台并更改一些 css 来修复样式来查看整个内容。您也可以查看整个列的另一种方法是创建一个新书签(在任何页面…

    2025年12月19日 好文分享
    000
  • 在 Nodejs 中进行身份验证的正确方法 [uide]

    身份验证是后端开发中最关键但经常被误解的方面之一。由于其复杂性,开发人员经常转向第三方解决方案,例如 auth0 或 supabase。虽然这些都是优秀的工具,但构建您自己的身份验证系统可以提供更大的灵活性和控制力。 在本指南中,您将了解如何以最少的依赖关系为 express.js api 服务实现…

    2025年12月19日
    000
  • JavaScript 主要先进概念

    以下是对所有提到的 javascript 概念的解释,按主题组织: javascript — 动态客户端脚本 javascript 是一种在浏览器中运行的多功能编程语言,允许网站具有动态的交互式功能。它主要用于客户端任务,这意味着它由用户的 web 浏览器执行来处理动画、用户输入、表单验证等内容。 …

    2025年12月19日
    000

发表回复

登录后才能评论
关注微信