javascript - 通过 Javascript 压缩重复使用的 HTML(基于变量的变化)

Question

就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the help center寻求指导。




9年前关闭。




我有一个页面，该页面由一个包含多个组件 div 的容器组成。标记中有许多这样的容器(套件类型和版本)，我根据用户通过选择框所做的选择来显示/隐藏适当的容器。
组件 div 的内容发生了变化，但 HTML 标记基本相同。
组件 HTML 框架是:

<div class="docs basicEdition720">  // 2nd class here is the suite type/version
  <div class="component" title=" /* component title here */ ">
    <p class="componentName"> /*component name here */ </p>
    <p class="componentType"> /*component type here */ </p>
    <p class="links"> /*component links here */ </p>
  </div>
</div>

这里的重点是我有“whizbang”组件，它可能出现在几个不同的容器中，并且它具有完全相同的内容，只要容器的版本相同。当容器的版本发生变化时，whizbang 组件的唯一变化通常是链接。
例如，在 基本 Edition 720 套件类型和版本，whizbang 组件的内容将与 中的 whizbang 组件完全相同企业 720 版套件。
关系:
职务/姓名
组件标题和名称永远不会根据版本而改变。它们具体地直接相互关联。如果是“A”，那么“B”。
类型
组件类型偶尔会根据我们正在使用的组件名称的 VERSION 更改。对于 7.2.0，“bojangle”组件可能是类型“admin”，但对于版本 7.0.4，可能是类型“user”。如果'A'和'1'，那么'B'。如果'A'和'2'，那么'C'。
有时类型与名称具体相关，例如，“gadget”组件始终具有“reference”类型。
链接
链接总是根据组件的版本而变化。
客观的:
我只想在文档中一次更新不同组件版本的链接，而不是我目前正在做的十几个。
我希望 javascript 根据已知的套件类型和版本自动生成容器。我可以给它一个框架来知道哪些组件属于哪里，例如:

<div class="docs basicEdition720">  // Here we have the basic edition of the
  <div class="comp gadget">         // suite, version 7.2.0. That means I know 
  <div class="comp bojangle">       // we have the gadget, bojangle, widget, 
  <div class="comp widget">         // and gizmo components.
  <div class="comp gizmo">
</div>

<div class="docs basicEdition704">  // Now we have the basic edition suite, 
  <div class="comp gadget">         // version 7.0.4. Knowing that, I know we 
  <div class="comp gizmo">          // only have the gadget, gizmo,and whatsit
  <div class="comp whatsit">        // components.
</div>

<div class="docs enterpriseEdition720">  // Now we have the enterprise edition
  <div class="comp gadget">              // suite, version 7.2.0. Hey, looks 
  <div class="comp bojangle">            // pretty much the same as the basic 
  <div class="comp widget">              // edition of the same version...
  <div class="comp gizmo">
</div>

<div class="docs enterpriseEdition704">  // Ditto for enterprise suite v7.0.4.
  <div class="comp gadget">
  <div class="comp gizmo">
  <div class="comp whatsit">
</div>

/* more suites and versions */

或者如果最好在 JS 中处理版本控制，那也很好。
我写了这么多基本的 JS，但没有实现我的目标，而且我对 JS 的态度很差，以至于我不愿给你任何好的开始/jsFiddle。基本上，它应该使用 HTML 框架并根据变量和它知道的套件版本来填补空白。
到目前为止，我一直在使用类似的东西

var gadgetName = " long name here ";
var bojangleName = " long name here ";
var gadgetLink720 = " version 720 link here";
var bojangleLink720 = " version 720 link here";
var gadgetTitle = " Gadget is a thingie that does...";
var bojangleTitle = " Bojangle is this thing that does...";

$(this).html("<div class=\"component\" title=\"" + myTitle + "\">\
    <p class=\"componentName\">" + myName +"</p>\
    <p class=\"componentType\">Setup Guide</p>\
    <p class=\"links\"><a href=\"\" class=\"html\">HTML</a> <a href=\"\" class=\"pdf\">PDF</a></p>\
  </div>");
});

但一直很不成功。 注意:这不是我所完成的最好的例子，我实际上(在某一时刻)让它阅读了父 div 类是什么，以知道要自动放入哪个版本等。
TL;博士
“WTF老兄？!这件事太大了!你丑又蠢。”
我知道，我很抱歉。我不知道我是否可以使它更简洁。 TL;DR 是:
“哎呀，我有一个可以工作的页面，但我一遍又一遍地重复使用相同的内容。每次我们有新版本时，我应该像一个优秀的苦工一样手动更新几十个链接，而不是编写脚本单源解决方案。忽略我。
:-(

Answer 1

Mustache是最好的框架之一

您可以查看demo here