如何写 “好” JavaScript （01）

huaqi_

已于 2022-03-01 18:36:11 修改

阅读量245

点赞数

分类专栏： 2021字节青训营学习笔记文章标签： javascript css css3

于 2022-02-27 18:15:08 首次发布

本文链接：https://blog.youkuaiyun.com/huaqi_/article/details/123083998

版权

2021字节青训营学习笔记专栏收录该内容

5 篇文章

订阅专栏

本文探讨了JavaScript编程中的原则，强调HTML、CSS、JS各司其职，避免直接操作样式。通过代码示例展示了如何正确实现页面模式切换，提出使用class而非直接修改样式。此外，介绍了组件封装的概念及其重要性，包括封装性、正确性、扩展性和复用性，并以轮播图组件为例，展示了组件设计的结构设计、展现效果和行为设计的三次重构过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写好 JS 的一些原则

各司其职
组件封装
过程抽象

各司其职

表1-1 三者职责


JavaScript	Behavioral
CSS	Presentational
HTML	Structural

HTML、CSS、JavaScript 三者各司其职，描述的是其各自在页面中承担的责任（如表1-1所述），并不是描述代码文件层面的分离（HTML、CSS、JS 分处三个文件）。

代码示例

点击按钮，切换页面的浏览模式（浅色或深色）。
页面的浏览模式切换示例

代码实现方案一

<body>
    <button id="modeBtn">🌞</button>
    <h1>huaqi</h1>

    <script>
      const btn = document.getElementById("modeBtn");
      btn.addEventListener("click", e => {
        const body = document.body;
        if (e.target.innerHTML === "🌞") {
          body.style.backgroundColor = "black";
          body.style.color = "white";
          e.target.innerHTML = "🌜";
        } else {
          body.style.backgroundColor = "white";
          body.style.color = "black";
          e.target.innerHTML = "🌞";
        }
      });
    </script>
  </body>

注：此方案中，JS 做了 CSS 应该做的事

代码实现方案二

<style>
      #modeBtn {
        font-size: 2rem;
        border: none;
        outline: none;
        cursor: pointer;
        background: inherit;
      }

      body.night {
        background-color: black;
        color: white;
        transition: all 1s;
      }

      #modeBtn::after {
        content: "🌞";
      }

      body.night #modeBtn::after {
        content: "🌜";
      }
    </style>
  </head>
  <body>
    <button id="modeBtn"></button>
    <h1>huaqi</h1>

    <script>
      const btn = document.getElementById("modeBtn");
      btn.addEventListener("click", e => {
        const body = document.body;
        if (body.className !== "night") {
          body.className = "night";
        } else {
          body.className = "";
        }
      });
    </script>
  </body>

在代码的二、三版本中，该版本适应性更强。

注：纯展现类交互，可以仅通过 CSS 完成

代码实现方案三

<style>
      body,
      html {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }

      body {
        box-sizing: border-box;
      }

      .content {
        height: 100%;
        padding: 10px;
        transition: background-color 1s;
      }

      #modeCheckBox {
        display: none;
      }

      #modeCheckBox:checked + .content {
        background-color: black;
        color: white;
      }

      #modeBtn {
        font-size: 2rem;
        border: none;
        outline: none;
        cursor: pointer;
        background: inherit;
      }

      #modeBtn::after {
        content: "🌞";
      }

      body.night #modeBtn::after {
        content: "🌜";
      }
    </style>
  </head>
  <body>
    <input id="modeCheckBox" type="checkbox" />
    <div class="content">
      <!-- 操作 label 本质上为操作 input -->
      <label id="modeBtn" for="modeCheckBox"></label>
      <h1>huaqi</h1>
    </div>
  </body>