好的js代码 ｜ 青训营笔记

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

1. 各司其职 js css html 分离

• 最好不要直接用 js 操纵样式
• 改变样式可以改变 class
• 改变样式最好是不出现 js, 可以结合checkbox和label和css兄弟选择器实现一些效果

2. 组件封装

• 使用自定义事件解耦
• 使用依赖注入将次要功能插件化, 简化构造函数
• 使用模板字符串将 HTML 元素模板化, 修改 js 即可改变 HTML
• 将组件通用模型抽象出来, 包含 plugin 和 render 方法, 通过继承实现 slider 组件

3. 过程抽象 将同一个需求抽象出来

• 高阶函数
  • 以函数作为参数
  • 以函数作为返回值
  • 常用于作为函数修饰器
  • 节流是执行第一次, 在以后的时间里都不执行
  • 防抖是执行时间内的最后一次

function throttle(fn, time = 500){ 
let timer; return function(...args){ 
if(timer == null){ 
fn.apply(this, args); 
timer = setTimeout(() => { timer = null; }, time) } } }

• 纯函数: 输入确定, 那么结果也确定, 没有副作用
• 声明式比命令式更容易扩展

4. 代码好不好要看使用场景
5. leftpad事件: 可以使用repeat函数替代while循环以提高性能, 但是在leftpad场景下使用性能提升不大
6. 算法

• 是否是4的幂, 位运算和正则表达式
• 洗牌, 均匀洗牌算法, 使用生成器减少计算
• 切西瓜算法, 洗牌算法生成红包分隔符