记录我写的一个函数的重构过程

toFocus() 是我写的一个用于聚焦元素的一个方法，这个方法已经精力了多次修改和重构，最新的版本看起来已经比较简洁了。每一次变化可以说都是我的一次进步，都是对编码的新的理解和认识。代码是在不断修改，不断重构中优化和改进的。下面分享一下我几次重构的代码，希望对大家能有所启发。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


//版本 1:
function toFocus(el) {
    let tagName = el.tagName.toLowerCase();
    let tagNames = ['div', 'p', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ul', 'ol', 'li', 'form', 'img', 'nav', 'header', 'main', 'footer', 'section', 'aside'];
    if (tagNames.includes(tagName) || (tagName == 'a' && !el.hasAttribute('href'))) {
        if (!el.hasAttribute('tabindex')) {
            el.setAttribute('tabindex', '-1');
        }
    }
    el.focus();
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


//版本 2:
function toFocus(el) {
    let tagName = el.tagName.toLowerCase();
    let tagNames = ['input', 'select', 'textarea', 'button'];
    if (!tagNames.includes(tagName) || (tagName == 'a' && !el.hasAttribute('href'))) {
        if (!el.hasAttribute('tabindex')) {
            el.setAttribute('tabindex', '-1');
        }
    }
    el.focus();
}

1
2
3
4
5
6
7


//版本 3:
function toFocus(el) {
    if(!el.matches('input, select, textarea, button, a[href], [tabindex]')) {
        el.setAttribute('tabindex', '-1');
    }
    el.focus();
}

记录我写的一个函数的重构过程

相关文章：