Question

我正在编写一个刽子手游戏并且它工作得很好，但这个变量块确实非常难看。我知道我已经在PHP中做了一些事情，然后我将我需要的所有变量放入一个数组并将它们抽出来。有没有办法用Javascript抓住我的DOM元素来完成这个？

let _ = [];
let correct = [];
let wrong = [];
let underscores = document.querySelector('.underscores');
let correctBlock = document.querySelector('.correct');
let wrongBlock = document.querySelector('.wrong');
let scoreBlock = document.querySelector('#score');
let btn = document.querySelector('.btn');
let hint = document.querySelector('.hint');

Answer 1

我认为你指的是PHP中的双$？（已经有一段时间了）

不，抱歉。

我建议您创建一个地图以保存内容：

let score = {
  _: [],
  correct: [],
  wrong: []
}

let blocks = {
  underscores: document.querySelector('.underscores'),
  correct: document.querySelector('.correct'),
  wrong: document.querySelector('.wrong'),
  score: document.querySelector('#score')
}

let btn = document.querySelector('.btn');
let hint = document.querySelector('.hint');

用法：

score.wrong.push('...')

Answer 2

你能得到的最短时间是：

let _ = [],
  correct = [],
  wrong = [],
  underscores = document.querySelector('.underscores'),
  correctBlock = document.querySelector('.correct'),
  wrongBlock = document.querySelector('.wrong'),
  scoreBlock = document.querySelector('#score'),
  btn = document.querySelector('.btn'),
  hint = document.querySelector('.hint');

我无法看到一种概括/压缩它的方法，因为您选择的元素都是不同的。老实说，这很好！

Answer 3

不是真的。我喜欢将控件分组到一个结构中，但我不能说它更好。

let ctrls = {
    underscores: document.querySelector('.underscores'),
    correctBlock: document.querySelector('.correct')
};

Answer 4

您可以使用并行分配进行映射。更短，但我个人不会这样做：

let [underscores, correctBlock, wrongBlock, scoreBlock, btn, hint] = 
  ['.underscores', '.correct', '.wrong', '#score', '.btn', '.hint']
  .map(selector => document.querySelector(selector))

Answer 5

声明静态变量，例如函数，使用 const 关键字引用元素（而不是 let ）。不要重复let / const关键字，只需使用comma operators：

const underscores = document.querySelector('.underscores'),
      correctBlock = document.querySelector('.correct'),
      wrongBlock = document.querySelector('.wrong');

等

是否有更优雅的方式来声明我的javascript变量？

5 个答案: