03 JavaScript ｜ 青训营笔记

文章第一句话为“这是我参与「第四届青训营 」笔记创作活动的第3天

1.结构和行为分离

1. HTML、CSS、JavaScript各司其责
2. 避免不必要的由JavaScript直接操作样式

+ 组件封装

1. 插件化
2. 模板化
3. 抽象化

• once函数

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

• consumer函数

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(task.length <= 0){
                    clearInterval(timer);
                    timer = null;
                }
           }, time)
        }
  }
 }

• throttle函数
• debounce函数
• 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]);
}

+ 高阶函数