Question

我创建了一个简单的函数来遍历for循环并显示垂直时间轴。我能否就我迄今为止创造的内容得到一些意见？

到目前为止，有没有办法改进/优化我创建的内容？

理想情况下，我所追求的是最小化重复，无关呼叫等的方法。

function timeline( start, abbr, hours )
{
  var a = 0,
      start,
      abbr,
      hours,
      time = document.getElementById('timeline');

  hours = (!hours) ? 12 : hours;

  for(a = a + start; a <= hours + start; a++)
  {
    if(a > 12)
    {
      time.innerHTML += '<li>' + (a - 12) + ':00 ' +
                          ( abbr == 'AM' ? 'PM' : 'AM' ) +
                        '</li>';

      time.innerHTML += '<li>' + (a - 12) + ':30 ' +
                          ( abbr == 'PM' ? 'AM' : 'PM' ) +
                        '</li>';
    }
    else
    {
      time.innerHTML += '<li>' + a + ':00 ' +
                          ( abbr == 'AM' ? (a == 12) ? 'PM' : 'AM' : 'PM' ) +
                        '</li>';

      time.innerHTML += '<li>' + a + ':30 ' +
                          ( abbr == 'AM' ? (a == 12) ? 'PM' : 'AM' : 'PM' ) +
                        '</li>';
    }
  }
}

timeline( 9, 'AM', 12 );

接受的函数参数：

开始：开始时间（0-12）
abbr：Am / PM缩写
小时：显示的小时数

Answer 1

每次都不要使用innerHTML +=，使用数组存储html部分，然后使用join方法将它们连接到字符串并将字符串分配给innerHTML

Answer 2

请参阅updated code：

function timeline( start, abbr, hours )
{
    var a = 0,
        abbr = abbr || 'AM',
        hours = hours || 12,
        time = document.getElementById('timeline'),
        timelineHTML = [];

    for (a = a + start; a <= hours + start; a++)
    {
        if (a % 12 === 0) {
            abbr = abbr === 'PM' ? 'AM' : 'PM';
        }

        timelineHTML.push('<li>' + (a % 12 === 0 ? 12 : a % 12) + ':00 ' + abbr + '</li>');
        timelineHTML.push('<li>' + (a % 12 === 0 ? 12 : a % 12) + ':30 ' + abbr + '</li>');
    }

    time.innerHTML = timelineHTML.join('');
}

timeline( 9, 'AM', 24 );

最重要的变化是缩小DOM操作 - 我们将未来的元素存储在一个数组中并立即附加它们。

其次，我删除了不必要且令人困惑的if..else块。 'AM'和'PM'之间的变化每12小时发生一次，因此一个简单的模数操作符就可以了。

(a % 12 === 0 ? 12 : a % 12)可能仍然令人困惑的部分，但保持显示 12:30 AM 而不是 0:30 AM 。如果需要，您可以将其更改为短(a % 12)。

最后，您使用了hours = (!hours) ? 12 : hours，而简单hours = hours || 12更具可读性。

Answer 3

使用：

而不是innerHTML

createElement - 创建新的LI元素
insertAfter - 将其插入到最后

将新节点添加到现有节点。这比将innerHTML添加到现有的innerHTML要快。

Answer 4

如果您要触摸元素的innerHTML，通常认为这是最佳的。此外，您现有的for循环必须每次都处理添加，最好事先定义循环的结束点。

var newHTML = '';
var finish = hours+start;

for(a=a+start; a <= finish; a++)
{
    if(a > 12)
    {
        newHTML += '<li>' + (a-12) + ':00 ' + ( abbr == 'AM' ? 'PM' : 'AM' ) + '</li>';
        newHTML += '<li>' + (a-12) + ':30 ' + ( abbr == 'PM' ? 'AM' : 'PM' ) + '</li>';
    }
    else
    {
       newHTML += '<li>' + a + ':00 ' + ( abbr == 'AM' ? (a==12) ? 'PM' : 'AM' : 'PM' ) + '</li>';
       newHTML += '<li>' + a + ':30 ' + ( abbr == 'AM' ? (a==12) ? 'PM' : 'AM' : 'PM' ) + '</li>';
   }
}

time.innerHTML += newHTML;

Answer 5

其他人都覆盖了广泛的笔触（尤其是@Lapple），所以这里有一些非常小的悬挂物品：

hours = (!hours) ? 12 : hours;

可缩短为：

hours = hours || 12;

...对于大多数JavaScript程序员来说，这是一个更具可读性的习惯用法。

编辑：您的评论：

我不知道这个特定成语的名称。像大多数编程语言一样，JavaScript在布尔表达式上使用short-circuit evaluation，即如果解释器已经可以告诉表达式的值将来自X || Y，则给定X（因为X是“truthy” “），它永远不会困扰评估Y。所以你可以做true || delete_everything()这样的事情，确信delete_everything永远不会被调用。同样在X && Y如果X是“假的”，则永远不会评估Y。

这对你来说可能都是旧帽子。然而，不那么常见的JavaScript是你可以称之为“最后价值”的评价（这是维基百科页面使用的术语，但我不确定它是否是一个常用术语）。而不是像在Java中那样从布尔表达式返回true或false，或者像在C中一样从1或0返回，而是在JavaScript中返回最后一个值< / em>评估。

取表达式hours || 12。如果hours是undefined（JavaScript中的假值），那么解释器将只返回第二个操作数（因为在OR中，表达式的“真实性”总是等于当第一个操作数是假的时，第二个操作数的真实性。但是，如果hours是真实的 - 比如9或"banana"，则表达式会在评估后返回短路并返回该值。重复一遍，但在代码中：

var hours; // declared but has the value undefined console.log( hours || 12 ); // `hours` (undefined) is falsy // => 12 // so return the second operand hours = 9; console.log( hours || 12 ); // `hours` is truthy--short-circuit & return `hours` // => 9 hours = "banana"; console.log( hours || 12 ); // `"banana"` is also truthy // => "banana"; console.log( 12 || hours ); // `12` is truth--short-circuit & return `12` // => 12

顺便提一下，在像Ruby一样有||=运算符的语言中，这个习惯用语的形式更为简短：

hours = nil # `nil` is like `null` hours = hours || 12 # just like in JavaScript # => 12 # but the below is equivalent: hours = nil hours ||= 12 # => 12

所以在Ruby中，看到这样的方法并不罕见：

def foo(bar, baz = nil) # `baz` defaults to `nil` when no 2nd argument is given baz ||= get_default_baz() puts bar + baz # `puts` is like `print` or `echo` in other languages end def get_default_baz # a trivial example "WXYZ" end foo('ABC', 'DEF') # => ABCDEF foo('ABC') # => ABCWXYZ

（结束编辑）

在这里：

var a = 0, start, abbr, hours, time = document.getElementById('timeline'); hours = (!hours) ? 12 : hours;

...你在第4行宣布hours，然后在第7行分配，当你可以同时做两件事时：

var a = 0, // ... hours = hours || 12 // ... ;

JavaScript：优化函数以创建垂直时间轴

5 个答案:

编辑：您的评论：

（结束编辑）