medium网站评论轮播代码变量声明及d替代document问题求教

变量声明逻辑解释 #

你给出的代码本质是JS中多变量连续声明/赋值的写法，首先先给出等效的拆分写法方便理解：

var itemClassName = "carousel__photo";
items = d.getElementsByClassName(itemClassName);
totalItems = items.length;
slide = 0;
moving = true;

这里有一个需要注意的坑点：如果原代码第一行末尾的符号确实是分号，那么后面的items、totalItems、slide、moving四个变量都没有声明关键字，非严格模式下会默认成为全局变量，会有变量污染的风险，严格模式下会直接抛出ReferenceError报错。更合理的写法是把第一行末尾的分号改成逗号，所有变量都用var统一声明，保证作用域一致：

// 更规范的多变量声明写法
var itemClassName = "carousel__photo",
    items = d.getElementsByClassName(itemClassName),
    totalItems = items.length,
    slide = 0,
    moving = true;

各个变量的作用也非常清晰：

• itemClassName：存储轮播项的通用类名，后续需要修改类名时只需修改一处即可
• items：获取页面内所有符合类名的轮播项DOM元素集合
• totalItems：存储轮播项总数量，用于后续判断翻页的上下边界
• slide：存储当前展示的轮播项索引，默认从第0个开始计数
• moving：动画锁变量，用来避免轮播动画未完成时重复触发翻页操作，防止动画错乱

d替代document的说明 #

实现逻辑 #

d就是document的自定义别名，必然在这段代码的上方已经提前完成了声明，只是你看到的是代码片段所以省略了前置定义，声明逻辑如下：

// 一般是代码最开头就完成别名声明
var d = document;

使用原因 #

早年前端开发中这种别名写法非常常见，核心原因有两个：

• 缩减代码体积：如果代码中频繁调用document，用单字母别名可以减少代码字符数，压缩后体积更小，对资源加载速度的优化有微小的累积收益
• 优化作用域查找效率：document是挂载在全局对象上的属性，JS访问变量时会从当前作用域逐层向上查找，提前把document存到当前作用域的变量中，高频调用时可以减少查找层级，带来微小的性能提升

现在这种手写别名的写法已经不推荐了，现代前端构建工具会在打包压缩阶段自动完成全局对象引用的别名优化，手写单字母别名只会降低代码可读性，没有实际收益。

内容的提问来源于stack exchange，提问作者jerome richard A R