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

JS注意的地方在哪里？

以前我写JavaScript的时候，经常通过style操作样式，今天看了月影老师的视频，恍然大悟。

总结就是：

• html/css/js各司其责
• 应当避免不必要的由JS直接操作样式
• 可以用class来表示状态
• 纯展示类交互寻求零JS方案(尽量使用html、css解决实际问题)

组件封装

总结

• 组件设计的原则：封装性、正确性、拓展性、复用性
• 实现组件的步骤：结构设计、展示效果、行为设计
• 三次重构
  1. 插件化(将大部分相同的功能抽离出来形成插件)
  2. 模板化(将html进行模板化，使用户使用更少的代码去写html)
  3. 抽象化(组件框架)

高阶函数

什么是高阶函数？函数的参数或者函数的返回值是函数，这类函数就叫做高阶函数。 常见的高阶函数

防抖函数，代码如下

(常用于用户输入、登录支付按钮、调整浏览器窗口大小)

// 防抖，事发触发delay秒再执行
// 如果在这delay秒又被触发，则重新计时
function debounce(fn, delay) {
    let timer;
    return function (e) {
        clearTimeout(timer);
        setTimeout(() => {
            fn.call(this, e);
        }, delay);
    };
}

节流函数，代码如下

(常用于鼠标不断点击触发、监听滚动事件)

// 节流，事件触发后delay秒再执行回调，如果在这delay内秒又触发，视为无效操作
function throttle(fn, delay) {
    let timer = null;
    return function (e) {
        if (timer == null) {
            timer = setTimeout(() => {
                fn.call(this, e);
                timer = null;
            }, delay);
        }
    };
}

编程范式(就是用什么规范进行编程解决问题，例：实现数组元素*2)

1.命令式，代码如下

let list = [1, 2, 3, 4];
let map = [];
for (let i = 0; i < list.length; i++) {
    map.push(list[i] * 2);
}

2.声明式，代码如下

let list = [1,2,3,4];
let map = []
const double = x => x*2;
map = list.map(double);