如何写好JavaScript之各司其职|青训营笔记

挽不住枫
109 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的的第3天

前言

要写好JavaScript有三大原则

  • 各司其职： 让HTML，CSS和JavaScript职能分离

  • 组件封装： 好的UI组件具备正确性，拓展性，复用性

  • 过程抽象： 应用函数式编程思想

各司其职

举个栗子：网页深色浅色切换；先放代码

初级代码

一次优化

二次优化

对比

image.png 通过代码对比可以看出，第二段代码把样式改到了css文件中体现了各司其职的原则，更容易理解更容易维护

那版本二的代码还可以优化吗？

题目的要求本质上为样式改变；那么我们可不以不需要js呢？

当然可以 先再HTML里使用input的type设置为checkbox，再通过id把label的for属性联系起来，

image.png

再通过伪类:checked（作用：在复选框和单选按钮等元素打开时匹配。）和相邻兄弟选择器+.content修改两者的状态样式，最后使用display：none让复选框消失。就基本完成了第二次优化啦！

image.png

二次优化后在JavaScript里就没有代码，很好的体现了各司其职的原则

结论：

  • HTML/CSS/JS各司其责
  • 应当避免不必要的由JS直接操作样式
  • 可以用class来表示状态
  • 纯展示类交互寻求零JS方案（不强求）

补充

相邻兄弟选择器（+） 相邻兄弟选择器可选择紧接在另一个元素后的元素，且二者具有相同的父亲元素。注释：与子结合符一样，相邻兄弟结合符旁边可以有空白符。 示例：

<p>Apple </p>
<p>Apple</p>
<h1>Apple</h1>
<p>Apple</p>
<p>Apple</p>
<p>Apple</p>
<p>Apple</p>
<style>
  h1+p{
    color:red;
  }
</style>

效果图如下：

image.png

如果+前后的标签一样，那么就有循环查找的作用

<style type="text/css">
  li + li {
    color:red;
  }
</style>

<div>
  <ul>
    <li> 1</li>
    <li> 2</li>
    <li> 3</li>
    <li> 4</li>
  </ul>
</div>

效果如下：

image.png

可以看出第一个字体颜色没有变红，后面的元素字体变红，这就是因为第三个元素是第二个元素的兄弟元素，第四个元素是第三个的兄弟元素，所以也会应用样式。

avatar
文章
阅读
粉丝