这是我在青训营的第五天，发表的第三篇文章
什么是好的JavaScript代码
JavaScript代码原则
- 各司其职
- 组件封装
- 过程抽象
一、各司其职
HTML、CSS、Javascript职能分离
const btn = document.getElementById('modeBtn');btn.addEventListener('click', (e) => { const body = document.body; if(e.target.innerHTML === '🌞') { body.style.backgroundColor = 'black'; body.style.color = 'white'; e.target.innerHTML = '🌜'; } else { body.style.backgroundColor = 'white'; body.style.color = 'black'; e.target.innerHTML = '🌞'; }});
上面的代码可以简单的控制页面白天黑夜效果的切换，但是这个代码有改进的空间
const btn = document.getElementById('modeBtn');btn.addEventListener('click', (e) => { const body = document.body; if(body.className !== 'night') { body.className = 'night'; } else { body.className = ''; }});
这一版的JavaScript代码不直接操作样式，而是操作css，做到了css、JavaScript分离
- HTML/CSS/JS 各司其责
- 应当避免不必要的由 JS 直接操作样式
- 可以用 class 来表示状态
- 纯展示类交互寻求零 JS 方案
二、组件封装
组件封装一个轮播图
- 结构设计
- 展现效果
- 行为设计
- API （功能）
- Event （控制流）
结构：轮播图是一个典型的列表结构，我们可以使用无序列表ul元素来实现。
表现：
- 使用 CSS 绝对定位将图片重叠在同一个位置
- 轮播图切换的状态使用修饰符（modifier）
- 轮播图的切换动画使用 CSS transition
行为：控制流
函数式编程
- 过程抽象
用来处理局部细节控制的一些方法函数式编程思想的基础应用
例子：操作次数限制
function once(fn) { return function(...args) { if(fn) { const ret = fn.apply(this, args); fn = null; return ret; } }}const list = document.querySelector('ul');const buttons = list.querySelectorAll('button');buttons.forEach((button) => { button.addEventListener('click', once((evt) => { const target = evt.target; target.parentNode.className = 'completed'; setTimeout(() => { list.removeChild(target.parentNode); }, 2000); }));});
高阶函数
HOF
- 以函数作为参数
- 以函数作为返回值
- 常用于作为函数装饰器
为什么要使用高阶函数
编程范式
- 函数式编程（Functional Programming: FP）是一种 编程范式（指计算机编程中的典范模式或方法，就是一种思维方式），属于结构化编程，用于描述数据（函数）之间的映射关系
- 注意：函数式编程中的函数，不是指程序中的函数（方法），而是数学中的函数（映射关系），如：y = f(x)，指 x 和 y 之间的关系
- 常见的编程范式有：过程化（命令式）编程、面向对象编程、声明式编程等
- 命令式编程：过程化编程：最原始的传统编程，将问题抽象为一系列步骤，然后通过编程方式将这些步骤转换为程序指令集，这些指令集按照一定顺序排列
- 声明编程：以数据结构的形式来表达程序执行的逻辑。只需要定义好该如何处理数据，不需要指定具体实现；SQL 语句就是最明显的一种声明式编程的例子
- 面对对象：将待解决问题抽象为面向对象的程序中的对象，利用封装使每个对象都拥有个体的身份；程序就是成堆的对象，彼此通过信息的传递，请求其它对象进行工作；面向对象包括三个基本概念：封装性、继承性、多态性
