跟着月影学JavaScript （上）| 青训营笔记

沈点心
80 阅读4分钟

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

写好JavaScript的三大原则

各司其责、组件封装、过程抽象

重点内容

  • JavaScript 好代码的标准
  • HTML/CSS/JS 各司其责
  • 组件的定义解析及特征
  • 组件封装基本方法
  • 利用原生 JS 实现电商网站轮播图
  • 过程抽象概念
  • 高阶函数使用模式
  • JavaScript 编程范式

一、各司其责

image.png

栗子 - 深夜食堂

写一段 JS，控制一个网页，让它支持浅色和深色两种模式

image.png

版本一

  • 通过 JS 操作 CSS 和 HTML 元素
  • 缺点：不具有直观性，代码可读性差
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 操作 HTML 元素
  • 较版本一代码更加简练，且可读性好
const btn = document.getElementById('modeBtn');
btn.addEventListener('click', (e) => {
  const body = document.body;
  if(body.className !== 'night') {
     body.className = 'night';
  } else {
    body.className = '';
  }
});

版本三

  • 仅通过HTML和CSS实现两种模式切换
  • HTML 代码
<body>
  <input id="modeCheckBox" type="checkbox">
  <div class="content">
    <header>
      <label id="modeBtn" for="modeCheckBox"></label>
      <h1>深夜食堂</h1>
    </header>
    <main>
      ...
    </main>
  </div>
</body>
  • CSS 代码
body, html {
  width: 100%;
  height: 100%;
  max-width: 600px;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

body {
  box-sizing: border-box;
}

.content {
  padding: 10px;
  transition: background-color 1s, color 1s;
}

div.pic img {
  width: 100%;
}

#modeCheckBox {
  display: none;
}

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

#modeBtn {
  font-size: 2rem;
  float: right;
}

#modeBtn::after {
  content: '🌞';
}

#modeCheckBox:checked + .content #modeBtn::after {
  content: '🌜';
}

深夜食堂 - 结论

  • HTML/CSS/JS 各司其责
  • 应当避免不必要的由 JS 直接操作样式
  • 可以用class来表示状态
  • 纯展示类交互寻求零 JS方案

二、组件封装

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

栗子 - 轮播图

用原生 JS 写一个电商网站的轮播图

结构设计：HTML

  • 轮播图是一个典型的列表结构，我们可以使用无序列表 <ul> 元素来实现
  • 核心代码
<div id="my-slider" class="slider-list">
  <ul>
    <li class="slider-list__item">
      <img src="https://p5.ssl.qhimg.com/t0119c74624763dd070.png">
    </li>
    <li class="slider-list__item">
      <img src="https://p4.ssl.qhimg.com/t01adbe3351db853eb3.jpg">
    </li>
    <li class="slider-list__item--selected">
      <img src="https://p2.ssl.qhimg.com/t01645cd5ba0c3b60cb.jpg">
    </li>
    <li class="slider-list__item">
      <img src="https://p4.ssl.qhimg.com/t01331ac159b58f5478.jpg">
    </li>
  </ul>    
</div>

展现效果：CSS

  • 使用 CSS 绝对定位将图片重叠在同一个位置
  • 轮播图切换的状态使用修饰符（modifier）
  • 轮播图的切换动画使用 CSS transition
  • 核心代码
#my-slider {
  position: relative;
  width: 790px;
}

.slider-list ul {
  list-style-type: none;
  position: relative;
  padding: 0;
  margin: 0;
}

.slider-list__item,
.slider-list__item--selected {
  position: absolute;
  transition: opacity ls;
  opacity: 0;
  text-align: center;
}

.slider-list__item--selected {
  transition: opacity ls;
  opacity: 1;
}

行为设计：API

  • API 设计应保证原子操作，职责单一，满足灵活性。

image.png

  • 核心代码
class Slider{
  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);  
  }
}

行为设计：控制流

  • 使用自定义事件来解耦
  • HTML 核心代码
