JavaScript | 青训营笔记

这是我参与「第四届青训营」笔记创作活动的第1天。
以下内容主要介绍了写好js的一些原则。（仅提供一些思想，但不会具体展开说明。）

一、HTML、CSS、JavaScript各司其责

一个好的前端程序猿在编写代码时， 应尽量做好以下几点：

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

但并不是说一个网站页面真的 HTML/CSS/JS各干各的事，互相之间没有一点联系，而是不是在必需js的前提下，尽量不使用js直接操作样式。 但判断是否 HTML/CSS/JS各司其职并不能仅仅通过他们是写在一个文件或者两个文件来判断，而是看他们是否做的是自己该做的内容，有没有越界的问题。 实际上，有些时候 HTML/CSS/JS的结合才会做出更多更有趣的效果。这也只是一些建议，而非必须的规定。

二、组件封装

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

关于组件封装有以下几个方向需要注意：

• 结构设计

• 展现效果

• 行为设计

  API （功能）
  
  Event （控制流）

但组件封装不能只局限于把功能大致实现的状态，我们更应该思考，在功能完美展现的同时如何让组件的性能得到更好的优化。有些时候，我们封装的组件会显得过于繁琐、呆板、不够灵活。所以我们更需要接下来的步骤进行二次优化。

三次重构：

1. 插件化

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

2. 模板化

• 将HTML模板化，更易于扩展

3. 抽象化（组件框架）

• 将组件通用模型抽象出来

三、过程抽象

通过上面的三次重构，就可以使组件性能达到最优吗？不，我们还需要进行一些过程抽象的操作。

过程抽象 是用来处理局部细节控制的一些方法和函数式编程思想的基础应用，通常通过高阶函数（参数值为函数，返回值也为函数的一类函数）来实现。

高阶函数的特点是输入是函数，返回还是函数。输入的函数是实际的要执行的操作或要完成的功能的函数，但是该函数是作为过程被保留出来的，把原有的完整的处理代码中的共性的部分剥离出来(或抽象出来)，即抽象过程，业务的具体的代码作为函数被保留下来，也就是作为高阶函数的参数函数传递进去；然后，高级函数中完成抽象的过程后，把传递给装饰函数(也就是返回函数)的作用域、参数，原封不动的传递到输入函数(也就是实际完成操作的具体的函数)中并执行，和直接执行输入函数是一样的效果(加上抽象出的过程场景的处理代码)，因此书写上输入函数几乎就是原本要实现的代码函数。也就做到了不影响原函数的情况下，完成对原函数的包装(装饰)，函数拦截器的实现即来源于此。once、debounce、throttle的实现来源于纯粹的对过程抽象。纯函数则来源于将所有的影响外部环境的代码、非幂等的代码保留下来，抽象其他过程的实现。

常用的高阶函数：

• Once
• Throttle
• Debounce
• Consumer
• Iterative

编程范式又分为命令式和声明式。

(萌新小白，根据课程大致写的，不喜勿喷，谢谢。)