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

1.写好JS的原则

  • 各司其职：让HTML、CSS、JavaScript职能别离
  • 组件封装：好的UI组件具有正确性、扩展性、复用性
  • 过程抽象：应用函数式编程思想

2.深夜食堂的例子

优化计划一：经过js去修正元素的类名，去改动对应的状况，可读性比起普通的写法（略）更高，当需求发生变化时，也能更好的去根据需求改代码，不需要去修正js的代码，只需要改动对应的款式即可。

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

优化计划二：

  • 经过绑定input来完成，避免了js直接操作款式，从而完成了HTML/CSS/JS各司其职
  • 将一个label与一个input元素匹配在一起，input的id特点需要与label的for特点相同
  • :checked，这个伪类选择器表明任何处于选中状况的radio
  • 完成过程：将input躲藏起来，经过使用label让图标能够控制这个躲藏的input，并使用伪类判断当前的状况；并改动相关的款式与内容
<input id="modeCheckBox" type="checkbox">
  <div class="content">
    <header>
      <label id="modeBtn" for="modeCheckBox"></label>
      <h1>深夜食堂</h1>
    </header>
    <main>
      <div class="pic">
        <img src="https://www.6hu.cc/wp-content/uploads/2022/12/1671399027-bb2153dbb1f13ca.jpg">
      </div>
      <div class="description">
        <p>
            这是一间营业时间从午夜十二点到早上七点的特别食堂。这里的老板，不太爱说话，却总叫人吃得热泪盈
            眶。在这里，自卑的舞蹈演员偶遇隐退多年舞界前辈，前辈不惜叙述自己不堪回首的经历不断鼓舞年轻人，终究令其重拾自傲；轻言绝交的闺蜜由于吃到共同喜爱的美食，回忆起早年的友谊，重归于好；乐观的绝症患者遇到同命相连的女孩，两人相爱并相互给予力气，陪伴互相完美地走过了最终一程；一味追求事业成功的白领，在这里结交了真正暖心的朋友，发现真情比成功更有意义。食物、故事、真情，汇聚了整部剧的主题，教会人们坦然面对得失，对日子充溢期许和热情。每一个故事背后都饱含厚意，情节跌宕起伏，令人恋恋不舍 [6]  。
        </p>
      </div>
    </main>
  </div>

 #modeCheckBox {
    display: none;
  }
  #modeCheckBox:checked + .content {
    background-color: black;
    color: white;
    transition: all 1s;
  }

定论

  • HTML/CSS/JS各司其责
  • 应当避免不必要的由JS直接操作款式
  • 能够用class来表明状况
  • 纯展现类交互寻求零JS计划