<a class="slide-list__next"></a>
  <a class="slide-list__previous"></a>
  <div class="slide-list__control">
    <span class="slide-list__control-buttons--selected"></span>
    <span class="slide-list__control-buttons"></span>
    <span class="slide-list__control-buttons"></span>
    <span class="slide-list__control-buttons"></span>
  </div>
  • JS 核心代码
const detail = {index: idx}
const event = new CustomEvent('slide', {bubbles:true, detail})
this.container.dispatchEvent(event)

总结：基本方法

  • 结构设计
  • 展现效果
  • 行为设计
    • API（功能）
    • Event（控制流）

改进：重构轮播图组件

插件化 - 解耦

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

image.png

  • JS 核心代码
function pluginController(slider){
  const controller = slider.container.querySelector('.slide-list__control');
  if(controller){
    const buttons = controller.querySelectorAll('.slide-list__control-buttons, .slide-list__control-buttons--selected');
    controller.addEventListener('mouseover', evt=>{
      const idx = Array.from(buttons).indexOf(evt.target);
      if(idx >= 0){
        slider.slideTo(idx);
        slider.stop();
      }
    });

    controller.addEventListener('mouseout', evt=>{
      slider.start();
    });

    slider.addEventListener('slide', evt => {
      const idx = evt.detail.index
      const selected = controller.querySelector('.slide-list__control-buttons--selected');
      if(selected) selected.className = 'slide-list__control-buttons';
      buttons[idx].className = 'slide-list__control-buttons--selected';
    });
  }  
}

function pluginPrevious(slider){
  const previous = slider.container.querySelector('.slide-list__previous');
  if(previous){
    previous.addEventListener('click', evt => {
      slider.stop();
      slider.slidePrevious();
      slider.start();
      evt.preventDefault();
    });
  }  
}

function pluginNext(slider){
  const next = slider.container.querySelector('.slide-list__next');
  if(next){
    next.addEventListener('click', evt => {
      slider.stop();
      slider.slideNext();
      slider.start();
      evt.preventDefault();
    });
  }  
}

模板化 - 解耦

  • 将HTML模板化，更易于扩展

image.png

  • JS 核心代码
class Slider{
  constructor(id, cycle = 3000){
    this.container = document.getElementById(id);
    this.items = this.container.querySelectorAll('.slider-list__item, .slider-list__item--selected');
    this.cycle = cycle;
  }
  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>`;
  }
}

组件框架 - 抽象

  • 将通用的组件模型抽象出来

image.png

  • JS 核心代码
class Component{
  constructor(id, opts = {name, data:[]}){
    this.container = document.getElementById(id);
    this.options = opts;
    this.container.innerHTML = this.render(opts.data);
  }
  registerPlugins(...plugins){
    plugins.forEach(plugin => {
      const pluginContainer = document.createElement('div');
      pluginContainer.className = `.${name}__plugin`;
      pluginContainer.innerHTML = plugin.render(this.options.data);
      this.container.appendChild(pluginContainer);
      
      plugin.action(this);
    });
  }
  render(data) {
    /* abstract */
    return ''
  }
}

总结

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

三、过程抽象

  • 用来处理局部细节控制的一些方法
  • 函数式编程思想的基础应用

image.png

栗子 - 操作次数限制

  • 一些异步交互
  • 一次性的HTTP请求
  • 示例代码
const list = document.querySelector('ul');
const buttons = list.querySelectorAll('button');
buttons.forEach((button) => {
  button.addEventListener('click', (evt) => {
    const target = evt.target;
    target.parentNode.className = 'completed';
    setTimeout(() => {
      list.removeChild(target.parentNode);
    }, 2000);
  });
});
  • 实现效果 image.png

image.png

Once

  • 为了能够让“只执行一次”的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称之为过程抽象

image.png

  • 示例代码

image.png

高阶函数

image.png

  • 示例代码

image.png

编程范式

image.png

命令式与声明式

image.png

  • 示例代码

image.png

image.png

栗子

总结

  • 过程抽象 / HOF / 装饰器
  • 命令式 / 声明式
avatar
文章
阅读
粉丝