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

如何写好JS（上）

想要写好JS必须要了解到以下几点原则：

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

HTML/CSS/JS 各司其责

即网页的样式尽量让css负责，而页面的交互尽量让js负责，样式的工作能单独由CSS完成，而页面的行为尽量让JS完成，可以总结为以下几点：

应当避免不必要的由JS直接操作样式
可以用class来表示状态
纯展示类交互寻求零]S方案

举例：写一段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 = '🌞';
  }
});

以上这些代码使用了JS直接操作CSS样式,虽然可以正常并不符合各司其职的原则，并且维护，更改和复用功能较为繁琐，一旦代码量上去了，则会给开发人员带来困难；

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

而这段代码，则是通过点击事件改变了元素的classname来更改样式，正在的样式代码写在了CSS里，这样就保持了各司其职的原则，将来更改样式或者更改为其他功能也很方便。

组件封装

组件是指Web页面上抽出来一个个包含模版（HTML）、功能（JS）和样式（CSS）的单元。子的组件具备封装性、正确性、扩展性、复用性。

组件的设计应该包含以下几个原则：

封装性
正确性
扩展性
复用性一般的，组件封装的设计可以简单分为结构设计、展现效果和行为设计。

好的组件包含了插件化，模板化和抽象化

以一个轮播图功能为例，

基本功能代码： code.juejin.cn/pen/7108187…

组件化后的代码：code.juejin.cn/pen/7108185…

插件化：

在定义的组件class中预留插件位 则使用插件时，可传入自定义插件

模板化：

主要是使用render函数生成HTML元素，以此将HTML元素模板化，使其方便可以使用在其他位置

class Slider{
  constructor(id, ........)
   ........
  }
  render(){
    const images = this.options.images;
    const content = images.map(image => `
      <li class="slider-list__item">
        <img src="${image}"/>
      </li>    
    `.trim());
    
    return `<ul>${content.join('')}</ul>`;
  }
  ........

过程抽象:

如何写好JS（上）| 青训营笔记

如何写好JS（上）