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

写好js的一些原则

各司其责——让HTML、css和JavaScript职能分离
组件封装——好的UI组件具备正确性、扩展性、复用性
过程抽象——应用函数式编程思想

写一段js控制网页，让它支持深色和浅色两周浏览模式，怎么实现？

const btn=document.getElemtByID('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 = '';
            }
          });

第三种方式

#modeCheckBox {
            display: none;
}

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

结论

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

组件封装

用原生js写电商网站的轮播图

1、结构——轮播图是典型的列表结构，可以使用无序列表ul元素来实现

2、表现

使用css绝对定位将图片重叠在同一个位置
轮播图切换的状态使用修饰符
轮播图的切换动画使用CSS transition

3、行为——API

控制流——使用自定义事件解耦

总结：基本方法

结构设计
展现效果
行为设计

API（功能） Event（控制流）

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

重构：插件化

解耦

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

重构：模板化

解耦

将HTML模板化，更易于扩展

组件框架

抽象

将组件通用模型抽象出来

组件封装总结

组件设计的原则：封装性、正确性、扩展性、复用性
实现组件的步骤：结构设计、展现效果、行为设计
三次重构

插件化模板化抽象化

过程抽象

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

例子：

操作次数限制

一些异步交互
一次性HTTP请求

高阶函数

once

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

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

HOF

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

 function HOF0(fn) {
            return function(...args) {
              return fn.apply(this, args);
            }
          }

常用高阶函数

HOF

Once
Throttle
Debounce
Consumer/2
Iterative

编程范式

命令式与声明式

命令式

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

声明式

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

声明式比命令式具有更强的可扩展性

JavaScript|青训营笔记