专业编程基础技术教程

网站首页 > 基础教程 正文

JavaScript代码编写三原则(一):各司其责

ccvgpt 2024-11-09 11:23:03 基础教程 10 ℃

关于如何去写好JavaScript代码这个问题，我们一般会遵循各司其责、组件封装、过程抽象这三大原则来展开描述。今天我们主要从各司其责原则展开学习。

定义

各司其责主要是指将HTML代码，CSS代码，JavaScript代码的职能相互分离。

JavaScript代码编写三原则(一):各司其责

我们先了解一个需求：

如上所示，这个需求要求我们能够切换通过点击按钮实现白天和夜间之间的不同背景颜色和字体颜色的切换。下面是原始HTML和CSS代码：

  • HTML代码
<body>
    <div class="main">
      <div class="btn">
        <button id="modeBtn"></button>
      </div>
      <div>
          <h2>吴名小卒，好运100%！！</h2>
          <div>
            <img src="img/2.jpg" style="width: 100px;height: 100px;"/>
          </div>
      </div>
    </div>
</body>
  • CSS代码
.main{
  display: flex;
  flex-direction: row-reverse; 
  justify-content: space-between;
  width: 300px;
}
.btn{
  margin-top: 25px;
  margin-right: 20px;
}

简单实现

上述需求最简单的实现方式就是直接通过JavaScript直接操作CSS样式，进而达到我们想要的效果。具体JavaScript代码如下：

const btn = document.getElementById("modeBtn")
const body = document.getElementsByTagName("body")[0]
btn.addEventListener("click",function(){
  //判断按钮的内容是否是太阳
  if(btn.innerHTML == ""){  
    body.style.background = "black"
    body.style.color = "white"
    btn.innerHTML = ""  //改为月亮
  }else{
    body.style.background = "white"
    body.style.color = "black"
    btn.innerHTML = "" //改为太阳
  }
})

如上所示，我们通过获取按钮元素以及body元素，并且监听鼠标点击事件，判断按钮元素的内容,进而进行背景的切换。

上述做法虽然实现了我们的需求，但是我们在实际开发的过程中，我们的代码结构并不会这么简短。因此，当我们采用这种方式进行操作后，当我们需要返回来阅读代码时，我们阅读代码的难度就大大增加了。另外，虽然我们可以看懂这代码，对于其他开发人员来说，可读性是较差的。因此，我们需要对代码进行优化。

初步优化

那个我们要如何进行优化呢？既然我们本章讲的是各司其责原则，那么我们是否可以考虑不直接操作元素样式来达到目的呢？

  • HTML代码：
 <button id="modeBtn"></button>
  • CSS代码：
.night{
  background-color: black; 
  color: white;
}
#modeBtn::after {
  content: '';  //太阳
}
body.night #modeBtn::after {
  content: ''; //月亮
}
  • JavaScript代码：
const btn = document.getElementById("modeBtn")
const body = document.getElementsByTagName("body")[0]
btn.addEventListener("click",function(){
  if(body.className = "night"){
    body.className = "" 
  }else{
    body.className = "night"
  }
})

如上所示，我们将按钮的内容作为CSS样式，通过伪类元素after进行按钮内容的切换。同时，在CSS新增一个night的类,通过JS更改body的类名，达到模式切换的效果。这样写大大地提升了代码的可读性。但是，上述操作还是用到了JS，对于一个纯展示类交互需求来说还有种大材小用的感觉。那么，我们能不能寻找一种方法做到让这个实例是零JS的呢?

最终优化

对于这个实例要想实现零JS其实并不是很难，只需要添加一个checkbox勾选框即可。具体代码如下。

  • HTML代码
<body>
  	<input type="checkbox" id="modeChange">
    <div class="main">
      <div class="btn">
        <label for="modeChange" id="modeBtn"></label>
      </div>
      <div>
          <h2>吴名小卒，好运100%！！</h2>
          <div>
            <img src="img/2.jpg" style="width: 100px;height: 100px;"/>
          </div>
      </div>
    </div>
</body>
  • CSS代码
#modeChange{
  display: none;
}
#modeChange:checked+.main{
  background-color: black; 
  color: white;
}
#modeBtn::after {
  content: '';  //太阳
}
#modeChange:checked+.main #modeBtn::after {
  content: '';  //月亮
}

如上所示，我们在最外层定义一个隐藏的勾选框，并且将勾选框绑定给切换按钮，通过勾选框的:check伪类选择器，达到了只通过操作CSS就能实现模式切换的效果。

运用

结合上面的实例以及优化过程，我们可很好的了解到各司其责原则的运用原则：

  1. HTML/CSS/JavaScript代码各自完成自己的责任；
  2. 应当避免不必要的JS直接操作样式；
  3. 可以用class来表示样式状态；
  4. 对于纯展示类交互我们应当寻求零JS方案。

总结

本篇文章主要通过一个背景切换实例对JavaScript代码编写三原则中的各司其责原则进行了学习。了解到了如何在开发中更好的应用各司其责原则。

Tags：

猜你喜欢

最近发表
标签列表