Question

我对javascript很新，所以这个问题可能听起来很愚蠢。但是，替换变量和函数中的某些单词的正确语法是什么？例如，我有这个功能：

function posTelegram(p){
var data = telegramData;
$("#hotspotTelegram").css("left", xposTelegram[p] +"px");
if (p < data[0] || p > data[1]) {
$("#hotspotTelegram").hide()
} else {
$("#hotspotTelegram").show()
}
};

“电报”这个词重复了很多，每当我创建一个新的热点时，我都会手动插入单词来代替每行中的“电报”。什么是更聪明的编写代码的方式，这样我只需要写一次“电报”？

Answer 1

您无法始终避免这种重复（这对所有编程语言都是如此）。

有时，您可以创建泛型函数或泛型类，例如可以嵌入所有数据的类：

Thing = function(key, xpos) {
    this.$element = $('#hotspot'+key);
    this.xpos = xpos;
};

Thing.prototype.pos = function (p, data) {
    this.$element.css("left", this.xpos[p] +"px");
    if (p < this.data[0] || p > this.data[1]) {
        this.$element.hide()
    } else {
       this.$element.show()
    }
};

我们可以想象这可以像这样调用：

var telegramThing = new Thing('telegram', xposTelegram);
...
telegramThing.pos(p, data);

但如果没有关于您确切问题的更多信息，就很难提出更具体的建议。

我建议您阅读一些关于OOP和javascript的内容，因为它可以帮助您使复杂程序更清晰，更简单，更易于维护。例如，在这里使用Thing类将启用

没有多次定义＆＃34; #hotspotTelegram＆＃34;代码中的字符串
重复使用逻辑并避免使用与＃34; telegram＆＃34;
主应用程序逻辑中没有Thing逻辑（通常在另一个Thing.js文件中）

但是不要抽象太多，它会产生相反的效果。如果您不使用对象，请尝试保留有意义的变量名称。

Answer 2

将类似/相关数据分组到数据结构中，而不是每个位都有一个变量。

缓存调用jQuery的结果

使用参数

function posGeneral(p, word){

  // Don't have a variable for each of these, make them properties of an object
  var data = generalDataThing[word].data; 

  // Don't search the DOM for the same thing over and over, use a variable
  var hotspot = $("#hotspot" + word);
  hotspot.css("left", generalDataThing[word].xpos[p] +"px");

  if (p < data[0] || p > data[1]) {
    hotspot.hide()
  } else {
    hotspot.show()
  }
};

Answer 3

var t = "Telegram";
var $_tg = $('#hotspotTelegram');

$_tg.css("left", "xpos"+t[p] + "px"); // not sure about this line, lol
$_tg.hide();
$_tg.show();

等

Answer 4

你可以创建一个选择器作为变量，类似这样

function posTelegram(p){
  var data = telegramData;
  var $sel = $("#hotspotTelegram");

  $sel.css("left", xposTelegram[p] +"px");
  if (p < data[0] || p > data[1]) {
    $sel.hide()
  } else {
    $sel.show()
  }
};

避免不得不一遍又一遍地写同一个词

4 个答案: