主页 / 问题 / 1544612
Accepted
Ivan Chuzhmakov
Asked:2023-10-08 02:56:46 +0000 UTC2023-10-08 02:56:46 +0000 UTC

通过赋值检查对象是否存在

  • 772

每次为不同的页面编写通用函数但具有相同的目标时，都需要检查页面上是否存在对象并进行后续赋值并使用它。设计相当单调、繁琐：

if(document.getElementById('modal')){
  modal=document.getElementById('modal');
  //дальше работа уже с существующим объектом
}

该条目有较短的版本吗？

PS 在条件本身中赋值是否正确？

<input type="text" value="5" id="inp">
    <script>
       if (inp=document.getElementById('inp')) { console.log(inp.value) }
    </script>

javascript

1 个回答

  1. Best Answer

    解决方案1

    是什么阻止你创造它？

    /**
 * @template {typeof HTMLElement} T
 * @param {String} selectors 
 * @param {T} type 
 */
function getElement(selectors, type) {
    const element = document.querySelector(selectors);
    if (!(element instanceof type)) {
        throw new ReferenceError(`Element ${selectors} is missing or has invalid type`);
    }
    return (/** @type {InstanceType<T>} */ (element));
}

const header = getElement(`header`, HTMLElement);
const main = getElement(`main`, HTMLElement);
const inputUserName = getElement(`input#user-name`, HTMLInputElement);
    <header></header>
<main>
  <input id="user-name" type="text">
</main>

    一方面，如果您安装了 TypeScript 并支持 JSDoc，也会进行类型检查：

    解决方案2（@SwaD）

    如果您不需要在缺少元素时抛出错误，我可以建议这种方法：

    /**
 * @template {typeof HTMLElement} T
 * @param {String} selectors 
 * @param {T} type 
 * @param {(element: InstanceType<T>) => void} action 
 */
function checkElement(selectors, type, action) {
  const element = document.querySelector(selectors);
  if (element instanceof type) {
    action( /** @type {InstanceType<T>} */ (element));
  }
}

checkElement(`input#user-name`, HTMLInputElement, (element) => {
  // Действия с элементом
});
    <header></header>
<main>
  <input id="user-input" type="text">
</main>

    该方法还支持输入：

    解决方案3（@SwaD）

    一个更紧凑的选项，而不是最好的打字：

    /**
 * @param {String} selectors 
 * @param {(element: HTMLElement) => void} action 
 */
function withElement(selectors, action) {
  const element = document.querySelector(selectors);
  if (element) action( /** @type {HTMLElement} */ (element));
}

withElement(`input#user-name`, (element) => {
  // Действия
})
    <header></header>
<main>
  <input id="user-input" type="text">
</main>

    解决方案 4 ( @StanislavVolodarskiy )

    异步选项Promise：

    /**
 * @param {String} selectors 
 * @returns {Promise<HTMLElement>}
 */
function atElement(selectors) {
  return new Promise((resolve) => {
    const element = document.querySelector(selectors);
    if (element) resolve( /** @type {HTMLElement} */ (element));
  });
}

atElement(`input#user-name`).then((element) => {
  // Действия
});
    <header></header>
<main>
  <input id="user-input" type="text">
</main>

    解决方案5

    最平庸但有限的选择：

    document.querySelector(`input#user-name`)?.setCustomValidity(`Invalid field`);
document.querySelector(`input#user-surname`)?.setCustomValidity(`Invalid field`);
    :invalid {
  background-color: red;
}
    <input id="user-name" type="text">

    • 2

相关问题