Javascript 避免重复写同一个单词

我对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()
}
};

函数后置图（p）{
var数据=数据；
$（“#热点图”）.css（“左”，xposTelegram[p]+“px”）；
如果（pdata[1]）{
$（“#热点图”）.hide（）
}否则{
$（“#热点图”）.show（）
}
};

“电报”这个词重复了很多次，每次我做一个新的热点，我都会手动插入这个词来替换每一行中的“电报”。如果我只需要写一次“电报”，那么编写代码的更聪明的方法是什么呢

---

等等。

您不能总是避免这种重复（这对所有编程语言都是通用的）

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

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()
    }
};

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

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

• 不在代码中多次定义“#hotspotTelegram”字符串
• 重复使用逻辑，避免用“电报”以外的东西编写相同的代码
• 主应用程序逻辑中没有Thing逻辑（通常在另一个Thing.js文件中）

---

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

您可以创建一个选择器作为变量，如下所示

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()
  }
};

函数后置图（p）{
var数据=数据；
变量$sel=$（“#热点图”）；
$sel.css（“左”，xposTelegram[p]+“px”）；
如果（pdata[1]）{
$sel.hide（）
}否则{
$sel.show（）
}
};

将相似/相关数据分组到数据结构中，而不是为每个位设置一个变量

缓存调用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()
  }
};

函数posGeneral（p，word）{
//不要为每一个都设置变量，将它们设置为对象的属性
var data=generalDataThing[word]。数据；
//不要一遍又一遍地在DOM中搜索相同的内容，使用变量
var热点=$（“#热点”+单词）；
css（“左”，generalDataThing[word].xpos[p]+“px”）；
如果（pdata[1]）{
hotspot.hide（）
}否则{
hotspot.show（）
}
};

虽然这回答了这个问题，但这是一种不好的做法，因为它降低了可读性，使代码维护更加困难。使用具有自动完成功能的编辑器怎么样？

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()
  }
};

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()
  }
};