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

写好JS的原则

各司其责、组件封装、过程抽象

深夜食堂案例结论

HTML/CSS/JS各司其责(HTML负责结构，CSS负责样式，JS负责行为)，避免不必要的由JS直接操作样式

可以用class来表示状态

纯展示类交互寻求零JS方案

组件封装

组件：Web页面上抽出来一个个包含模板（HTML）、功能（JS）、样式（CSS）的单元。好的组件具备封装性、正确性、扩展性、复用性

组件设计的原则

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

组件封装的步骤

结构设计、展示效果、行为设计：API、Event

三次重构

插件化

解耦，将控制元素抽取成插件、插件与组件之间用过依赖方式建立联系

模板化

将HTML模板化，更易于扩展

抽象化

将组件通用模型抽象出来

过程抽象

为了能够让“只执行一次“的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象。

用来处理局部细节控制的一些方法

是函数式编程思想的基础应用

高阶函数（HOF）

以函数作为参数
以函数作为返回值
常用于作为函数装饰器

常用的高阶函数

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,wait){
    var pre = Date.now();
    return function(){
        var context = this;
        var args = arguments;
        var now = Date.now();
        if( now - pre >= wait){
            fn.apply(context,args);
            pre = Date.now();
        }
    }
}

Debounce ：触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。

function debounce(fn,wait){
    var timer = null;
    return function(){
        if(timer !== null){
            clearTimeout(timer);
        }
        timer = setTimeout(fn,wait);
    }
}
    
function handle(){
    console.log(Math.random());
}
    
window.addEventListener("resize",debounce(handle,1000));

Consumer ：根据用户需求次数每隔一段时间调用函数
Iterative ：对函数进行判断，若函数可迭代，调用函数里的方法；若函数不可迭代，只将该函数执行一次

编程三范式

命令式

声明式

函数式

阅读和编写代码时看重的问题

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

上述在写代码和阅读代码的时候都应该关注，但是应从使用场景入手，这样才能客观科学的评判代码写得好与不好。

感想与总结

这次课与前面几次课略显不同，并没有讲授JS的基础语法，而是把重点放到了如何学书写优美又实用的JS代码上。相较于HTML和CSS，JS需要记忆的东西没那么多，但其逻辑性也更强，对于从来没系统学习过其他编程语言的同学来说，是前端学习的重难点。但经过月影大佬的讲述之后，我对JS有了新的认识。

总而言之，路漫漫其修远兮，学习是个漫长又艰苦的过程，之前学完了JS语法，也接触过其他编程语言，但想要真正意义上的熟练掌握JS还差得远。这是我第一次使用MarkDown语法来写笔记发帖，笔记的内容也偏向于记录课上老师所讲述的内容。要想理解课上讲述的精髓还得课下细细品味。

如何写好JS ｜ 青训营笔记

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