从JavaScript

时间:2018-01-31 10:01:48

标签: javascript html performance

简介

我想知道是否有一种很好的方式来渲染或创建普通/普通JavaScript中的HTML元素,而我只是不知道它,我猜你可以创建一个函数接受某种对象/ JSON结构,然后以这种方式生成它。但是,您还必须在您创建的结构上占用大量线条。我试图看看我是否可以创建占用很少空间的解决方案(就代码行而言),并保持高性能速度。

我当前的解决方案

我目前只是以非常程序化的方式创建HTML元素,例如:

// assign the body to a variable
var body = document.getElementsByTagName("body")[0];

// create a generic div
var someElm = document.createElement("div");

// assign the div's attributes
someElm.id = "example";
someElm.className = "block";
someElm.innerHTML = "Hello World!";

// add to document
body.appendChild(someElm);

这样做是没有错的,当然,有时我喜欢这样做,例如,如果我有1个HTML元素,我想用JavaScript创建。它的速度远不够快,我认为没有性能问题,尽管我认为它可能更快,不知何故。

其他可能的解决方案

如果您正在做更多动态的事情,即向主体或父标签添加一堆HTML元素,我想一个不那么复杂的解决方案就像我和# 39;写在下面。它可能不是有史以来最快的解决方案,特别是对于嵌套的for循环,单独使它变慢。 但是,你在哪里进行性能与可读性比率的折衷?显然这是一个模糊的问题,因为一些问题需要100%的性能,而其他问题需要100%的可读性/可维护性,而其他问题需要介于两者之间。我说这个问题就像约70%的性能到~30%的可读性比例。

/**
 * this function is meant to take an array of objects 
 * obviously this is a basic implementation, it could be more complex
 * again, or more sophisticated at least
 */
function renderHTML (arr) {
    for (var i = 0, s = arr.length; i < s; i++) {
    var elm = arr[i];
    var temp = document.createElement(elm.tagType);
    delete elm.tagType; // no longer needed
    for (var key in elm) {
        if (key === "placeWithin") {
        elm[key].appendChild(temp);
      } else if(key === "innerHTML") {
        temp.innerHTML = elm[key];
      } else {
        temp.setAttribute(key, elm[key]);
      }
    }
  }
}


// assign the body to a variable
var body = document.getElementsByTagName("body")[0];

// create a generic div
var someElm = document.createElement("div");

// assign the div's attributes
someElm.id = "example";
someElm.className = "block";
someElm.innerHTML = "Hello World!";

// add to document
body.appendChild(someElm);

// create a bunch of elements for the above function
var arr = [];

// populate the above array
for (var i = 0, s = 100; i < s; i++) {
    var elm = {
    id : ("htmlID" + i),
    className : "thisisaclass",
    placeWithin : someElm, 
    tagType : "div",
    innerHTML : ("test" + i)
  };
  arr.push(elm);
}

// run the function above 
renderHTML(arr);

凌乱的解决方案

这是另一个解决方案,但是个人认为这个解决方案非常混乱,可能比其他两个解决方案更快,但我不是这个解决方案的粉丝。它确实有效,但至于可读性和可维护性,它非常有限。这只是我编写的初始方式的另一种方式,与使用该功能的解决方案不同,您对所创建的HTML元素的限制,仅仅是因为您已经这样做了只需将它们全部放入一个字符串中即可。

// assign the body to a variable
var body = document.getElementsByTagName("body")[0];

// create a generic div
var someElm = document.createElement("div");

// assign the div's attributes
someElm.id = "example";
someElm.className = "block";
someElm.innerHTML = "Hello World!";

// add to document
body.appendChild(someElm);

// populate someElm
for (var i = 0, s = 100; i < s; i++) {
    var htmlStr = "<div id='test" + i +"' class=''>";
    htmlStr += "test" + i;
    htmlStr += "</div>";
    someElm.innerHTML += htmlStr;
}

问题

有没有人知道更优雅的创建/呈现HTML元素的方法?

是否有更优雅的方式来创建HTML元素?我还要强调,我试图创建一种基本的呈现HTML的方式,没有起诉jQuery,只是因为它对我的个人需求来说太慢了。表现出 MAIN 的重点。

我知道我可以使用上面的代码进行微优化,以进一步提高性能(即使用for循环从数组末尾到数组开头计数,或者对多个变量使用一个var减速,+我而不是我+等等,我只是保持示例代码相当整洁,使其更具可读性。

1 个答案:

答案 0 :(得分:-1)

模板文字怎么样?

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

唯一的问题是他们在ES6中,所以如果你想在旧浏览器中使用你的代码,你将不得不使用一些转换器。

添加小提琴:

&#13;
&#13;
let greetings = {
  "esp": "hola",
  "eng": "hi",
  "fr": "bonjour"
};
let newHtml = "";
Object.keys(greetings).forEach(function(key) {
  newHtml += `<div id=${key}>${greetings[key]}</div>`;
});
window.document.getElementById("test").innerHTML = newHtml;
&#13;
<div id="test">

</div>
&#13;
&#13;
&#13;