这是我参与「第四届青训营」笔记创作活动的第2天。在今天的学习中我学到了很多在JavaScript语法之外的知识，在这次课程中，我受益匪浅。老师在课程中，讲述了学习JavaScript的三点原则：

1.各司其职

各司其责的意思是在前端开发中，应该将不同的功能分开
html负责结构，css负责表现，js负责行为。这样可以增强代码的可复用性。
老师举例了切换夜间模式的例子，其中第一种是在js中修改状态，这显然增加了之后需求修改后的更改难度
第二种代码是在html中用class设置两种不同的状态，在js中实现转换，这样很好的实现了html负责结构，js负责行为。
第三种则使用了css，实现了零js方案。纯展示类交互可以用零js方案

2.组件封装

在这一板块，老师以轮播图为例来介绍组件封装。
组件是指Web页面上抽出来一个个包含模版（HTML）、功能（JS）和样式（CSS）的单元。
好的组件具备封装性、正确性、扩展性、复用性。
组件封装的基本方法是
-   结构设计
-   展现效果
-   行为设计
    1.  API （功能）
    2.  Event （控制流）

改进：
1.插件化 将控制元素抽取成插件，插件与组件之间通过依赖注入方式建立联系，可以增加拓展性
2.模板化  将HTML模板化 
3.抽象化  抽象成通用组件

3.过程抽象

用来处理局部细节控制的一些方法，函数式编程思想的基础应用。
高阶函数：函数的运行结果是返回一个函数称为高阶函数
高阶函数模板hof0
 ````
function HOF0(fn) {
    return function(...args) {
      return fn.apply(this, args);
    }
  }
````
其他所有高阶函数都可以在hof0的基础上进行修改。
常用的高阶函数：Once；Throttle；Debounce；Consumer；Iterative
once：
`function once(fn) {
  return function(...args) {
    if(fn) {
      const ret = fn.apply(this, args);
      fn = null;
      return ret;
    }
  }
}
`//once保证函数执行一次
Throttle：
`function throttle(fn, time = 500){
  let timer;
  return function(...args){
    if(timer == null){
      fn.apply(this,  args);
      timer = setTimeout(() => {
        timer = null;
      }, time)
    }
  }
}`//保证固定时间执行一次
Debounce：
`  function debounce(fn, dur){
  dur = dur || 100;
  var timer;
  return function(){
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, dur);
  }
}
  `//保证在最后停直函数变化的时候，函数执行
Consumer：
`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]);
  }
}  `
在函数使用中，要多使用纯函数，少使用非纯函数
命令式声明式区别：
命令式注重how，而声明式注重what

个人总结

在本节课中我学到了很多js编程时的规范，正如老师所说，一个程序员要让自己的代码实用性更高，
在本节课中，我学会了js编程的三个原则，受益匪浅，也会将今日所学用到之后的代码优化中去。

学习JavaScript（1）|青训营笔记

1.各司其职

2.组件封装

3.过程抽象

个人总结