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

JS学习记录

写好JS的三个原则

各司其职：让HTML、CSS和JS的职能分离。
组件封装：好的UI组件具备正确性、扩展性、复用性。
过程抽象：应用函数式编程思想。

组件封装

组件是指页面抽取出来的一个包含HTML、CSS和JS的单元。
组件设计原则是满足封装性、正确性、扩展性、复用性 基本方法是结构设计、展现效果和行为设计。这三个方法分别对应着HTML、CSS和JS。而JS中的功能API和Event控制流也是完成行为设计的重要组成部分。
三次重构是需要满足插件化、模板化、抽象化。

过程抽象

过程抽象是用来处理局部细节控制的一些方法，是一种函数式编程思想的基本应用。为了能够满足“某个需求”覆盖不同事件处理，我们可以将这个需求剥离出来，这个过程叫做过程抽象。
例如要满足“只执行一次”这个条件，那么把事件提出来处理：

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

在JS中，一般才有高阶函数来处理过程抽象。高阶函数就是以函数作为参数，以函数作为返回值，常用于作为函数装饰器。经典模板例子如下：

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

常用的高阶函数有Once（只执行一次）、Throttle（节流函数）、Debounce（防抖函数）、Consumer/2、Iterative（可迭代方法）
节流函数的实现：

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, 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){
        if(timer==null){
            timer=setInterval(()=>{
                tasks.shift().call(this)
                if(tasks.length<=0){
                    clearIntval(timer);
                    timer=null;
                }
            }, time)
        }
    }
}

可迭代方法的实现：

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

编程范式

编程范式分成命令式和声明式。命令式注重怎么做，就是平常C或者C++的代码一样。比如将数组里面的值都乘以2，那么就写个for循环遍历乘2就好了；而声明式的写法如下：

let list=[1,2,3,4];
const double = x=>x*2;
list.map(double);

代码质量优化

总结

在本次学习中，通过课程视频，学习了如何去写好JS、如何去封装代码、如何去使用编程范式使得代码规格更加统一、如何去通过高阶函数的代码思想去将事件分块。这次学习为接下来项目实现提供了格式参考等等。

JS学习记录｜青训营笔记