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

写好js的一些原则

1.各司其职（让HTML，CSS，JavaScript职能分离）
2.组件封装（好的UI组件具备正确性，扩展性，复用性）
3.过程抽象（应用函数式编程思想）

一、各司其职

实例：深夜食堂（切换页面黑夜与白天模式）

版本一：

/*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 = '🌞';
    }
  });
复制代码

可以看出版本一通过直接在按钮的监听函数内修改样式。此版本优点是代码直接易懂，缺点是如果未来要添加更多不同样式，甚至不同模式，会使代码繁琐臃肿，且不易修改维护。

2. 版本二：

/*js部分*/
const btn = document.getElementById('modeBtn');
 btn.addEventListener('click', (e) => {
   const body = document.body;
   if(body.className !== 'night') {
     body.className = 'night';
   } else {
     body.className = '';
   }
 });
复制代码

可以看出版本二在版本一基础上将样式的修改放在className中，只需修改className就可以修改样式，解决样式过多使代码繁琐的问题，大大压缩了代码，但添加不同模式的问题未得到解决。

3.版本三：

/*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;
  }
复制代码

可以看出版本三只是通过HTML和css来进行样式的修改，真正实现了各司其职原则，毕竟js是用来实现交互的。可以说版本三是以上最好的一个版本。

深夜食堂——总结

html/css/js各司其职
应避免不必要由js直接操作样式
可以用class来表示状态
纯展示类交互寻求零js方案

二、组件封装

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

实例：轮播图

结构（html）

轮播图是一个典型的列表结构，我们可以使用无序列表ul元素来实现。

   <div id="my-slider" class="slider-list">
      <ul>
        <li class="slider-list__item--selected">
          <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">
          <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 1s;
    opacity: 0;
    text-align: center;
  }

  .slider-list__item--selected{
    transition: opacity 1s;
    opacity: 1;
  }
复制代码

行为（js）

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);  
    }
  }

  const slider = new Slider('my-slider');
  slider.slideTo(3);
复制代码

控制流

使用自定义事件来解耦。

 <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>
复制代码

  const detail = {index: idx}
  const event = new CustomEvent('slide', {bubbles:true, detail})
  this.container.dispatchEvent(event)
复制代码

反思：以上方案并不是最优，我们需要重构组件来优化代码。

重构（插件化）

解耦

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

 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模板化，更易于扩展

  class Slider{
    constructor(id, opts = {images:[], cycle: 3000}){
      this.container = document.getElementById(id);
      this.options = opts;
      this.container.innerHTML = this.render();
      this.items = this.container.querySelectorAll('.slider-list__item, .slider-list__item--selected');
      this.cycle = opts.cycle || 3000;
      this.slideTo(0);
    }
    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>`;
    }
    ...
  }
复制代码

重构（抽象化）

将组件通用模型抽象出来

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 ''
    }
  }
复制代码

总结

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

反思

这些组件还有进一步改进空间

三、过程抽象

在想象过程抽象中，可以抽象成有一个房间，房间里面的门，窗，然后房间空间本身都是数据，但是开门或者开窗的开这个动作、行为就是过程，也就说我们不仅可以将门，窗，空间抽象成数据，开这个过程也是可以来作为抽象对象的。

比如

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

实例

操作次数限制

一些异步交互
一次性的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);
    });
  });
复制代码

高阶函数

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

  function once(fn) {
    return function(...args) {
      if(fn) {
        const ret = fn.apply(this, args);
        fn = null;
        return ret;
      }
    }
  }
复制代码

HOF

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

  function HOF0(fn) {
    return function(...args) {
      return fn.apply(this, args);
    }
  }
复制代码

常用高阶函数

四、编程范式

范式分类

如图所示，范式可以简单分为三类:范式和语言的关系

与成百种编程语言相比，编程范式要少得多，如图2所示，共有27种范式。多数范式之间仅相差一个或几个概念，比如图中的函数编程范式，在加入了状态（state）之后就变成了面向对象编程范式。

命令式编程：

命令式编程的主要思想是关注计算机执行的步骤，即一步一步告诉计算机先做什么再做什么。比如：如果你想在一个数字集合collection(变量名) 中筛选大于 5 的数字，你需要这样告诉计算机：

第一步，创建一个存储结果的集合变量 results；
第二步，遍历这个数字集合 collection；
第三步：一个一个地判断每个数字是不是大于 5，如果是就将这个数字添加到结果集合变量 results 中。

代码实现如下：

List<int> results = new List<int>();
foreach(var num in collection)
{
    if (num > 5)
          results.Add(num);
}
复制代码

声明式编程：

声明式编程是以数据结构的形式来表达程序执行的逻辑。它的主要思想是告诉计算机应该做什么，但不指定具体要怎么做。 SQL 语句就是最明显的一种声明式编程的例子，例如：

SELECT * FROM collection WHERE num > 5
复制代码

除了 SQL，网页编程中用到的 HTML 和 CSS 也都属于声明式编程。

通过观察声明式编程的代码我们可以发现它有一个特点是它不需要创建变量用来存储数据。另一个特点是它不包含循环控制的代码如 for， while。

函数式编程：

函数式编程和声明式编程是有所关联的，因为他们思想是一致的：即只关注做什么而不是怎么做。但函数式编程不仅仅局限于声明式编程。函数式编程最重要的特点是“函数第一位”，即函数可以出现在任何地方，比如你可以把函数作为参数传递给另一个函数，不仅如此你还可以将函数作为返回值。大部分常见的编程语言一半都已经提供了对这种编程方式的支持，比如 JavaScript，再有 C# 中的 LINQ 和 Java 中的 Lambda 和闭包的概念。

 `function toggle(...actions){
    return function(...args){
    let action = actions.shift();
    actions.push(action);
    return action.apply(this, args);
  }
}

switcher.onclick = toggle(
  evt => evt.target.className = 'warn',
  evt => evt.target.className = 'off',
  evt => evt.target.className = 'on'
);`
复制代码

总结与反思

通过这节课我真正理解了写好js的三大原则，各司其职、组件封装、过程抽象。也了解到了范式编程。写JavaScript代码必须不断改进，优化，提升代码质量，效率，风格。当然，在我有C语言和数据结构的基础上，理解这些相对容易。我相信，不断的实践与练习终会提升自己！

小白前端学习Javascript|青训营基础班小白笔记及总结Day2~