JavaScript 1 丨青训营笔记这是我参与「第四届青训营」笔记创作活动的的第2天深夜食堂--结论 ·HTML/

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

深夜食堂--结论

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

组件封装

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

实现组件的步骤：

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

重构：插件化

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

重构：模板化

重构：抽象化（组件框架）

过程抽象

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

高阶函数

Once 为了能够让“只执行一次”的需求覆盖不同的事件处理，我们可以将这个这个需求剥离出来。这就是过程抽象。 HOF 以函数作为参数、返回值。常用于作为函数装饰器。

Once
Throttle 节流函数:选择方向后限制频率
Debounce 编辑完成后保存超过多少毫秒后保存

function debounce(fn, dur){
  dur = dur || 100;
  var timer;
  return function(){
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, dur);
  }
}

Consumer / 2 每隔一段时间调用function 延时调用

function consumer(fn, time){
  let tasks = [],
      timer;
  
  return function(...args){
    tasks.push(fn.bind(this, ...args));
    if(timer == null){
      timer = setInterval(() => {
        tasks.shift().call(this)
        if(tasks.length <= 0){
          clearInterval(timer);
          timer = null;
        }
      }, time)
    }
  }
}

Iterative 纯函数

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

纯函数/非纯函数：纯函数可以随时调用多次测试非纯函数会改变外部状态，比如return i++。 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 1 丨 青训营笔记