这是我参与「第五届青训营」伴学笔记创作活动的第 3 天长见识了，特别是HOTF

书籍推荐

犀牛书红宝书

写好的原则

各司其职：让html，css，javascript职能分离。
- 应当避免不必要的由js直接操作的样式
- 可以用class来表示状态
- 纯展示类交互寻求0js方案
组件封装：好的UI组件具备封装性、正确性、扩展性、复用性。
- 原则：封装性、正确性、扩展性、复用性
- 步骤：结构设计、展示效果、行为设计
- 三次重构：
  - 插件化
  - 模版化
  - 抽象化
过程抽象：应用函数时编程思想
- 高阶函数HOF
  - once
  - Throttle
  - Debounce
  - Consumer/2
  - iterative
- 命令式与声明式

基础知识

The arguments object

arguments 是一个对应于传递给函数的参数的类数组对象。基本可以理解为函数的参数都以数组的形式存储在arguments中。

Function.prototype.apply()

apply() 方法调用一个具有给定 this 值的函数，以及以一个数组（或一个类数组对象）的形式提供的参数。

闭包（Closure）

闭包（closure）是一个函数以及其捆绑的周边环境状态（lexical environment，词法环境）的引用的组合。换而言之，闭包让开发者可以从内部函数访问外部函数的作用域。在 JavaScript 中，闭包会随着函数的创建而被同时创建。，JavaScript 中的函数会形成了闭包。闭包是由函数以及声明该函数的词法环境组合而成的。该环境包含了这个闭包创建时作用域内的任何局部变量。

once

每一个被包裹在once中的函数均只能使用一次。

 function once(fn,context){
        let res;
        return function(){
            if(fn){
                res=context?fn.apply(context,arguments):fn(...arguments)
                fn=null
            }
            return res;
        }
    }

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,argments);
    },dur)
}

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

iterative

小技巧

<label> 的for属性可以与其他元素进行绑定

怎么写好Javascript｜ 青训营笔记