这是我参与「第五届青训营 」伴学笔记创作活动的第 3天
以下内容主要介绍了写好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 （控制流）
但组件封装不能只局限于把功能大致实现的状态，我们更应该思考，在功能完美展现的同时如何让组件的性能得到更好的优化。有些时候，我们封装的组件会显得过于繁琐、呆板、不够灵活。所以我们更需要接下来的步骤进行二次优化。
三次重构：
插件化 将控制元素抽取成插件 插件与组件之间通过依赖注入方式建立联系 模板化 将HTML模板化，更易于扩展 抽象化（组件框架） 将组件通用模型抽象出来 三、过程抽象 通过上面的三次重构，就可以使组件性能达到最优吗？不，我们还需要进行一些过程抽象的操作。
过程抽象 是用来处理局部细节控制的一些方法和函数式编程思想的基础应用，通常通过高阶函数（参数值为函数，返回值也为函数的一类函数）来实现。
高阶函数的特点是输入是函数，返回还是函数。输入的函数是实际的要执行的操作或要完成的功能的函数，但是该函数是作为过程被保留出来的，把原有的完整的处理代码中的共性的部分剥离出来(或抽象出来)，即抽象过程，业务的具体的代码作为函数被保留下来，也就是作为高阶函数的参数函数传递进去；然后，高级函数中完成抽象的过程后，把传递给装饰函数(也就是返回函数)的作用域、参数，原封不动的传递到输入函数(也就是实际完成操作的具体的函数)中并执行，和直接执行输入函数是一样的效果(加上抽象出的过程场景的处理代码)，因此书写上输入函数几乎就是原本要实现的代码函数。也就做到了不影响原函数的情况下，完成对原函数的包装(装饰)，函数拦截器的实现即来源于此。once、debounce、throttle的实现来源于纯粹的对过程抽象。纯函数则来源于将所有的影响外部环境的代码、非幂等的代码保留下来，抽象其他过程的实现。
常用的高阶函数：
Once Throttle Debounce Consumer Iterative 编程范式又分为命令式和声明式。
