现代前端开发者的自我迷失,你还会前端基础知识吗?

这篇具有很好参考价值的文章主要介绍了现代前端开发者的自我迷失,你还会前端基础知识吗?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

现代前端开发者的自我迷失,你还会前端基础知识吗?

通常来说,我认为情况并不算糟糕,熟练的手可以几乎做到一切。然而,最近我注意到一些事情改变了我对这个行业的看法。似乎在这些无尽的趋势、范式和新奇玩意中,我们忘记了前端开发的支柱(意思是忘记了基础知识,没有轮子没法写代码了)。

在这篇文章中,我想分享一些最近项目中的代码片段,并试着解释一下我的想法。不多说了,让我们开始吧!

现代前端开发者的自我迷失,你还会前端基础知识吗?

文章目录

  1. 无休止的过度复杂化

  2. 来自1993年的错误

  3. 万恶之源

  4. 几个重要提示

无休止的过度复杂化

这里我们有最基本的卡片组件(Card component),它有一个可选的头部(header)属性。如果这个属性存在,我们就将其渲染到一个特定类名的包裹div中。

const Card = ({ children, header }) => {
  return (
    <div className="card">
      {header && <div className="card__header">{header}</div>}
      {children}
    </div>
  );
};

在简单的情况下,一切都可以正常工作。在这种情况下,<Card />不会渲染头部,而在这种情况下会渲染头部:<Card header={"I am header"} />。问题开始出现在头部内容是动态的,可以返回实际内容或null的情况下:<Card header={<CardHeader />} />。我们的条件语句{header && <div />}无法检测到这种情况,会渲染一个空的div。

一位开发者试图解决这个问题。他想:“等等,我们可以检查div的内容,如果为空就隐藏它!”这大概是他写的代码:

const Card = ({ children, header }) => {
  const headerRef = useRef();

  useEffect(() => {
    const hasContent = headerRef.current?.childNodes.length > 0;
    headerRef.current.style.display = hasContent ? "block" : "none";
  });

  return (
    <div className="card">
      {header && (
        <div ref={headerRef} className="card__header">
          {header}
        </div>
      )}
      {children}
    </div>
  );
};

另一个开发人员在代码审查中注意到,这段代码只在初始渲染时起作用。如果页脚是异步更新的,useEffect将不会被调用。经过长时间的讨论,开发人员决定将注意力转向MutationObserver。

在他们的讨论中,他们也向我征求了建议。老实说,向他们展示我的方法真的很有趣。只需要使用普通的CSS就足以解决这个问题。

.card__header:empty {
  display: none;
}

开发人员习惯于过度复杂化任务,以至于他们甚至没有检查CSS的基本功能。

来自1993年的错误(老掉牙”的问题或错误)

在我之前的项目中,我们有一个侧边栏小部件,它必须拉伸到最大高度,但不重叠头部和底部。大致的公式如下:100% - headerHeight - footerHeight。

这个解决方案在所有页面上都很顺利地工作,除了其中一个页面。在那个页面上,footerHeight 突然等于 0。发现这个 bug 的开发人员深入挖掘后发现,document.querySelector('footer')返回 null,但是页脚仍然在页面上呈现。你认为他做了什么?是的,又用了MutationObserver。

延伸阅读:什么是 MutationObserver

MutationObserver 是一个 JavaScript API,它允许开发人员监视DOM树的更改。当DOM元素发生变化时,MutationObserver 可以触发回调函数来执行相应的操作。它可以用于动态地更新页面内容,特别是在 Web 应用程序中,它可以用于处理数据的异步加载和动态更新,从而提高用户体验。然而,在某些情况下,使用 MutationObserver 可能会导致过度复杂化,因此开发人员应该在使用它时谨慎考虑,并确保它是必需的解决方案。

这让我感到很奇怪,于是我决定寻找另一种解决方案。我找到了它,只需要交换几行代码就行了...

<html>
<head></head>
<body>
  <header></header>
  <main id="root"></main>
  <script src="index.js"></script>
  <footer></footer>
</body>
</html>

某种原因,<script />标签在页脚之前出现了。<script />是同步调用的,在页脚不存在的情况下,无法测量它的高度。我只是交换了这几行代码,一切都开始正常工作了。

现在的开发人员高度依赖于像webpack-plugin等现代工具。所以当他们需要自己编写一些 HTML 时,他们立即放弃了。但这有什么难的呢?

万恶之源

React hooks 在 React 中是最好的东西,同时也是最糟糕的东西。一方面,它们增加了灵活性,并提供了一种优雅的处理状态的方式。另一方面,它们大大增加了代码复杂性,并使错误更容易发生。

