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

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

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

    (文本完)

     

     

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

  • 相关阅读:
    003 01 Android 零基础入门 01 Java基础语法 01 Java初识 03 Java程序的执行流程
    002 01 Android 零基础入门 01 Java基础语法 01 Java初识 02 Java简介
    001 01 Android 零基础入门 01 Java基础语法 01 Java初识 01 导学
    001 Android Studio 首次编译执行项目过程中遇到的几个常见问题
    Dora.Interception,为.NET Core度身打造的AOP框架 [2]:以约定的方式定义拦截器
    Dora.Interception,为.NET Core度身打造的AOP框架 [1]:更加简练的编程体验
    监视EntityFramework中的sql流转你需要知道的三种方式Log,SqlServerProfile, EFProfile
    轻量级ORM框架——第二篇:Dapper中的一些复杂操作和inner join应该注意的坑
    轻量级ORM框架——第一篇:Dapper快速学习
    CF888G Xor-MST(异或生成树模板)
  • 原文地址:https://www.cnblogs.com/frontworld/p/14525625.html
Copyright © 2020-2023  润新知