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

重点内容：

• 1. JavaScript 好代码的标准
• 2. HTML/CSS/JS 各司其责
• 3. 组件的定义解析及特征
• 4. 组件封装基本方法
• 5. 利用原生JS实现电商网站轮播图
• 6. 过程抽象概念
• 7. 高阶函数使用模式
• 8. JavaScript 编程范式
• 9. 代码实践

1.写好js的一些原则

• 各司其职
  • HTML/CSS/JS各司其责
  • 提高代码的可读性
  • 应当避免不必要的由JS直接操作样式
  • 可以用class表示状态
  • 纯展示类交互寻求零JS方案
• 组件封装
• 过程抽象

2.组件封装基本办法

例如，用原生js实现一个电商网站的轮播图。

<1>结构：HTML

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

<2>表现：css

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

<3>行为:js

• API设计应保证原子操作，职责单一，满足灵活性。
• Slider
  • +getSelectedltem()
  • +getSelectedltemIndex()
  • +slideTo()
  • +slideNext()
  • +slidePrevious()

<4>行为：控制流

• 使用自定义事件来解耦。

总结

• 结构设计
• 展现效果
• 行为设计
  • API (功能)
  • Event（控制流）

3.组件封装的原则、步骤、重构

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

4.过程抽象

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

例如操作次数限制，包含一些异步交互和一次性HTTP请求。

5.高阶函数

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

<1>常用的高阶函数有

• Once (只执行一次)
  • 例如

function once(fn,context){
    let res;
    return function(){
        if(fn){
            res=context?fn.apply
(context,arguments):fn(...arguments)
            fn=null
          }
            return res;
         }
       }

• Throttle（节流）

function thro(func,wait){
    let timer
    return function(){
      if(!timer){
        timer=setTimeout(function(){
          func()
          timer=null
         },wait)
       }
     }
   }
   function func(){
     console.log(1)
   }
   document.querySelector('button').onclick=thro(func,1000)

• Debounce（防抖）

function debounce(fn,wait){
  var timer = null;
  return function(){
    if(timer !== null){
      clearTimeout(timer);
    }
    timer = setTimeout(fn,wait);
  }
}
function handle(){
  console.log(Math.random());
}
window.addEventListener("resize",debounce(handle,1000));

• Consumer/2
• Iterative（迭代）

const isIterable = obj => obj != null 
  && typeof obj[Symbol.iterator] === 'function';

function iterative(fn) {
  return function(subject, ...rest) {
    if(isIterable(subject)) {
      const ret = [];
      for(let obj of subject) {
        ret.push(fn.apply(this, [obj, ...rest]));
      }
      return ret;
    }
    return fn.apply(this, [subject, ...rest]);
  }
}

const setColor = iterative((el, color) => {
  el.style.color = color;
});

const els = document.querySelectorAll('li:nth-child(2n+1)');
setColor(els, 'red');

6.代码实践

1. 交通灯
2. 判断是否是4的幂
3. 洗牌

这三个代码实践具体见bytedance.feishu.cn/file/boxcnD…