消除相似脚本冗余：动态XML价格查询脚本优化诉求

哇，13岁就能自己搞定动态价格页面的实现，还想着优化代码，这已经超棒了好吗！😎 你说的每个价格线都写一遍重复脚本的问题，确实可以用「函数」这个超级好用的工具来解决——把重复的代码打包成一个可复用的「小工具」，之后只需要简单调用它就行，不用每次都写一大串重复内容。

第一步：把重复代码做成可复用函数 #

先把你脚本里重复的部分（除了document.write内容之外的所有代码）抽出来，写成一个函数。比如假设你的原脚本大概是这样：

// 每个价格线都重复的XML查询代码
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var xmlDoc = this.responseXML;
    // 这里是每个脚本不同的部分：获取对应价格节点
    var price = xmlDoc.getElementsByTagName("price1")[0].childNodes[0].nodeValue;
    // 这里也是不同的部分：输出的文字内容
    document.write("商品A价格：" + price);
  }
};
xmlhttp.open("GET", "你的动态XML文件地址", true);
xmlhttp.send();

我们把重复逻辑打包成函数，把不同的部分做成参数传进去：

// 把这个函数放在页面<head>里，或者所有价格调用代码的最前面
function showPrice(outputTemplate, xmlNodeName) {
  // 下面都是原来重复的代码，不用再复制粘贴啦
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var xmlDoc = this.responseXML;
      // 从XML里拿到对应节点的价格
      var price = xmlDoc.getElementsByTagName(xmlNodeName)[0].childNodes[0].nodeValue;
      // 把模板里的{price}替换成实际价格
      var finalContent = outputTemplate.replace("{price}", price);
      // 输出最终内容
      document.write(finalContent);
    }
  };
  xmlhttp.open("GET", "你的动态XML文件地址", true);
  xmlhttp.send();
}

第二步：调用函数显示每个价格 #

现在你要显示多少条价格线，只需要写一行调用代码就行！比如：

// 商品A的价格，对应XML里的price1节点
showPrice("商品A当前售价：{price}", "price1");
// 商品B的促销价，对应XML里的price2节点
showPrice("商品B促销价：{price}元", "price2");
// 商品C的会员价，对应XML里的price3节点
showPrice("会员专享 | 商品C价格：{price}", "price3");

这样是不是简洁太多了？不管你要加多少条价格线，都只需要加一行showPrice(...)就行，不用再复制粘贴一大串重复脚本了。

额外小提示 #

• 记得把函数代码放在所有调用代码的前面，不然页面找不到这个函数会报错哦～
• 如果你的XML结构不是用getElementsByTagName获取价格，也可以调整函数里的查询逻辑，只要把不同的部分做成参数就好。

真的超厉害，13岁就能有优化代码的意识，继续加油呀！

内容的提问来源于stack exchange，提问作者Farhat