JavaScript：优化创建垂直时间线的功能

Question

我创建了一个简单的函数来迭代 for 循环并显示垂直时间线。 我可以就我迄今为止所创建的内容获得一些意见吗？

有没有办法改进/优化我迄今为止创建的内容？

理想情况下，我追求的是最小化重复、无关调用等的方法。

这是我的工作代码： http://jsfiddle .net/bL25b/

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 );

接受的函数参数：

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

Answer 1

请参阅更新的代码：

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 上午。如果需要，您可以将其更改为短的 (a % 12)。

最后，您使用了hours = (!hours) 吗？ 12：小时，而简单的小时=小时|| 12 更具可读性。

Answer 2

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

Answer 3

使用：

1. createElement - 创建新的 LI 元素

2. 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 对布尔表达式使用 短路求值，即给定 X|| Y 如果解释器已经知道表达式的值将来自 X （因为 X 是“truthy”），则它永远不会费心去评估 是的。所以你可以做类似 true || 的事情delete_everything() 确信 delete_everything 永远不会被调用。同样在 X && 中Y 如果 X 为“假”，则 Y 将永远不会被计算。

这对你来说可能已经是老生常谈了。 JavaScript 所做的事情不太常见，不过，你可以称之为“最后一个值”评估（这是维基百科页面使用的术语，但我不确定它是否是一个常见术语）。不是像 Java 中那样从布尔表达式返回 true 或 false，或者像 C 中那样从布尔表达式返回 1 或 0，在 JavaScript 中，它只返回计算的最后一个值。

采用表达式 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
    // ...
;