Проверка нулевого значения с помощью тройного оператора

Question

В приведенном ниже коде я передаю элемент HMTL и проверяю, был ли переданный параметр пустым или не использовался тернарный оператор. Если это не null, я изменяю className переданного элемента.

var changeColorTo = { 

    grey: function(e){ 
    e ? (e.className = "grey") : "" ; 
    }, 
    red: function(e){ 
    e ? (e.className = "red") : "" ; 
    }, 
    green: function(e){ 
    e ? (e.className = "green") : "" ; 
    }, 
    blue: function(e){ 
    e ? (e.className = "blue") : "" ; 
    } 
}; 

Приведенный выше код работает отлично, за исключением, когда я прохожу любую случайную строку как

changeColorTo.grey("random"); 

Это не вызывает никакого вреда. Но мне интересно, правильно ли код? Мне что-то не хватает? или есть лучший способ добиться такого же результата?

спасибо.

Answer 1

Вы можете расширить свое состояние от e до (e && e.className). Это должно предотвратить ошибки сценария, возникающие при передаче в случайном нежелательном или даже неэлементном узлах.

Лучше, используйте это условие как function hasClassName(e) { return ... } и используйте hasClassName(e) как ваш тест.

РЕДАКТИРОВАТЬ: Заменено несовместимо (typeof e=="object") && ('className' in e) состояние, за комментарии. См. Также How do I check if an object has a property in JavaScript?

Answer 2

Код в его нынешнем виде будет работать, если вы передадите строку. Тем не менее, если вы хотите быть уверены, что вы передаете только в элемент DOM (лучше быть строгим), вы можете изменить свой код к этому:

function isNode(o){ 
    return (
    typeof Node === "object" ? o instanceof Node : 
    typeof o === "object" && typeof o.nodeType === "number" && typeof o.nodeName==="string" 
); 
}  

function isElement(o){ 
    return (
    typeof HTMLElement === "object" ? o instanceof HTMLElement : //DOM2 
    typeof o === "object" && o.nodeType === 1 && typeof o.nodeName==="string" 
); 
} 

var changeColorTo = { 
    grey: function(e) { 
     isNode(e) || isElement(e) ? (e.className = "grey") : "" ; 
    }, 
    ... 
} 

Для получения дополнительной информации о том, как isNode и isElement работы , взгляните на this stackoverflow answer. Этот код также будет гарантировать, что вы не будете пытаться изменить атрибут переменной null или undefinedclassName с первым условием в каждом из этих функций (o instanceof Node и o instanceof HTMLElement) потерпит неудачу, которая гарантирует, что isNode и isElement возвратят ложь для null и undefined значений.