这是我参与「第五届青训营 」伴学笔记创作活动的第3天。
一、本堂课重点内容
1.如何写好JavaScript
●各司其职 ●组件封装 ●过程抽象
2.写代码应该关注的要点
二、详细知识点介绍
写好JS的三大原则
🔺各司其职
①让html,css,js职能分离
②避免不必要的由JS直接操作样式
③可以用class来表示状态，使代码具有特定意义，例如使一段代码的需求从“样式改变”转为“黑夜白天浏览效果改变”
④纯展示类交互寻求零JS方案
举例：深夜食堂（黑夜/白天浏览效果）
版本一
版本二
改进：将样式控制部分交给CSS板块，JS不负责
版本三
变化：零JS方案，仅有html,css
🔺组件封装
①组件是指Web页面上抽出来一个个包含模板（HTML）、样式（CSS）、功能（JS）的单元
②好的UI组件具备封装性、正确性、拓展性、复用性
③实现组件的步骤：
●结构设计
●展示效果
●行为设计：API（功能）、Event（控制流）
④三次重构：
●插件化：【解耦】将控制元素抽取成插件，插件与组件之间通过依赖注入方式建立联系
●模板化：【解耦】将HTML模板化，更容易拓展
●抽象化（组件框架）：将通用的组件模型抽象出来
🔺过程抽象
①用来处理局部细节控制的一些方法
②应用函数式编程思想
③鼓励使用高阶函数
⭕纯函数：一个函数的返回结果只依赖于它的参数，并且在执行过程里面没有副作用，输出是可预期的。例如add(4,5)必定输出9
⭕非纯函数：执行时会产生副作用，修改了外部传进来的对象
⭕高阶函数HOF：以函数作为参数，以函数作为返回值，常用于作为函数修饰器
综上，可以使用高阶函数将非纯函数构建成纯函数，使程序的测试、调试更方便且具有可预期性，使程序的执行过程尽可能减少副作用，减少对外部的影响。
④常用的高阶函数：Once,Throttle,Debounce,Consumer,Iterative
⑤编程范式：命令式（面向过程/面向对象）与声明式（逻辑/函数）
JS作为一种现代编程语言，编程范式是复合的，既可以写出命令式风格的代码（怎么实现？），也可以写声明式风格的（实现什么？）。
举例：声明式与命令式的区别
⭕实现效果：鼠标点击转换状态
⭕命令式
⭕声明式：用了高阶函数
⭕思考：如果有更多的状态需要转换呢？哪种风格更便于拓展？
> 如图，用的是声明式，只需要添加红色框的代码，很容易就能添加新的状态"warn"
> 但是如果使用命令式，JS部分需要增加新的if分支语句，同时CSS需要增加新的状态样式。显而易见，假如状态太多的时候，使用命令式是非常麻烦的。
三、总结
●过程抽象/HOF/装饰器
●命令式/声明式