仔细阅读文档并理解如何正确使用这些东西似乎并不难。但是有些开发人员忽略了这个明显的步骤,开始在没有完全理解它们用途的情况下使用 hooks。特别是当涉及到优化和臭名昭著的 useMemo 和 useCallback 时。现在每个开发人员都在没有明确原因的情况下优化整个应用程序。

❗️如果您想深入探讨这个话题,我强烈建议您查看这篇关于 useMemo 的文章。

https://javascript.plainenglish.io/stop-using-usememo-now-e5d07d2bbf70

让我们一起看一下这个“关键”的优化。这不是我专门为这篇文章编写的虚构代码。实际上,我从我的一个项目中获取了这个代码片段。

const loaded = useMemo(() => {
    return submitted && !loading && !error;
  }, [submitted, error, loading]);

经过这个优化后,应用程序的性能简直“一飞冲天”!正如您所了解的,这完全是无用的,甚至稍微会影响应用程序的首次加载。老实说,我仍然不明白写这个代码的真正目的是什么。

通常,想当然并不去考虑其他方面是容易的。但是做一些自己的小型研究可能需要一些额外的工作,但这仍然比在不完全理解工具或优化技术的情况下盲目地应用它们更好。通过自己的研究,我们可以更好地理解如何正确地使用工具和技术,以及何时使用它们,从而避免不必要的代码复杂性和错误。

几个重要提示

这种情况看起来确实很令人沮丧。开发人员开始忘记基本技术,并在新技术和方法的混乱中失去了批判性思维。

然而,在我看来,解决这个问题并不是很困难。为了总结上面的一切,我想向您展示这些直接的观点。请给我您的反馈!

  • 花一些时间去理解原生的 JavaScript。拥有强大的基础使您更容易检测错误的真正原因并快速修复它们。

  • 深入学习 HTML 和 CSS。您可以发现很多有用的属性、选择器和其他东西,可以取代大量的 JavaScript 代码。只需回想一下使用 :empty 选择器的例子。

  • 培养批判性思维能力。当然,您的团队领导教给您某些良好的实践和原则。然而,您不能盲目地遵循它们,因为这只会把您引向错误的方向。相反,尝试理解为什么某些事情是这样的,而不是另一种方式。

  • 记住 SOLID、YAGNI、KISS 和其他原则。如果一个简单的任务变成了一个混乱的解决方案的噩梦,请停下来,从不同的角度重新考虑它。可能是您太深入一个解决方案中,忘记了一些明显的东西。

延伸阅读:什么是 SOLID 原则?

SOLID 原则是面向对象设计中的五个基本原则:

1、单一职责原则 (SRP):一个类应该只有一个修改的理由。

2、开放封闭原则 (OCP):一个软件实体应该对扩展开放,对修改关闭。

3、里氏替换原则 (LSP):子类对象应该能够替换其基类对象。

4、接口隔离原则 (ISP):不应该强迫客户端依赖于它们不需要的接口。

5、依赖反转原则 (DIP):高级别模块不应该依赖于低级别模块,两者都应该依赖于抽象。

什么是YAGNI原则?

YAGNI 是 “You Ain’t Gonna Need It” 的缩写,意思是 “你不需要它”。这个原则建议开发人员只编写当前需要的代码,而不是试图预测未来的需求并编写相应的代码。这可以减少不必要的代码,简化代码库并提高代码的可维护性。

什么是KISS原则?

KISS 是 “Keep It Simple, Stupid” 的缩写,意思是 “保持简单,蠢瓜”。这个原则建议开发人员在设计和编写代码时保持简单。简单的代码更易于理解、维护和扩展,并且通常比复杂的代码更可靠。

结束

今天的分享就到这里,感谢你的阅读,希望能够帮助到你,文章创作不易,如果你喜欢我的分享,别忘了点赞转发,让更多有需要的人看到,最后别忘记关注「前端达人」,你的支持将是我分享最大的动力,后续我会持续输出更多内容,敬请期待。

原文:
https://javascript.plainenglish.io/we-forgot-frontend-basics-56c2b6590105

作者:Pavel Pogosov

非直接翻译,有自行改编和添加部分,翻译水平有限,难免有疏漏,欢迎指正文章来源地址https://www.toymoban.com/news/detail-403048.html

