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

跟月影学js，如何写“好”javascript

原则1:各司其责

关于白天深夜（或者说浅色深色模式）有如下实现方式

通过判断直接操作css，也就是操作style
通过判断按钮判断className

html负责结构，css负责表现，javascript负责行为

上面三者各司其职应当避免不必要的由js直接操作样式可以用class表示状态纯展示类交互寻求零JS方案

纯css版本，没有js控制；使用兄弟节点选择器选择相关的内容，两套css，使用checkbox切换特别厉害的项目： You-Dont-Need-JavaScript(github)

原则2:组件封装

轮播图：典型的无序列表结构

<ul><li><img></li></ul>

下方小圆点mouseover停掉自动播放，mouseout开始自动播放

组件设计原则 封装性、正确性、扩展性、复用性 基本方法 结构设计、展现设计、行为设计（API功能、Event控制流） 改进空间 不是很灵活，里面的组件和控制点绑定在一起修改起来不方便。重构：插件化-模版化-抽象化

原则3:过程抽象

过程抽象：与数据抽象相对应

高阶函数[Higher-order function,HOF]

Once：为了能够让值执行一次的需求覆盖不同的时间处理，我们将这个需求封装成高阶函数
HOF（高阶函数）：作为其参数或者是返回值为函数的函数被称为高阶函数
常用的高阶函数：Once、Throttle(节流)、Debounce(防抖)、Consumer/2、Iterative

防抖与节流

防抖：下达指令后开始计时，如果在计时范围内重复下达指令则重新计时，等待及时完成后才执行代码。类似“所有同学都不说话30秒咱们就下课，一旦出现一个学生说话重新开始计时” 用处：用户触发事件过于频繁，只要最后一次事件的操作，检索过程中常常获取文本框的内容会产生过多的请求，因此防抖可以大大地减少无用操作增强性能

节流：代码执行后就进入冷却，冷却期件都不会重复执行，类似“英雄联盟英雄技能的冷却时间” 用处：控制高频事件执行次数

// 防抖
let inp = document.querySelector("input");
inp.oninput = debounce(function(){
   console.log(this.value);
}, 500)

function debounce(fn, delay){
   // 放进来t就没有全局变量了
   let t = null;
   return function(){
      if(t != null){
         clearTimeout(t);
      }
      t = setTimeout(() => {
         fn.call(this);
      }, delay)
   }
}

// 节流
window.onscroll = throttle(function(){
   console.log("hello world")
}, 500)

function throttle(fn, delay){
   let flag = true;
   return function(){
      if(flag){
         setTimeout(() => {
            fn.call(htis);
            flag = true;
         }, delay)
      }
   flag = false;
}
}

为什么使用高阶函数？纯函数比较方便调试，但是非纯函数在测试时需要考虑函数的调用次数，需要构造特定的外部环境使用高阶函数可以降低使用非纯函数的可能性

编程范式

命令式与声明式，js两种都可以写但是声明式和命令式在表达时会有各自的优点

JS学习笔记｜青训营笔记