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

重点内容：

JavaScript 代码标准:

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

详细知识点介绍

一、各司其职

例子（对比代码）：切换日间模式/夜间模式：
版本一：

const btn = document.getElementById('modeBtn')
btn.addEventListener('click', (e) => {
    const body = document.body ;
    if(e.target. innerHTML === '☀') {
        body.style.backgroundColor = 'black';
        body.style.color = 'white';
        e.target.innerHTML = '🌙';
    } else {
        body.style.backgroundColor = 'white' ;
        body.style.color = 'black';
        e. target. innerHTML = '☀';
    }
});

版本二：

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负责表现，JavaScript负责行为。第一个版本用JavaScript控制CSS，结构混乱，会影响后期维护。版本二在CSS中定义了class="night"，代码相较于版本一更简洁，且当需求变化时修改更便捷。

总结：

HTML(Structural)/CSS(Presentational)/JS(Behavioral)各司其职
应当避免不必要的由JS直接操作样式
纯展示类交互寻求零JS方案

二、组件封装

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

基本方法：

结构设计
展现效果
行为设计：API（功能），Event（控制流）

API 设计应保证原子操作，职责单一，满足灵活性

优化代码：重构：插件化
解耦：将控制元素抽取成插件；插件与组件之间通过依赖注入方式建立联系
重构：模板化
解耦：将HTML模板化，更易扩展
重构：抽象化
抽象：将通用的组件模型抽象出来

总结：

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

三、过程抽象

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

高阶函数：

定义：（如果一个函数符合一下两个规范中的任意一个，该函数就是高阶函数）

若A函数接收的参数是一个函数
若A函数调用的返回值是一个函数

命令式与声明式编码：

命令式：强调过程
声明式：强调目的

跟着月影学JavaScript｜ 青训营笔记