javascript - 为变量分配新值以更改元素nodeValue

Question

下面的代码工作正常，但我想让它变得更好:

function prodNameTrim(selector){
        var el = document.getElementsByClassName(selector);
        var len = el.length;
        for(i = 0; i<len; i++){
            aObj = el[i].getElementsByTagName('a');
            txtNode = aObj[0].childNodes[0].nodeValue;
            if(txtNode.length > 26){
                txtNode = txtNode.substring(0, 27) + ' ...';
            }
            aObj[0].childNodes[0].nodeValue = txtNode;
        }
    }

我不喜欢的是我首先在条件之前建立 txtNode，如下所示:

txtNode = aObj[0].childNodes[0].nodeValue;

通过条件处理变量以用省略号 chop 字符串后，我执行以下操作来替换 DOM 中的文本:

aObj[0].childNodes[0].nodeValue = txtNode;

我必须相信有更好的方法来做到这一点，但我不确定那是什么，我觉得我好像违反了 DRY 规则。

Answer 1

我建议这样做:

function prodNameTrim(selector){
    var el = document.getElementsByClassName(selector),
        len = el.length, node;
    for(var i = 0; i < len; i++) {
        node = el[i].getElementsByTagName('a')[0].firstChild;
        if(node.nodeValue.length > 26){
            node.nodeValue = node.nodeValue.substring(0, 27) + ' ...';
        }
    }
}

变化:

1. 声明所有局部变量(因此没有隐式全局变量 - 您没有声明 i、aObj 或 txtNode)
2. 跳过 aObj 中间部分，因为不需要它
3. 避免使用 textNode 中间元素，因为不需要
4. 直接赋值给nodeValue
5. 仅在 if 语句内对 nodeValue 进行赋值，因为这是唯一发生更改的地方
6. 使用.firstChild而不是.childNodes[0]

<小时/>

我想知道这是否可行(可能需要 IE9 或更高版本，并且希望查看 HTML 以确定并运行一些浏览器测试)，但总体思路是使用 querySelectorAll()并将这两个搜索合并到另一个涉及的 CSS 选择器中:

function prodNameTrim(rootClass) {
    var items = document.querySelectorAll("." + rootClass + " a:first-of-type"), node;
    for (var i = 0; i < items.length; i++) {
        node = items[i].firstChild;
        if (node.nodeValue.length > 26) {
            node.nodeValue = node.nodeValue.substring(0, 27) + ' ...';
        }
    }
}

请注意，第二个实现假定 prodNameTrim() 的参数是类名(与 OP 版本中的一样)。

<小时/>

或者，如果每个选择器父级中只有一个链接标记，那么您可以简单地使用它，它应该适用于所有现代浏览器:

function prodNameTrim(rootClass) {
    var items = document.querySelectorAll("." + rootClass + " a"), node;
    for (var i = 0; i < items.length; i++) {
        node = items[i].firstChild;
        if (node.nodeValue.length > 26) {
            node.nodeValue = node.nodeValue.substring(0, 27) + ' ...';
        }
    }
}