前端与JavaScript【写好JS的三大原则——各司其职】 | 青训营笔记

xcdval
116 阅读3分钟

前端与JavaScript【写好JS的三大原则——各司其职】 | 青训营笔记

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

月影老师在课上讲过，写好JavaScript有三大原则：各司其责、组件封装、过程抽象

一、前言

1.各司其责

让HTML、CSS和JavaScript职能分离

2.组件封装

好的UI组件具备正确性、扩展性、复用性

3.过程抽象

应用函数式编程思想

今天主要来学习记录下第一原则——各司其责

因为JS主要负责页面行为，老师通过深夜食堂的案例给我们深入讲解了这一原则的实际应用

二、深夜食堂案例

如果让你写一段JS控制网页，让它实现浅色和深色两种浏览模式，你会如何写？

版本一
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 = '🌞';
  }
});

版本一主要依靠：

1.获取切换按钮

2.绑定点击事件

3.获取页面body

4.切换模式条件判断

5.切换模式，操作样式背景，字体颜色

6.变换按钮

来实现功能逻辑的。

作为菜鸟，以上的逻辑感觉还是比较清晰，功能也较好的实现了，但是却违背了各司其责的原则，通过JS对样式进行了操作，复用性不高且不够简洁。

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

为了实现各司其责的原则，版本二通过给元素添加类的样式，让JS修改类名不再直接操作样式，同时加入了过渡的效果transition:all 1s更加自然，拓展性更高。

版本三

HTML：

  <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://p2.ssl.qhimg.com/t0120cc20854dc91c1e.jpg">
      </div>
      <div class="description">
        <p>
            这是一间营业时间从午夜十二点到早上七点的特殊食堂。这里的老板，不太爱说话，却总叫人吃得热泪盈
            眶。在这里，自卑的舞蹈演员偶遇隐退多年舞界前辈，前辈不惜讲述自己不堪回首的经历不断鼓舞年轻人，最终令其重拾自信；轻言绝交的闺蜜因为吃到共同喜爱的美食，回忆起从前的友谊，重归于好；乐观的绝症患者遇到同命相连的女孩，两人相爱并相互给予力量，陪伴彼此完美地走过了最后一程；一味追求事业成功的白领，在这里结交了真正暖心的朋友，发现真情比成功更有意义。食物、故事、真情，汇聚了整部剧的主题，教会人们坦然面对得失，对生活充满期许和热情。每一个故事背后都饱含深情，情节跌宕起伏，令人流连忘返 [6]  。
        </p>
      </div>
    </main>
  </div>

CSS：

  #modeCheckBox {
    display: none;
  }

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

分析代码可知，点击label==点击checkbox，且可以记住用户状态，勾选和不勾选分贝对应两种模式

使用display:none隐藏了checkbox

通过伪类选择器和兄弟选择器+选择到checkbox下面的盒子，实现CSS控制元素点击后的样式切换。

三、小结

通过案例的三个版本可以得出结论：

  • 应当避免不必要的由JS直接操作样式
  • 用class来表示状态
  • 纯展示类交互采用零JS方案
avatar
文章
阅读
粉丝