青训营JS学习笔记1 ｜ 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第2天 写好Js的一些原则：

• 让HTML、CSS、JavaScript职能分离
• 好的UI组件具备正确性、拓展性、复用性
• 应用函数式编程思想

深夜食堂课上案例结论：

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

组件封装

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

轮播图案例：

结构

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

表现

• 使用CSS绝对定位将图片重叠在同一位置
• 轮播图切换的状态使用修饰符（modified）
• 轮播图的切换使用CSS transition

行为：API

• Slider
• • +getSelectedltem(
  • +getSelectedltemlndex()
  • +slideTo()
  • +slideNext()
  • +slidePrevious()

改进：

重构：插件化

解耦:将HTML模板化，更易于拓展

• 将控制元素抽取成插件
• 插件与组件之间通过依赖注入方式建立联系

组件封装总结：

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

过程抽象：

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

高阶函数

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

once 为了能够“只执行一次”的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象

function once(fn){
    return function(...args){
        if(fn){
            const ret fn.apply(this,args);
            fn null;
            return ret;
        }
    }
}

Throttle

function throttle(fn, wait) {
  let timer = undefined;
  let lastCallTime = Date.now();
  return function() {
    const timeSinceLastCall = Date.now() - lastCallTime;
    const shouldCall = timeSinceLastCall >= wait;
    if (shouldCall) {
      const args = arguments;
      timer = setTimeout((fn.apply(this, args), (timer = undefined)), wait);
      lastCallTime = Date.now();
    }
  };
}

Debounce

function debounce(fn,wait){
    var timer = null;
    return function(){
        if(timer !== null){
            clearTimeout(timer);
        }
        timer = setTimeout(fn,wait);
    }
}
    
function handle(){
    console.log(Math.random());
}
    
window.addEventListener("resize",debounce(handle,1000));

编程范式

命令式和声明式