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

一、本堂课重点内容

JavaScript 好代码的标准
组件的定义解析及特征
组件封装基本方法
过程抽象概念
高阶函数使用模式

二、详细知识点介绍

JavaScript 好代码的标准

各司其职让Html css和js职能分离
组件封装好的ui组件具有正确扩展复用性
过程抽象应用函数式编程思维

eg.深夜食堂例子

    <input id="modeCheckBox" type="checkbox">
    <div class="content">
        <header>
          <label id="modeBtn" for="modeCheckBox"></label>
          <h1>深夜食堂</h1>
        </header>
    <main>
        <div class="pic">
            <img src="https://p2.ssl.qhimg.com/t0120cc20854dc91c1e.jpg">
          </div>
          <div class="description">
            <p>
            xxx
            </p>
          </div>
    </main>
    </div>

    #modeCheckBox {
        display: none;
    }

    #modeCheckBox:checked + .content {
        background-color: black;
        color: white;
        transition: all 1s;
    }

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

组件封装

组件的定义解析及特征

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

组件封装基本方法

组件封装的基本方法

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

eg.利用原生 JS 实现电商网站轮播图

1. 结构：HTML

轮播图是一个典型的列表结构，我们可以使用无序列表ul元素来实现

2. 表现:CSS

使用CSS绝对定位将图片重叠在同一个位置
轮播图切换状态使用修饰符modifier
轮播图切换动画使用CSS transition

3. 行为:JS

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

4. 行为:控制流

使用自定义事件来解耦

5. 重构

插件化（解耦）
- 将控制元素抽取成插件
- 插件与组件之间通过依赖注入的方式建立联系
模板化
- 将HTML 模板化，更易于扩展
组件框架（抽象）
- 将通用组件模型抽象出来

class Component{
    constructor(id, opts = {name, data:[]}){
      this.container = document.getElementById(id);
      this.options = opts;
      this.container.innerHTML = this.render(opts.data);
    }
    registerPlugins(...plugins){
      plugins.forEach(plugin => {
        const pluginContainer = document.createElement('div');
        pluginContainer.className = `.${name}__plugin`;
        pluginContainer.innerHTML = plugin.render(this.options.data);
        this.container.appendChild(pluginContainer);

        plugin.action(this);
      });
    }
    render(data) {
      return ''
    }
}

总结

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

过程抽象

过程抽象的概念：

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

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

高阶函数

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

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

常用高阶函数

Trottle 节流函数
debounce 防抖
consumer/2 同步转异步、延时调用
lterative 迭代

为什么要使用高阶函数？

诚函数，无副作用可预期，易测正确性，使用高阶函数减少非诚函数，增加可维护性

left-pad实例

介绍left-pad后面的故事和代码的质量和性能优化，从while循环累加，到内置repectAPI,并讲解repeact底层快速幂去优化时间复杂度，从O(n)优化到O(logn)。讲解了一下快速幕实现的原理，接着还有一些业内优化时间复杂度的方案。

三、总结

通过月影老师的js课程，我对如何写好js有更多的理解，通过模块化、组件化的思维，可以将js写得更加具备可以扩展性、可复用，还有一些性能优化方面的内容也值得我继续学习与实践。这堂课给我拓展了许多新方向，收获不少。

四、引用

月影老师的js课程juejin.cn/course/byte…

[ 前端与 HTML | 青训营笔记]