这是我参与「第五届青训营」伴学笔记创作活动的第 1 天

如何写好Javascript

各司其职-让html、css和javascript职能分离

实现夜间模式切换

通过点击对象的innerHTML判断当前模式，并进行相应切换

问题：

维护性差

toggle body 的class，并在css中定义好不同模式的样式

优点：
- js代码更简洁
- 实现结构、表现、行为分离

Untitled 1.png

伪类选择器 :checked 实现，无需js，使用checkbox的label作为按钮

<input id="modeCheckBox" type="checkbox">
<label for=”modeCheckBox”><\label>

label作为按钮来toggle input的状态

Untitled 2.png

总结

html、css、js各司其职
避免不必要的js直接操作样式
用class来表示状态
纯展示类交互需求零js方案

组件封装-好的UI组件具备正确性、扩展性、复用性

轮播图 carousel

实现原理
- absolute绝对定位将图片重叠
- 使用修饰符切换轮播图的状态
- 使用transition实现动画
- 状态绑定实现底部控件和图片的状态一致
API
- 实现前后切换
- 实现底部控件和图片的交互
改进空间
- 解耦合：插件与组件之间通过依赖注入方式建立联系
  - 原constructor太长
  - 插件化实现底部空间、前一个、后一个
  - 通过函数registerPlugins来控制插件的启用
- HTML模板化
  - 减少对html的修改
  - 将图片作为数据传给模板
- 抽象化
  - 抽象成组件框架

模板化抽象化与各司其职不冲突，各司其职指html、css、js完成其应该完成的工作，模板化则是将html写在js中来方便维护，他们的职责不变。

过程抽象-应用函数式编程思想

用来处理局部细节控制的一些方法
函数式编程思想的基础应用

click事件多次触发

设置once: true属性值

将调用函数封装成过程函数的高级抽象

function once(fn) {
	return function(...args) {
		if(fn) {
			const ret = fn.apply(this, args);
			fn = null; //将fn设置为null，第二次进入once函数时不会执行
			return ret;
		}
	}
}
const foo = once(() => { console.log('bar'); });

数据抽象：将门、房间抽象

过程抽象：将开的动作抽象

HOF 高阶函数

以函数为参数

以函数为返回值
- 常用高阶函数
  - Once
  - Throttle 节流函数，限制一段时间记录一次
  - Debounce 防抖，多次点击时不记录，等不操作时再记录
  - Consumer / 2 延时调用
  - Iterative 迭代多个元素
- 为什么要用高阶函数
  
  减少非纯函数，降低维护难度
  
  便于测试，高阶函数也为纯函数，可以分开测试

命令式与声明式

//命令式，注重怎么做
let list = [1, 2, 3, 4];
let mapl = [];
for (let i = 0; i < list.length; i++) 
	mapl.push(list[i] * 2);
}
//声明式，更简洁，注重做什么
const double = x => x * 2;
list.map(double);

声明式可拓展性更强

Leftpad 事故背景

写代码关注

风格、效率、约定、使用场景、设计

leftpad优化

repeat方法优化，二次幂级，性能更好，可读性更强

Javascript代码质量优化之路

交通灯

setTimeout嵌套调用实现定期
使用递归调用setTimeout
过程抽象为poll函数来轮询（太复杂）
异步加wait函数

判断是否是4的幂

不断除以4得到1
位操作除以4
数学方法，二进制只有一个1，1后面有偶数个0
转换为字符串用正则表达式实现数学方法

洗牌

sort函数来进行交换，错误，序号小的在前面的可能性更大
原地逐张选牌
yield仅取前n张牌

分红包

切西瓜-切最大的一块，最后相对平均
抽牌法-抽出区间分隔大小

总结

本次课程让我意识到前端开发需要严格遵循职责分离的原则。通过学习，我了解到了避免不必要的js直接操作样式，用class来表示状态，纯展示类交互需求零js方案等技巧，让我明白如何解耦合，使代码更加简洁易懂，提高代码的可维护性。我还了解到了如何使用HTML模板化，抽象化，高阶函数，命令式编程，声明式编程等技巧，使得前端代码更加简洁易懂。

此外，学习还让我意识到前端开发也需要算法基础，考虑如何优化代码，学会使用算法来实现现实中的问题。总之，这次学习让我更加深入地了解了前端开发的基础知识，并且让我更加善于使用这些知识来解决实际问题。

如何写好JavaScript ｜ 青训营笔记