Web Components详解-组件通信

前言我们常说到程序的运行和代码的实现遵循高内聚和低耦合，理解一下这句话，模块中的功能在逻辑上是有关联的，模块之间依赖关系较弱。前端的组件同样遵循这套原则，单个组件的功能逻辑是完整的，组件与组件之间也没有强关联，那么如何保证组件之间的联系呢？在Vue和React中一般使用props响应式通信、bus事件总线、Pinia，Vuex，Mobx全局状态等等方式进行数据传递，类似的本篇文章也将介绍Web组件

Web Components JavaScript 面试文档
javascript 前端 面试 开发语言 html 前端框架 1024程序员节

Web Components详解-Shadow DOM样式控制

前言本文继续Web Components系列文章，介绍一下Shadow DOM的样式及选择器。 Shadow DOM的样式与外界是隔离的，即自定义元素的样式只会影响到Shadow DOM内部，不会影响到外部的页面元素，这点在之前有说到过。那么有什么办法可以在Shadow DOM中使用全局样式？样式选择器又有什么异同呢？请跟着本篇文章一起探究 :host伪类作为伪类使用:host一般在Shadow

Web Components JavaScript 面试文档
javascript 前端 面试 html css 前端框架

浏览器事件机制详解

目录 前言 事件类型 鼠标事件 表单事件 窗口事件 DOM事件 多媒体事件 拖拽与放置事件 移动设备事件 剪切板事件 错误事件 过渡、动画事件 事件监听 on+event addEventListener(event) 事件触发 事件流程 捕获阶段 目标阶段 冒泡阶段 事件对象 总结 相关代码： 前言浏览器的事件机制是web前端面试及开发过程中绕不开的话题，可以说一切用户操作或者浏览器的行为都离

JavaScript 面试文档
javascript 前端 面试 开发语言 html html5

Web Components详解-Shadow DOM插槽

前言插槽实际上也属于组件通信的一种方式，但是由于其强大的api和实用性，我将其单独拆开来介绍。 定义Slot（插槽）是Web Components中一个重要的特性，它允许在组件内部定义占位符，以便父组件可以向其中插入内容。换句话说就是将子组件或者标签传入父组件中，最终达到在父组件外部实现子组件的效果 基本用法slot属于Shadow DOM的一部分，在原生html中并不支持插槽的写法，所以我们必须

Web Components JavaScript 面试文档
javascript 前端 面试 html

Web Components详解-Shadow DOM基础

目录 引言 概念 基本用法 attachShadow函数 mode（模式） delegatesFocus（委托聚焦） Custom Elements+Shadow DOM 基本用法 样式及属性隔离 写在最后 相关代码 参考文章 引言上篇文章的自定义标签中，我们使用customElements对象对原生标签进行拓展，达到组件的拓展性与复用性的效果，那么如何保证组件的属性、结构及样式的封装隔离便是本

Web Components JavaScript 面试文档
javascript 前端 面试 开发语言

Web Components详解-Custom Elements

目录 引言 演变过程 概述 使用方式 创建标签 定义标签 使用标签 获取标签 异步定义标签 升级标签 完整案例 结语 相关代码 参考文章 引言随着项目体量的增大，组件化和模块化的优势也愈发明显了，构建可重复使用、独立、可互操作的组件变得尤为重要，在JS中我们可以通过class和函数对代码解耦，使某段代码可以复用。在TS中我们也可以通过模块对代码进行模块化开发，在HTML页面中同样有一种技术可以实

JavaScript 面试文档 Web Components
javascript 前端 面试 html

手摸手带你实现一个开箱即用的Node邮件推送服务

目录 ​编辑 前言 准备工作 邮箱配置 代码实现 服务部署 使用效果 题外话 写在最后 相关代码： 前言由于邮箱账号和手机号的唯一性，通常实现验证码的校验时比较常用的两种方式是手机短信推送和邮箱推送，此外，邮件推送服务还可以达到推送关键信息和消息通知的诉求。为了方便快捷的使用邮件推送api，我基于Node和相关库快速搭建了一个简易的开箱即用的邮件推送服务。本文与大家做个分享 准备工作 云函数，服

Node.js 操作方式 TypeScript
javascript 前端 node.js typescript github

AutoxJS脚本保姆级教程

目录 引言 准备工作 脚本开发 邮件提示（不使用邮件推送的可以跳过这步） 节假日判断（不需要判断节假日的可以跳过） 问题及技巧归总 JS语法错误：软件更新 按钮或组件无法找到 使用定时器等待组件出现 root环境下才能用shell的root模式 主线程堵塞问题 全局日志记录 巧用id或text Tasker和AutoXjs自启问题 效果展示 写在最后 注意：该脚本请勿用于商用，侵删 相关代码 引

自动化工具 JavaScript 操作方式
自动化 运维 javascript 前端

只会用插件可不行，这些前端动画技术同样值得收藏-JavaScript篇（下）

目录 前言 介绍 基本使用 关键帧 KeyframeEffect的三种类的声明 keyframes options 动画对象 全局Animation类 标签中的animate函数 总结 相关代码： 前言接着上文往下介绍，上篇文章我们对JS原生动画和贝塞尔曲线有了一个详细的认识，基于定时器或动画帧，我们可以实现元素的动画缓动，本文将分享浏览器中功能强大的Animations API，有兴趣的朋友请

前端动画 JavaScript 面试文档
javascript 前端 面试 动画

JavaScript作用域详解

目录 前言 什么是作用域 作用域类型 全局作用域 局部作用域 块级作用域 ES6之前 ES6以后 作用域链 变量提升 基础概念 优先级问题 闭包 定义 特点 使用场景 封装私有变量 延长变量周期 模块化、命名空间 缓存 ES6的作用域 const、let 块级作用域 变量提升 暂时性死区 不可重复声明 箭头函数 题外话 动态作用域与词法作用域 词法作用域 动态作用域 总结 前言作用域是JavaS

JavaScript 面试文档 Node.js
javascript 前端 面试 开发语言