前端开发工程师

lonelydawn的前端猿区

从部署到实践，即刻拥有你的专属龙虾助手

OpenClaw开发者专区🦞🦞🦞

自行/邀约他人一键搬运博客，享价值百万资源包

腾讯云自媒体同步曝光计划

往期视频·干货材料·成员作品 最新动态

腾讯技术创作特训营知识专栏

新邀入驻腾讯云开发者社区，福利多多！

在企业中，各个研发部门往往各自开发自己的应用。当需要把这些应用聚合在一起时。以往的解决方案是在主应用中嵌入 iframe，使用 iframe 加载和切换子应用页面。 这种做法有几个缺点：

多应用聚合实践

对于react来说，就是组件内不保存任何state的组件。 第一种是只负责渲染的视图组件，如

什么是stateless组件？

serverless 字面意思为无服务状态，对于刚接触这个概念的同学可能会误解，“没有服务，那数据存在哪里呢”？

什么是serverless？

在本地开发联调时，借助webpack dev server启动的Node服务来代理转发请求，可以解决这个问题。

craco配置devServer.proxy

safari基于安全策略，会默认阻止使用window.open打开新窗口。
解决办法，套一个延时定时器
const timeoutId = setTimeout(
    () => {
        window.open(url);
        clearTimeout(timeoutId);
    },
    0
);

绕过safari阻止window.open打开窗口

display: none 和 opacity: 0，子元素会和父元素一样保持不可见。

display: none、visibility: hidden和opacity: 0的区别

代码思想很简单，就是打开控制台时，将页面跳转到空白页，关键在于判断控制台是否被打开。 这里写了两个方法，一个是适用于Safari的observeSafari，另一个是适用于Chrome、Firefox等浏览器的observe方法。

如何避免用户通过浏览器控制台查看页面资源

最早的网页是欧洲粒子物理研究所的科学家为了方便查看和共享文档，而基于 XML（Extensible Markup Language） 创造的，这也是为什么前端最重要的全局对象被称为 document，而不是 context/page/application 的原因。当时的网页只具备文本、图片的显示和页面间相互跳转（Hyper Link）的功能，因此被称为 HTML （Hyper Text Markup Language）。

宏观泛前端

.gitignore 配置的文件不仅会在git中忽略，也会在npm publish时被忽略。

如何配置npm publish的文件和目录？

过去一直有一个疑问，为什么我在命令行运行 npm start，可以正常启动 webpack，而直接使用 craco start 不行？

npm是如何执行scripts中命令的？

这种方式非常简单，给待跳转元素添加 id，之后修改 window.location 即可，用法如

Web前端实现锚点功能的三种方式

使用 git 管理的代码库，若在提交时能保持一定的格式，则能使维护者一眼看懂每次提交的目的和含义。除了注释之外，我们还可以在提交时加一些标识进行说明。

commit规范

网络传输，逻辑上是在传输二进制字节流。浏览器在拿到字节流之后，会先根据资源的编码方式（如UTF-8）进行解码，将字节流转化为字符流。 一串 HTML 的字符流，需要经过语法解析，形成节点后，最终生成 DOM 树。

浏览器内核

安装完成后点击小齿轮，进入拓展设置，在 settings.json 中添加以下配置：

vscode自动添加文件头部注释

控制反转（Inversion of Control）是实现代码复用的一种方式，它和依赖注入（Dependency Injection）是紧密相关的。控制反转需要用依赖注入实现，有依赖注入的地方基本也实现了控制反转。

控制反转

在日常开发中，经常会遇到一些省略文本的需求，比如“文本在一行显示，超出部分在结尾用省略号显示”、“最多显示三行，超出部分在第三行末尾用省略号显示”。

原生CSS实现单行多余省略和多行多余省略

<input id="target" type="text" > 	<button onclick="onCopyClick()">复制</button> 	<script type="text/javascript"> 		function copyToClipboard (text) { 			if (!document.createRange || !window.getSelection || !document.execCommand) { 				return false; 			}

原生 JS 实现复制功能

实际上，Sass 是将使用 @extend 的 .seriousError 和 .error 编译为了组合选择器 .error, .seriousError。以往我们在 CSS 中复用一段样式时，也会使用 组合选择器 这种形式。

# Sass速通（四）：继承、混合与函数

在 Sass 中，我们可以使用 @if、@else if、@else 来书写条件语句。

Sass速通（三）：判断与循环

在 Sass 中，可以在父选择器中写子选择器，以嵌套的形式来表达关联的关系，这样做可以减少我们重复书写父选择器的工作量。

Sass速通（二）：嵌套与作用域

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

腾讯云开发者社区推出了lonelydawn的前端猿区专栏，为你提供了lonelydawn的前端猿区的相关文章，致力于帮助开发者快速成长与发展。

lonelydawn的前端猿区

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