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

关于JavaScript的理解笔记

什么是JavaScript?

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。

写好Javascript的原则

各司其职
组件封装
过程抽象

另外还要关注代码的代码风格、质量、效率、性能。
例如课程中讲到的当年的Leftpad事件：

//原代码
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;
  }

通过对比可以看出，修改过的版本代码更简洁、效率提升。因此我们也要规范我们的代码风格，力求写出更简洁高效的代码~

各司其职

让HTML、CSS和JavaScript职能分离，各司其职，避免不必要的由JS直接操作样式；可以用class来表示状态；纯展示类交互寻求零JS方案。

组件封装

组件

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

实现组件的步骤/基本方法

结构设计
展现效果
行为设计==>包括API（功能）、Event（控制流-使用自定义事件来解耦）

三次重构

插件化

将控制元素抽取成插件

插件与组件之间通过依赖注入方式建立联系

模板化

将HTML模板化，更易于扩展

抽象化（组件框架）

将组件通过模型抽象出来

过程抽象

用来处理局部细节控制的一些方法

函数式编程思想的基础应用

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

（Once高阶函数⬇⬇⬇）

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

高阶函数

HOF HOFO =>默认函数
Once => 单次函数
Throttle => 节流函数
Debounce => 防抖函数
Consumer => 间隔、延时
Iterative => 可迭代函数（批量操作）

编程范式

命令式与声明式

命令式/指令式

命令式编程关注计算机执行的步骤，告诉编辑器如何做

声明式

声明式编程以数据结构的形式来表达程序的执行逻辑。告诉编辑器做什么，但不指定具体要怎么做。如何做的部分被封装到“高阶函数”。

总结

通过青训营的课程的学习，我对JavaScript有了更多的认识，扩展了很多以前没有学过的知识，也对javascript的运用有了一定的思路。但是依然存在很多不理解的地方，对算法的理解和运用也不够熟练，仍然需要课后去加深对这方面的学习。即便课程上老师分享的干货很多，但是javascript的内容依然有很多，我还是需要在课后继续对其学习吸收。

关于JavaScript的理解笔记 | 青训营笔记