Question

我有一个页面可以对网络中的前15个网站（来自Alexa）进行评级，并且它使用javascript来编写新的评级，但效率非常低。每个评级有6个变量。它使用变量为每个评级编写一个代码块。有没有办法让它使用一个代码块来编写所有15个评级？这是一些代码：

var topID1 = 1;
var topWidth1 = 100;
var topPageURL1 = 'www.google.com'
var topPageTitle1 = 'Google';
var topRate1 = rateStar9;
var topMargin1 = 0;

$('#topSites1').html('<div class="meter-wrap" style="margin-top: ' + topMargin1 + 'px;"><div class="meter-value" style="background-color: ' + topSitesBack + '; width: ' + topWidth1 + '%;"><div class="meter-text"><span class="toplist"><span class="topnum">' + topID1 + '. </span><span class="favico" id="ico1"><img src="img/blank.gif" style="width:16px;height:16px;"></img></span><a href="http://' + topPageURL1 + '/">' + topPageTitle1 + '</a><span class="rating" style="width: ' + topRate1 + 'px;"><img src="img/blank.gif" style="width:100%;height:16px;"></img></span></span></div></div></div>');
$('#ico1').css('background', 'url(' + topPageFavicon + topPageURL1 + ') no-repeat');

（重复15次）

Answer 1

使用javascript对象调用它。你可以通过对象来获取信息：

var all_ratings = {

    'GOOGLE': {
        topID: 1,
        topWidth: 100,
        topPageURL: 'something',
        topPageTitle: 'something_else',
        topRate: rateStar,
        topMargin: 'something'
    },

    'YAHOO': {
        topID: 1,
        topWidth: 100,
        topPageURL: 'something',
        topPageTitle: 'something_else',
        topRate: rateStar,
        topMargin: 'something'
    },
    ..MORE
}

你可以做（使用$.each）:(因为我相信你使用的是jQuery）：

$.each(all_ratings, function (index, item)
{
    var outerDiv = $('<div>', {
        'class': 'meter-wrap',
        style: 'margin-top: ' + item.topMargin + 'px;'
    }),
        innerDiv = $('<div class="meter-value" style="background-color: ' + topSitesBack + '; width: ' + item.topWidth + '%;">').html('<div class="meter-text"><span class="toplist"><span class="topnum">' + item.topID + '. </span><span class="favico" id="ico1"><img src="img/blank.gif" style="width:16px;height:16px;"></img></span><a href="http://' + item.topPageURL + '/">' + item.topPageTitle + '</a><span class="rating" style="width: ' + item.topRate + 'px;"><img src="img/blank.gif" style="width:100%;height:16px;"></img></span></span></div>');
    innerDiv.appendTo(outerDiv);
    $('#topSites').append(outerDiv);
})

小提琴：http://jsfiddle.net/maniator/QWAhV/

旁注：您可以使用topPageTitle变量代替使用index，而{@ 1}}变量将返回您最多的页面，例如“GOOGLE”或“YAHOO” '，小提琴：http://jsfiddle.net/maniator/QWAhV/8/

Answer 2

操纵已知非常慢的DOM。您可以尝试以下方式：

缓存您对$('#topSites1')的引用，以便jQuery不必每次都搜索它。
从DOM中分离节点，将其添加到其中，然后在准备就绪时重新附加它。这将减少大量的DOM刷新，并可能显示出不错的性能提升。为此，您需要使用jQuery方法detach()，然后使用appendTo()

Answer 3

您需要使用每个函数使用循环：jquery .each()

Answer 4

让我们用老式的OO清洁它。

首先，定义一个TopEntry“类”：

function TopEntry(id, width, pageURL, pageTitle, rate, margin, sitesBack, pageFavicon) {
    this.id = id;
    this.width = width;
    this.pageURL = pageURL;
    this.pageTitle = pageTitle;
    this.rate = rate;
    this.margin = margin; 
    this.sitesBack = sitesBack;
    this.pageFavicon = pageFavicon;
    this.createDiv = function() {
        return $('<div class="meter-wrap" style="margin-top: ' + this.margin + 'px;"><div class="meter-value" style="background-color: ' + this.sitesBack + '; width: ' + this.width + '%;"><div class="meter-text"><span class="toplist"><span class="topnum">' + this.id + '. </span><span class="favico" id="ico' + this.id + '"><img src="img/blank.gif" style="width:16px;height:16px;"></img></span><a href="http://' + this.pageURL + '/">' + this.pageTitle + '</a><span class="rating" style="width: ' + this.rate + 'px;"><img src="img/blank.gif" style="width:100%;height:16px;"></img></span></span></div></div></div>')
    }
}

然后，让我们声明一个数组并实例化一些TopEntry对象：

// create some array
var sites = new Array();
// Create object
var site = new TopEntry(1, 100, 'www.google.com', 'Google', rateStar9, 0, 'white', 'http://www.google.com/favicon.ico');
// push the object into the array
sites.push(site);

最后附加div的代码（考虑到你在加载时这样做）：

// Manipulate DOM: Following Neal append Approach
$(document).ready(function(){
  $.each(sites, function (index, item) {
      $('#topSites').append(item.createDiv()); 
      $('#ico' + item.id).css('background', 'url(' + item.pageFavicon + ') no-repeat');
  });
});

对于标记，您只需要一个div作为容器：

<div id="topSites"></div>

当然，没有jsfiddle：http://jsfiddle.net/Q8duz/2/

，没有javascript答案是完整的

嗯，就是这样;）。

获取一个脚本来循环遍历多个变量

4 个答案: