这是我参与「第四届青训营 」笔记创作活动的的第2天 主要内容为JS
写好JS的三大原则
- 各司其职:让HTML，CSS和JavaScript职能分离
- 组件封装:好的UI组件具备正确性，扩展性，复用性。
- 过程抽象:应用函数式编程思想
1.各司其职
任务:实现网页的深浅模式切换。
写法1
通过js来控制css,js和css操作在了一起耦合度太高，没有使得CSS和JS各司其职。
写法2
将浅色模式和深色模式在css中书写对应效果 然后通过js来控制类名的增删来控制，将js和css分开达到了一定的解耦效果。
写法3
纯CSS写法 通过伪类选择器来实现样式 达到了切换模式的效果 彻底的达到了解耦，CSS和JS各司其职。
总结
- HTML结构 CSS样式 JS行为各司其职
- 应当避免不必要的由 JS 直接操作样式
- 可以用 class 来表示状态
- 纯展示类交互寻求零 JS 方案
2.组件封装
任务:用原生js实现一个轮播图
组件的含义:指Web页面上抽出来一个个包含模版（HTML）、功能（JS）和样式（CSS）的单元。好的组件具备封装性、正确性、扩展性、复用性。
初步写法
- HTML:结构使用经典的Ul嵌套li的方式实现
- CSS:样式部分使用CSS绝对定位将图片定位到同一个位置，使用transition来实现图片切换的动画效果
- JS:创建了一个slider类，类里面实现了轮播图切换效果的方法。
对于下面的四个小圆点，由于它的状态是跟图片捆绑在一起的，所以为了达到解耦的效果，使用自定义事件来实现小圆点与图片的对应关系
重构写法1:
初步的写法不够灵活，任何结构等都不可以改变，如果改变一点结构那么html，css和js都需要去更改，所以第一次重构为插件化。
将四个小圆点还有左右按钮的逻辑抽象成一个函数，通过slider类中的register方法来进行插件初始化，这样如果以后需求变化想要删除四个小圆点或者是删除左右按钮，那么直接不注册就可以了，较为灵活。同时将slider类的构造函数变得简短，可维护性强。
重构写法2:
我们的结构是写死在了html代码中，如果不想使用某一插件还需要手动的去html代码中删除结构，同时如果有五张图那么还需要去更改结构，所以为了让html更易扩展，所以第二次重构为模板化。
html仅有一行,轮播图的图片通过创建slider对象的时候传递进去，slider中通过render方法将html结构渲染到页面上，其他插件也有render方法，里面是对应的html结构，然后action里面是插件初始化的配置。
重构写法3:
slider的类里面的render函数还有注册插件的思想可以单独拿出来，创建组件的通用模型也就是简易的组件框架。
总结
3.过程抽象
1.高阶函数
为什么使用高阶函数
纯函数是无状态的函数，如果我们输入是a，输出是b的话 纯函数它任何时候输入a都是输出b，优点是无副作用，同时结果是可预期的，方便后期测试
2.编程范式
js既有命令式也有声明式的特点，所以可以使用两种风格的编程范式
命令式主要强调怎么做
声明式主要强调做什么
