2

我有一个 JavaScript 对象，其中包含一些信息。

我有 2 个可以想到的选项来从这个对象创建 HTML。我想知道哪一种是正确的做事方式，这只是所有偏好吗？

1) 用 Ja​​vaScript 循环遍历这个数组并用 Jquery 创建 HTML？

2）Ajax 将对象发布/获取到 PHP 并循环通过该对象（php 数组）并以这种方式创建 HMTL？然后返回一个带有 HMTL 的 json 编码对象并将其附加到 div？

我目前所做的构建

    var OutterDiv = $(document.createElement('div'));

    for loop{
        OutterDiv.append("<span>SOME INFO</span>");


        var InnerDiv = $(document.createElement('div'));
        for loop{
            InnerDiv.append("<span>SOME INFO</span>");
            InnerDiv.append("<span>SOME INFO</span>");
        }

        OutterDiv.append(InnerDiv);
    }


    $("#content").append(OutterDiv);
4

3 回答 3

2

为什么不遍历对象并从 JavaScript 创建一个 HTML 字符串？然后在需要的地方插入该字符串？我相信这是您完成您想做的事情的最快方式。主要思想是连接字符串比插入 DOM 元素更快，并且可能比 Http 请求引起的延迟更快。

**编辑**

显然，IE 在字符串连接方面速度较慢（大吃一惊），使用数组更好。例子 ：

var html = [];
for (...) {
   html.push( <some html content from your object here> );
}
$(selector).html(html.join(''));

// find the elements you need to handle and perform bindings here
// ex: $('#someelment').click(...);

这可能是你能得到的最快的。

**更新**

虽然使用 JavaScript 执行构建 HTML 的任务通常仍然更快，但经过一些测试，似乎连接字符串或构建数组并不比创建文本节点快。该测试可以在jsfiddle.net上查看和分叉，或者在这里用于存档目的：

function runTest(testFn, duration) {

    var endTime = +new Date() + duration;
    var runs = 0;
    var charCount = 0;

    while (+new Date() < endTime) {
        charCount += testFn();
        ++runs;
    }        
    teardown();

    //console.log(testFn.title, 'ran', runs, 'times.');
    $('#log').append($('<div></div>').text(testFn.title + ' ran ' + runs + ' times (' + (charCount/1000) + ' cps).'));
}

///

function teardown() {
    while (targetDiv.firstChild) {
        targetDiv.removeChild(targetDiv.firstChild);
    }
}

///

var testData;
var sample, sampleData;
function generateTestData() {
    testData = {};
    for (var i=0; i < (Math.random() * (sample[1]-sample[0])) + sample[0]; i++) {
        testData['item'+i] = randomString();
    }
}


function randomString()
{
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz 0123456789";

    for( var i=0; i < (Math.random() * (sampleData[1]-sampleData[0])) + sampleData[0]; i++ )
        text += possible.charAt(Math.floor(Math.random() * possible.length));

    return text;
}

function shuffle(arr) {
    var len = arr.length;
    var i = len;
    while (i--) {
        var p = parseInt(Math.random()*len);
        var t = arr[i];
        arr[i] = arr[p];
        arr[p] = t;
    }
    return arr;
};

///

var $targetDiv = $('#targetDiv');
var targetDiv = document.getElementById('targetDiv');

///

function jq() {

    var html = [];
    var count = 0;

    for (var key in testData) {
        count += testData[key].length;
        html.push('<div>' + testData[key] + '</div>');
    }

    $targetDiv.html(html.join(''));

    return count;
}

function inner() {

    var html = [];
    var count = 0;

    for (var key in testData) {
        count += testData[key].length;
        html.push('<div>' + testData[key] + '</div>');
    }

    targetDiv.innerHTML = html.join('');

    return count;
}


function dom() {

    var root = document.createElement('div');
    var node;
    var count = 0;

    for (var key in testData) {
        count += testData[key].length;
        node = document.createElement('div');
        node.appendChild(document.createTextNode(testData[key]));
        root.appendChild(node);
    }
    targetDiv.appendChild(root);

    return count;            
}

///

jq.title = 'jQuery .html';
inner.title = 'innerHTML';
dom.title = 'DOM';

///

sample = [10, 100];
sampleData = [100, 1000];
generateTestData();

var duration = 1000;
var testFn = shuffle([jq, inner, dom]);

$.each(testFn, function(k, fn) {
    setTimeout(function() { runTest(fn, duration); }, 0);
});
​

总的来说，虽然每种方法在某些情况下（大量或少量数据、长字符串或短字符串等）都更有效，但 DOM 方法似乎在所有情况下都更快。

所以你有它。感谢GGG提供的初始测试用例。

于 2012-05-18T15:28:34.827 回答
1

用javascript做。如果您已经拥有 javascript 中的数据，那么额外前往服务器让 PHP 执行此操作（让 javascript 代理该连接）是一种浪费。如果这是一个密集的计算，由于速度的原因让 PHP 来做它可能是有意义的，但否则，似乎是一种浪费。

于 2012-05-18T16:29:47.620 回答
0

您可以使用 JSON.stringify(array) 在 JavaScript 中对数组进行编码，然后使用 $array=json_decode($_POST['jsondata']); 在您的 PHP 脚本中检索它。

于 2012-05-18T15:28:11.470 回答