javascript - 可重复使用的网页元素

Question

我正在创建一个简单的网页，类似于“App Store”，向用户显示他们可以下载的软件列表。由于这将是一个 SharePoint 网站，因此我可以使用的内容有限，因此我将其严格限制为 HTML、CSS 和 JavaScript。由于我们将定期获得新软件的批准，因此网站将需要更新新元素，这意味着复制和粘贴代码而不是添加新软件信息。

有人对可重用性有什么建议吗？您以前的任何元素都以这种方式自动化网页吗？我非常乐于接受建议。

P.S 我不是网络开发人员，请对我的代码放轻松。

我有网站的基本模型，我在其中使用网格显示“卡片”。每个网格包含多个具有独特元素的网格。

HTML

    <main class="grid">
        <article>
            <img src="Assets/bananatag.png" alt="Sample Photo">
            <div class="text">
                <h3>Bananatag</h3>
                <p>Bananatag is an email tracking software launched in 2011. 
                    It notifies users whether the emails sent are successfully delivered and opened. 
                    Bananatag is used in email marketing where mass emails are sent to millions of 
                    targeted customers are response awaited.
                </p>
                <button onclick="alerts()">Request Software</button>
                <!-- <button onclick="requestPOST" id="APIPOST"> Request Software</button> -->
            </div>
        </article>
        <article>
                <img src="Assets/avaya.png" alt="Sample Photo">
                <div class="text">
                    <h3>Avaya Equinox</h3>
                    <p>Avaya Equinox for Windows turns your Windows PC into a powerful communications and collaboration 
                        system that can work in conjunction with your Avaya deskphone or enable you 
                        to work without compromise from anywhere. It provides SIP-based Voice-over-IP, IM/presence, web 
                        conferencing and point-to-point and multiparty video and easy to use 
                        contact centric workflows with contextual controls.
                    </p>
                    <button onclick="GET()"> Request Software</button>
                </div>
        </article>

CSS

.stack{
    padding: 20em;
    overflow: auto;
}
.grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1em;
    align-items: stretch;
    object-fit: cover;
    padding: 1em;
}
/*nested*/
.grid > article{
    display: grid;
    background: #eee;
    grid-template-columns: repeat(2, 20% 80%);
    grid-auto-rows: 80%;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 6px 0px rgbs(0,0,0,0.3);
    padding: 1em;

}
.grid > article img{
    max-width: 75%;
    min-width: 70%;
    border: white;
    box-shadow: 2px 2px 6px 0px rgbs(0,0,0,0.3);
    grid-auto-rows: 70px;
}
.text{
    padding: 20px 20px;
}
.text > button{
    background: rgb(93, 84, 84);
    border: 0;
    color: white;
    padding: 10px;
    width: 100%;
}

Answer 1

你可以创建一个文章工厂:

  function createObject() {
    var result = document.createElement("article");
    result.innerHTML = "<img><div class=\"text\"><h3></h3><p></p><button>Request Software</button></div>";
    return result;
  }

然后就可以用这个函数给预制对象添加内容了

  function setObject(imgsrc,h3,p,onclick) {
    this.querySelector("img").src = imgsrc;
    this.querySelector("h3").innerHTML = h3;
    this.querySelector("p").innerHTML = p;
    this.querySelector("button").onclick = onclick;
  }

然后像这样使用它:

<div id="contents"></div>

<script>
  var obj = createObject(); // later you can deep copy it, or just create a new object
  setObject.call(obj, "img.jpg", "Test object", "Description", ()=>alert('test'));
  contents.appendChild(obj);
</script>