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

下列是我对今天所学知识的总结与记录 如何写好JS？

老师的概括是：各司其职，组件封装，过程抽象。

我对各司其职的理解就是:html和css通过名称值连接,css是一个样式表，js可以操控css这个表,而各司其职所约束的就是我们操纵css修改html的过程和方式区别。在js中直接修改或添加元素的样式，是在元素对应的样式库中添加了一条规则。而写好一个样式再通过js改变HTML与css连接的名称值是直接更换对应的样式库。组件封装我认为最重要的就是复用性，这是我们进行封装的目的所在。过程抽象就是动作的过程性拆分，是将其工具化。

01-各司其职

老师讲解了四种方式修改页面的样式。下面是我将我的理解应用的例子：

<style>
    #checkboxState{
      display: none;
    }
    // 方式三：利用css选择器修改样式
    #checkboxState:checked+.flexbox{
      background-color: aquamarine;
    }
  </style>

<script>
    var flexbox=document.querySelector('.flexbox')
    var divs=document.querySelectorAll('.flexbox>div')
    var btns=document.querySelectorAll('.buttonbox>button')
    // 方式一：j是直接修改样式
    btns[0].addEventListener('click',function(){
      flexbox.style.justifyContent='space-around'
    })
    // 方式二：js通过动态修改类名修改样式
    btns[1].addEventListener('click', function () {
        flexbox.classList.remove('flex_zero')
        flexbox.style=''
        flexbox.classList.add('flex_two')
      })
    
  </script>

02-封装组件

组件是指Web页面上抽出来一个个包含模版（HTML）、功能（JS）和样式（CSS）的单元。封装组件我们首先要设计组件：结构+表现+行为。最简单直接的步骤就是我们将这个功能拆分为一个个函数。之后插件化（需要去系统的学习如何插件化），模板化，抽象化。

03-过程抽象

我对老师所讲解的过程抽象，就是将行为拆分，模糊化达到复用的目的。为了能够让“只执行一次“的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象。老师提到了高阶函数的概念：

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

同时介绍了常用高阶函数，并列举相应的例子

Once 只执行一次

Throttle 节流

Debounce 防抖

Consumer 进行异步操作

Iterative 让函数支持多个参数迭代求解

具体例子可以查看课程资料。 此外编程范式相关见之后内容更新。

JS小零碎|【青训营笔记】

01-各司其职

02-封装组件

03-过程抽象