JavaScript|青训营笔记

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

一、课程知识要点：

1. 写好JS的一些原则
2. 组件封装
3. 过程抽象
4. 高阶函数

二、详细知识点介绍：

写好JS的一些原则

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

例如：页面的白天和夜间模式的JavaScript部分的代码如下：

const btn = document.getElementById('modeBtn');
btn.addEventListener('click', (e) => {
    const body = document.body;
    if (body.className !== 'night') {
        body.className = 'night';
    }
    else {
        body.className = '';
    }
});

结论

• HTML/CSS/JS各司其职
• 应当避免不必要的由JS直接操作样式
• 可以用class来表示状态
• 纯展示类交互寻求零JS方案

组件封装

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

总结（基本方法）

• 结构设计
• 展现效果
• 行为设计

1. API（功能）
2. Event（控制流）

总结

• 组件设计的原则：封装性、正确性、扩展性、复用性
• 实现组件的步骤：结构设计、展现效果、行为设计
• 三次重构

1. 插件化
2. 模板化
3. 抽象化（组件框架）

过程抽象

• 用来处理局部细节控制的一些方法
• 函数式编程思维的基应用

高阶函数

#### once

为了能够让“只执行一次”的需求覆盖不同的事件处理，我们可以将这个需求玻璃出来。这个过程我们称为过程抽象。 相关代码如下：

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

#### HOF

• 以函数作为参数
• 以函数作为返回值
• 常用于作为函数装饰器 相关代码如下：

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

三、课后总结

在案例当中，我们能够更加的认识到JavaScript的作用，在写代码时，实现结构、表现、行为的分离是十分重要的。学好JS还需要更加努力。