1.1 三大原则
1.1.1 原则一：各司其职
核心： 让HTML，CSS和JavaScript职能分离。 案例： 如何一个网页的白天黑夜的主题切换的功能呢？
- 初学者(爱好者)：大概率会直接用使用 JS 原生获取、操作 DOM，判断状态后使用
body.style.backgroundColor修改对应元素的样式,利用e.target.innerHTML来改变主题的文字标识。（我的第一反应也是这个） - 工程师(有一定经验的人)：改变对应元素的对应的主题样式的 class，以修改样式，这种方法更加简洁，有效分隔了 JS 和 CSS 的职能，提高了可读性，也便于后期的维护，例如后期加上页面的文字颜色要随着主题的变化而变化，这个时候我们只需要在主题的class上加上对应的样式即可，不需要再动js。
- 更高级：这个案例本质上变化的只有样式，可以仅仅使用CSS来操作，例如利用伪类选择器。
总结： 避免不必要的由js来操作样式，可以用class来表示状态，当仅仅只是展示类的交互时尽力尝试零js的方案，多多练习才能手到擒来！
1.1.2 原则二：组件封装
核心： 好的UI组件具备正确性、扩展性、复用性。 组件的概念：指web页面上抽出来一个个包含HTML、CSS、和JS的单元。 案例： 如何实现一个商城的轮播图？
-
基础：HTML用典型的无序列表结构，CSS使用绝对定位将图片重叠在一个位置，轮播图的切换使用动画 transition，JS用一些常见的API例如settimeout等等
-
升级：使用插件化。上述那样写的灵活复用性太差了，万一有部分功能需要删除就需要改动大量的代码，要是能把功能插件化，删除的时候就只需要删除那一个就好了。
-
插件化就是解耦的过程：
- 插件化：将控制元素抽取成插件
- 插件与组件之间通过依赖注入的方式建立联系
-
总结： 总结： 结构设计、展现效果、 行为设计
学习永无止境，永远没有最优的代码，要不断学习！
1.1.3 原则三：过程抽象
核心： 包括对数据抽象等等，应用函数式编程思想，例如React Hooks是一种典型的过程抽象。
为了能够让某一需求覆盖不同的时间处理，我们可以将这个需求剥离出来。这个过程我们成为过程抽象。
高阶函数（ HOF）： 以函数为参数&&以函数为返回值&&常用于作为函数装饰器。
-
都有哪些高阶函数：
- once：单次触发函数
- throttle：节流函数
- debouncd：防抖函数
- consumer：同步操作转化为异步函数
- lterative（JQuery 时代的产物）
纯函数： 无副作用&&与外部状态、调用次数等均无关&&结果可预期，输入一定则输出一定。
- 使用纯函数的好处：结果一定，很好检测
1.2.编程范式
定义： 是一类典型的编程风格，是指从事软件工程的一类典型的风格（可以对照方法学）。
分类： 分为命令式与声明式。
1.2.1 命令式编程
例如：
- 运算语句；
- 循环语句（for、while）；
- 条件分支语句（if else、switch）；
- 无条件分支语句（return、break、continue）。
// 命令式，注重怎么做，容易理解，因为符合自然编程思路
let list = [1, 2, 3, 4];
let mapl = [];
for(let i = 0; i < list.length; i++) {
mapl.push(list[i] * 2);
}
1.2.2 声明式编程
例如：ES6的箭头函数、map 、reduce 、filter
// 声明式，注重做什么，相对简洁，具有更强的可拓展性
let list = [1, 2, 3, 4];
const double = x => x * 2;
list.map(double);
1.3 总结
本节课老师和我们分享了自己总结的一些写好JavaScript的原则和编程范式的分类，和什么是声明式编程，什么是命令式编程。
