javascript - 针对特定情况实现每个子项

Question

我的代码中有几个地方与此代码段非常相似:

tag_iter = hold_tags_el.firstChild;
do {
    if (tag_iter === null) {
        hold_tags_el.appendChild(paragraph_el);
        break;
    }
    if (par_el.innerHTML < tag_iter.innerHTML) {
        hold_tags_el.insertBefore(paragraph_el, tag_iter);
        break;
    }
    if (tag_iter === hold_tags_el.lastChild) {
        NS.insertAfter(tag_iter, paragraph_el);
        break;
    }
    tag_iter = tag_iter.nextSibling;
} while (tag_iter !== null);

这可以抽象为:

tag_iter = ref_el.firstChild;
do {

    // loop logic

    tag_iter = tag_iter.nextSibling;
} while (tag_iter !== null);

<小时/>

在函数形式中，这看起来像:

电话:

eachChild(par_el, function (tag_iter, par_el) {
    // loop logic
});

定义:

NS.eachChild = function (par_el, func, context) {
    var iter_el = par_el.firstChild,
        result;
    do {
        result = func.call(context, iter_el, par_el);
        if (result) {
            break;
        }
        iter_el = iter_el.nextSibling;
    } while (iter_el !== null);
}

是否有一个库可以实现这种模式/习惯用法？

可以对 eachChild 进行哪些改进？

eachChild 中是否有任何错误？

应用我们现有的习语:

片段A

NS.eachChild(el, function(tag_iter, par_el){
    // first
    if (tag_iter === null) {
        par_el.appendChild(paragraph_el);
        return true;
    }
    // middle
    if (par_el.innerHTML < tag_iter.innerHTML) {
        par_el.insertBefore(paragraph_el, tag_iter);
        return true;
    }
    // last
    if (tag_iter === hold_tags_el.lastChild) {
        par_el.appendChild(paragraph_el);
        return true;
    }
});

Answer 1

What improvements can be made?

很多。您的代码片段及其 do-while 循环和许多中断过于复杂且难以理解。可以简化为

var tag_iter = hold_tags_el.firstChild,
    search = par_el.innerHTML;
while (tag_iter !== null && search >= tag_iter.innerHTML)
    tag_iter = tag_iter.nextSibling;
hold_tags_el.insertBefore(paragraph_el, tag_iter);

请注意 insertBefore使用 null 作为第二个参数，insertAfter(lastChild) 和 appendChild 执行完全相同的操作。

通过这种简化，您不再需要 eachChild 函数。但也许有点不同:

NS.findChild = function(parent, condition) {
    var child = parent.firstChild;
    for (var i=0; child!==null && condition(child, i); i++)
        child = child.nextSibling;
    return child;
};
// then simply:
var el = NS.findChild(hold_tags_el, function(tag_iter) {
    return tag_iter.innerHTML < par_el.innerHTML;
});
hold_tags_el.insertBefore(paragraph_el, el);

Is there a library that implements this pattern / idiom?

我什么都不知道。但是有许多具有通用迭代器方法的库(其中一些具有 break 功能)，可以轻松应用于 childNodes 集合。

Are there any errors in eachChild?

即使没有 firstChild (以 null 作为参数)，它也会调用回调。这至少是非常规的，如果不是错误的话——这不是你所期望的迭代。如果您认为需要它，最好将其作为一个单独的案例(单独的回调)；否则它需要在回调中添加一个额外的条件。然而，在给定的用例中，您不需要它，因为这是一个搜索 - 请参阅上面的 findChild 函数 - 其中 eachChild 是不合适的。

What improvements can be made to eachChild?

除了 parEl 之外，也许反驳参数可能会更好 - 检查标准 forEach Array method 的签名.