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

组件封装：基本方法

---

结构设计

在html页面设计好需求的列表结构

    // 设计一个轮播图，页面中显示要展示的图片
    <div id="app">
        <a href="#"><img src="1.jpg" alt=""></a>
        <a href="#"><img src="2.jpg" alt=""></a>
        <a href="#"><img src="3.jpg" alt=""></a>
    </div>

展现效果

使用css样式来控制不同的效果

    #app {
    position: relative;
    width: 700px;
    height: 500px;
    }
    #app img {
        position: absolute;
        top: 0px;
        left: 0px; 
        width: 100%;
        height: 100%;
    }

行为设计（控制流）

api（功能）api设计应保证原子操作，职责单一，满足灵活性
event（控制流） 使用自定义事件解耦

重构：

---

插件化

解耦 -- 将元素抽取成组件

  将组件中的功能按钮抽取成单独的js代码，便于后续对组件部分功能的修改和删除

过程抽象 -- 用来处理局部细节控制的一些方法

函数式编程思想的基础应用：插件与组件之间通过依赖注入方式建立联系  

模板化

解耦 -- 将html模板化，更易于扩展

抽象化

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

高阶函数:

• 以函数作为参数
  

• 以函数作为返回值
  

• 常用来作为函数装饰器
  

常用的高阶函数

• Once

    function Once (fn) {
        return function(...args) {
            if (fn) {
                const ret = fn.apply(this,args);
                fn = null;
                return ret;
            }
        }
    }

• HOF

    function HOFO (fn){
        return function (...args){
            return fn.apply(this,args);
        }
    }

• Throttle

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

• Debounce

    function debounce(fn, dur){
      dur = dur || 100;
      var timer;
      return function(){
        clearTimeout(timer);
        timer = setTimeout(() => {
          fn.apply(this, arguments);
        }, dur);
      }
    }

• Consumer/2

    function consumer(fn, time){
      let tasks = [],
          timer;

      return function(...args){
        tasks.push(fn.bind(this, ...args));
        if(timer == null){
          timer = setInterval(() => {
            tasks.shift().call(this)
            if(tasks.length <= 0){
              clearInterval(timer);
              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]);
      }
    }

---

使用组件封装时，可尽量将其封装成组件,并使用模板化开发，降低代码的耦合度