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

一、写好JS的一些原则

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

二、 组件封装

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

• 例子：

  • 用原生JS写一个电商网站的轮播图，应该怎么做？

• 结构：HTML

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

• 表现：CSS

  • 使用CSS绝对定位将图片重叠在同一个位置，轮播图切换的状态使用修饰符（modifier）,轮播图的切换动画使用CSS traansition

• 行为：JS

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

• HOF

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

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

常用的高阶函数

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

编程范式（命令式与声明）

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

• 例子：
• 总结：
• 过程抽象 / HOF / 装饰器
• 命令式 / 声明式

四、Leftpad事件

事件本身的槽点：

• NPM 模块粒度
• 代码风格
• 代码质量/效率

 function leftpad(str, len, ch) {
      str = String(str);
      var i = -1;
      if (!ch && ch !== 0) ch = ' ';
      len = len - str.length;
      while (++i < len) {
          str = ch + str;
      }
      return str;
  } 

• 代码更简洁
• 效率提升

 function leftpad(str, len, ch) {
      str = "" + str;
      const padLen = len - str.length;
      if(padLen <= 0) {
        return str;
      }
      return (""+ch).repeat(padLen)+str;
  } 

• 性能更好

五、交通灯状态切换（实现一个切换多个交通灯状态切换的功能）

交通灯：版本一

交通灯：版本二（数据抽象）

交通灯：版本三（过程抽象）

交通灯：版本四（异步+函数式）

六、 判断是否是4的幂

七、洗牌

洗牌-错误写法

洗牌-正确写法

洗牌-使用生成器

八、分红包

分红包-[切西瓜法]

分红包-[抽牌法]