写"好"JS（上）｜ 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第5天
如何写才算是好的js代码？
写好JS的一些原则
1、各司其责
页面结构、页面表现和页面行为职能分离
2、组件封装
和ui打交道，把ui组件封装起来
3、过程抽象
处理ui交互的细节时，数据抽象、过程抽象让代码拥有更好的扩展性和复用性
函数式编程是一个很重要的编程范式
实例
先抄一遍代码，加上注释，然后删除代码，靠注释写出来
1.各司其职
写一个文档页面，点击按钮设置白天黑夜阅读模式
1）版本一
获取按钮组件，添加事件，js中使用if else处理逻辑，改变文字和背景颜色
2）版本二
通过加类名来实现样式改变
不在js中直接控制样式，js代码更简洁，实现了各司其职。相对于第一种来说，目的更加明确（黑夜模式）。
3）版本三
纯css实现，通过伪类选择器状态匹配，加兄弟节点修改页面内容
设置一个label for checkBox，直接点击label和点击checkBox是一样的效果
纯展示类的交互，寻求零js方案是一个很好的作法，但不强求。
2.组件封装
组件是指web页面上一个包含结构、样式、功能的单元。
好的组件应具备封装、正确、扩展、复用性。
1）实现
实现一个轮播图
-
html使用ul列表实现
-
css通过定位将图片重叠，用修饰符切换轮播图状态，动画使用css过渡
-
js实现切换行为，设计api：获取当前选择元素、获取当前元素下标、滑到下标元素位置、滑到下一个图片位置、滑到上一个图片位置。
slidePrevious(){
const currenIdx = this.getselectedItemIndex();
const previousIdx = (this.items.length + currentIdx - 1) % this.items.length;
this.slideTo(previousIdx);
}
//之所以用this.items.length + currentIdx - 1对length取模，是为了保证不取到负数。
//比如五张图片下标从0到4。currentIdx = 0,(5 + 0 - 1)%5 = 4;实现从第一张图片倒退取到第五张图片。
2）总结实现的基本方法：
用html设计结构、css展现效果、js设计行为：
行为：
- 将功能写成api
- 用事件控制运行流程
3）重构
插件化
缺点，组件不够灵活，控制点和元素都是绑定的
解耦：
- 将控制元素抽取成插件（前移、后移、下方的小圆点）
- 插件与组件之间通过依赖注入方式建立联系
构造函数里不再写很多的代码，而是通过注册插件的方式，把各事件注册进来，不需要时删除一个插件可以保证整个组件其他部分正常运行
但是插件化时，要删除插件还要把页面上的代码删掉，进一步优化可以将页面模块化
模板化
解耦：
将HTML模板化，更好扩展，在删除或者添加组件的时候只需要把html数据传给js，就能按组件直接装卸HTML和JS。
组件框架
将组件通用模型抽象出来。
思考：这个组件是否还有进一步改进空间呢？
插件和组件分离，优点是简单扁平化，坏处是没有考虑父子组件，可以将子组件作为父组件的插件，组件和插件融合。
只做了html模板化，暂时没有做css模板化，这就是为什么很多组件库里有css和js的组件方案
这样的话修改组件只需修改数据和生成方法。
总结：组件化本身是一种抽象，并没有违背各司其责的原则，写在同一个文件中时，生成结构、形成样式、控制行为仍然是各自负责的
3.过程抽象
- 它是处理局部细节控制的方法
- 它是函数式编程思想的基础应用
多次调用但又只允许执行一次的情况，可以换一种方法，封装成一个叫做once的函数，
1）高阶函数(HOF)
function HOF0(fn){
return function(...args){
return fn.apply(this,args);
}
}
- 以函数为参数，又以函数为返回值
- 高阶函数本身和参数函数是等价的，它是一种装饰器，是对传入函数的功能的装饰（功能增强）
常用的高阶函数
- Once (多次调用只执行一次)
- Throttle(节流函数，减少频率)
- Debounce(防抖)
- Consumer/2
- Iterative(迭代的)
为什么使用高阶函数？
纯函数不影响外部环境，任何时候调用都会得到相同的结果，是可预期的，没有副作用的
function add(x,y){
return x + y;
}
编程范式
编程范式是指编程时遵循的指导思想，编程语言通常是为了便于使用某种思想编程而设计的。
命令式（imperative）
- 面向过程（procedural）：C语言、FORTRAN
- 面向对象（object oriented）：C++，Java
声明式（declarative）
- 约束逻辑式（logic）Prolog
- 函数式（functional）Haskell,Erlang
- 声明式可以轻松实现多状态切换，具有更强的可扩展性，命令式就要添加多个逻辑分支甚至更加复杂了。
- js既有命名式特点又有声明式特点，可以使用两种风格来写
总结
这堂课给我打开了编程的新大门，以前我只知道面向过程编程和面向对象编程，也就是命令式的两种编程，但是还有声明式的编程，声明式具有可扩展性强的特点。而前端最重要的就是三剑客职能分离，便于修改功能和理解代码，为了更方便地修改功能，要模块化的编程（让页面上的功能组件可以整块拆卸、装载）又得对html解耦，对js进行函数式编程、使用高阶函数。也许扩展性强正是使用js的原因吧。
