js(2) | 青训营笔记

js(2) | 青训营笔记

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

1. 组件封装

好的UI组件具备正确性、扩展性、复用性。 比如实现一个轮播图，大致思路就是将图片重叠，并获取各自下标，通过下标的变换控制图片的显示隐藏等动画效果。 但如果图片增多了怎么办，又要增加html节点，增加按钮事件。维护很麻烦，这就需要组件封装。 注册控制按钮：

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

将html中经常要被更新的内容通过js实现，比如：

render(data){
    const content = data.map(image => `
      <li class="slider-list__item">
        <img src="${image}"/>
      </li>    
    `.trim());
    
    return `<ul>${content.join('')}</ul>`;
  }

仅关注数据及需求实现轮播图：

const slider = new Slider('my-slider', {name: 'slide-list', data: ['https://p5.ssl.qhimg.com/t0119c74624763dd070.png',
     'https://p4.ssl.qhimg.com/t01adbe3351db853eb3.jpg',
     'https://p2.ssl.qhimg.com/t01645cd5ba0c3b60cb.jpg',
     'https://p4.ssl.qhimg.com/t01331ac159b58f5478.jpg'], cycle:3000});

slider.registerPlugins(pluginController, pluginPrevious, pluginNext);
slider.start();

总结

• 组件设计的原则：封装性、正确性、扩展性、复用性

• 实现组件的步骤：结构设计、展现效果、行为设计

• 三次重构

  1. 插件化
  2. 模板化
  3. 抽象化（组件框架）

2. 过程抽象

1.实现操作次数限制 通过函数返回函数，加入判断语句如下高阶函数

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

function once(fn) {
    return function(...args) {
      if(fn) {
        const ret = fn.apply(this, args);
        fn = null;
        return ret;
      }
    }
  }
  
 const foo = once(() => {
    console.log('bar');
  });
  
  foo();
  foo();
  foo();

这样只输出了一次bar。
为了能够让“只执行一次“的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象。
常用高阶函数：
throttle:

function throttle(fn, time = 500){
    let timer;
    return function(...args){
      if(timer == null){
        fn.apply(this,  args);
        timer = setTimeout(() => {
          timer = null;
        }, time)
      }
    }
  }

iterative:

function iterative(fn) {
  return function(subject, ...rest) {
    if(isIterable(subject)) {
      const ret = [];
      for(let obj of subject) {
        ret.push(fn.apply(this, [obj, ...rest]));
      }
      return ret;
    }
    return fn.apply(this, [subject, ...rest]);
  }
}