前端 | 青训营笔记这是我参与「第四届青训营」笔记创作活动的的第4天，今天是关于JavaScript的学习写好JS的

这是我参与「第四届青训营」笔记创作活动的的第4天，今天是关于JavaScript的学习

写好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 = '🌞';
    }
  });

对于代码的维护性比较差每一步都是JS来控制的

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

把样式都封装到一个class里面去便于修改和维护

 <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>
            这是一间营业时间从午夜十二点到早上七点的特殊食堂。这里的老板，不```
  #modeCheckBox {
    display: none;
  }

  #modeCheckBox:checked + .content {
    background-color: black;
    color: white;
    transition: all 1s;
  }
```太爱说话，却总叫人吃得热泪盈
            眶。在这里，自卑的舞蹈演员偶遇隐退多年舞界前辈，前辈不惜讲述自己不堪回首的经历不断鼓舞年轻人，最终令其重拾自信；轻言绝交的闺蜜因为吃到共同喜爱的美食，回忆起从前的友谊，重归于好；乐观的绝症患者遇到同命相连的女孩，两人相爱并相互给予力量，陪伴彼此完美地走过了最后一程；一味追求事业成功的白领，在这里结交了真正暖心的朋友，发现真情比成功更有意义。食物、故事、真情，汇聚了整部剧的主题，教会人们坦然面对得失，对生活充满期许和热情。每一个故事背后都饱含深情，情节跌宕起伏，令人流连忘返 [6]  。
        </p>
      </div>
    </main>
  </div>

  #modeCheckBox {
    display: none;
  }

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

这个方法比较巧妙，通过label的for属性绑定了checkbox,用切换checked来控制深浅模式,最后将checkbox隐藏。

总结

JS规范

需求：用原生的JS写一个电商网站的轮播图，应该怎么实现？

老师的思路惊艳到了我，曾经我也想过封装个个模块的代码，但是没有想到使用ES6 class

  constructor(id){
    this.container = document.getElementById(id);
    this.items = this.container
    .querySelectorAll('.slider-list__item, .slider-list__item--selected');
  }
  getSelectedItem(){
    const selected = this.container
      .querySelector('.slider-list__item--selected');
    return selected
  }
  getSelectedItemIndex(){
    return Array.from(this.items).indexOf(this.getSelectedItem());
  }
  slideTo(idx){
    const selected = this.getSelectedItem();
    if(selected){ 
      selected.className = 'slider-list__item';
    }
    const item = this.items[idx];
    if(item){
      item.className = 'slider-list__item--selected';
    }
  }
  slideNext(){
    const currentIdx = this.getSelectedItemIndex();
    const nextIdx = (currentIdx + 1) % this.items.length;
    this.slideTo(nextIdx);
  }
  slidePrevious(){
    const currentIdx = this.getSelectedItemIndex();
    const previousIdx = (this.items.length + currentIdx - 1)
      % this.items.length;
    this.slideTo(previousIdx);  
  }
}

const slider = new Slider('my-slider');
slider.slideTo(3);

组件封装

总结：基本方法

结构设计
展现效果
行为设计
- API(功能)
- Event(控制流)

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

重构：插件化

解耦

将控制元素抽取成插件
插件与组件之间通过依赖注入方式建立联系

总结

组件设计的原则：封装性正确性扩展性复用性
实现组件的步骤：结构设计展现效果行为设计
三次重构
- 插件化
- 模板化
- 抽象化（组件框架）

高阶函数

HOF

以函数作为参数
以函数作为返回值
常用于作用函数装饰器

常用的有

once
throttle
debounce
consumer/2
lterative

高阶这一块还是有点不太清楚

编程范式

命令式与声明式

 let list = [1, 2, 3, 4];
  let mapl = [];
  for(let i = 0; i < list.length; i++) {
    mapl.push(list[i] * 2);
  }

 let list = [1, 2, 3, 4];
  const double = x => x * 2;
  list.map(double);

命令式的关键是做什么
声明式的关键是怎么做

总结
过程抽象 HOF 装饰器