Javascript - 用 Javascript 编写 HTML 代码的更简洁的方法(取代 jQuery）

Javascript - Cleaner way to write the HTML code in Javascript (replaced jQuery)

本文关键字：Javascript 方法 取代 jQuery 简洁 编写 HTML 代码      更新时间：2023-09-26

我正在努力从应用程序中删除所有jQuery代码，以代替纯Javascript。我一直在努力完成它并进行正常工作的更改，但代码本身似乎比 jQuery "更多"。

我

感觉有一种比我的方法更干净的方法来编写这段代码。

以下是代码的摘录：

var aTestUl = document.createElement('ul');
var aTestLi = document.createElement('li');
var bTestBtn = document.createElement('a');
bTestBtn.className = "gc_bTest";
bTestBtn.id = "gc_bTest_" + aTestVarId;
bTestBtn.href = "#";
bTestBtn.dataset.body = aTestVarBody;
bTestBtn.innerHTML = "Call test function 1";
var bTestCTestDiv = document.createElement('span');
bTestCTestDiv.innerHTML = " - ";
var cTestBtn = document.createElement('a');
cTestBtn.className = "gc_cTest";
cTestBtn.id = "gc_cTest_" + aTestVarId;
cTestBtn.href = "#";
cTestBtn.dataset.body = aTestVarBody;
cTestBtn.innerHTML = "Call test function 2";
var aTestText = document.createTextNode(aTestVarId + ' - '
    + aTestVarBody + ' - ');
aTestLi.appendChild(aTestText);
aTestLi.appendChild(bTestBtn);
aTestLi.appendChild(bTestCTestDiv);
aTestLi.appendChild(cTestBtn);
aTestUl.appendChild(aTestLi);
document.getElementById('gc_aTest_list').appendChild(aTestUl);

这实质上是一个带有标题的列表："someId - someBody - function 1 href - function 2 href"。还有一些代码不包括在附加另一个ul和li...在 aTestLi 附加到 aTestUl 之前，它结束。

这只是jQuery中的几行代码。有没有更简单的方法可以做到这一点？

作为细分，如果代码有点混乱，它会执行以下操作：

1. Create a master <ul> to append to the master <div>
2. Create a list <li> to append to the master <ul>
3. Create some text to put in the <li>
4. Create an <a> element (with attributes, such as id, class, ...)
5. Create another <a> element (with similar attributes)
6. Put the text, hyphens and the two <a> elements in the list
(<li>TEXT - <a /> - <a /></li>)
7. Attach the <li> to the master <ul>
(<ul><li>TEXT - <a /> - <a /></li></ul>)
8. Attach the master <ul> to the master <div>
(<div><ul><li>TEXT - <a /> - <a /></li></ul></div>)

这是代码在应用程序中经常做的事情，所以如果它可以更简单，那就太好了。

谢谢！

编辑：由于某些要求，jQuery和其他外部库对此应用程序无效。

编辑：要使用正确的术语，"Vanilla Javascript"是要求。

编辑：HTML输出

<div class="gc_list" id="gc_profile_list">
    <ul>
        <li>
            ID9723 - AA00BB11CC2 - 
            <a class="gc_f_values" id="gc_f_values_ID9723" href="#" data-device="AA00BB11CC2">Get F Values</a>
            <span> - </span>
            <a class="gc_i_values" id="gc_i_values_ID9723" href="#" data-device="AA00BB11CC2">Get I Values</a>
            <ul>
                <li>Action: Save</li>
                <li>Action: Delete</li>
                <li>Action: Archive</li>
                <li>Action: Pass</li>
            </ul>
        </li>
    </ul>
</div>

首先，JavaScript 是一种函数式语言。 与任何函数式语言一样，以下规则适用

  1. 不要重复自己
  2. 将函数视为值
  3. 支持表达式而不是语句

按照上面的规则，你最终会得到一个微型jQuery式的库。这就是卡拉约翰所说的@Mitch。我做了一些小的重构，以便您可以看到我要去哪里。生成的代码将更简洁，更易于修改/重用

function CreateTestElement(element, options) {
    document.createElement(element);
    if (options) {
        element.className = options.className;
        element.id = options.className + "_" + options.id;
        element.href = options.href;
        element.dataset.body = options.body;
        element.innerHTML = options.innerHTML;
    }
    return element;
}
function CreateText(text){
    return document.createTextNode(text);
}
var bTestBtn = CreateElement('a', {
    className: "gc_bTest",
    id: aTestVarId,
    href: "#",
    body: aTestVarBody,
    innerHTML: "Call test function 1"
});
var bTestCTestDiv = CreateElement('span', {
    innerHTML: " - "
});
var cTestBtn = CreateElement('a', {
    className: "gc_cTest",
    id: aTestVarId,
    href: "#",
    body: aTestVarBody,
    innerHTML: "Call test function 2"
});
var aTestUl = CreateElement('ul')
                .appendChild(CreateElement('li'))
                .appendChild(CreateText(aTestVarId + ' - ' + aTestVarBody + ' - '))
                .appendChild(bTestBtn)
                .appendChild(bTestCTestDiv)
                .appendChild(cTestBtn);
document.getElementById('gc_aTest_list').appendChild(aTestUl);

这只是jQuery中的几行代码。有没有更简单的方法可以做到这一点？

使用纯 JavaScript？不。JQuery的全部内容在于它简化了这些东西，允许你"少写"，以达到与纯JS相同的结果。

我

感觉有一种比我的方法更干净的方法来编写这段代码。

没有，不使用其他库（或编写你自己的）。

为了代码紧凑（尽管不一定是可读性），有时它会生成较小的代码来生成 HTML 字符串，然后让赋值.innerHTML为您创建大多数 DOM 节点。

如果您有重复的 HTML，则可以将重复部分的生成放入单个函数中，并使用不同的参数多次调用它。 下面是以这种方式完成的示例：

var aTestUl = document.createElement('ul');
var aTestLi = document.createElement('li');
var actions = "<ul><li>Action: Save</li><li>Action: Delete</li><li>Action: Archive</li><li>Action: Pass</li></ul>";
function createButton(cls, id, body, msg) {
    return '<a href="#" class="' cls + '" id="' + id +
           '" data-body="' + body + '">' + msg + '</a>';
}
var liHTML = aTestVarId + ' - ' + aTestVarBody + ' - ' +
  createButton("gc_bTest", "gc_bTest_" + aTestVarId, aTestVarBody, "Call test function 1") +
  '<span> - </span>' +
  createButton("gc_cTest", "gc_cTest_" + aTestVarId, aTestVarBody, "Call test function 2") + 
  actions;
aTestLi.innerHTML = liHTML;
aTestUl.appendChild(aTestLi);
document.getElementById('gc_aTest_list').appendChild(aTestUl);

仅供参考，如果您正在运行支持ES6模板字符串的环境，则这种类型的文本操作将非常适合替换ES6模板字符串中的文本。

相关文章：