Всем привет!.

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

Если вы пережили предыдущий абзац, не выходя из него, я думаю, вы хотите знать, что я на самом деле имею в виду под «Обработкой медиа-запросов для JS», разве в CSS уже нет этой функции для всего, что мы могли бы когда-либо захотеть с ней сделать? И я предполагаю, что ответ может быть просто да, но я обнаружил себя в некоторых сценариях, где я хотел обрабатывать функции Js в зависимости от ширины экрана и в итоге получил это решение, которое, я надеюсь, будет полезно и для вас.

Для чего я могу его использовать?

Хороший вопрос. Дело в том, что вы можете использовать его для выполнения любого скрипта или скрытия и отображения объектов заданного размера (также после или перед заданным размером). Я обычно использую его вместе с v-if, чтобы обрабатывать вещи в DOM, разрабатывая адаптивные веб-сайты.

Как это работает?

Ладно, ладно, хватит разговоров, перейдем к коду.

Процесс довольно прост и основан на одном слушателе событий:

window.addEventListener(‘resize’, () => {
  store the data of window.innerWidth on a variable to work with it
});

Теперь, если вы работаете над веб-сайтом, на котором вы не хотите добавлять прослушиватель событий для каждого компонента, с которым хотите работать, вы обязательно захотите использовать его с потоком шаблона управления состоянием. Работая с Vue.js, мы можем сделать это с помощью Vuex, поэтому давайте разберемся, как это сделать.

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
  
  state: {
    windowWidth: window.innerWidth,
  },
  mutations: {
    setWindowWidth(state) {
      state.windowWidth = window.innerWidth;
    }
  },
});

У нас есть переменная с именем windowWidth, которая сначала создается с внутренней шириной окна, и мутация, которая обновляет это значение при срабатывании события изменения размера.

Теперь просто добавьте прослушиватель событий в компонент, который будет запускаться первым из всех остальных: App.vue.
Вы можете сделать это в методе created (), чтобы он начал прослушивать изменение размера окна до того, как будет создано что-либо еще. :

export default {
  created() {
    window.addEventListener(
      'resize',
      this.$store.commit('setWindowWidth');
    )
  }
}

вот и все! Теперь осталось только получить доступ к этой переменной на каждом компоненте, который вы хотите использовать для чего-то, через вычисленные свойства:

computed: {
  windowWidth() {
    return this.$store.state.windowWidth;
  }
}

и начните управлять вещами, ссылающимися на эту переменную:

// Conditional rendering
<template>
  <nav id="mobileNavbar" v-if="windowWidth <768">
     I am a navbar that will render only if the window width
     is lower than 768px
  </nav>
  <nav id="desktopNavbar" v-else>
     I am a navbar that will render only if the window width
     is greater than 768px
  </nav>
</template>

//Computed property
computed: {
  basedOnWindowWidth() {
    if (this.windowWidth > 768) {
      return true;
    } return false;
  }
}

// Trigger function
watch: {
  windowWidth: function() {
    if (windowWidth === 768) {
      console.log('The window width is 768px');
    }
  }
}

Вот и все! Теперь вы управляете функциями Javascript в зависимости от ширины окна.

Я изучал влияние прослушивателей событий на производительность и нашел модуль js, который позволяет вам задушить их, чтобы они срабатывали каждый раз, это называется throttled-event-listener, созданный vivmaha.

Итак ... это все. Не стесняйтесь комментировать, если вы знаете какие-либо другие обходные пути, библиотеки, модули или что-то еще для решения той же проблемы или у вас есть какие-либо советы по улучшению этого кода, мы все будем благодарны.
У меня также есть профиль Instagram под названием @ Devdude.js, куда я буду загружать некоторые анимации и образцы кода своей работы, зацените !.