第二个 Instagram 按钮的 CSS 属性

Question

Михаил Камахин

Asked:2022-01-31 22:24:23 +0800 CST2022-01-31 22:24:23 +0800 CST 2022-01-31 22:24:23 +0800 CST

摆脱类实例在字段控制台中的可见性

772

我有一个ThemeRadioJavaScript 课程。
初始化类的实例时

const themeRadio = new ThemeRadio('.radio-theme');
console.log(themeRadio);

而当你输出到控制台时，你可以看到字段matchMediaDarkListener，你怎么能方便地摆脱它呢？
要检查收音机是否默认，您需要更改应用程序的主题，这可以在 Windows 中完成（选择默认应用程序模式）。

class ThemeRadio {
  constructor(selectorRadios) {
    const nodeListBool = NodeList.prototype.isPrototypeOf(selectorRadios);
    this.themeRadiosDOM = nodeListBool ? selectorRadios : document.querySelectorAll(selectorRadios);
    this.matchMediaDark = window.matchMedia('(prefers-color-scheme: dark)');

    this.addEventsListenerRadio(this.themeRadiosDOM, 'input', (event) => {
      const target = event.target;
      const value = target.value;

      // localStorage.setItem('theme', JSON.stringify(value));
      this.choosingDesiredTheme(value);
    });

    const localStorageExist = this.initRadioValueFromLocalStorage(this.themeRadiosDOM);
    
    if (!localStorageExist) {
      const theme = this.getRadioValue(this.themeRadiosDOM);
      // localStorage.setItem('theme', JSON.stringify(theme));
      this.choosingDesiredTheme(theme);
    }


  }

  addEventsListenerRadio(domElems, eventName, listenerFunc) {
    for (let i = 0; i < domElems.length; i++) {
      const item = domElems[i];
      item.addEventListener(eventName, listenerFunc);
    }
  }

  addTheme(themeName, excludeClasses = ['dark-theme', 'light-theme']) {
    const classesDOM = Array.from(document.documentElement.classList);
  
    for (const className of classesDOM) {
      const findClassName = excludeClasses.find(excludeClass => className === excludeClass);
  
      if (findClassName) {
        document.documentElement.classList.remove(findClassName);
      }
    }
  
    document.documentElement.classList.add(themeName);
  }

  choosingDesiredTheme(theme) {
    if (theme !== 'default-theme') {
      this.matchMediaDark.removeEventListener('change', this.matchMediaDarkListener);
      this.addTheme(theme);
    } else if (theme === 'default-theme') {
      const themeDefault = this.getDefaultTheme();
      this.matchMediaDark.addEventListener('change', this.matchMediaDarkListener);
      this.addTheme(themeDefault);
    }
  }

  getDefaultTheme() {
    return this.matchMediaDark.matches ? 'dark-theme' : 'light-theme';
  }

  matchMediaDarkListener = (event) => {
    const darkActive = event.matches;
    if (darkActive) {
      this.addTheme('dark-theme');
    } else {
      this.addTheme('light-theme');
    }
  }

  initRadioValueFromLocalStorage(radioDomElems) {
    // const radioArrElems = Array.from(radioDomElems);
  
    // const theme = JSON.parse(localStorage.getItem('theme'));
  
    // if (theme) {
    //   const findRadio = radioArrElems.find(radio => radio.value === theme);
    //   if (findRadio) {
    //     findRadio.checked = true; 
    //   }
    //   this.choosingDesiredTheme(theme);
    //   return true;
    // }
    return false;
  }

  getRadioValue(domElems) {
    const arrElems = Array.from(domElems);
    const activeRadio = arrElems.find(elem => elem.checked);
    return activeRadio.value;
  }
}

const themeRadio = new ThemeRadio('.radio-theme');

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  --transition-timing-function: linear;
  --transition-duration: 0.2s;
  --header-bg-color: rgb(250, 250, 251);
  --header-color: inherit;
  --main-bg-color: rgb(132, 239, 255);
  --main-color: inherit;
  --footer-bg-color: rgb(249, 249, 255);
  --footer-color: inherit;
}

.dark-theme {
  --white: rgb(231, 231, 231);
  --header-bg-color: rgb(0, 0, 0);
  --header-color: var(--white);
  --main-bg-color: rgb(37, 82, 88);
  --main-color: var(--white);
  --footer-bg-color: rgb(66, 66, 66);
  --footer-color: var(--white);
}

html {
  height: 100%;
}

body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
}

img {
  display: block;
  max-width: 100%;
}

p {
  margin: 10px 0;
}

.container {
  display: block;
  width: 100%;
  max-width: 800px;
  padding: 0 10px;
  margin: 0 auto;
}

.header {
  background-color: var(--header-bg-color);
  color: var(--header-color);
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
  transition-property: background-color, color;
  padding: 10px 0;
}