到了这里,关于现代前端开发者的自我迷失,你还会前端基础知识吗?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端开发者必备:Nginx部署前端项目,让你的Web应用快速、稳定、安全地运行

    Nginx是一个高性能的HTTP和反向代理服务器,它可以用来部署前端项目,提供静态文件服务、负载均衡、缓存等功能。本文将介绍如何使用Nginx部署前端项目。 1. 安装Nginx 首先需要安装Nginx,可以通过源码编译安装,也可以通过包管理器安装,例如Ubuntu下可以使用以下命令安装

    2024年02月13日
    浏览(53)
  • OpenTiny 前端组件库正式开源啦!面向未来,为开发者而生

    华为开发者大会2023(HDC.Cloud 2023)于7月7日-9日在东莞拉开帷幕,本届大会以“每一个开发者都了不起”为主题。OpenTiny作为前端企业级组件库解决方案,在本次大会上正式进行发布。 ​项目发展历程:从自研走向开源的 TinyVue 组件库 OpenTiny 是一套企业级组件库解决方案,适配

    2024年02月17日
    浏览(55)
  • Three.js--》前端开发者掌握3d技术不再是梦,初识threejs

            这十年来 web 得到了快速的发展,随着 webgl 的普及,网页的表现能力越来越强大,网页上已经开始可以做出很多复杂的动画和精美的效果,还可以通过 webgl 在网页中绘制高性能的3d图形,别的不说,凡是入门程序员都离不开github这个网站,细心的人都会发现,gi

    2024年02月01日
    浏览(62)
  • 28、springboot的静态模版(前端页面)重加载和 devtools开发者工具

    总结:实现静态模板重加载的两个方法 方法1:在 yml 配置文件,关闭页面模板缓存, 再按 ctrl+f9 重新构建 方法2:直接添加 devtools 依赖,再按 ctrl+f9 重新构建 需求:如果前端使用到 Thymeleaf模板,然后我们在修改前端页面的时候,每次修改后想直接按浏览器的刷新就可以刷新

    2024年02月12日
    浏览(41)
  • 前端开发调式必备技能F12开发者工具之Elements(元素)面板,详细图解带流程【第一部分】

    目录 一、进入浏览器开发工具的几种方式 二、Elements(元素)面板  左侧区域 右侧区域  计算样式 事件监听器 大家好!我是爷爷的茶七里香,这个名字有没有让你想起周董的歌捏?好了,废话不多说,开始今天咱们的内容:         相必是个老手都知道按键盘上的f12就

    2023年04月13日
    浏览(81)
  • 8年前端与众不同的Vue实战系列,助你成为前端顶级开发者

    目录 一、写这个Vue实战系列专栏的初衷 1. 帮朋友做推荐 2. 市面上卖源码的多,讲实战项目过程的少 3. 想到了自己刚毕业的时候 二、 本专栏的优势  1. 需求的适应性强 2. 技术主流  三、 读完本专栏,你可以得到什么 1. 帮朋友做推荐 我记得最初的时候,我也只是单纯的分享

    2024年02月02日
    浏览(55)
  • 小米手机开发者选项在哪?小米手机怎么打开开发者选项

    小米手机开发者选项在哪?小米手机的开发者选项是什么?开发者选项是小米手机中的隐藏功能,为什么我们会问起这个呢?因为普通的设置我们都很容易就能找到,但开发者模式是需要用特殊的操作才能将其唤醒。下面就让我们看看怎么将这个隐藏设置给唤醒吧! 第1步:

    2024年02月10日
    浏览(42)
  • 极路由怎么申请开发者权限?极路由开发者模式的详细教程

    极路由最新固件已经开通了root权限,供有经验的同学自助开发插件。鉴于部分同学依然不知道如何申请开发者权限,懒蛇写这篇教程简单讲一下申请过程。 1、浏览器输入192.168.199.1,进入极路由管理页面,点击进入云平台。 2、云平台选择“路由器信息” 3、滚动到页面底部

    2024年02月08日
    浏览(56)
  • 开发者的瑞士军刀!一款适用于开发者的工具集合!

    大家好,我是 Java陈序员 。 俗话说“工欲善其事必先利其器”,有一个好的工具可以事半功倍。 编程开发亦是如此。 今天,给大家介绍一款离线的 Windows 应用程序,该应用涵盖常见的开发工具集合,旨在提高工作效率! 关注微信公众号:【Java陈序员】,获取 开源项目分享

    2024年01月22日
    浏览(61)
  • 华为云课堂基础认证,开发者认证,HarmonyOS应用开发者认证的题库

    1【习题】运行Hello World工程  习题内容 判断题 1. main_pages.json存放页面page路径配置信息。(正确) 2. DevEco Studio是开发HarmonyOS应用的一站式集成开发环境。(正确) 单选题 1. 在stage模型中,下列配置文件属于AppScope文件夹的是?(C) A. main_pages.json B. module.json5 C. app.json5 D.

    2024年02月04日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包