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

写好JS的一些原则

1. 各司其责：HTML、CSS、JavaScript职能分离

• 示例版本一

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、JS各司其责
  -应当避免不必要的由JS直接操作的样式
  -可以用class来表示状态
  -纯展示类交互寻求零JS方案

2. 组件封装：好的UI组件具备正确性、扩展性、复用性

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

• 轮播图
• • 结构HTML 轮播图是一个典型的列表结构，我们可以使用无序列表ul元素来实现
• • 表现CSS 使用CSS绝对定位将图片重叠在同一个位置，轮播图切换的状态使用修饰符（modifier），轮播图的切换动画使用CSS transition
• • 行为JS 行为:API
    -slider
    +getSelectedItem()
    +getSelectedItemIndex()
    +slideTo()
    +slideNext()
    +slidePrevious()
    行为：控制流
    -使用自定义事件来解耦
• 总结：基本方法
  -结构设计
  -展现效果
  -行为设计
  +API（功能）
  +Evebt（控制流）
• 重构：插件化
  -解耦
  +将控制元素抽取成插件
  +插件与组件之间通过依赖注入方式建立联系
• 重构：模板化
  -解耦
  +将HTML模板化，更易于扩展 组件框架 抽象：将组件通用模型抽象出来
• 总结
  -组件设计的原则：封装性、正确性、扩展性、复用性
  -实现组件的步骤：结构设计、展示效果、行为设计
  -三次重构：插件化、模板化、抽象化（组件框架）

3. 过程抽象：应用函数式编程思维

用来处理局部细节控制的一些方法，函数式编程思想的基础应用
eg：操作次数限制，一些异步交互，一次性的HTTP请求
高阶函数 HOF 以函数作为参数，以函数作为返回值，常用于作为函数装饰器

• Once为了能够让只执行一次的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象
• Throttle
• Debounce
• Consumer/2
• Iterative 编程范式：命令式与声明式
  eg：Toggle-命令式、Toggle-声明式、Toggle-三态
  总结：过程抽象、HOF、装饰器、命令式、声明式