.main {
  flex: 1;
  padding: 40px 0;
  color: var(--main-color);
  background-color: var(--main-bg-color);
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
  transition-property: background-color, color;
}

.footer {
  padding: 40px 0;
  background-color: var(--footer-bg-color);
  color: var(--footer-color);
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
  transition-property: background-color, color;
}

.header__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__logo {
  --width: 50px;
  min-width: var(--width);
  max-width: var(--width);
}

.form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.input-group-radio {
  cursor: pointer;
}

.input-group-radio input[type=radio],
.input-group-radio label {
  cursor: inherit;
}

.input-group-radio label {
  padding-left: 5px;
}

.input-group {
  display: flex;
  align-items: center;
  user-select: none;
}

.as-console-wrapper, .as-console {
  height: 0;
  overflow: hidden !important;
  border: none !important;
}

<header class="header">
  <div class="container">
    <div class="header__container">
      <div class="header__logo">
        <img src="https://picsum.photos/50" alt="">
      </div>
      <form class="checkbox-theme form" id="checkbox-theme">

        <div class="input-group input-group-radio">
          <input type="radio" id="default-theme" class="radio radio-theme" name="theme" value="default-theme" checked>
          <label for="default-theme">По умолчанию</label>
        </div>

        <div class="input-group input-group-radio">
          <input type="radio" id="light-theme" class="radio radio-theme" name="theme" value="light-theme">
          <label for="light-theme">Светлая тема</label>
        </div>

        <div class="input-group input-group-radio">
          <input type="radio" id="dark-theme" class="radio radio-theme" name="theme" value="dark-theme">
          <label for="dark-theme">Тёмная тема</label>
        </div>

      </form>
    </div>
  </div>
</header>

<main class="main">
  <div class="container">
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum unde quas quo ratione accusamus enim voluptatem beatae, cupiditate maiores facilis voluptatum eveniet neque doloremque dicta aperiam corporis vel illo accusantium.
    </p>

    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta, nisi perspiciatis labore sed ad alias porro magnam recusandae facere amet similique, repudiandae beatae minima quia inventore, rerum praesentium totam expedita?
    </p>

    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta, nisi perspiciatis labore sed ad alias porro magnam recusandae facere amet similique, repudiandae beatae minima quia inventore, rerum praesentium totam expedita?
    </p>
  </div>
</main>

<footer class="footer">
  <div class="container">
    <div class="footer__container">
      Это футер
    </div>
  </div>
</footer>

2 个回答

Voted

user176262 · Answer 1 · 2022-01-31T22:42:04+08:00

user176262

2022-01-31T22:42:04+08:002022-01-31T22:42:04+08:00

  choosingDesiredTheme(theme) {
    const matchMediaDarkListener = (event) => {
      const darkActive = event.matches;
      if (darkActive) {
        this.addTheme('dark-theme');
      } else {
        this.addTheme('light-theme');
      } 
    }

    if (theme !== 'default-theme') {
      this.matchMediaDark.removeEventListener('change', matchMediaDarkListener);
      this.addTheme(theme);
    } else if (theme === 'default-theme') {
      const themeDefault = this.getDefaultTheme();
      this.matchMediaDark.addEventListener('change', matchMediaDarkListener);
      this.addTheme(themeDefault);
    }
  }

1

Grundy · Answer 2 · 2022-01-31T23:01:30+08:00

Best Answer

Grundy

2022-01-31T23:01:30+08:002022-01-31T23:01:30+08:00

对于不显示在控制台输出上的对象字段，该字段不得出现在对象中。

因此，您可以使用闭包来解决问题。

将函数保存在闭包中并在类中使用它就足够了，例如：

const ThemeRadio = function(){
    function matchMediaDarkListener (event) { ... }
    return class ThemeRadio {
        ...

        choosingDesiredTheme(theme) {
            if (theme !== 'default-theme') {
              this.matchMediaDark.removeEventListener('change', matchMediaDarkListener);
              this.addTheme(theme);
            } else if (theme === 'default-theme') {
              const themeDefault = this.getDefaultTheme();
              this.matchMediaDark.addEventListener('change', matchMediaDarkListener);
              this.addTheme(themeDefault);
            }
        }

        ...
    }
}();

1

摆脱类实例在字段控制台中的可见性

如何在 PyQt5 中更改按钮文本中的字体？

如何使其他不在功能中[关闭]

如何为类构造函数参数创建属性？C＃

HTML 和 CSS/SASS/SCSS 中的手风琴

为什么在编程中需要对象？

Python中是否存在与“？。”结构等效的JS？

表格填充不起作用

提示 50/50，有两个，其中一个是正确的

在 PyQt5 中停止进程

我的脚本不工作

摆脱类实例在字段控制台中的可见性

2 个回答

相关问题