写好JS的一些原则

01各司其职

• 让HTML、CSS和Javascript职能分离
• 应当避免不必要的由JS直接操作样式
• 可以用class来表示状态
• 纯展示类交互寻求零JS状态

例：写一段JS，控制一个网页，让它支持浅色和深色两种浏览模式
版本1:

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

版本2:

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

版本3:

02组件封装

• 组件是Web页面上所抽取的模板(HTML)、功能(JS)与样式(CSS)的单元,自从React,Vue等前端框架在市面上大量使用之后,组件化开发逐渐成为了前端主流开发方式。
• 组件设计原则: 好的UI组件具备正确性、扩展性、复用性
• 实现组件的步骤: 结构设计、展现效果、行为设计
• 三次重构：插件化、模板化、抽象化（组件框架）

例:用原生JS实现一个电商网站的轮播图

1. 结构(HTML)设计: 轮播图是一个典型的列表结构,我们可以使用无序列表元素来实现

2. 展现效果(CSS):

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

3. 行为设计(JS):

• API(功能)

• Event(控制流)
  

重构:插件化

解耦

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

重构:模板化

• 将HTML模板化，更易于扩展

重构:组件框架

• 将组件的通用模型抽象出来

03过程抽象

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

高阶函数

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

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

• 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);