js上

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

以下笔记内容是我个人觉得比较重要的知识点!

1.编写规则

- 各司其职 html/css/js
- 组件封装（扩用、复用）
- 过程抽象（应用函数式编程思想）

1.1各司其职

- 例子：用js控制日间、夜间浏览模式

版本一：

使用js来获取dom节点，进而利用style属性改变样式，但是这种方法代码累赘，可读性不高

 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 = '🌞';
    }
  });

版本二

同样也是通过js获取body节点，通过类名的改变来改变样式的切换，可读性增强，但是通过js来执行css的操作，还可进一步优化

const btn = document.getElementById('modeBtn');
btn.addEventListener('click', (e) => {
 const body = document.body;
 if(body.className !== 'night') {
   body.className = 'night';
 } else {
   body.className = '';
 }
});

版本三

纯css操作实行日夜浏览模式的切换

<input id="modeCheckBox" type="checkbox">
<div class="content">
 <header>
   <label id="modeBtn" for="modeCheckBox"></label>
   <h1>深夜食堂</h1>
 </header>
 <main>
 ......（n内容）
 </main>
</div>

// css
#modeCheckBox {
 display: none;
}

#modeCheckBox:checked + .content {
 background-color: black;
 color: white;
 transition: all 1s;
}

结论

HTML/CSS/JS 各司其责

应当避免不必要的由 JS 直接操作样式

可以用 class 来表示状态

纯展示类交互寻求零 JS 方案

1.2 组件封装

月影大佬在视频中是通过手写js轮播图来讲解的，如下代码片段 html里的展示代码以及js里的构造函数部分的代码可以很明显的看出来是有一点多的，如果PM有新的需求或想法的话，比如不要不要左右切换的><这个按钮，需要改动的地方就比较多了，所以这时候我们就需要进行对这些代码进行封装：

1.2.1 重构：插件化

(解耦)将控制元素抽取成插件

插件与组件之间通过依赖注入方式建立联系

1.2.2 重构：模板化

(解耦)将HTML模板化,封装在自定义函数render()内，更易于扩展

1.2.3 组件框架

(抽象)将组件通用模型抽象出来封装后代码展示

1.3过程抽象

用来处理局部细节控制的一些方法

函数式编程思想的基础应用

INPUT X -> [FUNCTION f:] -> OUTPUT f(x)

2 高阶函数（HOF）

以函数作为参数

以函数作为返回值

常用于作为函数装饰器

2.1 常用高阶函数

只能够执行一次的函数 once

// 例子：点击一次后消失
buttons.forEach((button) => {
  button.addEventListener('click', once((evt) => {
    const target = evt.target;
    target.parentNode.className = 'completed';
    setTimeout(() => {
      list.removeChild(target.parentNode);
    }, 2000);
  }));
});

节流函数 throttle

//  节流指的就是减少单位时间或规定时间内该函数执行的次数，如下面的典型利用计时器的例子：
function(...args){
    if(timer == null){
      fn.apply(this,  args);
      timer = setTimeout(() => {
        timer = null;
      }, time)
    }
  }

总结

遵守js的编写真的很重要,不滥用js去操作css的展示效果,并且对于一个功能有多行js,能封装就尽量封装,提高复用性太重要了!