JavaScript | 青训营笔记

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

今天是学习JavaScript的内容。

写好JS的一些原则

• 各司其责

  • HTML、CSS和JavaScript职能分离
  • 应当避免不必要的由JS直接操作样式
  • 可以用class来表示状态
  • 纯展示类交互寻求零JS方案

• 组件封装

  • 好的UI组件具备正确性、扩展性、复用性
  • 优化代码，进行组件的插件化
    • 将控制元素抽取成插件
    • 插件与组件之间通过依赖注入方式建立联系
    • 模板化，将HTML模板化，更易于扩展
    • 抽象，将通用模型抽象出来

• 过程抽象

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

• 原则

  • 封装性、正确性、扩展性、复用性

• 实现组件步骤

  • 结构设计、展现效果、行为设计

• 三次重构

  • 插件化
  • 模板化
  • 抽象化

…args剩余参数和 arguments对象的区别

• arguments对象包含所有实参
• arguments不是一个真正的数组，而剩余参数是真正的数组实例
• argumengs还有一些附加属性

JavaScript高阶函数

提醒自己去学

• 函数作为其参数
• 返回值为函数的函数
• 常用于作为函数的装饰器
• 减少非纯函数，增加纯函数

fn与function等价

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

只执行一次

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

节流函数

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

函数防抖

function debounce(fn,wait){
    var timer = null;
    return function(){
        if(timer !== null){ 
            clearTimeout(timer); 
        }
        timer = setTimeout(fn,wait);
    } 
}

延时调用

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

箭头函数

还没学,提醒下自己

写代码关注点

• 风格
• 效率
• 约定
• 使用场景
• 设计