• 写个锤子JS!它应该是你最后的选择


    本文翻译自:
    https://dev.to/olpeh/javascript-should-be-your-last-resort-5dje

    在进行现代化Web前端开发时,使用着自己最爱的框架,有时候可能会情不自禁地用JavaScript解决所有的问题。很多时候这是无意识的,因为你日复一日的开发工作使用的正是JS。

    这类似于亚伯拉罕·马斯洛(Abraham Maslow)在1966年描述的情况:

    如果你仅有的工具是锤子,那么你就会不自禁地把所有东西都当作钉子。

    ——维基百科:Law of the instrument

    图片来自Unsplash,作者FaustoMarqués

    注意:在这篇文章中,我只谈论JS,尽管我在项目中使用的主要是TS——但最终,在编译后,都变成了JS。

    实现UI时要考虑的因素

    在所有情况下都使用JS的这种思维方式会产生不必要的处理负担,这些额外的JS操作都需要在最终用户的设备上运行。网站上的所有JS资源都需要通过网络浏览器下载、解析和执行。这通常是导致低端移动设备上的网站速度变慢和无响应,或使得网络速度变慢的原因。

    那么我们应该如何走出思维困局:

    1. 是否可以用HTML完成?
    2. 如果不能,那么用HTML + CSS可以解决吗?
    3. 如果其他都没有效果,那么解决方案除了HTML和CSS之外,可能需要少量的JS。

    这种思维方式对开发人员来说并不是一件易如反掌的事。可能你是一个关注JavaScript的前端开发人员,那么用这种方式解决大多数问题对你来说像呼吸一样自然。但是,你还得考虑你的最终用户。当涉及到Web性能时,客户端JS作为最大的问题一骑绝尘。

    1. 是否可以用HTML完成?

    计划和实现功能的基本结构和语义,先考虑是否可以使用纯HTML,而无需任何额外的样式和使用本机HTML元素和功能。如果需要一些其他样式或功能,则转到步骤2。

    2.尝试使用HTML + CSS解决

    使用CSS来应用所需的其他样式或动画,同时在脑海中谨记语义和可访问性。如果你要构建的特定UI片段中需要有一些额外的互动,则转到步骤3。

    3.使用HTML + CSS + JS

    添加满足要求所需的最少JS代码量。请记住,如果不用JS就可以解决问题,那么就应该不要用到JS。

    完成后,向同事展示代码,让他们进行审核。这样的话,如果代码中还有些不必要的部分,那么就可以解决这些问题而不给用户增加客户端JS成本。

    举个简单的例子

    所举的这个例子,发生于Web前端开发中的几乎所有部分,但此处是一个简单的示例,用来证明我的观点。

    假设你正在开发一个React项目,而你正在开发的功能具有一些UI部件,这些UI部件只有在一定的延迟(例如2秒)之后才可见。

    使用React Hooks

    如果你习惯于使用React和Hooks解决问题,那么最初的解决方案可能是这样的:

    const [thingVisible, setThingVisible] = useState(false);
    
    useEffect(() => {
      const timeoutId = setTimeout(() => {
        setThingVisible(true);
      }, 2000);
    
      return function cleanup() {
        clearTimeout(timeoutId);
      };
    }, []);
    
    return thingVisible ? <section>Here's a thing for you!</section> : null;

    代码不错,且有效。也许你在功能强大的开发机器上都没有发现性能差异。甚至在这个示例中,可能也没有实际的性能问题。但是想象一下,如果这些堆积起来,突然之间,有数十或数百个类似的不必要的JS计算将在客户端运行,亦或者客户端正在执行一些更大、更长的执行。

    使用HTML + CSS动画

    使用CSS,你可以使用CSS动画和animation-delay对内容进行动画处理,以使其延迟显示在页面上。所有浏览器都支持此功能,甚至可以提供更好的终端用户体验,因为你可以淡入内容或使用任何其他方式使内容显现得更顺畅。

    HTML:

    <section class="fade-in">Here's a thing for you!</section>

    CSS:

    .fade-in {
      opacity: 0;
      animation: fadeIn 2s;
      animation-delay: 2s;
      animation-fill-mode: forwards;
    }
    
    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    可以使用HTML处理,就不用CSS

    同理,如果是可以或应该用HTML处理的一些内容,那么就不要使用CSS进行操作。

    一个极端的例子是,假设我们不小心使用边距隔离两个单词,而不是在单词之间使用空格!这显然不是一个好主意,至少从以下几个方面来看:

    • 可能不遵循字体大小,字母间距等。
    • 没有必要,浪费精力
    • 如果有人需要复制文本,那么单词之间会没有空格

    前端开发并不容易

    Web前端开发不是一个容易掌握的主题。快速入门可以,但是要掌握它则需要一定程度的经验和学习的积累,才能够使用正确的工具,在恰当的水平上解决正确的问题。解决前端中的问题时会涉及到很多层次和细节。

    此外,由于各种原因(例如性能,可用性或可维护性等),你需要了解何时应该在后端而不是在前端解决问题。

    总而言之,请记住,有时候我们无需绞尽脑汁地寻求完美的解决方案,可能一些可行的方案就足以应付生产发布和供终端用户使用。

    (文本完)

     

     

    每日分享前端插件和前端开发教程,欢迎扫码关注我的公众号:前端新世界

  • 相关阅读:
    class-dump + DumpFrameworks.pl
    使用 U盘 重装 Mac OSX
    本地化应用程序
    UINavigationBar 总结
    Xcode 杂七杂八
    App 打包并跳过 AppStore 的发布下载
    Summary of Mac Versions
    QT5安装(null)
    如何实现LAN或WAN远程开机?
    DELL 8700重装系统
  • 原文地址:https://www.cnblogs.com/frontworld/p/14525625.html
Copyright © 2020-2023  润新知