前端如何优雅的使用定时器? 前言在前端开发中,使用定时器可以处理一些循环操作或者延时操作,比如使用setinterval可以在指定的时间间隔重复执行函数,setTimeout则是用于在指定时间后执行一次函数,还有之前提到的requestAnimationFrame动画帧函数,在使用全局定时器时,可能不会关注其启用数量及优化操作,导致实际开发中遇到一些性能问题。借助本篇文章,与大家分享一个定时器的管理工具,希望各位看完后能有所 2024-04-08 JavaScript Node.js 面试文档 javascript 前端 node.js 面试
使用Node实现Git仓库批量克隆 前言分享一个node脚本,通过调用gitee的OpenApi获取自己的代码仓库列表,达到批量克隆项目的效果 准备工作gitee仓库及账号 node环境 获取令牌登录gitee进入设置页面 找到私人令牌这一项,用于创建token,点击生成 权限按需选择,最后点击提交, 验证密码 最后生成令牌,令牌只会显示一次,如果忘记了只能重新生成,所以要复制保存好 使用方式参考Gitee的OpenAPI 2024-04-01 Node.js 自动化工具 操作方式 javascript git 前端 node.js
iframe动态操作标签分享 前言分享一个近期工作中遇到的关于IFrame的需求,以及解决方案。 需求大致是说在我们系统中嵌套了另一个文档页面,这个文档页面是爬取的,并且页面是原先使用后端渲染实现的,取到的css和script标签都是相对路径比如: “./mian.css” 这种,这么写会导致当origin发生变化时取不到静态资源,怎么解决这个问题呢? 解决方案思考使用Nginx做反向代理配置Nginx反向代理,在Nginx配 2024-03-20 JavaScript 面试文档 CSS javascript 前端 面试 html
不是Jenkins玩不起,而是脚本更有性价比,在1Panel中使用Node搭建前端自动化 前言公司测试环境的运维管理面板是1Panel,由于近期有新项目的开发,部署功能并不完善,每次版本的发布需要开发人员在自己电脑上build并通过压缩包手动进行操作发布,这么做既降低了效率,还会导致操作的不一致性,并且难以扩展和维护。于是我计划在面板中搭建一套流水线来维护前端包的自动构建与代码发布。 需求调研在原先的文章中我对Jenkins+Gitea的前端自动化实现有了一定的认识,并且使用pipel 2024-03-14 JavaScript Node.js 自动化工具 javascript jenkins 前端 自动化 运维
Web Components详解-HTML Templates 前言在前面Web Components系列文章的插槽中,我们使用直接在body中写入html标签的形式来承载shadowDOM中的元素,这么做会使标签在DOM多渲染一次,不仅降低了性能,还使标签直接暴露在页面中,遵循组件的可重用性、隔离性和封装性,Web Components提供了一种模板标签:template。它可以在DOM文档中定义模板,然后可以通过JavaScript动态地填充和显示这些模板 2024-02-18 Web Components JavaScript 面试文档 javascript 前端 面试 html
再见2023,你好2024 前言这是我第一次写技术文章以外的博客,做个自我介绍吧,我叫阿宇的编程之旅,对前端方向比较感兴趣,为人内向,却善言辞,毕业快6年了,前后换了两家企业,目前在江西发展。我是一个喜欢计划的人,什么事情都喜欢有一套周密的计划,想好了再做,这样的习惯也使我缺乏临危不乱的特点,来做个年度复盘吧。 总体复盘我的技术方面的学习和产出计划喜欢在有道云笔记里记录,从2021年开始(也就是我的第二家公司入职以来)我的每 2024-01-04 年度总结 聊聊人生 笔记 经验分享
Web Components详解-组件通信 前言我们常说到程序的运行和代码的实现遵循高内聚和低耦合,理解一下这句话,模块中的功能在逻辑上是有关联的,模块之间依赖关系较弱。前端的组件同样遵循这套原则,单个组件的功能逻辑是完整的,组件与组件之间也没有强关联,那么如何保证组件之间的联系呢?在Vue和React中一般使用props响应式通信、bus事件总线、Pinia,Vuex,Mobx全局状态等等方式进行数据传递,类似的本篇文章也将介绍Web组件 2023-10-24 Web Components JavaScript 面试文档 javascript 前端 面试 开发语言 1024程序员节 html 前端框架
Web Components详解-Shadow DOM样式控制 前言本文继续Web Components系列文章,介绍一下Shadow DOM的样式及选择器。 Shadow DOM的样式与外界是隔离的,即自定义元素的样式只会影响到Shadow DOM内部,不会影响到外部的页面元素,这点在之前有说到过。那么有什么办法可以在Shadow DOM中使用全局样式?样式选择器又有什么异同呢?请跟着本篇文章一起探究 :host伪类作为伪类使用:host一般在Shadow 2023-10-07 Web Components JavaScript 面试文档 javascript 前端 面试 html css 前端框架
浏览器事件机制详解 目录 前言 事件类型 鼠标事件 表单事件 窗口事件 DOM事件 多媒体事件 拖拽与放置事件 移动设备事件 剪切板事件 错误事件 过渡、动画事件 事件监听 on+event addEventListener(event) 事件触发 事件流程 捕获阶段 目标阶段 冒泡阶段 事件对象 总结 相关代码: 前言浏览器的事件机制是web前端面试及开发过程中绕不开的话题,可以说一切用户操作或者浏览器的行为都离 2023-09-18 JavaScript 面试文档 javascript 前端 面试 开发语言 html html5
Web Components详解-Shadow DOM插槽 前言插槽实际上也属于组件通信的一种方式,但是由于其强大的api和实用性,我将其单独拆开来介绍。 定义Slot(插槽)是Web Components中一个重要的特性,它允许在组件内部定义占位符,以便父组件可以向其中插入内容。换句话说就是将子组件或者标签传入父组件中,最终达到在父组件外部实现子组件的效果 基本用法slot属于Shadow DOM的一部分,在原生html中并不支持插槽的写法,所以我们必须 2023-09-11 Web Components JavaScript 面试文档 javascript 前端 面试 html