JS学习笔记｜ 青训营笔记

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

原则

1⃣️ 各司其职

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

例子：实现夜间模式

优点：避免js直接操作样式，提升代码复用性，并且用class表示状态，用纯css实现效果，代码更简洁

<input id = "modeCheckBox" type = "checkbox">
    <dic class = "content">
        <header>
            <lable id = "modeBtn" for = "modeCheckBox"></label>
            <h1>深夜食堂</h1>
        </header>
        <main>
            主要内容
        </main>
        <div>

• 是非常好的零js展示方案
• 完全满足了HTML/CSS/JS各司其职的书写理念

2⃣️ 组件封装

组件：Web页面上抽出来的一个个包含模板(HTML)、功能(JS)、样式(CSS)的单元

设计原则：封装性、正确性、扩展性、复用性

例子：设计轮播图

步骤：

1. 无序列表实现结构
2. css绝对定位将图片重叠，切换状态用修饰符，用css transition切换动画
3. 行为设计（API功能）
4. 控制流（Event），轮播图下面的控制按钮，采用自定义事件解耦

优点：复用性强、可读性好、加强代码管理能力

3⃣️ 过程抽象

定义：用来处理局部细节控制的方法，应用了函数式编程思想

函数式编程是一种编程范式，我们常见的编程范式有命令式编程（Imperative programming），函数式编程，逻辑式编程，常见的面向对象编程是也是一种命令式编程。

命令式编程是面向计算机硬件的抽象，有变量（对应着存储单元），赋值语句（获取，存储指令），表达式（内存引用和算术运算）和控制语句（跳转指令），一句话，命令式程序就是一个冯诺依曼机的指令序列。

要点：表达式化、高阶逻辑、组合子逻辑

心得：函数式思维，即用简单的几个函数组合来构建复杂逻辑，以高阶的角度去表达问题。