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

月影js

这是js上半节的课程，以前听的那些课在html css js方面都讲的特别简单，大部分都是给你讲讲怎么用，随便实现几个功能。但在字节青训营里面听到的课真的让我十分震惊（或许是我以前太笨了），接触到了没有看到过，甚至不了解的方法，一个功能由高度耦合变得可以互不影响，甚至可以不在html中写过多的内容，插件化，模板化，功能化，等等，还有后续的代码编写规范，都让我耳目一新。！！！下面就是我一些小计，受益匪浅！！！

通过js修改页面的样式

直接在js中进行css样式的修改
通过已经设定好的class样式，改变dom的类名

js实现轮播图

传统实现方法
插件化组件
重构：模板化

将html模板化，更易于扩展

组件框架，

总结：

组件设计的原则：封装性，正确性，扩展性，复用性
实现组件的步骤：结构设计，展现效果，行为设计
三次重构：插件化，模板化，抽象化

Once

实现功能时，想要让某个功能只触发一次，（点击多次只实现一次，点击多次发送请求，只发送一次）

function once(fn){
    //outer space closure
    return function(...args){
        //inner scope
        if(fn){
            const ret = fn.apply(this,args);
            fn = null;
            return ret;
        }
    }
}

once是高阶函数，在内部又形成了闭包，只有第一次调用时，才有 fn 的值，执行一次之后 fn = null 切访问不到once传进来的值。就实现了只执行一次

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

高阶函数

HOF

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

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

常用的高阶函数

once

function once(fn){
    //outer space closure
    return function(...args){
        //inner scope
        if(fn){
            const ret = fn.apply(this,args);
            fn = null;
            return ret;
        }
    }
}

throttle(节流)

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

例如一直点，然后每500ms记录一次

Debounced（防抖）

function debounce(fn,dur){
    dur = dur || 100;
    var timer;
    return function(){
        clearTimeout(timer);
        timer = setTimeout(()=>{
            fn.aply(this,arguments);
        },dur)
    }
}

例如打字，鼠标移动，想让他在动作结束一段时间后，才触发函数。

Consumer
Lterative

编程范式

Toggle - 命令式

    switch.onclick = funtion(evt){
         if(evt.target.className === "on"){
             evt.target.className = "off";
         }
         else{
             evt.target.className = "on";
         }
    }

Toggle - 声明式（具有更强的可扩展性）

function toggle(...actions){
    return function(args...){
        let action = actions.shift();
        actions.push(action);
        return action.apply(this,args);
    }
}

switch.onclick = toggle(
evt.target.className = "off",
evt.target.className = "on"
)
//高阶函数接收 多个动作，然后点击时，通过shift()把第一个拿出,通过push()放到最后一个。
//这个方法方便有多个状态转换时使用

JS编写规范 ｜ 青训营笔记